Skip to content

TEAM-FLASH/Toucheese-FE

Repository files navigation

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 λͺ¨λ°”일
image

2) μ§€μ—­/λ‚ μ§œ 필터링

PC λͺ¨λ°”일
μ§€μ—­ 선택 λ‚ μ§œ 선택
image image

3) μ •λ ¬ 및 가격/λ§€μž₯μ˜΅μ…˜ 필터링

PC λͺ¨λ°”일
image

2. μŠ€νŠœλ””μ˜€ 검색

PC λͺ¨λ°”일
image

3. μŠ€νŠœλ””μ˜€ 상세

1) ν™ˆ

PC λͺ¨λ°”일
image

2) 메뉴 및 메뉴 상세

PC λͺ¨λ°”일
image

3) 포트폴리였

PC λͺ¨λ°”일
image

4) 리뷰 및 리뷰 λͺ¨μ•„보기

PC λͺ¨λ°”일
image

4. μŠ€νŠœλ””μ˜€ μ˜ˆμ•½

1) λ‚ μ§œ 및 μ‹œκ°„ 선택

PC λͺ¨λ°”일
image

2) 결제

PC λͺ¨λ°”일
image

3) μ˜ˆμ•½ 상세

PC λͺ¨λ°”일
image

4) μ˜ˆμ•½ μ·¨μ†Œ

PC λͺ¨λ°”일
image

5. 둜그인 및 νšŒμ›κ°€μž…

1) 이메일 νšŒμ›κ°€μž…

PC λͺ¨λ°”일
image

2) 이메일 둜그인

PC λͺ¨λ°”일
image

3) 카카였 둜그인

PC λͺ¨λ°”일
image

4) ꡬ글 둜그인

PC λͺ¨λ°”일
image

6. λ§ˆμ΄νŽ˜μ΄μ§€

1) λ§ˆμ΄νŽ˜μ΄μ§€

PC λͺ¨λ°”일
image

2) μ˜ˆμ•½ λ‚΄μ—­

PC λͺ¨λ°”일
image

3) λ‚΄ 리뷰

PC λͺ¨λ°”일
image

4) 리뷰 μž‘μ„±

PC λͺ¨λ°”일
image

5) μ°œν•œ 사진관

PC λͺ¨λ°”일
image

6) λ‚΄ 정보 관리

PC λͺ¨λ°”일
image


기술적 μ΄μŠˆμ™€ ν•΄κ²° κ³Όμ •

3. μ„±λŠ₯ μ΅œμ ν™”

6. UI/UX κ³ λ €



νŒ€μ› μ†Œκ°œ

1. ν”„λ‘ νŠΈμ—”λ“œ

λ°•μ§€λ―Ό μœ€μš°μ€‘ 이경민
@aksenmi @woojoung1217 @kyungmim
μ΄μ†Œμ • 전희선 μ •μ§„μš±
@s0zzang @HuiseonDev @JWJung-99

2. λ°±μ—”λ“œ

고기욱
@kokiuk

3. λ””μžμ΄λ„ˆ

김고은 홍지희
@skygoeu @Heee3333

About

πŸ“· μŠ€νŠœλ””μ˜€ μ˜ˆμ•½ ν”Œλž«νΌ

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 6

Languages