Merge branch 'develop'

README.md

@@ -135,9 +135,12 @@ Washfit는 차를 깨끗하게 만드는 "세차 용품"에 대한 기본 정보
 <br />
 
 ## 👍 성능 최적화
+- 초기 랜더링 속도 향상을 위해 SSR 환경 도입 및 prefetch를 통한 유저 경험 최적화
+- 사용자의 차량 정보와 자주 사용하는 세차 용품을 등록하기 위해 퍼널구조를 통한 유저 경험 최적화
+- 유저 경험 최적화를 위한 무한 스크롤 구현
 - 리플로우와 리페인트 과정을 생략하기 위해 transform 속성 사용
 - throttling을 이용한 무분별한 스크롤 이벤트 방지
-- 웹 폰트 다운로드 시간을 줄이기 위해 woff2 확장자 추가 및 3초 이상 폰트가 다운로드 되지 못한 경우, 기존 폰트를 사용하도록 fallback 설정
+- 웹 폰트 다운로드 시간을 줄이기 위해 woff2 확장자 추가와 subset 사용 및 3초 이상 폰트가 다운로드 되지 못한 경우, 기존 폰트를 사용하도록 fallback 설정
 - 필요한 시점에 이미지를 불러오도록 lazy loading을 적용 및 layout shift를 방지하기 위한 Next.js image 태그 적용
 - 렌더링 시 불필요한 연산을 줄이기 위해 useCallback, useMemo, React.memo 사용
 - dynamic import를 사용하여 빌드 타임이 아닌 런타임에서 컴포넌트를 랜더링 하도록 코드 스플리팅 적용

src/app/(car-details)/car-details/hydrated-page.tsx

@@ -76,7 +76,7 @@ function CarDetailsPage() {
     <>
       {step <= 5 && (
         <>
-          <Header stepBack={step > 1 ? onBack : undefined} />
+          <Header stepBack={step >= 1 ? onBack : undefined} />
           <Spacing size={16} />
           <ProgressBar progressCount={5} currentStep={step} />
           <Spacing size={32} />

src/app/(car-details)/car-wash-details/hydrated-page.tsx

@@ -63,7 +63,7 @@ function CarWashDetailsPage() {
     <>
       {step <= 3 && (
         <>
-          <Header stepBack={step > 1 ? onBack : undefined} />
+          <Header stepBack={step >= 1 ? onBack : undefined} />
           <Spacing size={16} />
           <ProgressBar progressCount={3} currentStep={step} />
           <Spacing size={32} />

src/app/(my-page)/my-page/page.tsx

@@ -19,7 +19,7 @@ import styles from './page.module.scss';
 
 const cx = classNames.bind(styles);
 
-const TOP_MARGIN = 96;
+const TOP_MARGIN = 80;
 const BOTTOM_MARGIN = 110;
 
 function MyProfilePage() {

src/components/shared/loader/FullPageLoader.module.scss

@@ -3,5 +3,5 @@
   align-items: center;
   justify-content: center;
   width: 100vw;
-  height: 80vh;
+  height: 100vh;
 }