Toucheese-FE

다양한 스튜디오를 한 곳에서 모아보고 비교하며 간편하게 예약할 수 있는 스튜디오 예약 플랫폼

id : toucheese@gmail.com
pw : 1q2w3e4r1!

프로젝트 소개

터치즈는 멋쟁이사자처럼 스타트업 스테이션 기획안을 바탕으로 개발된 스튜디오 예약 플랫폼으로 사용자가 쉽고 빠르게 원하는 스튜디오를 예약할 수 있도록 돕는 웹 서비스입니다.

프론트엔드 6인, 백엔드 1인, 디자이너 2인, 기획자 1인으로 구성된 팀이 애자일 방식을 기반으로 협업하였습니다.

주요서비스	내용
스튜디오 조회 및 필터링	지역, 가격, 촬영 컨셉 등 원하는 조건으로 스튜디오 조회 및 비교
스튜디오 검색	스튜디오 검색, 관심 급상승 스튜디오 정보 제공
스튜디오 상세 정보	스튜디오 정보, 촬영 옵션, 포트폴리오, 리뷰 확인
스튜디오 예약 및 결제	날짜와 시간을 선택하여 예약 및 결제
SNS 간편 로그인	카카오, 구글 계정을 활용한 간편 로그인 제공

개발기간 및 작업관리

1. 개발 기간

2024.11.06 ~ 2025.04.18 (총 23주)

2. 애자일 방법론 적용

6주간 5개의 스프린트를 수행하는 애자일 방법론 적용
주 단위 스프린트 계획 수립 후 기획, 디자인, 개발 진행
- Jira를 활용해 스프린트 작업 및 일정 관리
스프린트 종료 시
- 개발 내용 배포, QA 진행
- 개인/팀 단위 스프린트 회고를 통해 작업 중 개선사항을 다음 스프린트에 반영
QA사항을 다음 스프린트에 즉각 반영하여 서비스 품질 향상 및 사용자 경험 개선

3. 이슈 관리 및 코드 리뷰

GitHub Issues를 통해 개발 이슈와 기능 단위의 작업 현황을 관리
- How?
  - 스프린트별 마일스톤을 생성하고, 이슈 번호로 branch를 생성해 개발 진행, 스토리 별 명확한 이슈 템플릿과 라벨링으로 작업 우선순위 설정 및 가시성 확보
  - 스토리별 명확한 이슈 템플릿과 라벨링으로 작업 우선순위 설정 및 가시성 확보
- Why?
  - 해당 이슈가 어떤 스프린트에 진행된 작업인지 명시, 각 이슈별 작업이 어떻게 진행되고 있는지 파악하기 용이
- Result? - 작업 진행 상황을 빠르게 팔로우하고, 팀원별 작업 내용을 세부적으로 파악할 수 있었음
GitHub Pull Requests를 활용하여 모든 코드에 대해 동료 간 상호 코드 리뷰 진행
- How?
  - Pull Request 템플릿을 생성하여 작업 내용에 대해 상세한 설명 작성, 팀원 모두 Pull Request에 대한 리뷰를 승인해야 dev 브랜치로 병합할 수 있도록 branch 조건 설정
- Why?
  - 코드 리뷰를 통해 불필요한 코드나 성능 개선이 필요한 부분을 발견하기 용이, 코드의 일관성이나 컨벤션 유지
- Result?
  - 본인 담당 작업이 아니더라도 전체적으로 내용에 대해 이해하고, 새롭게 적용된 기술을 파악할 수 있었음, 좀 더 나은 코드에 대해 함께 고민할 수 있었음

4. AWS 배포 환경 구축 및 관리

AWS S3 + CloudFront를 활용한 배포 환경 구성
GitHub Actions를 이용한 CD 환경 구현

기술 선정 이유

