🗓️ 티키타(Tickita)

기획 및 개발 기간 : 2024.05.18 ~ 2024.06.25

🔎 서비스 소개

- 🤦🏻‍♂️ 많은 사람들과 일정을 잡야야 할 때 조율하기가 너무 어려워요.

- 💼 다양한 그룹에서 활동을 해 일정을 구분 짓기 힘들어요.

- 🤷‍♂️ 팀원들끼리 진행 사항 공유 및 소통이 원활하게 되지 않아요.

위와 같은 문제를 경험 해보셨나요??

💡 저희 티키타 서비스는 이러한 문제들을 해결하고자 서비스를 개발하게 되었어요.

🚀 배포 URL

개발 모드로 실행하기

git clone https://github.com/tickita-project/tickita-front.git

npm install

npm run dev

---

⚙️ TechStack

🍃 Communication

👏 팀원 구성

FE	FE	FE	FE
이우혁	김재영	소남주	이진호

BE	BE
서지윤	김민지

📝 팀 컨벤션

프론트엔드 팀은 컨벤션을 세세하게 정해 코드의 일관성을 높이고 코드 리뷰 시간도 단축할 수 있게 노력하였어요!

코드 컨벤션

변수

• 기본적으로 camelCase 사용 / 상수는 대문자 SNAKE_CASE 사용
• boolean 타입의 경우, 앞에 is, has, should 중 하나 붙이기
• 축약형 사용하지 않기 → button O / btn X

함수

• 기본적으로 camelCase 사용 / 컴포넌트의 경우 PascalCase 사용
• 일반 함수는 화살표 함수 사용, 컴포넌트는 function 사용
• 함수 이름은 명령문 형태로 작성
• 이벤트를 다룰 경우에는 handle + 요소 + event 형태로 작성 (ex. handleCloseButtonClick)
• export default 함수 앞에 작성

파일

• 컴포넌트는 PascalCase 사용 / 일반 파일은 camelCase 사용
• 컴포넌트 폴더 안에 index.tsx O / button.tsx X → Import 중복 제거
• 스타일 파일명도 PascalCase 사용
• 이미지 하이픈 사용 / tickita-logo.svg

폴더

• 컴포넌트 폴더는 PascalCase 사용
• 나머지 폴더는 소문자 사용, 길어질 경우 camelCase 사용

코드

• if문 한 줄이여도 중괄호 작성

  if (true) {
    return true;
  }
  
  return false;

CSS

• rem 사용 → 16px

• PC버전 부터 작성

• SCSS + CSS Module

• 반응형 컨벤션 → 클래스네임 마다 사용하기

  .box {
    margin: 1rem;
  
    @include mobile {
      margin: 0;
    }
  }

타입스크립트

• interface + type
• 타입 별칭
  • 타입: UserType,
  • 컴포넌트: HeaderProps

Git 컨벤션

브랜치 전략

- main: 프로덕션 배포 브랜치
- develop: 개발 브랜치
- feature/기능명: 기능 개발 브랜치

커밋 메세지

- init: 초기 설정
- feat: 새로운 기능 추가
- fix: 버그 수정
- style: css 수정
- refactor: 코드 리팩토링
- chore: 패키지 매니저 수정, 그 외 기타 수정 ex) .gitnore 등
- comment: 필요한 주석 추가 및 변경
- rename: 파일명 수정 및 파일 이동
- remove: 파일 삭제

Pull Request

• PR 단위: 기능 단위(1이슈 1PR)
• Merge 룰: 최소 2명에게 승인 받아야 Merge 가능(하지만 팀원 모두가 PR 확인하는 것을 권장)
• 리뷰: 코어 타임 시작 후 본인이 리뷰 못한 PR이 있다면 리뷰 먼저 진행 후 개발 진행

폴더 구조

Colocation 방식: 관련된 파일들을 기능이나 컴포넌트 단위로 그룹화하여 구성

