절로가 (Jeolloga)

내 마음에 딱 맞는 템플스테이를 찾아주는 힐링 추천 서비스

❕템플스테이 간편 탐색 서비스❕

템플스테이를 만나는 가장 쉬운 방법, 절로가

🪷 프로젝트 소개

당신의 평범한 하루에 특별한 힐링을 더해보세요.

‘절로가’는 템플스테이를 시작하고 싶지만, 복잡한 탐색에 어려움을 느끼는 분들을 위한 서비스입니다.

개인의 취향과 목적에 맞는 템플스테이를 쉽고 빠르게 발견할 수 있도록 안내합니다.

👶 OUR TEAM

성희	태욱	영경	가현
@seong-hui	@Taew00k	@bykbyk0401	@maylh

🛠 기술 스택 및 선정 이유 (Tech Stack)

역할	기술	선정 이유
Library		컴포넌트 기반 아키텍처로 재사용성과 유지보수성이 뛰어남. 풍부한 생태계로 다양한 라이브러리와 쉽게 통합 가능. 동적 UI 개발에 적합하고, 가상 DOM을 활용해 빠른 렌더링 성능 제공.
Programming Language		안정적인 코드 작성과 협업 시 타입 보장이 가능, 유지보수성이 뛰어남
Styling		CSS-in-TypeScript 방식으로 타입 안전성을 제공하며, 런타임 오버헤드 없이 빌드 시 정적 CSS로 추출. 동적 스타일링과 모듈화된 스타일 관리가 용이하고, 유지보수성과 협업 효율성을 높임.
Data Fetching		Axios: HTTP 요청을 처리하며 인터셉터 설정으로 요청/응답 관리가 용이 TanStack Query: 비동기 데이터 상태 관리에 특화, 캐싱 · 중복 요청 제거 · 자동 리페치 기능으로 효율적인 데이터 관리
UI Development		UI 컴포넌트 개발 및 테스트 편의성 제공, 디자이너와의 원활한 소통 가능
Formatting		코드 일관성을 유지하고, 가독성을 높이며, 스타일 컨벤션을 통합적으로 관리
Package Manager		빠르고 효율적인 패키지 관리 및 의존성 설치
Version Control		코드 버전 관리와 협업에 필수적인 도구
Deployment		초기 배포에 적합한 플랫폼으로, 간편한 설정과 빠른 배포 가능 추후 AWS로 확장 가능

🪷 서비스 핵심 기능

1️⃣ 로그인/온보딩

로그인/온보딩 뷰

• 카카오 소셜로그인 후 온보딩 과정 진행
• 총 4가지 단계
• 나이, 성별 단계는 필수 클릭
• 종교, 이용경험 단계는 패스 가능
• 새로고침 시 현재 단계의 정보 새로고침
• 이전, 이후 단계의 선택값 기억

2️⃣ 홈페이지

홈페이지 뷰

• 검색 아이콘 클릭 시 검색 페이지로 이동
• 마이 아이콘 클릭 시 마이페이지로 이동
• 위시 아이콘 클릭 시 위시리스트 페이지로 이동
• 둘러보기 : 전체검색 필터 검색페이지로 이동
• 지역 선택 시 지역 필터링 페이지로 이동
• 템플스테이 소개 큐레이션
• 인기 템플스테이 캐러셀
• 로그인하지 않은 회원이 캐러셀 내 찜하기 버튼 클릭 시 로그인 안내 모달창 생성
• 로그인 회원이 찜하기 버튼 클릭 시 위시에 추가

3️⃣ 검색

검색 뷰

• 검색 창에 검색어 입력 시 검색 결과 리스트
    ◦ 해당되는 검색 결과 없으면 empty뷰
• 필터링 슬라이드 클릭 시 필터링 페이지로 연결
• 검색 아이콘 누르면 검색 페이지로 이동
    ◦ 최근 검색어 나열(10개)
    ◦ 전체 삭제 가능
    ◦ 이전과 동일한 검색어 입력 시 최근 검색어로 동기화
    ◦ 최근 검색어 버튼 누르면 해당 검색어 검새 결과 리스트로 연결
• 로그인하지 않은 회원이 결과 리스트 내 찜하기 버튼 클릭 시 로그인 안내 모달창 생성
• 로그인 회원이 찜하기 버튼 클릭 시 위시에 추가

4️⃣ 필터링

필터링 뷰

• 상단의 필터타입 클릭 시 해당 타입으로 화면 이동
• 가격 범위 선정 바 구현
• 버튼 클릭 시 해당 필터 적용된 검색 결과 페이지로 이동

5️⃣ 상세 페이지

상세페이지 뷰

• 템플스테이 카드 클릭 시 상세 정보 페이지로 이동
• 목록 탭바 사라지면 상단에 고정되도록 구현
• 목록 누르면 해당 카테고리로 이동
• 목록 결과값 없을 경우 정보 없음 띄우기
• 썸네일 이미지 없을 경우 empty 이미지
• 리뷰 스크롤
• 템플스테이 정보 더보기, 접어두기 구현
• 네이버 지도 연결
• 로그인하지 않은 회원이 해당 템플스테이 찜하기 버튼 클릭 시 로그인 안내 모달창 생성
• 로그인 회원이 찜하기 버튼 클릭 시 위시에 추가

6️⃣ 위시리스트

위시리스트 뷰