기술	활용 방식
React	복잡한 UI 상태 관리를 효율적으로 하기 위해 컴포넌트 기반 개발 방식을 활용하고, 상태 및 UI 렌더링을 최적화했으며, 커스텀 훅을 통해 중복되는 비즈니스 로직을 재사용할 수 있도록 구성함. 이를 통해 코드 유지보수성을 향상시킴.
TypeScript	프로젝트에서 발생할 수 있는 런타임 오류를 줄이고, API 응답 데이터의 타입을 명확하게 정의하여 예측 가능한 코드 작성을 가능하게 함. 이를 통해 협업 시 코드의 신뢰도를 높이고 디버깅 시간을 단축함.
Emotion	기존 CSS 및 CSS 모듈 대비 스타일의 동적 적용이 용이하며, props 기반 스타일링을 통해 특정 조건에 따라 스타일을 쉽게 변경할 수 있도록 구성함. 또한, 테마를 적용하고 컴포넌트 단위의 스타일 관리를 통해 유지보수성 향상.
Zustand	Redux보다 가볍고 보일러플레이트 코드가 적어, 전역 상태를 직관적으로 관리할 수 있도록 적용함. 또한, 비동기 상태 관리가 간편하여 API 호출 결과를 효율적으로 캐싱 및 공유할 수 있도록 함.
Vitest	Vite와의 최적화된 통합 덕분에 테스트 실행 속도가 빠르며, Jest 대비 설정이 간편하고 빌드 성능 저하 없이 테스트가 가능하도록 구성함. 특히, ESM 환경에서 원활하게 작동하여 최신 프로젝트와의 호환성을 높임.
React Testing Library	단순히 컴포넌트 렌더링이 정상적으로 되는지 확인하는 것이 아니라, 사용자의 실제 행동을 기반으로 UI 테스트를 수행할 수 있도록 활용함. 이를 통해, 버튼 클릭 후 상태 변경, 입력값 검증 등의 사용자 플로우를 검증할 수 있도록 함.
AWS S3	대용량 파일 저장이 필요했고, 클라이언트에서 직접 업로드하도록 설정하여 서버 부하를 줄이고 성능을 최적화할 수 있도록 구성함. 또한, Signed URL을 활용하여 보안성을 강화하고, 필요에 따라 이미지 최적화 기능과 연계할 수 있도록 함.
AWS CloudFront	CDN인 CloudFront를 활용하여 이미지파일, 정적 및 동적 웹 컨텐츠를 배포함으로써 캐싱을 통해 S3 부하를 감소시키고, 엣지 로케이션을 통해 응답속도를 향상시킴.
GitHub Actions	배포 과정에서 반복적인 작업을 줄이기 위해 도입하고, PR 단위의 자동 테스트 및 빌드 검증을 통해 코드 안정성을 높이며 배포 속도를 개선함. 이를 통해, 코드 변경 사항이 신속하고 안정적으로 운영 환경에 반영될 수 있도록 구성함.

역할분담

	View	Components
지민	스튜디오 검색 스튜디오 예약 - 결제 마이페이지 - 예약 상세	카카오 지도 및 공유 이미지 스와이퍼 모바일 헤더
우중	스튜디오 상세 - 리뷰 스튜디오 상세 - 이미지 모아보기 이메일 / 카카오 로그인 마이페이지 - 리뷰 작성	리뷰 컴포넌트 가격 필터링 컴포넌트 매장 옵션 컴포넌트 별점 입력 컴포넌트 인풋 컴포넌트
경민	스튜디오 상세 - 메뉴 스튜디오 상세 - 메뉴 상세 마이페이지	바텀시트 스튜디오 예약 하단 고정 버튼 예약 카드
소정	스튜디오 상세 - 포트폴리오 스튜디오 예약 - 시간 조회 및 선택 마이페이지 - 예약 취소	masonry 레이아웃 모달 딤 모달 내 스와이퍼 캘린더 및 시간 선택 로딩 컴포넌트 에러 컴포넌트
희선	스튜디오 상세 - 스튜디오 정보 메인 이메일 회원가입 간편 본인인증 유저 정보 및 계정 정보 변경	버튼 컴포넌트 필터 컴포넌트 정렬 및 지역 필터링 컴포넌트
진욱	홈 마이페이지 - 예약 내역	스튜디오 목록 토스트 메시지 PC 헤더 북마크 스튜디오 상세 / 예약 상세 탭 스튜디오 조회 / 검색 결과 없음 UI

