내일배움캠프 최종 프로젝트 시작...

Louis·2024년 1월 4일

기획 내일배움캠프 팀스파르타 프로젝트

안녕하세요!
오늘은 드디어 최종 프로젝트를 시작했습니다..!!

이번에는 그냥 팀원이 아닌 리더로 프로젝트를 시작했습니다

오늘은 기획에 시간을 쓰고 처음으로 만난 디자이너분과의 소통도 이뤄졌습니다

어쩌다 보니 정신 없이 보낸 하루입니다...

그래서 오늘은 기획서로 포스팅을 하려고 합니다...

그럼 바로 시작하시죠...

프로젝트 개요

프로젝트 명 : 모-음 (모두의 음식점)
소개
- 한 줄 정리 : 이용자들의 위치에 따라 착한가격업소의 정보를 제공하며, 식당의 간략한 평가와 커뮤니티를 통해 사용자간의 정보 공유가 이루어짐.
- 내용 : 행정안전부의 착한가격업소 API와 카카오 위치 API를 이용하여 지역, 현재 위치에 따라 저렴한 가격의 식당을 소개 해주고, 커뮤니티 사이트를 통해 사용자간의 정보 공유를 할 수 있습니다. 착한가격업소의 선정 기준을 소개해주고, 식당의 가격이나 맛, 가격, 서비스, 위생에 대한 후기를 볼 수 있으며, 한 사람당 한 번씩 “추천해요”를 눌러서 해당 표를 많이 받는 “이달의 착한 식당 랭킹”이라는 서비스를 도입 했습니다. 지역상인과 소비자가 Win-Win 할 수 있게 독려하는 서비스를 제공합니다.

제공 서비스

어떤 가게가 착한 가격 업소일까요? 선정 기준 보여주기
이달의 착한식당 랭킹 서비스 도입 - 한 사람당 추천해요 한번씩, 사이드? 메인슬라이드?
현 위치에 (구 기준) 있는 식당 모아보기 - 자세히 보기 클릭 시 지도에 식당들을 마커로 표시 (선택)
후기 올릴 때 태그로 업로드 (총 4가지 항목의 3단계로 나누기)
- 가격: 저렴해요 , 적당해요, 가격이 달라요
- 맛: 또갈래요, 무난해요, 아쉬워요
- 서비스: 친절해요, 무난해요, 아쉬워요
- 위생: 깨끗해요, 무난해요, 아쉬워요
태그별로 모아보기
식당을 클릭하면 해당 후기 태그들이 나옴
처음에 필터를 하고(시, 구) 검색 버튼을 누르면 해당 지역의 식당이 마커로 찍힘 - 시, 구 모두 선택해야 검색 버튼 활성화
1) 선택 지역의 식당들을 마커로 지도에 표시 → 마커를 클릭 시 해당 식당의 상세페이지로 이동
2) 선택 지역의 식당들을 리스트로 표시 → 리스트를 클릭 시 해당 식당의 상세페이지로 이동
상세 페이지 - 식당 위치 지도 표시, 후기 태그 남기기
식당 상세페이지
- 가게이름, 가게주소, 가게번호, 대표메뉴
- 많이 받은 태그를 하나만 노출 - 뱃지로 구현
- 정보수정 제안, 후기 남기기, 후기 모아보기 - 후기는 로그인 한 회원만
커뮤니티 - CRUD
로그인 - 일반, 소셜 (구글, 카카오톡)

각 페이지별 기능

로그인 / 회원가입
- 일반, 소셜(구글, 카카오)
메인페이지 - 검색 위주
- 유저의 현재 지역 확인 → 자세히 보기 → 그 지역의 착한가게를 지도에 마커 → 마커를 클릭 시 상세페이지로
- 필터 검색창을 모달로 띄우기 → 필터 → 착한 가게를 리스트로 정렬 → 리스트 클릭 시 상세페이지로
- 이달의 착한 가게 랭킹 (평가 카테고리별 세 음식점)
상세페이지
- 가게 정보 및 위치
- 태그로 남길 수 있는 간편 리뷰
- 로그인 하지 않은 사람은 비활성화
커뮤니티 페이지
- 게시글 및 댓글 CRUD
- 게시글 검색 기능
- 게시글 좋아요, 클립보드 공유
- 게시글 조회수
마이페이지
- 내가 남긴 게시글 및 댓글
- 내가 누른 “추천해요”
- 프로필 수정 (닉네임, 사진)

사용 기술 스택

Next.js - 페이지의 초기 로딩 속도 향상, 검색 엔진 최적화(SEO), 코드 분할(Code splitting) 등의 성능 및 효율성을 제공
TypeScript - 예측 가능하고 안정적인 코드 작성, 강력한 개발 도구 지원, 효과적인 협업
Tailwind CSS - 사용자 정의 CSS 코드를 작성하지 않고도 HTML 요소의 스타일을 지정하는 데 사용할 수 있음
Redux Toolkit - 전역 상태 관리 도구
Zustand - 전역 상태 관리 도구 (리덕스와 함께)
Tanstack React Query - 비동기 관련 로직과 상태를 관리
Firebase - 사용자 인증과 데이터베이스 등의 서버 기능 제공
yarn, prettierrc, 절대경로

회원가입

createUserWithEmailAndPassword // firebase

{
"id" : "abc",
"password" : " ",
"nickName" : " " 
}

오픈API 착한가게정보

GET // openAPI

[{
      "가격1": 8000,
      "가격2": 14000,
      "가격3": null,
      "메뉴1": "청국장",
      "메뉴2": "갈치탕",
      "메뉴3": null,
      "시군": "안산시 단원구",
      "시도": "경기도",
      "업소명": "청국장이랑갈비찜",
      "업종": "한식_일반",
      "연락처": "031-402-9276",
      "주소": "경기도안산시 단원구원포공원1로 70 127호(초지동, 키즈타운)"
    }