🪷절로가🪷 (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️⃣ 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