Fit For Her(F4H)은 여성을 위한 스포츠웨어 이커머스 플랫폼입니다.
개인 프로젝트의 주제로 이커머스를 선택하고 세부 주제를 고민하던 중, 작년에 열심히 운동하던 기억이 떠올랐습니다. 그 당시 다양한 스포츠웨어 브랜드의 제품을 비교하며 구매하는 데 많은 시간을 쏟았는데, 운동하는 여성들을 위한 스포츠웨어 브랜드를 한곳에 모아두는 사이트가 있으면 좋겠다는 생각을 했었습니다. 이러한 아이디어를 바탕으로, 여성 스포츠웨어 브랜드가 한 곳에 모여있는 F4H를 구상하였습니다.
이 프로젝트는 개인 프로젝트입니다.
2024.08.20 ~ 2024.09.21 (약 5주)
구매자
ID: [email protected]
PW: xptmxm123!!!판매자
ID: [email protected]
PW: fnffnfpahs123!!!
- 레포지토리 복제 및 의존성 설치
$ git clone https://github.com/summereuna/fit-for-her.git
$ cd fit-for-her
$ yarn
- 개발 서버 가동
$ yarn dev
- 브라우저에서 실행
http://localhost:5173/
| 분류 | 기술 | 기술 선택 이유 |
|---|---|---|
| 패키지 관리 |  |
- 패키지 관리는 npm 대신 속도와 안정성 측면에서 보다 뛰어난 yarn을 선택했습니다. |
| 빌드 툴 |  |
- 개발 효율성과 속도를 위해 Vite를 선택했으며, 이는 CRA보다 빌드 속도와 서버 시작 시간이 훨씬 빠릅니다. |
| FE 언어 및 라이브러리 |  |
- 코드 오류를 빠르게 잡고 데이터 구조를 명확하게 정의하여 가독성과 유지보수성을 높이기 위해 TypeScript를 사용하였습니다. |
| . |  |
- 컴포넌트 기반으로 UI를 재사용성 있게 관리할 수 있는 React를 선택하였습니다. 잘 구축된 생태계와 활발한 커뮤니티 덕분에 학습이 용이하며, 다양한 라이브러리와의 통합을 통해 개발 효율성도 높일 수 있습니다. - SEO와 SSR 문제로 Next.js 사용도 고려했으나, 이번 프로젝트에서는 React를 심도 있게 공부하기 위해 React를 선택하였습니다. |
| 폼 관리 및 유효성 검사 |   |
- React Hook Form과 zod를 함께 사용하여 폼 처리와 검증을 보다 효율적으로 구현하였습니다. - React Hook Form은 간결한 코드로 최적화된 폼 관리를 제공하며, Zod는 타입 안전성을 보장하는 유연한 스키마 기반의 유효성 검사를 지원합니다. 특히 Zod는 TypeScript와 친화적이어서, 컴파일 시점과 런타임 간의 타입 불일치를 방지해 폼 처리와 검증을 더욱 효율적으로 구현할 수 있습니다. |
| 서버 상태 관리 및 데이터 페칭 |  |
- TanStackQuery는 데이터 패칭, 캐싱, 서버 상태 관리를 효율적으로 관리하고 처리할 수 있어서 선택했습니다. |
| 전역 상태 관리 | ContextAPI | - 사용자 인증 및 장바구니 상태를 전역적으로 관리하기 위해 ContextAPI를 사용했습니다. 외부 상태 관리 라이브러리인 Zustand 등의 옵션도 고려했지만, 현재 프로젝트의 규모와 복잡성을 감안했을 때 React의 기본기능인 ContextAPI 만으로 충분히 관리할 수 있다고 판단했습니다. |
| 스타일링 |  |
- 스타일링은 유틸리티 기반 클래스명으로 일관성 있는 스타일링을 적용하여 빠르게 개발할 수 있는 Tailwind CSS를 사용하였습니다. 커스터마이징이 용이하며, 반응형 디자인도 sm, md, lg 등과 같은 접두사를 사용하여 쉽게 구현할 수 있는 장점이 있습니다. |
| . |  |
- Shadcn/UI는 접근성과 사용자 경험을 중시하고, 미리 설계된 컴포넌트들을 제공하여 빠르고 일관된 UI 개발을 지원합니다. 또한, Tailwind CSS와의 원활한 통합으로 커스터마이징이 쉽고, 다양한 UI 요구 사항을 효율적으로 충족할 수 있어 이를 선택했습니다. - 이번 프로젝트에서는 Shadcn/UI의 버튼, 알림창, 드롭다운, 표, 토스트 등의 UI를 사용하였습니다. |
| 라우팅 |  |
- React 환경에서 라우팅과 페이지 설계를 간편하게 처리할 수 있는 React Router를 사용하였습니다. SPA(Single Page Application)에서 페이지 간의 네비게이션을 쉽게 관리할 수 있고 Layout, Outlet 등의 기능을 사용할 수 있습니다. |
| 배포 및 호스팅 |  |
- 배포는 빠르고 간편하고 자동화된 CI/CD를 제공하는 Vercel을 사용하여 개발과 운영 효율성을 높였습니다. |
| BaaS |  |
- 백엔드로는 Supabase를 사용했습니다. Supabase는 서버 없이 실시간 DB, Auth, Storage 등 다양한 백엔드 기능을 손쉽게 구현할 수 있기 때문에 이번 프로젝트에 적합하다고 생각하여 선택했습니다. - NoSQL 기반인 Firebase와도 고민을 했지만, supabase가 이커머스 프로젝트의 복잡한 데이터 요구 사항을 좀 더 효율적으로 처리할 수 있을 것으로 판단하여 오픈 소스 PostgreSQL 기반으로 강력한 쿼리 기능과 데이터베이스 관리 기능을 제공하고 데이터베이스 스키마의 직관적 관리가 가능한 Supabase를 선택했습니다. |
📦src
┣ 📂api
┣ 📂assets
┃ ┗ 📂images
┣ 📂components
┃ ┣ 📂...
┃ ┗ 📂ui
┣ 📂context
┣ 📂hooks
┣ 📂lib
┣ 📂pages
┣ 📂schemas
┣ 📂shared
┃ ┣ 📂...
┃ ┗ 📂data
┣ 📂types
┣ 📜App.css // 전역 CSS 스타일
┣ 📜App.tsx // 애플리케이션의 루트 컴포넌트
┣ 📜index.css // 기본 CSS 스타일
┣ 📜main.tsx // 애플리케이션 진입점
┗ 📜vite-env.d.ts // Vite 환경 타입 정의
| 폴더명 | 내용 |
|---|---|
/api |
API 호출을 처리하는 모듈로, 각 기능별로 분리하여 관리 |
/assets |
이미지 등의 정적 리소스를 저장 |
/components |
페이지 컴포넌트보다 작은 단위의 컴포넌트 관리 |
/context |
사용자 인증, 장바구니의 전역 상태를 관리 |
/hooks |
커스텀 훅을 관리 |
/lib |
유틸리티 함수를 모음 |
/pages |
각 페이지 컴포넌트를 관리 |
/schemas |
폼 데이터 유효성 검사를 위한 Zod 스키마를 관리 |
/shared |
여러 컴포넌트에서 공통으로 사용하는 데이터, 라우팅 및 레이아웃 관련 컴포넌트 관리 |
/types |
TypeScript 타입 정의 파일을 관리 |
- 빨간색으로 표시된 브랜드 좋아요와 위시리스트 기능은 구현 중에 있습니다.
로그인 페이지/login |
일반 회원가입 페이지/signup비즈니스 회원가입 페이지 /signup/biz |
|---|---|
 |
  |
