Vercel 배포

README.md

@@ -1,56 +1,163 @@
+<img src="https://private-user-images.githubusercontent.com/169524126/521039880-a378be81-f539-4529-8701-5d3b4193c61a.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NjQ2Mjk3MjAsIm5iZiI6MTc2NDYyOTQyMCwicGF0aCI6Ii8xNjk1MjQxMjYvNTIxMDM5ODgwLWEzNzhiZTgxLWY1MzktNDUyOS04NzAxLTVkM2I0MTkzYzYxYS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUxMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MTIwMVQyMjUwMjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNmU5YWVjOTFhY2U5Nzk0ZTIzNWYyZjAzY2IwNjA3NjdmOTNlMWQ1YTExZTcxYzIwYjdjZTQyNTMzYzUzOTAwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.df0yEL2wQ0DOsEMSjsRKCNr-O_5kLEBqfNDZMbkELZc" />
+
 # Coworkers
 
-> 업무 배정·현황 공유 + 익명 롤링페이퍼 기능을 갖춘 협업 서비스
+### 팀원
+
+|        [@SanginJeong](https://github.com/SanginJeong)        |        [@KimWonSeon](https://github.com/KimWonSeon)         |          [@wlrnjs](https://github.com/wlrnjs)           |
+| :----------------------------------------------------------: | :---------------------------------------------------------: | :-----------------------------------------------------: |
+| <img src="https://github.com/SanginJeong.png" width="150" /> | <img src="https://github.com/KimWonSeon.png" width="150" /> | <img src="https://github.com/wlrnjs.png" width="150" /> |
+|                       **정상인 / PL**                        |                       **김원선 / FE**                       |                     **서지권 / FE**                     |
+
+## 기술 스택
+
+### Core
+
+- **Framework**: Next.js 16.0.1 (App Router)
+- **Language**: TypeScript 5.x
+- **Styling**: Tailwind CSS 3.4.18
+- **State Management**:
+  - React Query 5.x (TanStack Query)
+  - Zustand 5.x
+- **API**: Axios 1.13.1
+- **Animation**:
+  - Framer Motion 12.x
+  - GSAP 3.13.0
+- **UI Components**:
+  - React Calendar 6.x
+  - React Hot Toast 2.x
+
+### Development
+
+- **Documentation**: Storybook 10.x
+- **Linting**:
+  - ESLint 9.x
+  - Prettier 3.6.2
+- **Husky**:
+  - Husky 9.x
+  - lint-staged 16.x
+- **UI Testing**:
+  - Chromatic
+  - Storybook Test Runner
+
+## 주요 기능
+
+### 인증
+
+- JWT 기반 인증
+- 카카오 소셜 로그인 연동
+- 이메일/비밀번호 로그인
+- 자동 로그인 유지
+
+### 상태 관리
+
+- **서버 상태 관리**: React Query (TanStack Query)
+- **클라이언트 상태 관리**: Zustand
+
+### 성능 최적화
+
+- **이미지 최적화**:
+  - Next.js Image 컴포넌트를 활용한 자동 최적화
+  - WebP 포맷 지원을 통한 용량 감소
+  - Lazy Loading 적용
+
+- **번들 최적화**:
+  - 코드 스플리팅 (Code Splitting)
+  - 동적 임포트(dynamic import)를 활용한 지연 로딩
+  - Tree Shaking을 통한 미사용 코드 제거
+  - Webpack 설정 최적화 (--webpack 플래그 사용)
+
+- **애니메이션**:
+  - GSAP: 스크롤 기반 애니메이션 구현
+  - Framer Motion: 인터랙티브한 UI 컴포넌트 구현
+
+### 테스트
+
+- **시각적 테스팅**: Chromatic을 활용한 UI 컴포넌트 시각적 테스트
+- **컴포넌트 문서화**: Storybook을 활용한 컴포넌트 문서화 및 개발
+- **접근성 검사**: Storybook a11y 애드온을 활용한 접근성 점검
 
-## 🔗 참고 자료
+## 개발 환경 설정
 
-- 디자인(Figma): https://www.figma.com/design/d5ogtLVSv1m7e8kx1Lfamy/%5BCCC%5DCowokers?node-id=52-1213
-- API(Swagger): https://fe-project-cowokers.vercel.app/docs/#/
-- 노션(프로젝트 계획): 추가 예정
+```bash
+# 저장소 클론
+git clone https://github.com/sprint18-4-4/Coworkers.git
+cd Coworkers
 
-## 👥 팀
+# 의존성 설치
+npm install
 
-- 김원선 · 박신천 · 서지권 · 정상인
+# 환경 변수 설정
+cp .env.local.example .env.local
+# .env.local 파일 수정
 
-## 🧰 기술 스택
+# 개발 서버 실행
+npm run dev
+```
 
-- Framework: **Next.js (App Router)**, React, TypeScript
-- 스타일: **Tailwind CSS**
-- 상태/데이터: **React Query**
-- 배포/스토리지: Vercel, AWS S3
-- 협업: Git & GitHub
-- (선택) Storybook, 테스트 코드
+## 스크립트
 
-## 🎯 프로젝트 목표
+```json
+{
+  "dev": "next dev --webpack",
+  "build": "next build --webpack",
+  "start": "next start",
+  "lint": "eslint",
+  "storybook": "storybook dev -p 6006",
+  "build-storybook": "storybook build",
+  "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+  "build-all": "npm run build && npm run build-storybook"
+}
+```
 
-1. 익명 롤링페이퍼 작성/조회/댓글/좋아요
-2. React Query 기반 상태 처리/데이터 관리
-3. 사용자 편의 중심의 직관적 UI/UX
-4. Next.js를 활용한 SPA 구현 및 UI 통일성 유지
+## 컨벤션
 
-## ✨ 주요 기능
+### Git 커밋 메시지
 
-- 상단 네비게이션/팀 참여 메뉴
-- 랜딩 분기(로그인 여부에 따라 팀 페이지 또는 로그인)
-- 회원가입/로그인/비밀번호 재설정/간편가입(카카오)
-- 팀 생성/수정/삭제/초대 링크/멤버 리스트
-- 할 일(Task) 목록/추가(한 번·매일·주·월)/상세/수정/삭제/완료
-- 마이 히스토리(일자별 완료 목록)
-- 계정 설정(프로필 이미지/이름/비밀번호/탈퇴)
-- 자유게시판(목록/베스트/검색/CRUD)
+```plaintext
+- feat: 새로운 기능 추가
+- fix: 버그 수정
+- design: UI/UX 및 스타일 변경
+- docs: 문서 작성 또는 수정
+- refactor: 코드 리팩토링 (기능 변화 없음)
+- chore: 설정, 빌드, 패키지 등 유지보수
+- test: 테스트 코드 및 주석 추가/수정
+- hotfix: 긴급 버그 수정
+- review: 코드 리뷰 요청
+- performance: 성능 최적화
+- main: 메인 브랜치 관련 변경 (배포 등)
+```
 
-## ✅ 요구사항(요약 체크리스트)
+### 코드 스타일
 
-- 공통: 폰트/컬러 시스템 설정, 공용 컴포넌트, 반응형, React Query, Next.js, TS, (선택) Storybook/테스트
-- 네비게이션/프로필 메뉴: 팀 참여하기·마이 히스토리·계정 설정·로그아웃
-- 랜딩: ‘지금 시작하기’ → 로그인 상태 분기
-- 회원가입/로그인: 입력 검증 메시지/에러 처리/간편가입 플로우
-- 팀: 중복 검사·생성 후 이동·수정/삭제·초대 모달(링크 복사)
-- 할 일: 목록/추가 모달·반복 옵션·유효성·상세 CRUD/완료
-- 마이 히스토리: 일자별 완료 목록
-- 계정 설정: 프로필 이미지/이름/비번 변경·회원 탈퇴 모달
-- 자유게시판: 전체/베스트(좋아요순)/검색(제목 부분일치)/CRUD
+- 컴포넌트: PascalCase (예: `UserProfile.tsx`)
+- util 함수: camelCase (예: `formatDate.ts`)
+- 상수: UPPER_SNAKE_CASE (예: `API_ENDPOINT.ts`)
 
-## 🗂️ 폴더 구조
+### 폴더 구조
 
-> 폴더 구조는 **추후 결정(TBD)**. App Router 기준으로 세팅 예정.
+```plaintext
+├── src
+│   ├── api
+│   │   ├── axios.ts
+│   │   └── hooks.ts
+│   ├── app
+│   │   └── login
+│   │       ├── _components
+│   │       ├── _hooks
+│   │       ├── _types
+│   │       ├── _constants
+│   │       └── page.tsx
+│   ├── constants
+│   │   └── 공통 상수
+│   ├── common
+│   │   └── 공통 컴포넌트
+│   ├── hooks
+│   │   └── 공통 훅
+│   ├── types
+│   │   └── 공통 타입
+│   └── utils
+│       └── 공통 유틸
+├── public
+└── package.json
+```

package.json

@@ -14,13 +14,16 @@
     "build-all": "npm run build && npm run build-storybook"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "@react-pdf/renderer": "^4.3.1",
     "@tanstack/react-query": "^5.90.5",
     "@tanstack/react-query-devtools": "^5.90.2",
     "axios": "^1.13.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.19",
+    "framer-motion": "^12.23.24",
+    "gsap": "^3.13.0",
     "next": "16.0.1",
     "react": "19.2.0",
     "react-calendar": "^6.0.0",