• 홈페이지 헤더 위시 아이콘 클릭 시 위시리스트로 이동
• 로그인하지 않은 회원이 위시 아이콘 클릭 시 로그인 안내 페이지로 이동
• 위시리스트가 없는 경우 empty 뷰 띄우기
• 위시 취소 시 바로 반영되지 않고 다른 페이지나 새로고침 시 반영
    ◦ 위시리스트 페이지 내에서 위시 취소, 재선택 가능

7️⃣ 마이페이지

마이페이지 뷰

• 홈페이지 헤더 마이 아이콘 클릭 시 마이페이지로 이동
• 로그인하지 않은 회원이 마이 아이콘 클릭 시 로그인 안내 페이지로 이동
• 로그아웃 클릭 시 모달창 생성
• 탈퇴 클릭 시 모달창 생성

🪷 컨벤션

1️⃣ Commit 컨벤션

commit 규칙

키워드: 내용

• 예시:
  • init: 초기 세팅
  • feat: 기능 개발

Commit 메시지 종류 설명

제목	내용
feat	새로운 기능을 추가할 경우
style	코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
fix	버그를 고친 경우
refactor	코드 리팩토링
docs	문서를 수정한 경우
chore	패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
design	CSS 등 사용자 UI 디자인 변경
comment	필요한 주석 추가 및 변경
rename	파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
remove	파일을 삭제하는 작업만 수행한 경우
!BREAKING CHANGE	커다란 API 변경의 경우
!HOTFIX	급하게 치명적인 버그를 고쳐야 하는 경우

커밋 메시지 작성 가이드라인

• 제목과 본문을 빈 행으로 분리

  • 커밋 유형 이후 제목과 본문을 한글로 작성하여 내용이 명확히 전달될 수 있도록 한다.
  • 본문에는 변경한 내용과 이유를 설명하며, "어떻게"보다는 "무엇"과 "왜"를 중심으로 작성한다.

• 제목 형식

  • 제목의 첫 글자는 소문자로 시작한다.
  • 제목 끝에 마침표(.)는 사용하지 않는다.
  • 제목은 영문 기준 50자 이내로 작성한다.

• 본문 작성

  • 변경한 내용과 이유를 구체적으로 작성한다.
  • "자신의 코드가 직관적으로 바로 파악할 수 있다고 생각하지 말자"는 원칙을 바탕으로 설명을 명확히 한다.
  • 여러 가지 항목이 있다면 글머리 기호를 사용하여 가독성을 높인다.

2️⃣ Git, Branch 전략

Git, Branch 전략

feat/#이슈번호/이슈이름

Git Branch

• GitHub-Flow 전략 + develop
• 브랜치 운영
  • feat/#이슈번호/이슈이름 (케밥 케이스): 기능을 개발하면서 각자가 사용한 브랜치
    • main: 완전히 안전하다고 판단되었을 때, 즉 배포가 가능한 최종 merge하는 브랜치
    • develop: 배포하기 전 개발 중일 때 각자의 브랜치에서 merge하는 브랜치 (default 브랜치)
      • feat/#이슈번호/기능명: feature 브랜치. 새로운 기능 개발. 개발이 완료되면 develop 브랜치로 병합
      • fix/#이슈번호/기능명: feature 브랜치 생성 후 버그가 생겼을 때 수정하는 브랜치
      • PR 머지 후 톡방 메세지 보내기
      • approve 최소 2명 이상 받아야 머지 가능
      • pull 받아올 때는 merge 보다는 rebase 사용 권장

3️⃣ 코드 컨벤션

1. 컴포넌트 및 함수 네이밍

   • 모두 화살표 함수로 선언(rafce)

2. 네이밍

   • 변수 함수는 소문자 카멜 케이스로 선언
   • 배열은 복수형으로 선언
   • 상수는 스네이크 케이스를 활용해 대문자와 _ 를 사용해 선언
   • 컴포넌트는 항상 파스칼 케이스로 선언
   • interface 선언: 컴포넌트명 + props

3. Function

   • 함수의 식별자명은 항상 시멘틱하게 선언합니다. (어떤 기능을 하는 함수인지 함수명을 보고 알 수 있도록 선언합니다.)
   • 이벤트를 핸들링 하는 함수는 handle 접두사를 이용합니다.
   • 반환값이 boolean 인 함수는 is 접두사를 활용하며, 어떤 값을 리턴하는 함수는 get 접두사를 활용합니다.
   • 함수는 함수 표현식만 사용합니다

4. React & TypeScript

   • 컴포넌트는 항상 파스칼 케이스로 선언합니다. (예: SmallBanner)

   • Inline Style 을 하지 않습니다.

   • 스타일 변수는 기본적으로 하단에 작성

   • any 사용금지

     
     

4️⃣ Styling 컨벤션

• rem 사용을 기본으로 한다.
• border-radius: px로 설정
• 기본 글자 크기 10pt 설정
• asset 형식
  • 필요한 아이콘 파일은 Figma에서 svg로 export 한 후 assets/icons (ex. ic_arrow.svg)
  • 필요한 이미지 파일은 Figma 에서 png로 export 한 후 assets/images폴더에 넣기 (ex. img_picture.png)

📁 폴더 구조

|-- 📁 .github
|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
  |-- 📁 apis
  |-- 📁 assets
      |-- 📁 icons (svg파일)
      |-- 📁 images (png파일)
  |-- 📁 components
      |-- 📁 common
         |-- 📁 Button
             |-- Button.tsx
             |-- Button.css.ts
  |-- 📁 constants
  |-- 📁 layout
  |-- 📁 pages
  |-- 📁 route
  |-- 📁 styles
  |-- 📁 types
  |-- App.tsx
  |-- main.tsx