Merge branch 'develop' into feature/info-section

jest.config.js

@@ -198,7 +198,7 @@ const config = {
   // watchman: true,
 
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.ts",
+    "\\.(jpg|jpeg|png|gif|svg|mp4)$": "<rootDir>/__mocks__/fileMock.ts",
   },
 };
 

src/pages/mainPage/InfoScreen/ColorSection.tsx

@@ -1,53 +1,123 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import white from "../../../assets/images/colorSnowWhitePearl.png";
+import blue from "../../../assets/images/colorDarkOceanBlue.png";
+import green from "../../../assets/images/colorGrean.png";
+import gray from "../../../assets/images/colorGravityGray.png";
+import black from "../../../assets/images/colorFusionBlack.png";
 
-interface CarImgProps {
-  img: string;
-}
+const colorInfo = [
+  { color: white },
+  { color: blue },
+  { color: green },
+  { color: gray },
+  { color: black },
+  { color: black },
+];
 
-interface PalleteItemProps {
-  color: string;
-  active: boolean;
-}
-
-interface NameItemProps {
-  name: string;
-  egName: string;
-}
-
-const CarImg = ({ img }: CarImgProps) => {
-  return <img />;
+const zIndex = {
+  0: "z-[60]",
+  1: "z-50",
+  2: "z-40",
+  3: "z-30",
+  4: "z-20",
+  5: "z-10",
 };
 
-const PalleteItem = ({ color, active }: PalleteItemProps) => {
-  return (
-    <>
-      <div>{color}</div>
-    </>
+const ColorSection = () => {
+  const [clipPosition, setClipPosition] = useState(
+    Array.from({ length: colorInfo.length }, () => 0),
   );
-};
+  const requestAnimationRef = useRef(0);
+  const divRef = useRef<HTMLDivElement>(null);
 
-const NameItem = ({ name, egName }: NameItemProps) => {
-  return (
-    <>
-      <div>{name}</div>
-      <div>{egName}</div>
-    </>
-  );
-};
+  useEffect(() => {
+    requestAnimationRef.current = requestAnimationFrame(render);
+    return () => {
+      cancelAnimationFrame(requestAnimationRef.current);
+    };
+  }, []);
+
+  const render = () => {
+    if (divRef.current) {
+      const imageHeight = divRef.current.offsetHeight / colorInfo.length;
+      const scrollPosition = -divRef.current.getBoundingClientRect().y;
+      const newClipPosition = colorInfo.map((_, index) => {
+        const imageOffset = (index + 1) * imageHeight;
+        if (
+          imageOffset < scrollPosition &&
+          scrollPosition < imageOffset + imageHeight
+        ) {
+          return ((scrollPosition - imageOffset) / imageHeight) * 100;
+        } else if (imageOffset < scrollPosition) {
+          return 100;
+        } else {
+          return 0;
+        }
+      });
+
+      setClipPosition(newClipPosition);
+    }
+
+    requestAnimationFrame(render);
+  };
 
-const ColorSection = () => {
   return (
-    <>
-      <div>
-        <CarImg img="img" />
-      </div>
-      <div>
-        <PalleteItem color="red" active={false} />
-      </div>
-      <div>
-        <NameItem name="ss" egName="sss" />
-      </div>
-    </>
+    <div
+      ref={divRef}
+      className="relative flex h-[600vh] w-screen snap-start flex-col items-center bg-white"
+    >
+      {colorInfo.map(({ color }, index) => {
+        if (index === 1) {
+          return (
+            <div
+              className={`sticky top-0 h-screen w-screen snap-start ${zIndex[index as keyof typeof zIndex]}`}
+              style={{
+                clipPath: `inset(0 0 ${clipPosition[index]}% 0)`,
+              }}
+            >
+              <img src={color} alt={color} className="h-full w-full" />
+            </div>
+          );
+        } else {
+          return (
+            <div
+              className={`sticky top-0 h-screen w-screen ${zIndex[index as keyof typeof zIndex]}`}
+              style={{
+                clipPath: `inset(0 0 ${clipPosition[index]}% 0)`,
+              }}
+            >
+              <img src={color} alt={color} className="h-full w-full" />
+            </div>
+          );
+        }
+      })}
+
+      {/* {colorInfo.map(({ color }, index) => {
+        if (index === 0) {
+          return (
+            <div
+              ref={(el) => (divRefs.current[index] = el)}
+              className="absolute top-0 h-screen"
+              style={{
+                clipPath: `inset(0 0 ${-clipPosition}% 0)`,
+              }}
+            >
+              <img src={color} alt={color} className="h-full" />
+            </div>
+          );
+        } else {
+          return (
+            <div
+              ref={(el) => (divRefs.current[index] = el)}
+              className="h-screen"
+              style={{
+                clipPath: `inset(0 0 ${-clipPosition}% 0)`,
+              }}
+            ></div>
+          );
+        }
+      })} */}
+    </div>
   );
 };
 

src/pages/mainPage/InfoScreen/InfoScreen.tsx

@@ -4,6 +4,8 @@ import InsideSection from "./InsideSection";
 import VideoSection from "./VideoSection";
 import DriveSection from "./DriveSection";
 import ConvenienceSection from "./ConvenienceSection";
+import ColorSection from "./ColorSection";
+import PerformanceSection from "./PerformanceSection";
 
 const InfoScreen = () => {
   return (
@@ -12,6 +14,8 @@ const InfoScreen = () => {
       <OutsideSection />
       <DriveSection />
       <ConvenienceSection />
+      <ColorSection />
+      <PerformanceSection />
     </div>
   );
 };

src/pages/mainPage/InfoScreen/PerformanceSection.stories.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import PerformanceSection from "./PerformanceSection";
+
+export default {
+  component: PerformanceSection,
+  title: "PerformanceSection",
+  tags: ["autodocs"],
+  excludeStories: /.*Data$/,
+  args: {},
+};
+
+export const Main = {
+  args: {},
+};

src/pages/mainPage/InfoScreen/PerformanceSection.tsx

@@ -3,12 +3,108 @@ import PerformanceDescriptionItem from "../../../components/mainPage/InfoScreen/
 
 const PerformanceSection = () => {
   return (
-    <>
+    <div className="h-screen w-screen snap-start">
       <div>Header</div>
       <img />
-      <PerformanceDescriptionItem title="dd" info={[{}, {}]} footer="dd" />
-    </>
+      {gasolineInfo.map(({ id, title, value }, index) => {
+        if (index === 0)
+          return (
+            <div key={id}>
+              <GasolineInfo id={id} title={title} value={value} />
+              <div className="flex-center">
+                <hr className="w-4/5 bg-gray-500" />
+              </div>
+            </div>
+          );
+        else
+          return <GasolineInfo key={8} id={id} title={title} value={value} />;
+      })}
+    </div>
   );
 };
 
 export default PerformanceSection;
+
+interface GasolineInfo {
+  title: string;
+  id: number;
+  value: {
+    maxPower: string;
+    maxTorque: string;
+    efficiency: string;
+  };
+}
+
+const gasolineInfo: Array<GasolineInfo> = [
+  {
+    id: 1,
+    title: "1.6 가솔린 터보",
+    value: {
+      maxPower: "198",
+      maxTorque: "27.0",
+      efficiency: "12.8",
+    },
+  },
+  {
+    id: 2,
+    title: "2.0 가솔린",
+    value: {
+      maxPower: "149",
+      maxTorque: "18.3",
+      efficiency: "12.9",
+    },
+  },
+];
+
+const GasolineInfo = ({ title, value }: GasolineInfo) => {
+  return (
+    <>
+      <div className="m-800 flex-col gap-500 flex-center">
+        <div className="rounded-[12rem] border p-2 px-3 font-kia-signature-bold text-body-2-bold text-gray-100 gradient-border">
+          {title}
+        </div>
+        <div className="flex justify-between gap-600">
+          <div className="flex flex-col items-center">
+            <div className="pb-300 font-kia-signature text-body-2-regular text-gray-300">
+              최고출력
+            </div>
+            <div className="font-kia-signature-bold text-2xl text-gray-100">
+              {value.maxPower}
+            </div>
+            <div className="font-kia-signature-bold text-xs text-gray-400">
+              ps
+            </div>
+            <div className="font-kia-signature text-xs text-gray-400">
+              6,000rpm
+            </div>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="pb-300 font-kia-signature text-body-2-regular text-gray-300">
+              최대토크
+            </div>
+            <div className="font-kia-signature-bold text-2xl text-gray-100">
+              {value.maxTorque}
+            </div>
+            <div className="font-kia-signature-bold text-xs text-gray-400">
+              kgf∙m
+            </div>
+            <div className="font-kia-signature text-xs text-gray-400">
+              1,600~4,000rpm
+            </div>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="pb-300 font-kia-signature text-body-2-regular text-gray-300">
+              복합연비
+            </div>
+            <div className="font-kia-signature-bold text-2xl text-gray-100">
+              {value.efficiency}
+            </div>
+            <div className="font-kia-signature-bold text-xs text-gray-400">
+              km/L
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};