Update README.md

README.md

@@ -1,36 +1,77 @@
-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).
+# Pokehub (포켓허브)
 
-## Getting Started
+> 나만의 포켓몬 카드를 만들 수 있는 포켓몬 도감 커뮤니티!<br/>
+> 개발기간: 2023.11 ~ 2024.02 (1.0 ver)<br/>
+<!-- > 배포 주소: [포켓허브](주소입력) <br/> -->
+<br/>
 
-First, run the development server:
+## 개발 팀원 소개
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+|<a href="https://github.com/cdm1263"><img src="https://avatars.githubusercontent.com/u/122417731?v=4" width=150px alt="차동민" />|<a href="https://github.com/BearHumanS"><img src="https://avatars.githubusercontent.com/u/115094069?v=4" width=150px alt="남기훈" />|<a href="https://github.com/DICEPT"><img src="https://avatars.githubusercontent.com/u/106785596?v=4" width=150px alt="박철민" />|
+|:---------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
+|                                             **[차동민](https://github.com/ChoEun-Sang)**                                             |                                             **[남기훈](https://github.com/BearHumanS)**                                             |                                             **[박철민](https://github.com/DICEPT)**                                             |
+|메인 도감 페이지 <br/> 카드 제작 페이지 <br/> 포켓몬 카드 제작| 도감 상세 페이지 <br/> 마이 페이지 <br/> SEO 최적화| 커뮤니티 페이지 <br/> 데스크탑, 모바일 UX/UI 디자인 <br/> 로딩 애니메이션 UI 제작 |
+<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/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+**Development**
 
-## Learn More
+<p>
+<img src="https://img.shields.io/badge/NEXT.js-000000?style=flat-square&logo=nextdotjs&logoColor=white" />
+<img src="https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=Vite&logoColor=white" />
+<img src="https://img.shields.io/badge/Axios-5A29E4?style=flat-square&logo=Axios&logoColor=white" />
+<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=TypeScript&logoColor=white" />
+<img src="https://img.shields.io/badge/Zustand-43B02A?style=flat-square&logo=Zustand&logoColor=white" />
+<img src="https://img.shields.io/badge/Sass-CC6699?style=flat-square&logo=sass&logoColor=white" />
+<img src="https://img.shields.io/badge/React Query-FF4154?style=flat-square&logo=reactquery&logoColor=white" />
+<br />
+</p>
 
-To learn more about Next.js, take a look at the following resources:
+**Tools**
 
-- [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.
+<p>
+<img src="https://img.shields.io/badge/NPM-CB3837?style=flat-square&logo=npm&logoColor=white"/>
+<img src="https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=Vercel&logoColor=white" />
+<img src="https://img.shields.io/badge/VSCode-007ACC?style=flat-square&logo=Visual Studio Code&logoColor=white"/>
+<img src="https://img.shields.io/badge/Git-F05032?style=flat-square&logo=git&logoColor=white"/>
+<img src="https://img.shields.io/badge/Discord-5865F2?style=flat-square&logo=discord&logoColor=white" />
+<img src="https://img.shields.io/badge/Figma-F24E1E?style=flat-square&logo=figma&logoColor=white" />
+</p>
+<br/>
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## 프로젝트 소개 
 
-## Deploy on Vercel
+### 메인 페이지
+![pokehub1](https://github.com/side-project-pokehub/my-pokemon/assets/122417731/40c3bfe5-8692-400d-9003-c4b678c84d0c)
+### 도감 (속성 선택 x)
+![pokehub2](https://github.com/side-project-pokehub/my-pokemon/assets/122417731/8a871cd0-3c59-417e-be70-7a149a6e6a95)
+### 도감 (속성 선택)
+![pokehub3](https://github.com/side-project-pokehub/my-pokemon/assets/122417731/cac365ea-a20b-4341-bb9b-241ca176e6ff)
+### 카드 제작 페이지
+![pokehub4](https://github.com/side-project-pokehub/my-pokemon/assets/122417731/a8086332-ac0b-4ccb-a534-1c2b2b68a039)
+### 커뮤니티 페이지
+![pokehub5](https://github.com/side-project-pokehub/my-pokemon/assets/122417731/0a66d396-2078-4dac-92db-f3d353cc3ad0)
+### 마이 페이지
+![pokehub6](https://github.com/side-project-pokehub/my-pokemon/assets/122417731/d6523b78-bff4-43a6-82e2-bbd6914ef129)
 
-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.
+<br/><br/>
+## 시작하기
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+### clone project
+```bash
+$ git clone [email protected]:side-project-pokehub/my-pokemon.git
+```
+### open project
+```bash
+$ cd my-pokemon
+```
+### install
+```bash
+$ yarn install
+```
+### start
+```bash
+$ yarn dev
+```
+<br />