feat(DEVING-91): 마크다운 1차 (ing....)

README.md

@@ -1,36 +1,154 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+![alt text](image.png)
 
-## Getting Started
+</br>
 
-First, run the development server:
+# 목차
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+## 1. [프로젝트 소개](#-프로젝트-소개)
+## 2. [팀원 소개](#-팀원-소개)
+## 3. [프로젝트 기획](#-프로젝트-기획)
+## 4. [기간 및 협업관리](#️-기간-및-협업관리)
+## 5. [기술스택](#-기술스택)
+## 6. [주요 기능](#-주요-기능)
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+</br>
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+# 📚 프로젝트 소개
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+DEVING은 개발자와 디자이너를 위한 전문 모임 플랫폼입니다. 사이드 프로젝트, 모각코, 스터디, 취미 등 개발자 및 디자이너 직군들이 자주 이용하는 주제로 모임을 생성하고 참여할 수 있습니다. 함께 성장하고 네트워킹할 수 있는 커뮤니티를 제공합니다.
 
-## Learn More
+</br>
 
-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.
+| 강윤지 | 이윤재 | 이한나 | 이동석 |
+|:-----:|:-----:|:-----:|:-----:|
+| ![강윤지](https://github.com/dbswl701.png) | ![이윤재](https://github.com/clyde-yoonjae.png) | ![이한나](https://github.com/lee1nna.png) | ![이동석](https://github.com/Lee-Dong-Seok.png) |
+| [:octocat: GitHub](https://github.com/dbswl701) | [:octocat: GitHub](https://github.com/clyde-yoonjae) | [:octocat: GitHub](https://github.com/lee1nna) | [:octocat: GitHub](https://github.com/Lee-Dong-Seok) |
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+</br>
 
-## 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/app/building-your-application/deploying) for more details.
+코드잇 스프린트 심화 단기과정에서 주어진 '모임 관련 서비스 개발' 과업을 수행하면서, 저희 팀은 개발자와 디자이너 커뮤니티에 주목했습니다. IT 업계에서 소통과 협업의 중요성을 인식하여, 개발자와 디자이너들이 쉽게 만나고 교류할 수 있는 플랫폼을 구축하고자 했습니다.
+
+### 핵심 아이디어
+
+- 기술 스택 필터링: 사용자가 관심 있는 기술 스택을 기반으로 모임을 검색할 수 있습니다.
+
+- 맞춤형 프로필: 개인 프로필에 기술 스택, 경력, 관심사 등을 설정하여 자신을 표현할 수 있습니다.
+
+- 직관적인 UX/UI: 사용자 경험을 최우선으로 고려한 인터페이스 설계로 누구나 쉽게 이용할 수 있습니다.
+
+</br>
+
+# 🖥️ 기간 및 협업관리
+
+</br>
+
+### [ 기간 ]
+
+<table style="font-size: 20px;">
+ <tr>
+   <th>구분</th>
+   <th> 날짜</th>
+ </tr>
+ <tr>
+   <td>기획 기간</td>
+   <td>2025.01.24 ~ 02.10</td>
+ </tr>
+ <tr>
+   <td>개발 기간</td>
+   <td>2025.02.11 ~ 03.14</td>
+ </tr>
+</table>
+
+</br>
+
+### [ 협업 관리 ]
+
+![Notion](https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=notion&logoColor=white)
+![Discord](https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white)
+![Jira](https://img.shields.io/badge/Jira-0052CC?style=for-the-badge&logo=jira&logoColor=white)
+![GitHub](https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white)
+
+| 협업 도구      | 활용 내용                                                                               |
+| -------------- | --------------------------------------------------------------------------------------- |
+| 📝 **Notion**  | • 데일리 스크럼 기록<br>• 트러블슈팅 문서화<br>• 기술 Wiki 구축<br>• 프로젝트 정보 공유 |
+| 🎙️ **Discord** | • 실시간 화상 회의<br>• 팀 커뮤니케이션                                                 |
+| 📊 **Jira**    | • 브랜치 관리<br>• 스프린트 계획 및 추적<br>• 작업 할당 및 진행상황 모니터링            |
+| 📌 **GitHub**  | • 코드 버전 관리<br>• PR 및 코드 리뷰<br>• 이슈 트래킹                                  |
+
+</br>
+
+# 🔧 기술스택
+
+![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)
+![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)
+![TanStack Query](https://img.shields.io/badge/TanStack_Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white)
+![Zustand](https://img.shields.io/badge/Zustand-624DE3?style=for-the-badge&logo=react&logoColor=white)
+![shadcn/ui](https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcnui&logoColor=white)
+![MUI](https://img.shields.io/badge/MUI-007FFF?style=for-the-badge&logo=mui&logoColor=white)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)
+
+
+### <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" width="20" height="20"/> Next.js (App Router)
+
+Next.js의 App Router를 활용하여 서버 컴포넌트 기반의 아키텍처를 구현했습니다. 이를 통해 다음과 같은 이점을 얻을 수 있었습니다:
+
+- **서버 사이드 렌더링(SSR)**: 초기 로딩 속도 향상 및 SEO 최적화
+- **서버 컴포넌트**: 클라이언트에 JavaScript 번들을 전송하지 않고 서버에서 렌더링하여 성능 개선
+- **데이터 프리페칭**: 페이지 렌더링 전에 필요한 데이터를 미리 로드하여 사용자 경험 개선
+- **서버 상태 기반 인증**: 보안성이 향상된 사용자 인증 시스템 구현
+
+
+### <img src="https://cdn.jsdelivr.net/gh/TanStack/query/media/emblem-light.svg" width="20" height="20"/> TanStack Query
+
+서버 상태 관리를 위해 TanStack Query(React Query)를 사용했습니다:
+- **효율적인 데이터 페칭**: 자동 캐싱, 백그라운드 업데이트, 재시도 로직 구현
+- **서버 상태와 클라이언트 상태 분리**: 상태 관리 로직 단순화
+- **데이터 동기화**: 최신 데이터를 항상 유지하면서도 불필요한 네트워크 요청 최소화
+- **쿼리키 팩토리패턴**: 프로젝트 내 전략적인 쿼리키 관리
+- **무한 스크롤**: 대용량 데이터 효율적 처리
+
+
+### <img src="https://ui.shadcn.com/favicon.ico" width="20" height="20"/> shadcn/ui & <img src="https://mui.com/favicon.ico" width="20" height="20"/> MUI
+
+디자인 시안 확정 전 신속한 개발 환경 구축을 위해 두 UI 라이브러리를 전략적으로 활용했습니다:
+- **프로토타이핑 가속화**: 고품질 컴포넌트로 빠른 MVP 개발
+- **일관된 디자인 시스템**: 프로젝트 초기 단계에서 디자인 일관성 유지
+- **사용자 경험 향상**: 검증된 UI 패턴 적용으로 직관적인 인터페이스 구현
+- **개발 효율성**: 컴포넌트 재사용으로 개발 시간 단축
+
+</br>
+
+# ✨ 주요 기능
+
+
+| 모임 찾기 | 모임 상세보기 |
+|:---:|:---:|
+| 여러가지 필터를 통해 모임을 쉽고 빠르게 찾을 수 있습니다. | 모임에 대한 상세 정보를 한눈에 확인할 수 있습니다. |
+| <img src="./src/assets/readme-img/list.png" alt="모임 찾기" width="450"> | <img src="./src/assets/readme-img/detail.png" alt="모임 상세보기" width="450"> |
+
+| 모임 신청 | 모임 관리 및 멤버관리 |
+|:---:|:---:|
+| 간편한 절차를 통해 모임에 참여 신청을 할 수 있습니다. | 주최모임과 참여자들을 관리 및 상태를 변경 할 수 있습니다. |
+| <img src="./src/assets/readme-img/join.png" alt="모임 신청" width="450"> | <img src="./src/assets/readme-img/member.png" alt="모임 관리" width="450"> |
+
+| 내 정보 수정 | |
+|:---:|:---:|
+| 프로필 정보를 간편하게 수정할 수 있습니다. | |
+| <img src="./src/assets/readme-img/mypage.png" alt="내정보" width="450"> | |
+</br>
+
+
+## 🎈 프로젝트 산출물
+
+| 문서 종류 | 링크 |
+|:---|:---|
+| 📝 **와이어 프레임** | [DEVING - 와이어 프레임](https://www.figma.com/files/team/1239829768059524989/recents-and-sharing?fuid=1239829763104263861) |
+| 🎨 **디자인 시안** | [DEVING - 디자인 시안](https://www.figma.com/design/whAR7r8MPfWo9Cl93zhKlL/DEVING-%EC%8B%9C%EC%95%88?node-id=0-1&p=f&t=hQ9Sr369FbrTyGqY-0) |
+| 📘 **API 문서** | [DEVING - 스웨거](https://deving.shop/swagger-ui/index.html#/auth-controller) |