[refactor] team: 할 일 목록 최초 생성 시 UI 미반영 이슈 해결

README.md

@@ -1,10 +1,302 @@
-## 🚀 진행 일정
-
-| 이름   | 프로젝트 시작 (-4.25)                       | 1차 기능 구현 (-5.03)                                  | 2차 기능 구현 (-5.10)                                                                            |
-| ------ | ------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| 노현지 | • API 작업 <br> • 모달 공통 컴포넌트        | • 리스트 페이지 <br> • 할 일 상세 페이지               | • 할 일 생성 모달 <br> • 할 일 수정 모달 <br> • 할 일 삭제 모달                                  |
-| 이아름 | • 버튼 <br> • 드롭다운 <br> • 카드 컴포넌트 | • 버튼 <br> • 드롭다운 <br> • 카드 컴포넌트            | • 자유게시판 메인 페이지 <br> • 계정 설정 페이지 <br> • 비밀번호 변경 모달 <br> • 회원 탈퇴 모달 |
-| 이현선 | • 폰트, 컬러 가이드                         | • 폰트, 컬러 가이드                                    | • 마이 히스토리 페이지 <br> • 404 에러 페이지                                                    |
-| 이현호 | • 아이콘 컴포넌트 <br> • 헤더 컴포넌트      | • 아이콘 컴포넌트 <br> • 헤더 컴포넌트                 | • 팀 생성 페이지 <br> • 팀 참여 페이지 <br> • 팀 수정 페이지                                     |
-| 장해명 | • API 작업                                  | • 회원가입/로그인 페이지 <br> • 비밀번호 재설정 페이지 | • 자유게시판 상세 페이지 <br> • 자유게시판 게시글 쓰기 페이지 <br> • Oauth                       |
-| 조민지 | • 인풋 컴포넌트 <br> • 커스텀 토스트 디자인 | • 다크 모드 <br> • 랜딩 페이지                         | • 팀 페이지 <br> • 팀 없는 경우 페이지 <br> • 페이지 사용 모달                                   |
+# Coworkers
+![GIF_20250609_232943_882](https://github.com/user-attachments/assets/968556f6-36a9-4298-8c2a-f808fb874cae)
+
+
+## 💡 프로젝트 개요
+**Coworkers**는 팀 단위로 일정을 관리 및 공유할 수 있는 웹 애플리케이션입니다.
+- 소속된 팀의 할 일 목록, 그날의 진행 상황, 멤버 목록을 한눈에 확인할 수 있습니다.
+- 반복 주기를 설정하여 할 일을 생성할 수 있으며, 특정 할 일에 대해 댓글로 소통할 수 있습니다.
+
+<br>
+
+## ⏳ 개발 기간
+2025.04.21 ~ 2025.05.26
+
+<br>
+
+## 🚀 배포 주소
+https://coworkers-theta.vercel.app
+
+<br>
+
+## 👩🏻‍💻 팀원 소개
+<table>
+  <tr>
+    <td align="center"><b>노현지</b></td>
+    <td align="center"><b>이아름</b></td>
+    <td align="center"><b>이현선</b></td>
+    <td align="center"><b>이현호</b></td>
+    <td align="center"><b>장해명</b></td>
+    <td align="center"><b>조민지</b></td>
+  </tr>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/hyeonjiroh">
+        <img width="200px" src="https://github.com/hyeonjiroh.png"/>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/ARON-Y">
+        <img width="200px" src="https://github.com/ARON-Y.png"/>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/eplssun">
+        <img width="200px" src="https://github.com/eplssun.png"/>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/MySoupRice">
+        <img width="200px" src="https://github.com/MySoupRice.png"/>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/jjaneyxx">
+        <img width="200px" src="https://github.com/jjaneyxx.png"/>
+      </a>
+    </td>
+    <td align="center">
+      <a href="https://github.com/MINJI121">
+        <img width="200px" src="https://github.com/MINJI121.png"/>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<br>
+
+## 🤝 역할 분담
+### 노현지
+- 할 일 목록 페이지
+- 할 일 상세 페이지
+- 자유게시판 상세 페이지
+- 할 일 목록 생성/수정/삭제 모달
+- 할 일 생성/수정/삭제 모달
+- 모달 공통 컴포넌트
+- Datepicker 공통 컴포넌트
+- fetcher 함수 및 API 함수
+- 초기 세팅
+- Vercel 배포
+
+### 이아름
+- 자유게시판 메인 페이지
+- 자유게시판 글 작성 페이지
+- 자유게시판 글 수정 페이지
+- 계정 설정 페이지
+- 회원 탈퇴 모달
+- 비밀번호 변경 모달
+- 버튼 공통 컴포넌트
+- 드롭다운 공통 컴포넌트
+
+### 이현선
+- 마이 히스토리 페이지
+- 404 페이지
+- 스타일 가이드
+
+### 이현호
+- 팀 생성 페이지
+- 팀 수정 페이지
+- 팀 참여 페이지
+- 팀 삭제 모달
+- 헤더 공통 컴포넌트
+- 아이콘 공통 컴포넌트
+
+### 장해명
+- 회원가입 페이지
+- 로그인 페이지
+- 비밀번호 재설정 페이지
+- 비밀번호 재설정 모달
+- Oauth
+- 프로젝트 협업 환경 구성
+- Notion 기반 협업 구조 정비
+
+### 조민지
+- 랜딩 페이지
+- 팀 페이지
+- 멤버 프로필 모달
+- 멤버 초대 모달
+- 커스텀 토스트 디자인
+- 인풋 공통 컴포넌트
+
+<br>
+
+## 🛠 기술 스택
+
+### 프로그래밍 언어
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
+
+### 스타일링
+![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+### 코드 품질
+![js](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)
+![js](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)
+
+### 라이브러리
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![React Query](https://img.shields.io/badge/react--query-%23FF4154.svg?style=for-the-badge&logo=reactquery&logoColor=white)
+![Zustand](https://img.shields.io/badge/zustand-%23212121.svg?style=for-the-badge)
+![js-cookie](https://img.shields.io/badge/js--cookie-%23f1c40f.svg?style=for-the-badge)
+![twMerge](https://img.shields.io/badge/twMerge-%23F59E0B.svg?style=for-the-badge)
+![lodash.debounce](https://img.shields.io/badge/lodash.debounce-%230075a8.svg?style=for-the-badge)
+![react-hook-form](https://img.shields.io/badge/react--hook--form-%23EC5990.svg?style=for-the-badge&logo=reacthookform&logoColor=white)
+![react-datepicker](https://img.shields.io/badge/react--datepicker-%23F97316.svg?style=for-the-badge)
+![framer-motion](https://img.shields.io/badge/framer--motion-%23000000.svg?style=for-the-badge&logo=framer&logoColor=white)
+![react-toastify](https://img.shields.io/badge/react--toastify-%23FF6B81.svg?style=for-the-badge)
+![clsx](https://img.shields.io/badge/clsx-%23007ACC.svg?style=for-the-badge)
+![SVGR](https://img.shields.io/badge/SVGR-%23FFB13B.svg?style=for-the-badge)
+![Zod](https://img.shields.io/badge/Zod-%230070f0.svg?style=for-the-badge)
+
+### 프레임워크
+![Next JS](https://img.shields.io/badge/Next.js-%23000000.svg?style=for-the-badge&logo=next.js&logoColor=white)
+
+### 배포
+![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
+
+### 버전 및 이슈 관리
+![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white)
+![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
+
+### 협업 툴
+![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=for-the-badge&logo=discord&logoColor=white)
+![Notion](https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white)
+
+<br>
+
+## 🗂️ 폴더 구조
+
+```
+📂 public
+├── 📂 image
+└── 📂 logo
+
+📂 src
+├── 📂 app
+│   ├── 📂 (auth)
+│   │   ├── 📂 login
+│   │   ├── 📂 oauth
+│   │   │   └── 📂 kakao
+│   │   ├── 📂 reset-password
+│   │   └── 📂 signup
+│   ├── 📂 (board)
+│   │   ├── 📂 article
+│   │   │   ├── 📂 [articleid]
+│   │   │   │   └── 📂 edit-article
+│   │   │   └── 📂 add-article
+│   │   └── 📂 boards
+│   ├── 📂 (landing)
+│   ├── 📂 (team)
+│   │   ├── 📂 add-team
+│   │   ├── 📂 join-team
+│   │   ├── 📂 no-team
+│   │   └── 📂 team
+│   │       └── 📂 [teamid]
+│   │           ├── 📂 edit
+│   │           ├── 📂 task
+│   │           │   └── 📂 [taskid]
+│   │           └── 📂 tasklist
+│   │               └── 📂 @sidePage
+│   │                   └── 📂 (..)task
+│   │                       └── 📂 [taskid]
+│   ├── 📂 (user)
+│   │   ├── 📂 myhistory
+│   │   └── 📂 mypage
+│   ├── 📄 not-found.tsx
+│   ├── 📄 page.tsx
+│   └── 📄 Providers.tsx
+├── 📂 assets
+│   └── 📂 icons
+├── 📂 components
+│   ├── 📂 article
+│   ├── 📂 auth
+│   ├── 📂 common
+│   ├── 📂 task
+│   ├── 📂 tasklist
+│   └── 📂 user
+├── 📂 constants
+├── 📂 fonts
+├── 📂 hooks
+├── 📂 lib
+│   ├── 📂 apis
+│   │   ├── 📂 article
+│   │   ├── 📂 articleComment
+│   │   ├── 📂 auth
+│   │   ├── 📂 comment
+│   │   ├── 📂 group
+│   │   ├── 📂 task
+│   │   ├── 📂 taskList
+│   │   ├── 📂 user
+│   │   └── 📄 uploadImage.ts
+│   ├── 📂 client
+│   │   ├── 📄 fetcher.client.ts
+│   │   └── 📄 token.client.ts
+│   └── 📂 server
+│       ├── 📄 fetcher.server.ts
+│       └── 📄 token.server.ts
+├── 📂 store
+└── 📂 utils
+```
+
+<br>
+
+## ✅ 컨벤션
+### 네이밍 컨벤션
+- 상수: `SNAKE_CASE`
+- 컴포넌트, interface 타입: `PascalCase`
+- 변수, 함수: `camelCase`
+- 폴더명: `kebab-case`
+- 파일명
+    - 이미지 파일(public 폴더): `_`(언더바)로 구분
+    - 이미지 import 시: `PascalCase`
+    - 페이지 및 API 파일 (app, api 폴더): `kebab-case`
+    - 컴포넌트 파일 (components 폴더): `PascalCase`
+    - 유틸리티 파일 (lib, utils, hooks 폴더): `camelCase`
+
+### 타입
+
+- **feat** : 새로운 기능 추가
+- **fix** : 버그 수정
+- **docs** : 문서 수정
+- **style** : 코드 스타일 변경(코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등)
+- **design**: 사용자 UI 디자인 변경(CSS 등)
+- **refactor** : 코드 리팩토링
+- **test** : 테스트 코드 작성
+- **build**: 빌드 파일 수정
+- **ci**: CI 설정 파일 수정
+- **perf**: 성능 개선
+- **chore**: 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등
+- **rename** : 파일 혹은 폴더명을 수정한 경우
+- **remove**: 파일 삭제만 한 경우
+
+### 커밋 메세지
+
+```
+type: 요약
+```
+
+### 브랜치명
+
+```
+type/#Issue-Number/Content
+```
+
+### 이슈 제목
+
+```
+[type] Content
+```
+
+### PR 제목
+
+```
+[type] #Issue-Number Content1 / Content2 ...
+```
+
+<br>
+
+## 🔄 팀 규칙
+- **4시간 동안 해결되지 않는 문제는 공유해서 함께 해결하기**
+- PR이 올라오고 6시간 내에 코드 리뷰 & Approve 해주기
+- 팀 미팅 불참 시 최소한 하루 전에 말해주기
+- Task 완료 시 칸반 보드 업데이트하기

src/app/(team)/team/[teamid]/page.tsx

@@ -42,6 +42,7 @@ export default async function TeamPage({
         <AddButton variant="tasklist" groupId={groupId} />
       </div>
       <TaskListBarList
+        key={taskListsData.length}
         items={taskListsData}
         groupId={groupId}
         userId={Number(userId)}