당신의 반려견의 모든 날들이 아름답도록 Peauty
>Pet + Beauty = Peauty
강아지를 아름답게 하는 동네 기반 반려견 미용 중계 서비스
📌 배포링크: https://peauty.click/ 📌 피그마: https://www.figma.com/design/NkS08LM6bIL2xIlPaLRof4/PEAUTY?node-id=0-1&t=UrkMxndIzMjNcE4X-0
사용자는 원하는 애견 미용사에게 견적서를 요청한다.
사용자가 믿고 맞길 수 있는 미용사를 선택할 수 있도록 뱃지 시스템과 등급제를 도입한다.
- 뱃지 시스템이란?
- 특정 활동에 따라 뱃지를 얻을 수 있다.
- 뱃지 취득을 위한 특정 활동에는 견종 전문가, 노견 미용 전문가, 대형견 미용 전문가 등이 있을 수 있다.
- 특정 견종을 얼마나 미용했느냐에 따라서 뱃지를 획득할 수 있다.
- 등급제란?
- 미용사의 등급은 서비스로 정한 지표와 해당 지표에 할당된 가중치에 따른 합산으로 선정된다. - 자격증 보유 (20%), 경력 (15%), 리뷰 평점(25%), 작업 완료율(15%), 안전 사고 기록(15%), 응답률(10%) - 등급은 상대 평가로 3스타, 2스타, 1스타로 선정된다.
Node 20.17.0,
Typescript, React, Vite, Recoil, yarn, storybook
yarn install
yarn dev
yarn storybook
yarn storybook
PAWFIT-FE
├── public
│ └── svg # 정적 SVG 파일
│ ├── AppBarBack.svg
│ ├── favicon.svg
│ └── logo.svg
├── src
│ ├── assets # 정적 리소스 관리
│ │ ├── fonts # 폰트 파일
│ │ └── svg # SVG 리소스
│ ├── components # 재사용 가능한 컴포넌트
│ │ ├── global # 전역 컴포넌트
│ │ │ ├── AppBar
│ │ │ ├── CustomButton
│ │ │ ├── CustomInput
│ │ │ ├── ProgressBar
│ │ │ ├── ProgressBlock
│ │ │ ├── SocialLoginButton
│ │ │ └── StepProgress
│ │ └── pages # 페이지별 컴포넌트 조합
│ │ ├── main # 메인 페이지 컴포넌트
│ │ └── my-page # 개인 페이지 컴포넌트
│ ├── page # 페이지 파일 (라우팅 대상)
│ │ ├── main
│ │ │ ├── index.styles.ts
│ │ │ └── index.tsx
│ │ └── my-page
│ │ ├── index.styles.ts
│ │ └── index.tsx
│ ├── style # 스타일 및 테마 설정
│ │ ├── color.ts
│ │ ├── fonts.css
│ │ ├── global-style.ts
│ │ ├── normalize.css
│ │ ├── theme.ts
│ │ └── typography.ts
│ ├── App.tsx # 앱의 메인 진입 컴포넌트
│ ├── main.tsx # React DOM 렌더링 진입점
│ └── router.tsx # 라우터 설정 파일
├── .storybook # Storybook 설정
├── node_modules # 의존성 관리 폴더
└── .gitignore # Git에서 무시할 파일 설정
public/svg
• 정적 SVG 파일을 저장합니다.
• AppBarBack.svg: 상단 바의 뒤로 가기 아이콘.
• favicon.svg: 브라우저 탭 아이콘.
• logo.svg: 애플리케이션 로고.
src/assets
• 정적 리소스를 관리합니다.
• fonts: 폰트 파일.
• svg: SVG 리소스.
src/components
• global: 전역적으로 재사용 가능한 컴포넌트 모음.
• 예: CustomButton, SocialLoginButton, ProgressBar 등.
• pages: 각 페이지에서 사용하는 컴포넌트들을 정의.
• 페이지별로 global 컴포넌트를 조합해 사용합니다.
• 예: main 폴더에서는 메인 페이지 컴포넌트들이 정의됩니다.
src/page
• 페이지 파일을 정의하며 라우팅의 진입점 역할을 합니다.
• main: 메인 페이지.
• my-page: 사용자 개인 페이지.
src/style
• 스타일 및 테마 관련 파일 관리.
• color.ts: 색상 테마 정의.
• global-style.ts: 전역 스타일 설정.
• typography.ts: 폰트와 텍스트 관련 스타일 정의.
주요 파일
• App.tsx: 애플리케이션의 최상위 컴포넌트.
• main.tsx: React DOM을 렌더링하는 진입점.
• router.tsx: 라우터 설정 파일로 각 페이지를 연결.
