참,외롭다 : 외로움 자랑 월드컵

" 참,외롭다 "의 핵심 기능

1️⃣ 외로움 이상형 월드컵

누가 제일 외로운지 월드컵 :
다른 사람들이 올린 외로움 인증샷들 중에 누가 가장 외로워 보이는지 월드컵을 한다. 월드컵은 8강으로 구성되어 있다. 해당 월드컵에서 우승한 게시물은 URL을 복사하여 다른 사람들에게 공유할 수 있다.

2️⃣ 외로움 월드컵 랭킹 리스트

월드컵 랭킹리스트 :
사람들이 진행한 월드컵에서 몇번 1위했는가 기록을 바탕으로 외로움 인증샷의 전체 랭킹리스트를 1위부터 20위까지 보여준다. 랭킹리스트에서 게시물을 클릭하면 게시글을 상세페이지로 보여주며, 해당 게시물의 링크를 복사하여 공유하는 것도 가능하다.

3️⃣ 내 외로움 공유하기

내 외로움도 월드컵에 공유
사용자가 직접 본인만의 외로움 인증샷을 닉네임과 한줄설명과 함께 업로드 하여, 본인도 외로움 월드컵에 참여할 수 있도록 하는 기능. 본인이 공유한 인증샷 게시글의 링크를 다른 사람에게 공유하는 것도 가능하다.

💙 4조 웨비들 💙

@iamphj3	@eastlaw80	@parkheeddong
박현지	이동헌	박희정
게시글 상세조회 : `GET` 게시글 토너먼트 이미지 리스트 제공 : `GET`	게시글 업로드 조회 : `POST`	게시글 랭킹 리스트 조회 : `GET` 게시글 랭킹 업데이트 : `PATCH`

🛠 기술스택

역할	종류
Library
Programming Language
Styling
Data Fetching
Formatting
Package Manager
Version Control

💡 주요 라이브러리

    "react-copy-to-clipboard": "^5.1.0",

📄 컨벤션 및 브랜치 전략

🔗 노션 링크

4조 WEB 컨벤션 및 초기 세팅

✅ 커밋 컨벤션

제목	내용
init	브랜치 첫 커밋
feat	새로운 기능에 대한 커밋
fix	버그 수정에 대한 커밋
build	빌드 관련 파일 수정에 대한 커밋
chore	그 외 자잘한 수정에 대한 커밋
ci	CI 관련 설정 수정에 대한 커밋
docs	문서 수정에 대한 커밋
style	style: 코드 스타일 혹은 포맷 등에 관한 커밋
refactor	코드 리팩토링에 대한 커밋

🍞 컴포넌트 및 함수 이름 컨벤션

🐥 **컴포넌트 생성 방식**

- 화살표 함수 사용 `const Main = () -> {}`

🐳  **함수 이름 컨벤션**

- const handle이벤트명 = () ⇒ {}
- handleClick, handleSubmit, ...
- Camel Case 사용

🌟 브랜치 전략

main > 각자의 브랜치
ex ) main ← feature/hyeonji, feature/dongheon, feature/hejung
각자의 브랜치에서 pull request 하고 main에 merge

📁 폴더 구조

├─ src
│  ├─ App.jsx
│  ├─ Router.jsx
│  ├─ assets
│  │  ├─ img
│  │  │  └─ index.js
│  │  ├─ index.js
│  ├─ components
│  │  ├─ Game
│  │  │  ├─ GameMain.jsx
│  │  │  └─ GameResult.jsx
│  │  ├─ Landing
│  │  │  └─ Landing.jsx
│  │  ├─ Post
│  │  │  ├─ Post.jsx
│  │  │  ├─ PostComplete.jsx
│  │  │  └─ PostModal.jsx
│  │  ├─ Ranking
│  │  │  ├─ Ranker.jsx
│  │  │  ├─ Ranking.jsx
│  │  │  ├─ RankingCard.jsx
│  │  │  └─ RankingDetail.jsx
│  │  ├─ Winner
│  │  │  └─ Winner.jsx
│  │  └─ common
│  │     ├─ Header.jsx
│  │     └─ Share.jsx
│  ├─ data
│  │  └─ worldcupList.js
│  ├─ lib
│  │  ├─ api.js
│  │  └─ axios.js
│  ├─ main.jsx
│  ├─ pages
│  │  ├─ GamePage.jsx
│  │  ├─ GameResultPage.jsx
│  │  ├─ LandingPage.jsx
│  │  ├─ PostCompletePage.jsx
│  │  ├─ PostPage.jsx
│  │  ├─ RankingDetailPage.jsx
│  │  ├─ RankingPage.jsx
│  │  ├─ SharePage.jsx
│  │  └─ WinnerPage.jsx
│  └─ styles
      └─ GlobalStyle.jsx