🖿 LinkShare (링크)

🖿 LinkShare는 정보 저장 및 공유 SNS입니다. 제공하는 주요기능은 아래와 같습니다.

• 카테고리별 웹사이트 정보 저장 기능
• 저장한 웹사이트 공유 기능
• 웹사이트 로드맵 작성 기능

📑 목차

1. 기획 배경
2. 디자인
3. 주요기능
4. 기술 스택
5. 아키텍처
6. 파일구조
7. 팀소개
8. 기타 관련 정보

💡 기획 배경

• 참고한 사이트를 한곳에 모아 놓을 수 없을까?

  프로젝트를 진행하다보면 어느새 무한 구글링...

  우연히 찾은 금쪽같은 참고자료들, 나중에 또 필요할 것 같은데...

  도움이 된 글이나 링크를 메모랑 같이 어딘가에 모아놓을 수 없을까?

• 참고한 자료를 공유해보면 어떨까?

  눈을 감으면 떠오르는 삽질의 기억들...

  다른 사람들도 나와 같은 길을 걸었겠지...

  내가 참고한 웹사이트를 순서대로 장리해서 공유해보면 어떨까?

  다른 사람들이 어떻게 공부했는지도 궁금하고 의견도 나눠보고 싶어.

✒️ 디자인

컨셉

• 심플함 추구해 가독성과 편의성 극대화
• 심플한 레이아웃 및 UI/UX
• 직관적인 사용법
• 테마컬러 : #2C97DE

로고

• material design icons의 folder icon 사용
• 여러 링크정보를 한 데 모아 관리하는 컨셉이 폴더 개념과 유사해 폴더 아이콘 사용

⚙️ 주요기능

• 링크박스 기능

  • 유저가 생성할 수 있는 웹사이트 정보 모음 폴더입니다.
  • 링크박스를 생성해 내부에 링크카드를 저장할 수 있습니다. 링크박스 생성시 해당 링크박스에 대한 제목, 개요, 관심사(해시태그)를 추가할 수 있습니다.

  

• 링크카드 기능

  • 링크카드 내부에 생성되는 개별 웹사이트 정보입니다.
  • 해당 링크에 대한 제목과 간단한 메모를 추가할 수 있습니다.

  

• 플로우차트 작성 기능

  • 링크박스 내 링크카드로 구성된 플로우차트입니다.
  • 하나의 링크박스마다 하나의 링크트리를 생성할 수 있습니다.

  

• 링크박스 공유 기능

  • 생성한 링크박스는 다른 유저들에게 노출되며, 좋아요, 스크랩, 댓글 기능을 통해 유저간 상호 교류가 가능합니다.
  • 좋아요 수가 많은 순으로 인기 링크박스들이 뉴스피드에 노출됩니다.

  

• 링크박스 추천 기능

  • 프로필 화면에서 유저의 관심사를 추가할 수 있습니다.
  • 이를 바탕으로 관심사가 일치하는 링크박스들이 뉴스피드에 노출됩니다.

  

💻 기술 스택

Frontend

• Vue 2.6.11
• vue-cli 4.5.15

vue-cli, Vue, Vuex, Vue-router, Vuetify, node.js, javascript,
jwt-decode, Vue Flowy, link-prevue, vee-validate

Backend

• Java 11 (LTS) | 11.0.14+9 | Zulu: 11.54.23
• SpringBoot 2.6.3

Java, SpringBoot, Gradle, JPA,
JWT, Spring Security, Spring Validation, Lombok, spring data jpa

Database

• MySQL

Dev-Ops

AWS EC2,AWS S3, AWS RDS, Jenkins, Docker, NginX

🔧 아키텍처

🗃 파일구조

📁linkshare-backend
├── 📁src
|    ├── 📁main
|    │   ├── 📁java/com/web/ls
|    │   │   ├── 📁config
|      │   │   |   └──📁security
|    │   │   ├── 📁controller
|      │   │   |   ├──📁linkbox
|    │   │   │   └──📁user
|    │   │   ├── 📁exception
|    │   │   ├── 📁model
|    │   │   │   ├── 📁dto
|    |   |   |   |   ├──📁follow
|    │   │   │   |   ├──📁linkbox
|    |   |   |   |   |  ├──📁comment
|    |   |   |   |   |  ├──📁like
|    |   |   |   |   |  ├──📁linkdetail
|    |   |   |   |   |  └──📁linktree
|    |   |   |   |   └──📁user
|    │   │   │   ├── 📁entity
|    │   │   │   ├── 📁repository
|    │   │   │   └── 📁service
|    │   │   └── MainApplication
|    │   └── 📁resources
|    └── 📁test
|
📁frontend
├── 📁public
├── 📁src
|　　├── 📁api
|　　├── 📁assets
|　　├── 📁components
│  　├── 📁comment
|    │   ├──  📁like
|    │   ├──  📁linkboxdetail
|    │   ├──  📁navigation
|    │   ├──  📁profile
|    │   ├──  📁scrap
|    │   └── 📁snsLogin
|　　├── 📁config
|　　├── 📁plugins
|　　├── 📁router
|　　├── 📁store
|　　└── 📁views
├── 📁venv
└── 📁vue-test

🥊 A603팀 소개

• 강동원 : 팀장 & FE
• 전슬민 : FE
• 염형덕 : BE
• 정원식 : BE

📚 기타 관련 정보

구분	이름	링크
기획	기능명세	노션-기능명세
설계	와이어프레임	노션-와이어프레임
설계	ERD	노션-ERD
설계	API docs	노션-API docs
기타	회의록	노션-회의록
기타	TIL	노션-TIL