화면 구성

1. 홈

1) 홈

PC	모바일

2) 지역/날짜 필터링

PC		모바일
지역 선택	날짜 선택

3) 정렬 및 가격/매장옵션 필터링

PC	모바일

2. 스튜디오 검색

PC	모바일

3. 스튜디오 상세

1) 홈

PC	모바일

2) 메뉴 및 메뉴 상세

PC	모바일

3) 포트폴리오

PC	모바일

4) 리뷰 및 리뷰 모아보기

PC	모바일

4. 스튜디오 예약

1) 날짜 및 시간 선택

PC	모바일

2) 결제

PC	모바일

3) 예약 상세

PC	모바일

4) 예약 취소

PC	모바일

5. 로그인 및 회원가입

1) 이메일 회원가입

PC	모바일

2) 이메일 로그인

PC	모바일

3) 카카오 로그인

PC	모바일

4) 구글 로그인

PC	모바일

6. 마이페이지

1) 마이페이지

PC	모바일

2) 예약 내역

PC	모바일

3) 내 리뷰

PC	모바일

4) 리뷰 작성

PC	모바일

5) 찜한 사진관

PC	모바일

6) 내 정보 관리

PC	모바일

기술적 이슈와 해결 과정

1. 디자인 시스템 설계

2. 에러 바운더리

3. 성능 최적화

4. SEO 최적화 및 메타태그 동적 생성

5. SNS 로그인

6. UI/UX 고려

7. 입력 검증 NPM 라이브러리 개발을 통한 DX 향상

팀원 소개

1. 프론트엔드

박지민	윤우중	이경민

@aksenmi	@woojoung1217	@kyungmim

이소정	전희선	정진욱

@s0zzang	@HuiseonDev	@JWJung-99

2. 백엔드

고기욱

@kokiuk

3. 디자이너

김고은	홍지희

@skygoeu	@Heee3333

Name		Name	Last commit message	Last commit date
Latest commit History 1,591 Commits
.github		.github
public		public
src		src
tests		tests
.gitignore		.gitignore
.prettierrc.cjs		.prettierrc.cjs
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.setup.ts		vitest.setup.ts

License

s0zzang/Toucheese

Folders and files

Latest commit

History

Repository files navigation

Toucheese-FE

다양한 스튜디오를 한 곳에서 모아보고 비교하며 간편하게 예약할 수 있는 스튜디오 예약 플랫폼

프로젝트 소개

개발기간 및 작업관리

1. 개발 기간

2. 애자일 방법론 적용

3. 이슈 관리 및 코드 리뷰

4. AWS 배포 환경 구축 및 관리

기술 선정 이유

역할분담

화면 구성

1. 홈

1) 홈

2) 지역/날짜 필터링

3) 정렬 및 가격/매장옵션 필터링

2. 스튜디오 검색

3. 스튜디오 상세

1) 홈

2) 메뉴 및 메뉴 상세

3) 포트폴리오

4) 리뷰 및 리뷰 모아보기

4. 스튜디오 예약

1) 날짜 및 시간 선택

2) 결제

3) 예약 상세

4) 예약 취소

5. 로그인 및 회원가입

1) 이메일 회원가입

2) 이메일 로그인

3) 카카오 로그인

4) 구글 로그인

6. 마이페이지

1) 마이페이지

2) 예약 내역

3) 내 리뷰

4) 리뷰 작성

5) 찜한 사진관

6) 내 정보 관리

기술적 이슈와 해결 과정

1. 디자인 시스템 설계

2. 에러 바운더리

3. 성능 최적화

4. SEO 최적화 및 메타태그 동적 생성

5. SNS 로그인

6. UI/UX 고려

7. 입력 검증 NPM 라이브러리 개발을 통한 DX 향상

팀원 소개

1. 프론트엔드

2. 백엔드

3. 디자이너

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages