📝 커스텀 이슈 트래커 프로젝트 종합 기록 문서

이 문서는 지금까지 개발된 커스텀 이슈 트래커(Issue Tracker) 프로젝트의 전체적인 개발 내역, 주요 기능 및 아키텍처, 환경 설정 등을 상세히 기록하기 위해 작성되었습니다. 향후 유지보수 및 기능 확장을 위한 참고 자료로 활용하실 수 있습니다.

1. 프로젝트 개요 및 기술 스택 (Tech Stack)

• 프레임워크: Next.js (App Router 기반, React 18)

• 스타일링: Tailwind CSS (전역 스타일링 및 유틸리티 클래스 활용)

• 데이터베이스 & ORM: Prisma ORM (로컬/서버 데이터베이스 연동)

• 아이콘 및 UI 에셋: Lucide React (가볍고 모던한 SVG 아이콘 적용)

• 날짜 처리 라이브러리: date-fns (캘린더 렌더링 및 타임라인 정렬 등 날짜 연산)

• 외부 서비스 연동: 구글 캘린더 API (일정 자동 동기화)

2. 주요 개발 기능 및 UX/UI 개선 내역

2.1 카테고리 및 고객사 관리 시스템

• 1차(대그룹) / 2차(고객사) 계층 구조: 이슈를 효율적으로 묶어서 관리할 수 있도록 그룹 체계를 구축했습니다.

• 보호된 삭제 정책: 1차 카테고리는 하위에 연결된 2차 카테고리가 완전히 비워져 있을 때만 삭제할 수 있도록 하여 데이터 유실이나 꼬임을 방지했습니다.

• 사이드바 네비게이션:

  • 1차 카테고리 아코디언(접기/펴기) 기능 지원.

  • 현재 선택된 카테고리에 하이라이트(Bold 및 배경색) 효과 적용.

  • 사이드바 고객사명 앞에 밋밋한 폴더 아이콘 대신, 캘린더와 동일한 고유 색상 뱃지(Color Dot)를 부여하여 시각적인 일관성을 극대화했습니다.

• 프리미엄 등록 UI: 새 고객사 등록 페이지를 기존의 어두운 모달 형태에서, 전체 앱 테마와 어울리는 밝고 고급스러운 화이트 카드 디자인(소프트 섀도우, 애니메이션, 직관적 아이콘)으로 전면 개편했습니다.

2.2 고도화된 이슈(Issue) 관리 기능

• 이슈 간편 이동(Move) 기능 전용 모달: 이미 작성된 이슈를 다른 고객사로 매우 손쉽게 옮길 수 있도록 전용 양방향 화살표(⇄) 버튼을 도입했습니다. 이동 시 데이터베이스 업데이트는 물론, 구글 캘린더에 등록된 일정의 제목도 새로운 고객사명으로 완벽하게 자동 동기화됩니다.

• 상태 관리: 완료/미완료 상태 토글 기능. 기존에는 완료된 이슈가 흐릿하게 보였으나, 사용자 요청에 따라 선명하고 깨끗하게 보이도록 스타일을 개선했습니다.

2.3 다각화된 대시보드 뷰 (월별 캘린더 & 타임라인)

• 스토리 뷰 우선순위 재배치: 사용자가 접근했을 때 가장 직관적인 '월별 캘린더'를 최우선(디폴트) 탭으로 노출하도록 순서를 변경했습니다.

• 인터랙티브 캘린더 뷰:

  • 달력 내 색상 블록(일정)을 클릭하면 화면 이동 없이 중앙에 모달 창이 팝업됩니다.

  • 해당 모달 안에서 상세 내용을 바로 확인하고, 즉각적인 수정, 삭제, 완료 처리, 이동 등의 모든 액션이 가능하도록 원스톱 UX를 구축했습니다.

• 듀얼 타임라인 뷰: 타임라인을 '전체 타임라인'과 '미완료 업무' 2개의 탭으로 분리하여, 해결해야 할 업무만 필터링해서 볼 수 있는 강력한 편의성을 제공합니다.

2.4 모바일 위젯 & 알림 (사용자 설정 기반)

• 추가적인 앱 개발 없이, 동기화된 구글 캘린더 데이터를 적극 활용하는 아키텍처를 채택했습니다.

• 사용자의 휴대폰(iOS/Android)에 기본 구글 캘린더 위젯을 띄워 네이티브 모바일 앱과 같은 접근성을 확보했습니다.

• 구글 캘린더의 '일일 일정(Daily agenda)' 이메일 브리핑 설정을 통해 매일 아침 푸시 알림 효과를 누릴 수 있도록 구성했습니다.

3. 핵심 아키텍처 및 설정 (Configuration) 포인트

3.1 Next.js 서버 액션 (Server Actions) 활용

API 라우트를 복잡하게 생성하지 않고, Next.js의 최신 기능인 Server Actions(app/actions.ts)를 사용하여 클라이언트(브라우저)에서 데이터베이스(Prisma)를 직접, 그리고 안전하게 조작합니다.

• 핵심 액션 함수: createCustomer, deleteIssue, moveIssueAction, getAllCustomers 등

3.2 Prisma 데이터베이스 스키마 설계

• Customer 모델: name(고객사명), group(대제목), 고유 id 포함.

• Issue 모델: title, description, date, isComplete 등의 기본 메타데이터와 Customer와의 1:N 관계(Relation)를 가짐.

3.3 구글 캘린더 연동 구조

• 서버 환경 변수(.env)에 구글 API 인증 정보를 등록하여 백그라운드에서 서버 간 통신(S2S)으로 캘린더 데이터를 조작합니다.

• 이슈가 생성/수정/이동될 때 트랜잭션과 유사하게 데이터베이스 조작 직후 구글 API를 호출하여 상태를 맞춥니다.

3.4 Tailwind 설정 및 디자인 시스템

• tailwind.config.ts 및 전역 globals.css를 통해 둥근 모서리(rounded-xl, rounded-2xl), 그라데이션(bg-gradient-to-r), 부드러운 전환 효과(transition-all, animate-in) 등의 모던 웹 디자인 시스템이 일관되게 적용되어 있습니다.

4. 향후 확장 가능성 (Next Steps)

본 프로젝트는 확장성 있게 설계되어 추후 아래와 같은 기능을 쉽게 덧붙일 수 있습니다.

• 통계(대시보드) 페이지 추가: 완료/미완료 비율, 월별 처리량 차트.

• 텔레그램/슬랙 봇 연동: 구글 캘린더 외에 업무용 메신저로 알람을 쏘아주는 전용 배치 프로세스 추가.

• 드래그 앤 드롭(Drag & Drop): 캘린더 뷰에서 일정을 마우스로 끌어 날짜를 바로 변경하는 기능.