Merge pull request #118 from softeerbootcamp4th/hotfix

hotfix: 폰트 및 이미지 수정

packages/core/src/theme/globalStyles.ts

@@ -3,15 +3,15 @@ import { css } from "@emotion/react";
 export const globalStyles = css`
   @font-face {
     font-family: "Pretendard-Bold";
-    src: url("/fonts/pretendard/Pretendard-Bold.woff") format("woff");
+    src: url("/fonts/pretendard/Pretendard-Bold.otf") format("opentype");
   }
   @font-face {
     font-family: "Pretendard-Medium";
-    src: url("/fonts/pretendard/Pretendard-Medium.woff") format("woff");
+    src: url("/fonts/pretendard/Pretendard-Medium.otf") format("opentype");
   }
   @font-face {
     font-family: "Pretendard-SemiBold";
-    src: url("/fonts/pretendard/Pretendard-SemiBold.woff") format("woff");
+    src: url("/fonts/pretendard/Pretendard-SemiBold.otf") format("opentype");
   }
   @font-face {
     font-family: "PyeongChang-Bold";

packages/service/src/components/newCar/NewCarInfo/NewCarInfo.tsx

@@ -1,7 +1,6 @@
 import * as style from "./NewCarInfo.css";
 import { motion, useScroll, useTransform } from "framer-motion";
-import { throttle } from "throttle-debounce-ts";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useMobile } from "@service/common/hooks/useMobile";
 import { Space } from "@service/common/styles/Space";
 import { css } from "@emotion/react";
@@ -18,7 +17,7 @@ export const NewCarInfo = () => {
   const x = useTransform(scrollYProgress, position, [0, carouselEndPosition]);
   const isMobile = useMobile();
 
-  useEffect(() => {
+  const initCarouselEndPosition = () => {
     if (!carouselRef || !carouselRef.current) return;
 
     const parent = carouselRef.current.parentElement;
@@ -38,11 +37,7 @@ export const NewCarInfo = () => {
     };
 
     resetCarouselEndPosition();
-    const handleResize = throttle(10, resetCarouselEndPosition);
-
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
+  };
 
   if (isMobile)
     return (
@@ -76,7 +71,14 @@ export const NewCarInfo = () => {
       <div css={style.stickyWrap}>
         <img css={style.bgCirlce1} src="/images/common/bg-circle-green.svg" />
         <img css={style.bgCirlce2} src="/images/common/bg-circle-blue.svg" />
-        <motion.div css={style.imgWrap} ref={carouselRef} style={{ x }}>
+        <motion.div
+          css={style.imgWrap}
+          ref={carouselRef}
+          style={{ x }}
+          onViewportEnter={() => {
+            initCarouselEndPosition();
+          }}
+        >
           <div
             css={css`
               margin-left: 200px;
