diff --git a/README.md b/README.md index e215bc4..f7c2696 100644 --- a/README.md +++ b/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 +
-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. +
-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 +
-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! +
-## 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: 사용자 경험을 최우선으로 고려한 인터페이스 설계로 누구나 쉽게 이용할 수 있습니다. + +
+ +# 🖥️ 기간 및 협업관리 + +
+ +### [ 기간 ] + + + + + + + + + + + + + + +
구분 날짜
기획 기간2025.01.24 ~ 02.10
개발 기간2025.02.11 ~ 03.14
+ +
+ +### [ 협업 관리 ] + +![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** | • 데일리 스크럼 기록
• 트러블슈팅 문서화
• 기술 Wiki 구축
• 프로젝트 정보 공유 | +| 🎙️ **Discord** | • 실시간 화상 회의
• 팀 커뮤니케이션 | +| 📊 **Jira** | • 브랜치 관리
• 스프린트 계획 및 추적
• 작업 할당 및 진행상황 모니터링 | +| 📌 **GitHub** | • 코드 버전 관리
• PR 및 코드 리뷰
• 이슈 트래킹 | + +
+ +# 🔧 기술스택 + +![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) + + +### Next.js (App Router) + +Next.js의 App Router를 활용하여 서버 컴포넌트 기반의 아키텍처를 구현했습니다. 이를 통해 다음과 같은 이점을 얻을 수 있었습니다: + +- **서버 사이드 렌더링(SSR)**: 초기 로딩 속도 향상 및 SEO 최적화 +- **서버 컴포넌트**: 클라이언트에 JavaScript 번들을 전송하지 않고 서버에서 렌더링하여 성능 개선 +- **데이터 프리페칭**: 페이지 렌더링 전에 필요한 데이터를 미리 로드하여 사용자 경험 개선 +- **서버 상태 기반 인증**: 보안성이 향상된 사용자 인증 시스템 구현 + + +### TanStack Query + +서버 상태 관리를 위해 TanStack Query(React Query)를 사용했습니다: +- **효율적인 데이터 페칭**: 자동 캐싱, 백그라운드 업데이트, 재시도 로직 구현 +- **서버 상태와 클라이언트 상태 분리**: 상태 관리 로직 단순화 +- **데이터 동기화**: 최신 데이터를 항상 유지하면서도 불필요한 네트워크 요청 최소화 +- **쿼리키 팩토리패턴**: 프로젝트 내 전략적인 쿼리키 관리 +- **무한 스크롤**: 대용량 데이터 효율적 처리 + + +### shadcn/ui & MUI + +디자인 시안 확정 전 신속한 개발 환경 구축을 위해 두 UI 라이브러리를 전략적으로 활용했습니다: +- **프로토타이핑 가속화**: 고품질 컴포넌트로 빠른 MVP 개발 +- **일관된 디자인 시스템**: 프로젝트 초기 단계에서 디자인 일관성 유지 +- **사용자 경험 향상**: 검증된 UI 패턴 적용으로 직관적인 인터페이스 구현 +- **개발 효율성**: 컴포넌트 재사용으로 개발 시간 단축 + +
+ +# ✨ 주요 기능 + + +| 모임 찾기 | 모임 상세보기 | +|:---:|:---:| +| 여러가지 필터를 통해 모임을 쉽고 빠르게 찾을 수 있습니다. | 모임에 대한 상세 정보를 한눈에 확인할 수 있습니다. | +| 모임 찾기 | 모임 상세보기 | + +| 모임 신청 | 모임 관리 및 멤버관리 | +|:---:|:---:| +| 간편한 절차를 통해 모임에 참여 신청을 할 수 있습니다. | 주최모임과 참여자들을 관리 및 상태를 변경 할 수 있습니다. | +| 모임 신청 | 모임 관리 | + +| 내 정보 수정 | | +|:---:|:---:| +| 프로필 정보를 간편하게 수정할 수 있습니다. | | +| 내정보 | | +
+ + +## 🎈 프로젝트 산출물 + +| 문서 종류 | 링크 | +|:---|:---| +| 📝 **와이어 프레임** | [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) | \ No newline at end of file diff --git a/image.png b/image.png new file mode 100644 index 0000000..6fe6049 Binary files /dev/null and b/image.png differ diff --git a/src/assets/readme-img/detail.png b/src/assets/readme-img/detail.png new file mode 100644 index 0000000..5b37f80 Binary files /dev/null and b/src/assets/readme-img/detail.png differ diff --git a/src/assets/readme-img/join.png b/src/assets/readme-img/join.png new file mode 100644 index 0000000..f139645 Binary files /dev/null and b/src/assets/readme-img/join.png differ diff --git a/src/assets/readme-img/list.png b/src/assets/readme-img/list.png new file mode 100644 index 0000000..ca190be Binary files /dev/null and b/src/assets/readme-img/list.png differ diff --git a/src/assets/readme-img/member.png b/src/assets/readme-img/member.png new file mode 100644 index 0000000..ee8f852 Binary files /dev/null and b/src/assets/readme-img/member.png differ diff --git a/src/assets/readme-img/mypage.png b/src/assets/readme-img/mypage.png new file mode 100644 index 0000000..cb5df41 Binary files /dev/null and b/src/assets/readme-img/mypage.png differ