README.md

✨ 빠르게 골라보는 나의 사진, 뭐 올릴지 고민 될 땐? 픽미! ✨

💡 Pic.me 서비스의 핵심 기능

📥 Maker

1️⃣ 투표 생성

사진 선택 및 제목 입력 단 두가지의 입력만으로 간단한 투표 생성을 진행합니다.

2️⃣ 링크 생성 및 공유

투표 링크 생성 및 인스타그램 공유하기 를 통해 링크게시를 유도합니다.

3️⃣ 투표 모아보기

진행했던 투표 목록을 모아보는 라이브러리 기능을 통해 투표 현황 및 결과를 조회합니다.

📥 Player

1️⃣ 투표 참여

인스타그램 스토리를 통해 링크 입장, 익명 투표 를 진행합니다

투표 참여자는 익명으로 투표 👉 (참여자는 로그인 X)

2️⃣ 이유 선택

사진 선택 후 이유 선택 진행 최종적으로 투표하기 를 통해 최종 투표를 완료합니다.

간단한 이유 선택 👉 (이유의 아이콘 화) 투표하기 클릭

3️⃣ 스티커 픽미

선택한 사진 위에 나의 시선이 머무른 곳에 스티커를 부착 하여 직관적으로 결과를 나타냅니다.

스티커 부착 뒤에는 현재까지 붙여진 스티커를 모두 나타내 현재 투표 상황을 보여줍니다.

👩‍💻 Pic.WEB

Happhee	woogisea	Brokyeom	pinktopaz	iamphj3
💛 서히 💛 Web FE	💚 우기 💚 Web FE	🤍 시루 🤍 Web FE	💖 떵경 💖 Web FE	💙 현디 💙 Web FE

⚒️ 기술 스택

    "typescript": "4.7.4"
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "axios": "^1.2.2",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "msw": "^0.49.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
    "recoil": "^0.7.6",
    "recoil-persist": "^4.2.0",
    "styled-components": "^5.3.6",
    "swr": "^2.0.0",
    "typescript": "^4.9.4",

---

✅ 커밋 컨벤션

제목	내용
init	작업 세팅 커밋 (패키지 설치 등)
feat	새로운 기능을 추가할 경우
style	기능에 영향을 주지 않는 커밋, 코드 순서, css등의 포맷에 관한 커밋
fix	버그를 고친 경우
refactor	프로덕션 코드 리팩토링
docs	문서를 수정한 경우, 파일 삭제, 파일명 수정 등 ex) README.md
chore	빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정
code review	코드 리뷰 반영

---

📁 폴더 구조

├── 📁 components
│  ├── 📁 common
│	 │   ├── Error.tsx
│	 │   ├── index.ts
│	 │   ├── Loading.tsx
│	 │   └── Router.tsx
│  ├── 📁 Auth
│  │  ├── Login.tsx
│  │  ├── Signup.tsx
│  │  └── index.ts
│  ├── 📁 Home
│  ├── 📁 Landing
│  ├── 📁 Layout
│  │  └── 📁 player
│	 │       ├── VotingLayout.tsx
│  │       └── index.ts
│  │  └── 📁 maker
│	 │       ├── VotingLayout.tsx
│  │       └── index.ts
│  ├── 📁 Library
│  ├── 📁 Voting
│  │  └── 📁 player
│	 │       ├── StickerVoting.tsx
│  │       └── index.ts
├── 📁 constant
│    └── StickerIconList.js
├── 📁 fonts
│  └── font.d.ts
├── 📁 lib
│  ├── 📁 api
│  │   └── vogting.ts
│  ├── 📁 hooks
│  │   └── vogting.ts
│  └── axios.ts
├── 📁 util
│  ├── 📁 hooks
│  ├── check.ts
│  └── escape.ts
├── 📁 pages
│  ├── 📁 player
│  │   ├── ImgChoice.tsx
│  │   ├── index.ts
│  │   └── Voting.tsx
│  ├── Error404.tsx
│  ├── Home.tsx
│  ├── Library.tsx
│  ├── Login.tsx
│  ├── MakerLanding.tsx
│  ├── PlayerLanding.tsx
│  ├── Signup.tsx
│  └── Voting.tsx
├── 📁 recoil
│ └── 📁 maker
│     ├── atom.ts
│     └── selector.ts
│ └── 📁 player
│     ├── atom.ts
│     └── selector.ts
├── 📁 styles
│  ├── globalFont.css
│  ├── styld.d.ts
│  ├── globalStyle.ts
│  └── themem.ts
├── 📁 types
│  ├── auth.ts
│  └── voting.ts
├── .env
├── .eslintrc.json
├── .gitgnore
├── .pnp.cjs
├── .pnp.loader.mjs
├── .yarnrc.yml
├── package.json
├── README.md
├── tsconfjg.json
├── webpack.config.js
└── yarn.lock