😋 맛남의 길
팀명
- 러비더기
프로젝트 이름
- 맛남의 길 (맛남 Road)
서비스 기획 배경 및 필요성
맛남의 길 서비스 기획은 광고나 마케팅이 아닌, 지역 사람들이 진심으로 추천하는 맛집을 찾는 데에 중점을 두었습니다.
맛남의 길은 3가지 필요에 의해 탄생했습니다.
마케팅이 필요없는 로컬 맛집
유명한 음식점들의 경우 진짜 맛이 있다기보다 일회성 방문객들을 대상으로 한 마케팅 전략에 의존하는 경향이 있습니다. 하지만 맛남의 길 서비스는 지역민들에게 오랜 시간 사랑받고 있는, 소위 ‘진짜’ 맛집을 탐색하는 데 초점을 맞추어 진정성 있는 식사 경험을 제공할 것입니다.
명확한 운영 정보
많은 음식점들이 운영 정보를 충분히 제공하지 않아 소비자들이 불편을 겪고 있습니다. 휴무일, 영업시간, 브레이크 타임 등의 정보가 부족하면 방문 계획을 세우는 데 어려움이 있으므로, 우리 서비스는 이러한 정보를 명확하고 쉽게 제공함으로써 소비자들의 불편을 해소하고자 합니다.
과장없는 솔직한 후기
SNS와 블로그 상의 광고와 과장된 정보가 넘쳐나는 상황에서 신뢰할 수 있는 최신 정보와 정확한 후기를 찾기 쉽지 않습니다. 이런 문제를 해결하기 위해, 우리 서비스는 사용자들에게 검증된, 신뢰할 수 있는 식당 정보와 솔직한 후기를 제공하려 합니다. 이를 통해, 소비자들은 더 정확하고 신뢰할 수 있는 음식점 선택을 할 수 있게 될 것입니다.
이러한 서비스의 제공은 소비자들에게 더욱 만족스러운 식사 경험을 제공할 것입니다.
핵심 기능
- 자발적 맛집 리뷰 참여이므로, 지역인들 간의 맛집 공유를 목표로 한 진짜 후기 기대 가능
좋아요/싫어요를 사용해 맛집 후기에 대한 평가를 내릴 수 있음
벤치마킹
타겟층
- 맛집에 진심인 사람들
- sns로 맛집 찾기를 즐기는 10대 ~ 30대
- 오프 모임 후 맛집에 굶주려 있는 프롱이들
기대효과
- 맛집 인증을 통한 높은 신뢰도 확보
- 부정확하고 불확실한 정보 및 과대 광고를 거를 수 있으므로 편의성 증가
Github 주소
🛠️ 기술 스택
언어 | TypeScript |
라이브러리 | React |
전역 상태 | Recoil |
서버 상태 | React Query |
번들러 | Vite |
스타일링 | @emotion/styled |
협업 툴 | Notion, Slack, Discord, Github, Figma |
API | axios |
코드 포맷팅 | eslint, prettier, husky |
브랜치 전략 | Github Flow + dev 브랜치 추가 |
배포 툴 | Vercel |
기능 명세서
맛남의 길 기능 명세서
와이어프레임
Prettier
{ "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, "bracketSameLine": true }
ESLint
plugins
- "unused-imports"
- "simple-import-sort”
- "no-unused-vars": "warn"
// 사용해보고 싶은 rules나 plugin이 있다면 자유롭게 추가해주세요!!
코딩 컨벤션
규칙 | 설명 | 비고 |
풀네임을 사용하도록 한다. | btnX buttonO | ㅤ |
함수 표현식 사용 | 변수 혹은 타입
export const func = () => {}
컴포넌트, 페이지
export default func = () ⇒ {} | ㅤ |
src경로는 @를 사용합니다. | tsconfig.json, vite.config.ts 설정 참고 | ㅤ |
함수 네이밍 규칙_세부항목 | prop -> onChangeHandler
func -> handleChange
init, props 같은 약속된 축약어 허용 | ㅤ |
eslint, prettier 설정 | airbnb 기반 설정, 필요한 경우 airbnb 기반에 추가로 설정 | ㅤ |
주석여부 | 필요할 경우 함수 혹은 변수 정의 상단에 기입하기
main 브랜치에 병합시 모든 주석 제거
dev, feat 브랜치에는 주석 유지 | ㅤ |
상수 관리 | constants 폴더에서 기능.ts 파일로 관리한다. | ㅤ |
스타일 상수 관리 | styles 폴더에 theme.ts 파일을 정의해서 사용한다. | ㅤ |
컴포넌트 export 방식 | export default function 방식을 사용한다. | ㅤ |
컴포넌트 및 페이지 작업 방식 | 컴포넌트의 이름으로 폴더를 만들고 관련 코드를 index.tsx에 선언한다. emotion과 관련된 스타일링 코드는 style.ts에서 선언하고 index.tsx 파일에서 import하는 방식으로 작업한다. | ㅤ |
함수 컨벤션
// 컴포넌트 export default function Main() { } // 함수 export const function1 = () => {}
디렉토리 구조
📦 src ├── 📂 assets (이미지, 폰트) ├── 📂 atoms (recoil) |── 📂 components (컴포넌트) | ├── 📂 Common (재사용가능) | └── 📂 관심사별로 분리하기 ├── 📂 constants (상수값) ├── 📂 services (API 서비스 로직) ├── 📂 hooks (react hook -> useState, useEffect 사용하는 애들) ├── 📂 pages (페이지별 컴포넌트) ├── 📂 types (타입 선언) └── 📂 utils (유틸 함수 -> 순수 함수)
Vite alias 설정
// @/~로 통일 alias: { '@': path.resolve(__dirname, './src'), },
폰트
컬러
😀 협업 방식
- 디스코드
- 노션
- 슬랙
- 피그마
- 디스코드