메인 페이지/ |
검색 페이지/search?keyword= |
  |
 |
카테고리 페이지/category/new, /category/tops, /category/sports-bras, /category/pants, 서브 카테고리 페이지 ~/:subCategoryName |
상품 상세product/:id |
  |
 |
| [고객] 장바구니(드롭다운) | [고객] 주문 및 결제 페이지/checkout |
 |
 |
[고객] 주문내역 페이지/my/orders |
[고객] 주문내역상세 페이지/my/orders/:id |
 |
 |
[판매] 대시보드/dashboard, /dashboard/overview |
[판매] 브랜드정보 탭/dashboard/setting |
 |
 |
[판매] 상품관리 탭/dashboard/product |
[판매] 판매관리 탭/dashboard/transaction |
 |
 |
로그인 시연 영상
- 로그인
- 회원가입
- 일반회원/비즈니스 회원 가입 기능
- 폼 유효성 검증
- 로그인 후 전역상태로 회원정보 관리
메인 페이지 시연 영상
- 여러 기능
- 상단 배너 캐러셀에 브랜드별 이미지 노출(3.5초 간격으로 자동 전환)
- 카테고리별 최신 상품 조회(최대 4개)
- 더보기 버튼 및 서브 카테고리 태그 선택하여 페이지 이동
- 상단 메뉴에서 카테고리 선택해 카테고리별 상품 페이지 이동
- 상단 검색바에서 상품명/상품설명 키워드 검색 기능
카테고리 페이지 시연 영상
- 카테고리 상품 조회
- 카테고리, 검색어, 정렬 옵션에 따른 조회 결과 필터링 기능
- 무한 스크롤 활용한 페이지네이션
상품 상세 페이지 시연 영상
- 상품 상세 이미지 캐러셀
- 상품 이미지 캐러셀 기능으로 유저 인터랙션 강화
- 상품 선택 시 장바구니 추가 기능
장바구니 시연 영상
- 장바구니
- 장바구니 상품 수량 수정 및 삭제 기능
- 장바구니 상품 주문 기능
상품 주문 및 결제 시연 영상
- 상품 주문
- 상품 결제
- 배송 정보 입력
- 포트원 SDK 활용한 결제 기능 (카카오페이 테스트로만 진행)
주문 내역 조회 및 취소 시연 영상
- 주문 취소
- 주문 내역 조회
- 주문 내역 전체 조회 기능
- 주문 내역 상세 조회 기능
- 주문 취소 기능 (주문 취소의 경우
order_status: "order_cancelled"상태 변경으로 논리적 삭제)
브랜드 설정 페이지 시연 영상
- 비즈니스 회원 가입 후 브랜드 등록
- 대시보드 브랜드 설정 탭에서 브랜드 정보 조회
- 비즈니스 회원으로 가입한 판매자는 대시보드 설정 탭에서 브랜드 등록 후 대시보드 이용 가능
- 브랜드 정보 조회 및 수정 기능
대시보드 페이지 시연 영상
- 대시보드 오버뷰
- 상품 판매 수치 조회
상품 관리 시연 영상
- 상품 등록
- 상품 수정
- 판매 상품 등록, 조회, 수정, 삭제 기능 (삭제의 경우
is_active: true | false로 논리적 삭제) - 등록 시 상품 이미지 개수 최소 1개 ~ 최대 4개 제한
판매자 배송 상태 변경 시연 영상
- 판매 상품 배송 상태 변경
- 판매 상품에 대한 배송대기, 배송중, 배송완료, 구매확정, 주문취소 상태 변경 기능
- 웹 접근성 개선: 86 -> 100 (16.28% 개선)
- 모든 button, a, Link, NavLink 요소에 aria-label로 인식 가능한 이름 표시
- 검색엔진 최적화: 83 -> 100 (20.48% 개선)
- sitemap, robots.txt 생성 및 구글 서치엔진 등록
-
- React-Helmet-async 사용해 meta tag 설정
-
- sitemap, robots.txt 생성 및 구글 서치엔진 등록
- 성능 최적화: PC: 95 -> 99 (4.21% 개선), 모바일: 59 -> 83 (40.68%% 개선)
- 데이터 페칭시 스켈레톤 UI 사용하여 CLS 개선 (2.222 -> 0)
-
-
- 모바일 뷰: 59 -> 62
-
- 이미지 압축, 동적 임포트 및 코드 스플리팅으로 초기 로드 시간 감소 (253ms -> 178ms, 29.6% 개선)
- 자원 효율성 향상, 더 빠른 초기 페이지 로딩으로 사용자 경험 개선
-
-
- 결과:
- PC
-
- 모바일
-
- 데이터 페칭시 스켈레톤 UI 사용하여 CLS 개선 (2.222 -> 0)
- 결과:
- PC
-
- 모바일
-