@@ -108,6 +110,6 @@ export const NewCarInfo = () => {
 
 // 신차 소개 이미지 path
 const carInfoImgs = Array.from(
-  { length: 15 },
+  { length: 24 },
   (_, i) => `images/newCar/new-car-info-${i + 1}.webp`,
 );

packages/service/src/components/newCar/TracingCar/TracingCar.tsx

@@ -27,8 +27,8 @@ export const TracingCar = ({
 
   const pathData = useMemo(() => {
     if (isMobile)
-      return generateVerticalSinPath(width / 3, 5, width, height, width);
-    else return generateSinPath(300, 10, height, 1000, width);
+      return generateVerticalSinPath(width / 3, 8, width, height, width);
+    else return generateSinPath(300, 16, height, 1000, width);
   }, [isMobile, width, height]);
 
   useEffect(() => {

packages/service/src/components/partsCollection/CustomCard/CustomCard.tsx

@@ -16,7 +16,7 @@ export const CustomCard = ({
 }: ICustomCardProps) => {
   return (
     <div css={style.card}>
-      <img css={style.carImg} src="/images/partsCollection/defaultCar.svg" />
+      <img css={style.carImg} src="/images/partsCollection/defaultCar.webp" />
 
       {bgParts?.imgSrc && <img css={style.bgImg} src={bgParts.imgSrc} />}
       <img css={style.spoilerImg} src={spoilerParts?.imgSrc} />

packages/service/src/components/pickEvent/CardCarousel/CardCarousel.tsx

@@ -38,5 +38,5 @@ export const CardCarousel = () => {
 
 const cardImgsPath = Array.from(
   { length: 7 },
-  (_, idx) => `images/pickEvent/card/card-${idx + 1}.svg`,
+  (_, idx) => `images/pickEvent/card/card-${idx + 1}.webp`,
 );

packages/service/src/components/pickEvent/PrizeContainer/data.ts

@@ -1,34 +1,34 @@
 export const winnerPrizeData = {
-  img: `images/pickEvent/prize/prize-1.svg`,
+  img: `images/pickEvent/prize/prize-1.webp`,
   rank: "1등(1명)",
   name: "아반떼 N",
 };
 
 export const prizeData = [
   {
-    img: `images/pickEvent/prize/prize-2.svg`,
+    img: `images/pickEvent/prize/prize-2.webp`,
     rank: "2등(2명)",
     name: "현대셀렉션 아반떼 N 3개월 구독권",
   },
   {
-    img: `images/pickEvent/prize/prize-3.svg`,
+    img: `images/pickEvent/prize/prize-3.webp`,
     rank: "3등(3명)",
     name: "현대셀렉션 아반떼 N 1개월 구독권",
   },
   {
-    img: `images/pickEvent/prize/prize-4.svg`,
+    img: `images/pickEvent/prize/prize-4.webp`,
     rank: "4등(50명)",
     name: "현대 N 기어봉 우산",
   },
   {
-    img: `images/pickEvent/prize/prize-5.svg`,
+    img: `images/pickEvent/prize/prize-5.webp`,
     rank: "5등(100명)",
     name: "미니 손 선풍기",
   },
 ];
 
 export const miniatureData = {
-  img: `images/pickEvent/prize/prize-mini.svg`,
+  img: `images/pickEvent/prize/prize-mini.webp`,
   rank: "10명",
   name: "아반떼 N 미니어처",
 };

packages/service/src/pages/Error/Error.css.ts

@@ -2,7 +2,8 @@ import { css } from "@emotion/react";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const errorContainerStyle = css`
-  background-image: url("/images/parts/background.svg");
+  background-image: url("/images/common/main-bg.webp"),
+    url("/images/common/main-bg.webp");
   background-size: cover;
   background-position: center;
 

packages/service/src/pages/Loading/Loading.css.ts

@@ -2,7 +2,8 @@ import { css } from "@emotion/react";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const loadingStyle = css`
-  background-image: url("/images/parts/background.svg");
+  background-image: url("/images/common/main-bg.webpg"),
+    url("images/common/main-bg.webp");
   background-size: cover;
   background-position: center;
 

packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts

@@ -3,7 +3,8 @@ import { mobile } from "@service/common/responsive/responsive";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const mainBg = css`
-  background-image: url("/images/common/main-bg.webp");
+  background-image: url("/images/common/main-bg.webp"),
+    url("/images/common/main-bg.webp");
   background-size: cover;
   padding-bottom: 200px;
 

packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.css.ts

@@ -3,7 +3,8 @@ import { mobile } from "@service/common/responsive/responsive";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const mainBg = css`
-  background-image: url("/images/common/main-bg.webp");
+  background-image: url("/images/common/main-bg.webp"),
+    url("/images/common/main-bg.webp");
   background-size: cover;
   padding-bottom: 200px;
   min-height: calc(100vh - 356px);

packages/service/src/pages/Main/Main.css.ts

@@ -2,7 +2,8 @@ import { css } from "@emotion/react";
 import { mobile } from "@service/common/responsive/responsive";
 
 export const mainBg = css`
-  background-image: url("images/common/main-bg.webp");
+  background-image: url("images/common/main-bg.webp"),
+    url("images/common/main-bg.webp");
   background-size: cover;
   padding-bottom: 200px;
 

packages/service/src/pages/Main/eventData.ts

@@ -14,7 +14,7 @@ export const eventData: IEventData[] = [
     title: "내 아반떼 N 뽑기",
     subTitle: `나만의 아반떼 N을 뽑고 응모하면
    아반떼 N을 0원에 준다?`,
-    img: "images/main/event-card-1.svg",
+    img: "images/main/event-card-1.webp",
     desc: `새로 무장해서 돌아온 아반떼 N,
 온라인 상에서만 만날 수 있는 
 특별한 디자인과 스펙을 확인해보세요!`,
@@ -25,7 +25,7 @@ export const eventData: IEventData[] = [
     title: "N 퀴즈",
     subTitle: `매일매일 선착순 200명에게
 선물을 드립니다!`,
-    img: "images/main/event-card-2.svg",
+    img: "images/main/event-card-2.webp",
     desc: `아반떼 N이 뭐야? N 시리즈가 뭐야?
 항상 궁금해하셨던 여러분을 위해 준비한,
 5일간의 선착순 퀴즈 이벤트!`,

packages/service/src/pages/NQuizEvent/NQuizEvent.css.ts

@@ -7,7 +7,7 @@ export const containerStyle = css`
 `;
 
 export const backgroundStyle = css`
-  background-image: url("/images/quiz/nQuizBackground.png");
+  background-image: url("/images/quiz/nQuizBackground.webp");
   background-size: cover;
   background-position: top;
   background-repeat: no-repeat;

packages/service/src/pages/NQuizEventWinnerApply/NQuizEventWinnerApply.css.ts

@@ -3,7 +3,7 @@ import { mobile } from "@service/common/responsive/responsive";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const backgroundStyle = css`
-  background-image: url("/images/quiz/nQuizBackground.png");
+  background-image: url("/images/quiz/nQuizBackground.webp");
   background-size: cover;
   background-position: top;
   background-repeat: no-repeat;

packages/service/src/pages/PartsCollection/PartsCollection.css.ts

@@ -3,7 +3,8 @@ import { mobile } from "@service/common/responsive/responsive";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const mainBg = css`
-  background-image: url("/images/common/main-bg.webp");
+  background-image: url("/images/common/main-bg.webp"),
+    url("/images/common/main-bg.webp");
   background-size: cover;
   padding: 0 5%;
   padding-bottom: 100px;

packages/service/src/pages/PartsPick/PartsPick.css.ts

@@ -3,7 +3,8 @@ import { mobile } from "@service/common/responsive/responsive";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const partsPickBackgroundStyle = css`
-  background-image: url("/images/parts/background.svg");
+  background-image: url("/images/common/main-bg.webp"),
+    url("/images/common/main-bg.webp");
   background-size: cover;
   background-position: center;
 

packages/service/src/pages/PickEvent/PickEvent.css.ts

@@ -3,7 +3,8 @@ import { mobile } from "@service/common/responsive/responsive";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const bg = css`
-  background-image: url("images/common/main-bg.webp");
+  background-image: url("images/common/main-bg.webp"),
+    url("images/common/main-bg.webp");
   background-size: cover;
   padding-top: 54px;
   padding-bottom: 200px;

packages/service/src/pages/Share/Share.css.ts

@@ -4,7 +4,8 @@ import { SHARE_BREAKPOINT } from "@service/constants/breakpoints";
 import { theme } from "@watermelon-clap/core/src/theme";
 
 export const mainBg = css`
-  background-image: url("/images/common/main-bg.webp");
+  background-image: url("/images/common/main-bg.webp"),
+    url("/images/common/main-bg.webp");
   background-size: cover;
   padding-bottom: 200px;