README.md 파일 수정

README.md

@@ -1,41 +1,89 @@
-<div align="center">
+![스크린샷 2024-01-23 오전 1 42 31](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/aa341f05-3915-425a-b439-c26e644425d9)
 
-![main](https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/3627e31b-e8fe-471f-a1df-6106a072d563)
+<br>
 
-<h1>LinkHub</h1>
+## 🔗 LinkHub 🔗
 
-[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fprgrms-fe-devcourse%2FFEDC4_Angola_NaYoung&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://hits.seeyoufarm.com)
+> 링크 아카이빙 및 공유 서비스
 
-<a href="https://link-hub.site/">LinkHub 바로가기</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://www.notion.so/prgrms/10-c76d868c091f457298748b77cca6ae86">팀 노션</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://www.notion.so/prgrms/LinkHub-546003d57aa34297a09ee98efa65cc25">기획서</a>
+<br>
 
-<br/>
+## 🔗 프로젝트 기간 🔗
 
-</div>
+> 프로젝트 기간 : 2023/10/10 ~ 2023/12/05
+
+<br>
 
-## 실행 방법
+## 🔗 프로젝트 기획 배경 및 동기 🔗
 
-```
-npm install
-```
+> 저희는 아래와 같은 불편함을 해결하기 위해 LinkHub 서비스를 기획했습니다.
 
-```
-npm run dev
-npm run build
-```
+- 기존 브라우저의 북마크만으로는 계층 별로 정리하거나 구분하기에 한계가 존재한다.
+- 기존 북마크의 경우, 묶인 링크를 한 사람만 확인할 수 있으며 다른 사용자와의 공유가 불편하다.
+- 슬랙 혹은 카카오 단톡방에 링크 공유 시 다른 텍스트 메시지들에 의해 해당 링크가 자주 묻힌다.
+- 슬랙 혹은 단톡방에서 팀원들이 해당 링크를 봤는지 확인하고 싶다.
+- 슬랙 혹은 카카오 단톡방에 링크를 공유하면 해당 링크를 본 인원들을 파악하고 싶다.
+- 지역 맛집 혹은 쇼핑몰 등을 검색하면 양질의 정보가 아닌 많은 광고들로 인해 정보를 필터링하는 추가적인 비용이 소모된다.
 
 <br>
 
-## 기술 스택
+## 🔗 기능 시연 🔗
 
-<div align="center">
-
-<img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/81a3591c-e7e7-4281-b172-33e265e77872">
+### 메인 화면 및 검색
 
-</div>
+좋아요를 많이 받은 상위 링크들과 최신순 혹은 즐겨찾기 순의 스페이스(링크 저장소)를 필터링하여 보여준다. 또한 검색 기능을 제공하여 편의성 확보
+| 메인 페이지 | 스페이스(링크 저장소) 검색 | 유저 검색 |
+|:---:|:---:|:---:|
+| ![메인 페이지](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/14368d47-d597-4bac-a375-4886b10f3eb4) | ![스페이스(링크 저장소) 검색](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/4ace19c3-0419-4955-a4de-1b2e355046de) | ![유저 검색](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/de209ba9-8871-4953-b86e-18360a794269) |
+
+<br>
+
+### 링크 아카이빙
+
+링크의 메타태그를 통해 자동으로 제목을 추천해 주며 태그를 통해 추후 필터링의 용이성을 올림
+| 링크 생성 | 링크 필터링 |
+|:---:|:---:|
+| <img src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/73319202-e0eb-437d-8521-9907fc4bf856" width="250"> | <img src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/18b07c5f-e369-4772-88c3-81e28a29c0ef" width="250"> |
+
+<br>
+
+### 공유 아카이빙 공간
+
+스페이스 초대 기능을 통해 언제든지 팀원들을 초대할 수 있으며 viewer 및 editor 등의 세부 권한 지정이 가능하다. 또한 설정 시 팀원들의 링크 조회 이력을 표시할 수 있다.
+| 초대 하기 | 초대 받기 | 링크 조회 이력 표시 |
+|:---:|:---:|:---:|
+| ![초대 하기](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/cae806df-b646-491d-97ba-611179d92cc7) | ![초대 받기](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/9ed2649d-49ce-4209-9136-84b29e2a938e) | ![링크 조회 이력 표시](https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/e4748848-8b7e-41af-9a40-cb0de6524f28) |
 
 <br>
 
-## 팀원 소개
+### 즐겨찾기
+
+공개된 스페이스(링크 저장소)는 즐겨찾기 기능을 통해 구독을 할 수 있다. 또한 많은 유저들에게 즐겨찾기된 스페이스는 메인화면 즐겨찾기 순 옵션에서 상위에 노출되게 된다.
+| 즐겨찾기 |
+|:---:|
+| <img src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/e7d6fc60-fe21-499c-bb9e-7c6db1d5354a" width="250"> |
+
+<br>
+
+### 가져오기
+
+공개된 스페이스(링크 저장소)를 복사하여 편집 가능한 나의 스페이스로 만들 수 있다. 즐겨찾기와 다르게 원본의 이후 변경사항은 반영되지 않는다.
+| 가져오기 |
+|:---:|
+| <img src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/e8757df5-c505-4473-a0d9-4412e8cf656e" width="250"> |
+
+<br>
+
+### 댓글
+
+댓글이 허용된 스페이스(링크 저장소)는 댓글을 작성할 수 있으며 대댓글도 작성할 수 있다.
+| 댓글 확인 | 댓글 쓰기 |
+|:---:|:---:|
+| <img src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/a3053906-45bf-4b42-9fec-4a9e92362e24" width="250"> | <img src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/92077dcd-04cf-4edb-b5ef-f8b8c5f57fdc" width="250"> |
+
+<br>
+
+## 👤 팀원 소개
 
 <div align="center">
 
@@ -59,37 +107,34 @@ npm run build
 
 <br>
 
-## 서비스 개요
+## 💻 기술 스택
 
-### LinkHub란 ?
+### 기술
 
-**링크 아카이빙 및 공유 서비스**
+<img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"></a>
+<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"></a>
+<img src="https://img.shields.io/badge/Tailwind-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white"></a>
+<img src="https://img.shields.io/badge/React Query-FF4154?style=for-the-badge&logo=reactquery&logoColor=white"></a>
+<img src="https://img.shields.io/badge/React Hook Form-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white"></a>
 
-<br>
+### 인프라
 
-### 서비스 주요 기능
+<img src="https://img.shields.io/badge/Amazon EC2-FF9900?style=for-the-badge&logo=amazonec2&logoColor=white"></a>
+<img src="https://img.shields.io/badge/Amazon S3-569A31?style=for-the-badge&logo=amazons3&logoColor=white"></a>
+<img src="https://img.shields.io/badge/NGINX-009639?style=for-the-badge&logo=nginx&logoColor=white"></a>
 
-**1. 링크 아카이빙** <br>
-
-  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/a1b91932-d7b1-41d4-82a3-110539a103d7">
-
-<br>
 <br>
 
-**2. 공유 아카이빙 공간** <br>
+## 👨‍👩‍👦 협업 툴
 
-  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/922bef19-3d59-47c9-841e-a8852a3a4dbc">
+|                                                  Notion                                                   |                                                       Slack                                                        |                                                        Discord                                                        |                                                        GitHub                                                        |                                                       Figma                                                        |
+| :-------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: |
+| <img src="https://img.shields.io/badge/Notion-FFFFFF?style=flat-square&logo=Notion&logoColor=black"/></a> | <img src="https://img.shields.io/badge/slack-232F3E?style=flat-square&logo=slack&logoColor=white&style=flat"/></a> | <img src="https://img.shields.io/badge/Discord-232F3E?style=flat-square&logo=Discord&logoColor=blue&style=flat"/></a> | <img src="https://img.shields.io/badge/Github-000000?style=flat-square&logo=Github&logoColor=white&style=flat"/></a> | <img src="https://img.shields.io/badge/Figma-50B584?style=flat-square&logo=Figma&logoColor=white&style=flat"/></a> |
 
 <br>
-<br>
-
-**3. 스페이스 즐겨찾기** <br>
-
-  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/3f8178e5-b808-4424-a0ca-ac7951d86e89">
-
-<br>
-<br>
 
-**4. 스페이스 가져오기** <br>
+## 문서
 
-  <img width="800" alt="image" src="https://github.com/Team-TenTen/LinkHub-FE/assets/39931980/02bf4698-e386-4794-92af-838eb8b2e404">
+[🔗 LinkHub 기획서](https://www.notion.so/prgrms/LinkHub-546003d57aa34297a09ee98efa65cc25?pvs=4) <br>
+[📔 LinkHub 유저 스토리 ](https://www.notion.so/prgrms/3306a1d774f74a3288e8f3f2a9ecb427?pvs=4) <br>
+[📁 LinkHub API 명세서 ](https://www.notion.so/prgrms/API-c9e7dd4d09b246999a0022273810e4f7?pvs=4) <br>