Melffys · Bersk3r · Jul 8, 2024 · Jul 8, 2024 · Jul 8, 2024 · Jul 8, 2024
diff --git a/README.md b/README.md
@@ -1,37 +1,340 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# 📙📄 WekitBucket 👨‍💻😎
 
-## Getting Started
+코드잇 스프린트 6기 Part 3 과정에서 8팀이 진행한 중급 프로젝트 **WekitBucket** 레포지토리
+<br>
 
-First, run the development server:
+## 🔗 배포 주소
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+https://wekit-bucket.vercel.app
+<br>
+
+## 🔗 발표 자료
+
+https://www.canva.com/design/DAGKHfn-U0Y/HhE-GjRBlfJns68CXuD5Xg/edit
+<br>
+
+## 🏃프로젝트 소개
+
+**친구들의 정보를 저장하고 만드는 공간 WekitBucket**
+
+- 친구들이 보는 나는 어떨까라는 주제로 함께 만들어가는 나의 위키 페이지
+- 자유게시판을 활용하여 친구를 찾고 소통할 수 있는 페이지
+
+[<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/992b42c2-9eba-4925-ac3d-36ca27f3f79f" width=350>](https://wekit-bucket.vercel.app/)
+[<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/96009d4b-ec69-48b0-81ec-6fef0b07fdd4" width=350>](https://wekit-bucket.vercel.app/wikilist)
+[<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/bf08f4fa-6795-43e6-8d1f-6ea001c73aab" width=350>](https://wekit-bucket.vercel.app/wiki/080ac549-4709-4a25-b033-53fa80083b4e)
+[<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/59b883b0-2415-4e06-80a0-8396bd9658c9" width=350>](https://wekit-bucket.vercel.app/boards)
+
+<br>
+
+## 📌 주요 기능
+
+- **헤더**
+
+  - 로고 클릭 시, 마이페이지로 이동
+  - 위키 목록 클릭 시, 위키 목록 페이지로 이동
+  - 자유게시판 클릭 시, 자유게시판 페이지로 이동
+  - 로그인이 되지 않는 경우, 로그인 표시
+  - 로그인이 되어 있는 경우, 알람 및 사용자 프로필 정보 표시
+  <p><img src="gif" width=400></p>
+  <br>
+
+- **랜딩 페이지**
+
+  - 초기 시작 페이지
+  <p><img src="gif" width=400></p>
+
+  <br>
+
+- **위키 목록 페이지**
+
+  - 내용
+
+  - **토스트 창**
+
+    - 내용
+
+  - **내 위키 페이지**
+
+    - 내용
+    <p><img src="gif" width=400></p>
+    <br>
+
+  - **질문 등록 페이지**
+
+    - 내용
+    <p><img src="gif" width=400></p>
+    <br>
+
+  - **수정 페이지**
+    - 내용
+    <p><img src="gif" width=400></p>
+    <br>
+
+- **자유게시판 페이지**
+  - 내용
+  <p><img src="gif" width=400></p>
+  <br>
+
+## ⚒️ 개발 일정
+
+**⌛2024.06.21 (금) ~ 2024.07.19 (화)**
+
+<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/98da0048-e7ca-4cb0-a14b-9bfd068e6311">
+
+<br>
+
+## 📝 프로젝트 기간 중 수행 내용
+
+```
+1. 사용 기술 스택 선정 및 개발 일정 논의
+2. 프로젝트 관련 개발 환경 셋업
+3. 역할 분담
+4. 프로젝트 구현
+  - 공통 사용 컴포넌트 역할 분배
+  - 페이지 단위 역할 분배
+  - 기능 구현 및 API 연동
+5. 발표 및 자료 준비
+6. 리팩토링 및 문서화
+```
+
+<br>
+
+## 👩🏻‍💻 팀원 소개
+
+<div align="center">
+
+|                                                          **김민재**                                                           |                                                           **김영운**                                                            |                                                        **이종욱**                                                        |                                                          **이은빈**                                                           |                                                        **유예하**                                                         |
+| :---------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: |
+| [<img src="https://avatars.githubusercontent.com/u/162538553?v=4" height=100> <br/> @PixeIDark](https://github.com/PixeIDark) | [<img src="https://avatars.githubusercontent.com/u/162089313?v=4" height=100> <br/> @YoungUnKim](https://github.com/YoungUnKim) | [<img src="https://avatars.githubusercontent.com/u/50625710?v=4" height=100> <br/> @bersk3r](https://github.com/bersk3r) | [<img src="https://avatars.githubusercontent.com/u/110139747?v=4" height=100> <br/> @eunbinnie](https://github.com/eunbinnie) | [<img src="https://avatars.githubusercontent.com/u/151544448?v=4" height=100> <br/> @YehaYoo](https://github.com/YehaYoo) |
+
+</div>
+
+<br>
+
+## 🤝 역할 분담
+
+<br>
+
+<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/a03ab098-a050-476a-a993-c2780c185b20" width=15> **김민재**
+
+- 프로젝트 초기 세팅 담당
+- API 및 유틸 담당
+- 위키 목록 페이지 담당
+- 프로젝트 발표 담당
+
+<br>
+
+<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/5f8d736e-9eea-48b5-9a38-6233207e8fa8" width=15> **김영운**
+
+- 회원가입 페이지 담당
+- 비밀번호 변경 페이지 담당
+- 위키 만들기 페이지 담당
+- 내 위키 페이지 담당
+
+<br>
+
+<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/f59c07c2-5dac-4704-b44f-9e63b56c8039" width=15> **이종욱**
+
+- 헤더, 토스트, 알람 컴포넌트 제작
+- 사용자, 알람, 토스트 전역 컨텍스트 담당
+- 배포 및 자동화 작업 담당
+- README 파일 담당
+
+<br>
+
+<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/9137ad9e-3459-416e-b68c-3ee44bb1b54a" width=15> **이은빈**
+
+- 로그인 페이지 담당
+- 자유게시판 페이지 및 404 페이지 담당
+- 게시글 상세 페이지 담당
+- 애니메이션 효과 적용 담당
+
+<br>
+
+<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/fb60d237-eaed-4ff9-a3a9-51a1a6734858" width=15> **유예하**
+
+- 랜딩 페이지 담당
+- 게시글 등록 페이지 담당
+- 게시글 수정 페이지 담당
+- 프로젝트 발표 자료 준비 및 시연 영상 제작 담당
+
+<br>
+
+## 💻 기술 스택
+
+- ### Environment
+
+<div>
+<img src="https://img.shields.io/badge/visual studio code-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white"> 
+<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white"> 
+<img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white">
+</div>
+<br>
+
+- ### Config
+
+<div>
+<img src="https://img.shields.io/badge/yarn-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white"> 
+<img src="https://img.shields.io/badge/eslint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white"> 
+<img src="https://img.shields.io/badge/prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black">
+<img src="https://img.shields.io/badge/husky-632CA6?style=for-the-badge&logo=datadog&logoColor=white">
+</div>
+<br>
+
+- ### Development
+
+<div>
+<img src="https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=next.js&logoColor=white">  
+<img src="https://img.shields.io/badge/react-61DAFB?style=for-the-badge&logo=react&logoColor=black">  
+<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"/>
+<img src="https://img.shields.io/badge/fetch-000000?style=for-the-badge&logo=framework&logoColor=white"/>
+<img src="https://img.shields.io/badge/tailwind_css-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white"/>
+<br>
+
+<img src="https://img.shields.io/badge/framer motion-0055FF?style=for-the-badge&logo=framer&logoColor=white">
+<img src="https://img.shields.io/badge/swiper-6332F6?style=for-the-badge&logo=swiper&logoColor=white">
+<img src="https://img.shields.io/badge/react_quill-F27557?style=for-the-badge&logo=quip&logoColor=white">
+<img src="https://img.shields.io/badge/react_md_editor-000000?style=for-the-badge&logo=markdown&logoColor=white"/>
+</div>
+<br>
+
+- ### Deploy
+
+<div>
+<img src="https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=Vercel&logoColor=white"/>
+</div>
+<br>
+
+- ### CI / CD
+
+<div>
+<img src="https://img.shields.io/badge/github_actions-2088ff?style=for-the-badge&logo=githubactions&logoColor=white">
+</div>
+<br>
+
+- ### Collaboration Tools
+<div>
+<img src="https://img.shields.io/badge/notion-000000?style=for-the-badge&logo=notion&logoColor=white"/>   <img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=Discord&logoColor=white"/> 
+</div>
+<br>
+
+## 🗂️ 폴더 구조
+
+**<img src="https://github.com/Melffys/WeKitBucket/assets/50625710/ab4f2af4-58df-44d3-af14-c472a6dd30ae" height=20> <sup>**WekitBucket**<sup>**
+
+```
+📦src
+ ┣ 📂apis
+ ┃ ┣ 📂article
+ ┃ ┣ 📂auth
+ ┃ ┣ 📂comment
+ ┃ ┣ 📂image
+ ┃ ┣ 📂notification
+ ┃ ┣ 📂profile
+ ┃ ┗ 📂user
+ ┣ 📂app
+ ┃ ┣ 📂(auth)
+ ┃ ┃ ┣ 📂login
+ ┃ ┃ ┃ ┣ 📂_components
+ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┃ ┗ 📂signup
+ ┃ ┃ ┃ ┣ 📂_components
+ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┣ 📂(boards)
+ ┃ ┃ ┣ 📂addboard
+ ┃ ┃ ┃ ┣ 📂[id]
+ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┃ ┗ 📂boards
+ ┃ ┃ ┃ ┣ 📂components
+ ┃ ┃ ┃ ┃ ┣ 📂allArticles
+ ┃ ┃ ┃ ┃ ┣ 📂bestArticles
+ ┃ ┃ ┃ ┃ ┗ 📂search
+ ┃ ┃ ┃ ┣ 📂[id]
+ ┃ ┃ ┃ ┃ ┣ 📂components
+ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┣ 📂(mypage)
+ ┃ ┃ ┣ 📂changepassword
+ ┃ ┃ ┃ ┣ 📂_components
+ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┃ ┣ 📂makewiki
+ ┃ ┃ ┃ ┣ 📂_components
+ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┣ 📂(wiki)
+ ┃ ┃ ┣ 📂wiki
+ ┃ ┃ ┃ ┣ 📂[code]
+ ┃ ┃ ┃ ┃ ┣ 📂components
+ ┃ ┃ ┃ ┃ ┃ ┣ 📂Common
+ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂lottie
+ ┃ ┃ ┃ ┃ ┃ ┗ 📂Profile
+ ┃ ┃ ┃ ┃ ┣ 📂_constants
+ ┃ ┃ ┃ ┃ ┣ 📂_hook
+ ┃ ┃ ┃ ┃ ┣ 📂_style
+ ┃ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┃ ┣ 📂wikilist
+ ┃ ┃ ┃ ┣ 📂_components
+ ┃ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┣ 📂test
+ ┃ ┃ ┣ 📂_components
+ ┃ ┃ ┗ 📜page.tsx
+ ┃ ┣ 📂_components
+ ┃ ┃ ┣ 📂Landing
+ ┃ ┃ ┗ 📂_Header
+ ┃ ┣ 📜layout.tsx
+ ┃ ┣ 📜page.tsx
+ ┃ ┗ 📜template.tsx
+ ┣ 📂assets
+ ┃ ┣ 📂fonts
+ ┃ ┃ ┗ 📂pretendard
+ ┃ ┣ 📂icons
+ ┃ ┣ 📂images
+ ┃ ┗ 📜index.ts
+ ┣ 📂components
+ ┣ 📂context
+ ┣ 📂hooks
+ ┣ 📂styles
+ ┣ 📂types
+ ┗ 📂utils
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+<br>
+
+## 🌲 깃 브랜치 전략 (Trunk-Based 전략)
+
+1. main 브랜치에서 기반으로 로컬에서 브랜치 생성
+2. 로컬에서 작업이 완료 후, pull Request 작성
+   - main 브랜치에 변동 사항이 있으면 작업하고 있는 코드에 반영 후 push 진행
+   - Conflict가 발생하면, 충돌이 발생된 부분을 Resolve 한 후에 merge 진행
+3. Pull Request에 대한 merge를 진행하는 경우, 리뷰어로 설정된 팀원 중 <br>
+   - 2명 이상의 승인이 완료되면 작성자가 직접 merge를 눌러 main 브랜치로 병합.
+   - merge 기능을 사용하여, 여러 개의 커밋을 하나의 커밋으로 통합
+   - discord Webhooks을 통해 PR이 생성될 때 알림 오도록 설정
+
+<br>
+
+## 🚨 프로젝트 내 발생한 문제점 / 해결방안
+
+### 문제점
+
+- Github Orginazation에 대한 배포 시 유료 기능 지원 문제
+
+### 해결 방안
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- Git Action을 활용하여 자동 배포 및 PR 프리뷰 생성 ([#32](github link))
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+<br>
 
-## Learn More
+## 📗 프로젝트 내 잘한 점 / 아쉬운 점
 
-To learn more about Next.js, take a look at the following resources:
+### 😊 잘한 점
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+#### R&R을 통해 업무 분담을 한 후, 매일마다 보고하는 형식으로 진행
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- 각자의 맡은 역할이 완료되면 보고 후, 현재 남은 작업을 수행
 
-## Deploy on Vercel
+### 😮‍💨 아쉬운 점
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+#### 건강 관리를 제대로 하지 못함
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
-# WeKitBucket
+- 다들 열심히 참여하느라, 수면 시간이 불규칙한 문제가 존재함