Merge pull request #219 from Team-TenTen/docs/readme

[Docs]: 리드미 업데이트

README.md

@@ -13,26 +13,68 @@
 - 슬랙 혹은 단톡방에서 팀원들이 해당 링크를 봤는지 확인하고 싶다.
 - 슬랙 혹은 카카오 단톡방에 링크를 공유하면 해당 링크를 본 인원들을 파악하고 싶다.
 - 지역 맛집 혹은 쇼핑몰 등을 검색하면 양질의 정보가 아닌 많은 광고들로 인해 정보를 필터링하는 추가적인 비용이 소모된다.
-## 🔗 핵심 기능 🔗
-- **링크 아카이빙**: 
-  <br>링크의 메타태그를 통해 자동으로 제목을 추천해주며 태그를 통해 추후 필터링의 용이성을 올림
-  <img width="948" alt="스크린샷 2024-01-23 오전 1 38 16" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/370b6e66-141d-415c-b685-5da911142f87">
-
-
-- **공유 아카이빙 공간**:
-  <br>스페이스 초대 기능을 통해 언제든지 팀원들을 초대할 수 있으며 viewer 및 editor 등의 세부 권한 지정이 가능하다. 또한 설정 시 팀원들의 링크 조회 이력을 표시할 수 있다.
-  <img width="957" alt="스크린샷 2024-01-23 오전 1 38 33" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/53bf0690-1e53-4e83-8db2-e140971eb1fd">
-
-
-- **즐겨찾기**:
-  <br>공개된 스페이스(링크 저장소)는 즐겨찾기 기능을 통해 구독을 할 수 있다. 또한 많은 유저들에게 즐겨찾기된 스페이스는 메인화면 즐겨찾기 순 옵션에서 상위에 노출되게 된다.
-  <img width="948" alt="스크린샷 2024-01-23 오전 1 38 47" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/5a6d8d7a-6dfe-4433-9b0f-878b2ef89741">
-
-
-- **가져오기**:
-  <br>공개된 스페이스를(링크 저장소) 복사하여 편집 가능한 나의 스페이스로 만들 수 있다. 즐겨찾기와 다르게 원본의 이후 변경사항은 반영되지 않는다.
-  <img width="955" alt="스크린샷 2024-01-23 오전 1 39 06" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/b4539f72-a9ff-4120-ad98-c431a2e26f9d">
 
+## 🔗 기능 시연 🔗
+### 메인 화면 및 검색
+  좋아요를 많이 받은 상위 링크들과 최신순 혹은 즐겨찾기 순의 스페이스(링크 저장소)를 필터링하여 보여준다. 또한 검색 기능을 제공하여 편의성 확보
+  <div style="text-align:center; margin-top:5px;">
+  <div style="display:inline-block; margin-right:10px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/14368d47-d597-4bac-a375-4886b10f3eb4">
+    <p style="margin-top:1px;">메인 페이지</p>
+  </div>
+  <div style="display:inline-block; margin-right:10px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/4ace19c3-0419-4955-a4de-1b2e355046de">
+    <p style="margin-top:1px;">스페이스(링크 저장소) 검색</p>
+  </div>
+  <div style="display:inline-block;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/de209ba9-8871-4953-b86e-18360a794269">
+    <p style="margin-top:1px;">유저 검색</p>
+  </div>
+  </div>
+
+### 링크 아카이빙
+  링크의 메타태그를 통해 자동으로 제목을 추천해주며 태그를 통해 추후 필터링의 용이성을 올림
+  <div style="text-align:center; margin-top:5px;">
+  <div style="display:inline-block; margin-right:10px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/73319202-e0eb-437d-8521-9907fc4bf856">
+    <p style="margin-top:1px;">링크 생성</p>
+  </div>
+  <div style="display:inline-block;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/18b07c5f-e369-4772-88c3-81e28a29c0ef">
+    <p style="margin-top:1px;">링크 필터링</p>
+  </div>
+  </div>
+
+### 공유 아카이빙 공간
+  스페이스 초대 기능을 통해 언제든지 팀원들을 초대할 수 있으며 viewer 및 editor 등의 세부 권한 지정이 가능하다. 또한 설정 시 팀원들의 링크 조회 이력을 표시할 수 있다.
+  <div style="text-align:center; margin-top:5px;">
+  <div style="display:inline-block; margin-right:10px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/cae806df-b646-491d-97ba-611179d92cc7">
+    <p style="margin-top:1px;">초대 하기</p>
+  </div>
+  <div style="display:inline-block; margin-right:10px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/9ed2649d-49ce-4209-9136-84b29e2a938e">
+    <p style="margin-top:1px;">초대 받기</p>
+  </div>
+  <div style="display:inline-block;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/e4748848-8b7e-41af-9a40-cb0de6524f28">
+    <p style="margin-top:1px;">링크 조회 이력 표시</p>
+  </div>
+  </div>
+
+### 즐겨찾기
+  공개된 스페이스(링크 저장소)는 즐겨찾기 기능을 통해 구독을 할 수 있다. 또한 많은 유저들에게 즐겨찾기된 스페이스는 메인화면 즐겨찾기 순 옵션에서 상위에 노출되게 된다.
+  <div style="text-align:center; margin-top:5px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/e7d6fc60-fe21-499c-bb9e-7c6db1d5354a">
+    <p style="margin-top:1px;">즐겨찾기</p>
+  </div>
+
+### 가져오기
+  공개된 스페이스를(링크 저장소) 복사하여 편집 가능한 나의 스페이스로 만들 수 있다. 즐겨찾기와 다르게 원본의 이후 변경사항은 반영되지 않는다.
+  <div style="text-align:center; margin-top:5px;">
+    <img height="300" src="https://github.com/Team-TenTen/LinkHub-BE/assets/108216455/e8757df5-c505-4473-a0d9-4412e8cf656e">
+    <p style="margin-top:1px;">가져오기</p>
+  </div>
 
 ## 👨‍👩‍👦 서버 팀원 소개
 | Team Leader |Developer |                                   Developer                                    |