📦tickita
┣ 📂.github
┃ ┣ 📂ISSUE_TEMPLATE
┃ ┣ 📂workflows
┣ 📂apis
┣ 📂components
┃ ┣ 📂ColorCheckBox
┃ ┣ 📂DatePicker
┃ ┃ ┣ 📂MonthNavButton
┃ ┣ 📂ErrorFallBack
┃ ┣ 📂GroupColorPicker
┃ ┣ 📂Header
┃ ┣ 📂Input
┃ ┣ 📂Layout
┃ ┣ 📂Loading
┃ ┣ 📂MetaData
┃ ┣ 📂Modal
┃ ┃ ┣ 📂CancelInvite
┃ ┃ ┣ 📂ChangeLeader
┃ ┃ ┣ 📂Confirm
┃ ┃ ┣ 📂CreateGroup
┃ ┃ ┣ 📂DeleteGroup
┃ ┃ ┣ 📂ExitGroup
┃ ┃ ┣ 📂ExportMember
┃ ┃ ┣ 📂Portal
┃ ┃ ┗ 📂Schedule
┃ ┃ ┃ ┣ 📂ScheduleCreate
┃ ┃ ┃ ┣ 📂ScheduleDetail
┃ ┃ ┃ ┗ 📂ScheduleEdit
┃ ┣ 📂Notification
┃ ┃ ┣ 📂BaseNotification
┃ ┃ ┣ 📂CoordinationNotification
┃ ┃ ┣ 📂EmptyNotification
┃ ┃ ┗ 📂ScheduleInfoNotification
┃ ┣ 📂NotificationPopup
┃ ┣ 📂ProfileImage
┃ ┗ 📂TitleBox
┣ 📂constants
┣ 📂hooks
┣ 📂pages
┃ ┣ 📂api
┃ ┣ 📂calendar
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂Calendar
┃ ┃ ┃ ┃ ┣ 📂CalendarHeader
┃ ┃ ┃ ┃ ┣ 📂DailyCalendar
┃ ┃ ┃ ┃ ┣ 📂MonthlyCalendar
┃ ┃ ┃ ┃ ┗ 📂WeeklyCalendar
┃ ┃ ┃ ┣ 📂CalendarGroupList
┃ ┃ ┃ ┣ 📂CalendarSideBar
┃ ┃ ┃ ┗ 📂CalendarTypeSegmentedButton
┃ ┣ 📂dashboard
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂GroupList
┃ ┃ ┃ ┣ 📂NotificationCenter
┃ ┃ ┃ ┗ 📂UpcomingScheduleList
┃ ┃ ┃ ┃ ┣ 📂UpcomingSchedule
┃ ┣ 📂group
┃ ┃ ┗ 📂[id]
┃ ┃ ┃ ┣ 📂components
┃ ┃ ┃ ┃ ┣ 📂ActionButton
┃ ┃ ┃ ┃ ┣ 📂GroupForm
┃ ┃ ┃ ┃ ┣ 📂InviteForm
┃ ┃ ┃ ┃ ┗ 📂MemberList
┃ ┃ ┃ ┃ ┃ ┣ 📂MemberInfo
┃ ┣ 📂my-page
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂ProfileEditForm
┃ ┃ ┃ ┗ 📂VoteNotification
┃ ┣ 📂sign-in
┃ ┃ ┣ 📂kakao
┃ ┃ ┣ 📂profile-setup
┃ ┃ ┃ ┣ 📂components
┃ ┃ ┃ ┃ ┗ 📂ProfileSetupForm
┣ 📂public
┃ ┣ 📂icons
┃ ┣ 📂images
┣ 📂store
┣ 📂styles
┣ 📂types
┣ 📂utils

그 외 기술 스택 선정, Github Actions 등 다양한 프로젝트 초기 설정의 내용을 보고 싶다면 아래 링크를 참고해 주세요.

👉 FE Convention 보러가기