팀 일정 관리·커뮤니케이션·자유게시판·개인 히스토리를 한 곳에서 관리하는 협업 플랫폼입니다.
개인 투두리스트뿐만 아니라 팀 단위 일정·할 일 관리·일일 리포트까지 확인할 수 있는 서비스입니다.
개인 중심 투두리스트 앱의 한계
여러 플랫폼을 오가며 관리해야 하는 팀 일정·업무·공유·게시물 관리의 비효율성
팀 협업에서 발생하는 권한 관리, 접근 제어, 역할 기반 UI 차이 등 실무 요구사항
- 관리자/팀원 권한 관리
- 역할(Role)에 따라 접근 가능한 기능이 다른 구조
- 관리자 리포트(진행도 원형 차트 UI)
- 토큰 기반 팀원 초대
- 인증/인가 구현 (OAuth + JWT 기반 인증)
- 카카오 로그인(OAuth) 경험
- Refresh Token + Access Token 구조의 실제 동작 설계
- 쿠키 기반 인증 및 보안 처리
- Middleware 기반 페이지 보호
- 투두리스트에서 요구되는 복잡한 UI 및 비즈니스 로직
- Intercepting Routes를 이용한 URL 기반 모달
- 날짜 및 시간 선택과 반복옵션에 따른 로직 처리
- 드래그 앤 드랍의 리스트 정렬 기능
- 자유게시판을 통한 소셜 기능 경험
- 댓글 CRUD, 좋아요(낙관적 업데이트)
- 무한 스크롤, 검색, 정렬 기능
- 이미지 업로드(드래그&드롭 + 파일 제한)
2025.11.06 ~ 2025.12.04 (4주)
- 프로젝트 분석 및 리브랜딩 (3 WORKING DAYS)
- 공통컴포넌트 구현 (6 WORKING DAYS)
- 페이지 구현 (14 WORKING DAYS)
- 기능개선 및 QA (4 WORKING DAYS)
|
|
|
|
# 1. 저장소 클론
git clone https://github.com/codeit18-4-5/Plango.git
# 2. 폴더 이동
cd Plango
# 3. 의존성 설치
npm install
# 4. 개발 서버 실행
npm run devNEXT_PUBLIC_APP_URL=프로젝트_URL
NEXT_PUBLIC_API_URL=API_BASE_URL
NEXT_PUBLIC_KAKAO_REST_API_KEY=카카오_REST_API_KEY
NEXT_PUBLIC_KAKAO_REDIRECT_URI=카카오_OAuth_리다이렉트_URI
NEXT_PUBLIC_PASSWORD_REDIRECT_URL=비밀번호재설정_리다이렉트_URLsrc
├── api/ # API 요청 함수 (Axios 기반)
├── app/ # Next.js App Router 구조
│ ├── (auth)/ # 로그인·회원가입 등 인증 관련 페이지
│ ├── (routes)/ # 일반 서비스 페이지
│ ├── api/ # Next.js API Route
│ └── layout.tsx # 전체 레이아웃
│
├── assets/ # 정적 리소스
│ ├── font/
│ ├── icons/
│ └── landing/
│
├── components/
│ ├── features/ # 기능 컴포넌트
│ ├── layout/ # 레이아웃 구성 요소
│ ├── skeleton-ui/ # 로딩 스켈레톤 UI
│ └── ui/ # 공통 UI 컴포넌트
│
├── constants/ # 상수 및 공통 설정 값
├── context/ # React Context 관리
├── hooks/ # 커스텀 훅
├── lib/ # 유틸리티, 헬퍼 함수, 로직 모듈
├── providers/ # 전역 Provider (QueryClient, Alert 등)
├── store/ # Zustand 전역 상태
├── stories/ # Storybook 파일
├── styles/ # 전역 스타일, Tailwind 설정
└── types/ # TypeScript 타입 정의- 이메일 회원가입 / 로그인
- Kakao OAuth 로그인
- 자동 로그인 유지 & 토큰 자동 갱신
- Middleware 기반 라우팅 보호
- JWT 기반 인증
- React Query로 서버 상태 캐싱, 에러/로딩 상태 관리, 낙관적 업데이트
- Zustand로 인증·전역 UI 상태 등 클라이언트 상태 관리
- Axios 인터셉터 기반 api 흐름 관리
- Framer Motion으로 인터랙션 모션 컴포넌트 구현
- Skeleton UI로 초기 로딩 경험 개선
- Optimistic UI 적용으로 좋아요/댓글 반응 속도 향상
- Storybook을 통한 디자인 시스템 기반 컴포넌트 문서화
- CVA, clsx, tailwind-merge 기반으로 일관된 UI 컴포넌트 구축
- 자체 디자인 토큰 시스템 적용
- React Hook Form을 활용한 폼 상태 관리
- Zod 기반 스키마 유효성 검증으로 타입 안전성 강화
- 폼 UI와 검증 로직의 분리로 유지보수성 향상
- 서버 에러와 클라이언트 검증을 통합 처리하여 인증 폼 안정성 확보
- 컴포넌트 내부에서 역할 단위로 구조를 나누고 조합 방식의 자유도를 높이는 패턴
- 컴포넌트 소비자가 필요한 구조만 선택해 조합할 수 있어 확장성·유연성·재사용성이 크게 향상됨
- 다양한 구성의 UI 및 요구사항 변경 에도 구조를 다시 만들지 않고 부분 단위로 커스터마이징 가능
- 컴파운드 패턴을 사용으로 인해 컴포넌트의 재사용성 증가 + UI 확장성 확보 + 유지보수성 강화
- Dropdown: TriggerIcon, TriggerSelect, Menu, Option
- Input: Label, Field, Error, Password, Search
- Card: Badge, Content, Info
- Modal: Header, Body, Footer
- 팀 생성 / 수정 / 삭제
- 팀원 초대 및 권한 관리 (권한별 UI 노출 분기 처리)
- 팀 대시보드 (할일 · 멤버 · 관리자 리포트)
- SSR로 기준 데이터를 먼저 불러와 빠른 초기 화면 제공
- Hydration 이후 클라이언트에서 권한 정보를 즉시 조회하도록 최적화
- 여러 항목의 업데이트가 발생하는 특성에 맞춰 React Query의 invalidate 전략을 활용하여 캐싱된 데이터를 최신 상태로 자동 반영
- 페이지 전체를 새로고침하지 않고도 즉각적인 UI 업데이트 경험 제공
- 날짜 기반 리스트 노출 (캘린더)
- 라벨/반복 옵션
- 상세보기(모달 + Intercepting Route)
- 댓글 기능
- 할 일 상태 업데이트(완료/취소)
- SSR + CSR 하이브리드 렌더링을 적용해 초기 로딩 속도를 최적화
- Parallel / Intercepting Routes로 상세 페이지를 모달처럼 띄우며 독립 URL 구조를 가지며 기존 리스트 상태를 유지함
- 검색(Search) 및 정렬(Order) 기능 debounce 적용으로 불필요한 서버 요청 방지 및 성능 최적화
- React Query 기반 검색 결과 캐싱 & 요청 최소화
- 무한 스크롤 기반 콘텐츠 로딩
- Optimistic Update를 적용하여 좋아요 및 댓글의 UI가 서버 응답을 기다리지 않고 즉시 업데이트되어 사용자 피드백 강화
- SSR 초기 렌더링 + CSR 이후 데이터 갱신 구조를 적용하여 초기 진입 시 빠르고 안정적인 첫 화면 제공
- 데이터 패치 실패 시 사용자에게 ‘다시 불러오기’ 버튼 제공하여 에러 상황에서도 사용자 흐름이 끊기지 않도록 복구 기능 지원