@@ -44,17 +86,17 @@
 
 ## 💻 기술스택
 ### 개발 환경
-  <img src="https://img.shields.io/badge/java_17 -007396?style=for-the-badge&logo=java&logoColor=white"></a>
-  <img src="https://img.shields.io/badge/springboot 3.1.0-6DB33F?style=for-the-badge&logo=springboot&logoColor=white"></a>
-  <img src="https://img.shields.io/badge/-Spring Data JPA-gray?style=for-the-badge&logoColor=white"/></a>
-  <img src="https://img.shields.io/badge/Query DSL-0078D4?style=for-the-badge&logo=Spring Data JPA&logoColor=white"/></a>
-  <img src="https://img.shields.io/badge/mysql 8.0-4479A1?style=for-the-badge&logo=mysql&logoColor=white"> </a>
-  <img src="https://img.shields.io/badge/Redis-DC382D?style=for-the-badge&logo=redis&logoColor=white"/></a>
+<img src="https://img.shields.io/badge/java_17 -007396?style=for-the-badge&logo=java&logoColor=white"></a>
+<img src="https://img.shields.io/badge/springboot 3.1.0-6DB33F?style=for-the-badge&logo=springboot&logoColor=white"></a>
+<img src="https://img.shields.io/badge/-Spring Data JPA-gray?style=for-the-badge&logoColor=white"/></a>
+<img src="https://img.shields.io/badge/Query DSL-0078D4?style=for-the-badge&logo=Spring Data JPA&logoColor=white"/></a>
+<img src="https://img.shields.io/badge/mysql 8.0-4479A1?style=for-the-badge&logo=mysql&logoColor=white"> </a>
+<img src="https://img.shields.io/badge/Redis-DC382D?style=for-the-badge&logo=redis&logoColor=white"/></a>
 <img src="https://img.shields.io/badge/gradle-02303A?style=for-the-badge&logo=gradle&logoColor=white"></a>
-  <img src="https://img.shields.io/badge/Junit-25A162?style=for-the-badge&logo=JUnit5&logoColor=white"/></a>
-  <img src="https://img.shields.io/badge/Spring Security-6DB33F?style=for-the-badge&logo=spring-security&logoColor=white"/></a>
-  <img src="https://img.shields.io/badge/Spring Oauth2-000000?style=for-the-badge&logo=oauth2&logoColor=white"></a>
-  <img src="https://img.shields.io/badge/mapstruct-6DB33F?style=for-the-badge&logo=mapstruct&logoColor=white"></a>
+<img src="https://img.shields.io/badge/Junit-25A162?style=for-the-badge&logo=JUnit5&logoColor=white"/></a>
+<img src="https://img.shields.io/badge/Spring Security-6DB33F?style=for-the-badge&logo=spring-security&logoColor=white"/></a>
+<img src="https://img.shields.io/badge/Spring Oauth2-000000?style=for-the-badge&logo=oauth2&logoColor=white"></a>
+<img src="https://img.shields.io/badge/mapstruct-6DB33F?style=for-the-badge&logo=mapstruct&logoColor=white"></a>
 
 ### 인프라
 <img src="https://img.shields.io/badge/amazon aws-232F3E?style=for-the-badge&logo=amazonaws&logoColor=white"></a>
@@ -80,7 +122,7 @@
 ![스크린샷 2023-12-03 오후 4 44 07](https://github.com/Team-TenTen/LinkHub-BE/assets/90172648/15b82f59-5f85-4567-996d-66652ac44aa0)
 
 
-    
+
 ## 문서
 
 [📁 LinkHub API 명세서 ](https://www.notion.so/prgrms/API-c9e7dd4d09b246999a0022273810e4f7?pvs=4) <br>