📝 readme 업데이트

README.md

@@ -16,32 +16,13 @@
 <p align="center"> <strong>꿀매 정보 교류 커뮤니티 서비스</strong>
     <br> 
 </p>
+<br/>
 
-## 📝 Table of Contents
-- [프로젝트 개요](#project_intro)
-- [팀원 소개](#team_intro)
-- [서비스 기능](#service_function)
-- [디자인](#design)
-- [개발 환경 설정](#getting_started)
-- [기술 스택](#tech_stack)
-- [기타](#acknowledgments)
-
-<br><br>  
-
-## 🍯 프로젝트 개요 <a name = "project_intro"></a>
-고물가 시대에서 싸고 좋은 물건을 구매하는 것은 쉬운 일이 아닙니다. 
-또한 스스로 산 물건이 싸게 잘 샀는지 판단하는 일 또한 쉬운 일은 아닙니다.
-저희 팀은 이런 어려움에 초점을 맞춰 <strong>꿀매포청천</strong> 이란 서비스를 기획했습니다.<br>
-
-<strong>꿀매</strong>란 꿀처럼 달콤한 매물이란 뜻으로 소비자가 저렴한 가격에 좋은 상품을 구입할 때 주로 사용하는 말 입니다. 
-꿀매포청천은 꿀매란 키워드에서 아이디어를 얻어 사람들과의 커뮤니케이션을 통해 이 매물을 좋은 가격에 구매했는지 아닌 지를 판단해 볼 수 있는 서비스를 제공합니다.<br>
-
-꿀매포청천에서 <strong>포청천</strong>이란 중국 송나라 때의 문신이자 유명한 정치가로, 명판관으로 유명합니다. 
-저희 서비스는 이 물건이 꿀매인지 아닌지를 사람들과의 커뮤니케이션을 통해 판단하는 기능을 제공하는데 이러한 점에서 연관성을 찾아 아이디어를 내게 되었습니다.
-
-<br><br> 
+**[홈페이지](https://price-pcc.vercel.app/)**
+<br/>
 
 ## ✍️ 팀원 소개 <a name = "team_intro"></a>
+
 <table>
   <tbody>
     <tr>
@@ -54,9 +35,18 @@
   </tbody>
 </table>
 
-<br><br> 
+<br><br>
+
+## 🍯 프로젝트 개요 <a name = "project_intro"></a>
+
+- **중고거래 서비스**가 이제는 일반적일 정도로 성행하고 있고, 각 관심사로 뭉친 커뮤니티는 셀 수 없이 많습니다.
+- 과거와는 달리 넘치는 정보의 바다 속에서 현대인들은 본인의 판단이 맞는지 쉽게 확신하지 못하고 **타인에게 확인 받고자 하는 경향**이 있습니다.
+- 저희는 이런 두 가지의 포인트를 결합하여 사용자들이 각자의 구매 또는 구매 예정에 대해 **공유하고 피드백** 할 수 있는 웹 사이트를 제작하기로 했습니다.
+
+<br><br>
 
 ## ⛓️ 서비스 기능 <a name = "service_function"></a>
+
 - 로그인 / 회원가입
 - 포스트 글 작성 및 수정
 - 댓글
@@ -65,73 +55,82 @@
 - 알림
 - 다크모드
 
-<br><br>  
+<br/>
+#### 상세한 정보가 궁금하다면?
+[유튜브 링크](https://www.youtube.com/watch?v=i837NMZmLk8&ab_channel=%EC%A7%80%EA%B7%B8%EC%9E%AC%EA%B7%B8)
+<br/>
 
-## 🚀 디자인 <a name = "design"></a>
-디자인은 피그마로 작업했으며, 라이트 모드와 다크 모드가 있습니다. <br>
-메인 컬러는 노란색으로 정했으며, 꿀매란 단어에서 연상된 꿀을 대표 이미지로 구성했습니다.
-<p align="center">
-<img width="1279" alt="image" src="https://github.com/prgrms-fe-devcourse/FEDC4_Price-PCC_DONGYOUNG/assets/83554018/cdf9d53d-b76f-411b-9548-aa384fe908c1">
-</p>
-
-<br><br>  
-
-## 🏁 개발 환경 설정 <a name = "getting_started"></a>
-These instructions will get you a copy of the project up and running on your local machine for development 
-and testing purposes. See [deployment](#deployment) for notes on how to deploy the project on a live system.
-
-### 설치
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## ⛏️ 기술 스택 <a name = "tech_stack"></a>
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+<div style={display: 'flex'}>
+  <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/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
+  <img src="https://img.shields.io/badge/axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white">
+  <img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=reactquery&logoColor=white">
+  <img src="https://img.shields.io/badge/sass-CC6699?style=for-the-badge&logo=sass&logoColor=white">
+  <img src="https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
+  <img src="https://img.shields.io/badge/figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white">
+</div>
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+- NextJS 13 App Router
 
-#### Learn More
+<br/>
 
-To learn more about Next.js, take a look at the following resources:
+## 🏁 개발 환경 설정 <a name = "getting_started"></a>
 
-- [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.
+### 프로젝트 클론
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```
+git clone https://github.com/prgrms-fe-devcourse/FEDC4_Price-PCC_DONGYOUNG.git
+```
 
-<br>
+### 설치 및 실행
 
-### 배포 환경
+```bash
+# 의존성 설치
+npm install
+or
+pnpm install
+or
+yarn install
+...
+
+# 개발 모드 실행
+npm run dev
 
-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.
+# 빌드 후 실행
+npm run build
+npm run start
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
-<br><br>  
+# storybook 실행
+npm run storybook
+```
 
-## ⛏️ 기술 스택 <a name = "tech_stack"></a>
-<div style={display: 'flex'}>
-  <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=white">
-  <img src="https://img.shields.io/badge/typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
-  <img src="https://img.shields.io/badge/axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white">
-  <img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=reactquery&logoColor=white">
-  <img src="https://img.shields.io/badge/sass-CC6699?style=for-the-badge&logo=sass&logoColor=white">
-  <img src="https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
-  <img src="https://img.shields.io/badge/figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white">
-</div>
+### 커밋 메세지 규칙
 
+```bash
+- 🎉 (tada) 새로운 기능 추가
+- 🐛 (bug) 버그 수정
+- 🚧 (construction) 작업 진행 중
+- 📝 (memo) 문서 작성
+- 🧪 (test_tube) 테스트 코드 작성
+- ✨ (sparkles) 리팩토링
+- 🔥 (fire) 코드 삭제
+- 🧹 (broom) 코드 정리 - lint
+- 🚚 (truck) 파일 이동
+```
 
-<br><br>  
+### 환경 변수
 
-## 🎉 기타(참고자료) <a name = "acknowledgments"></a>
-- [Next.js](https://nextjs.org/blog/next-13)
-- [React](https://ko.legacy.reactjs.org/)
-- [Tanstack Query](https://github.com/TanStack/query)
+```bash
+# 외부 API 주소
+NEXT_PUBLIC_API_ADDRESS=
+# 배포 도메인
+NEXT_PUBLIC_API_INTERNAL_ADDRESS=
+# 기본 채널 ID
+NEXT_PUBLIC_CHANNEL_ID=
+# 좋아요 저장 채널 ID
+NEXT_PUBLIC_LIKE_CHANNEL_ID=
+# 싫어요 저장 채널 ID
+NEXT_PUBLIC_DISLIKE_CHANNEL_ID=
+```