Merge pull request #81 from softeerbootcamp4th/feat/#50-rush

[Feat] 선착순 이벤트 페이지 UI 구현

client/src/components/Notice/index.tsx

@@ -19,8 +19,8 @@ interface SectionProps {
 const Section: React.FC<SectionProps> = ({ title, items, indentedIndices = [] }) => (
     <div className="flex flex-col !leading-8 h-heading-4-regular">
         <h4 className="h-heading-4-bold">{title}</h4>
-        {items.map((item, index) => (
-            <p key={index} className={indentedIndices.includes(index) ? "pl-8" : ""}>
+        {items.map((item, idx) => (
+            <p key={idx} className={indentedIndices.includes(idx) ? "pl-8" : ""}>
                 {`•ㅤ${item}`}
             </p>
         ))}

client/src/constants/Rush/electricCardData.tsx

@@ -0,0 +1,75 @@
+export const TOGGLE_OPTIONS = [
+    "혜택이 늘어요",
+    "충전소가 늘어요",
+    "유지비가 줄어요",
+    "환경오염이 줄어요",
+    "소음이 줄어요",
+];
+
+export const CARD_DATA = [
+    {
+        image: "/assets/rush/electric/pollution.jpg",
+        title: (
+            <>
+                <p>대기오염환경법에 따른 </p>
+                <p className="text-s-blue">저공해차량 1종 혜택</p>
+            </>
+        ),
+        description: [
+            "전기차는 대기오염물질을 배출하지 않기 때문에 대기오염환경법에 따른 저공해차량 1종으로 분류돼요.",
+            "저공해차량 1종은 공영주차장과 비용과 고속도로 통행료 50% 할인 등의 혜택을 받을 수 있어요.",
+        ],
+    },
+    {
+        image: "/assets/rush/electric/e-csp.jpg",
+        title: (
+            <>
+                <p className="text-s-blue">E-CSP: </p>
+                <p>클릭 한 번으로 충전소가 내 손안에</p>
+            </>
+        ),
+        description: [
+            "현대자동차의 E-CSP(E-pit Charging Service Platform), 전기차 충전의 게임체인저!",
+            "E-pit의 회원이기만 하면 제휴 충전소에서 별도의 인증 없이 자유롭게 안정적인 충전 서비스를 이용 가능해요.",
+            "현대자동차는 양질의 충전 인프라 확대로 전기차 이용 고객의 편의가 향상되는 선순환을 지향하고 있어요.",
+        ],
+    },
+    {
+        image: "/assets/rush/electric/charge.jpg",
+        title: <p>주유 대신 충전으로 연료비 절감</p>,
+        description: [
+            "전기차는 배터리를 충전하여 전기에너지로 바퀴를 굴리는 자동차에요.",
+            "주유소에 가서 주유하는 대신에 충전소에서 충전하면 연료비가 1/3로 줄어요.",
+            "(가솔린 연비 15km 기준)",
+        ],
+    },
+    {
+        image: "/assets/rush/electric/eco-friendly.jpg",
+        title: (
+            <>
+                <p>화석연료 대신 </p>
+                <p className="text-s-blue">친환경 에너지</p>
+                <p>로</p>
+            </>
+        ),
+        description: [
+            "최신 전기차는 400V/800V 급속 충전 기술을 갖추어 충전 시간을 단축하고 더 긴 거리를 주행할 수 있답니다.",
+            "V2G(Vehicle-to-Grid) 기술을 통해 차량 배터리에 저장된 전기를 전력망에 판매할 수 있어,",
+            "전력망의 안정성을 높이고 화석연료 의존도를 줄이는 데 기여해 환경오염을 줄일 수 있어요.",
+        ],
+    },
+    {
+        image: "/assets/rush/electric/ranc.jpg",
+        title: (
+            <>
+                <p>노면소음을 줄이는 </p>
+                <p className="text-s-blue">RANC 기술</p>
+            </>
+        ),
+        description: [
+            "현대차는 능동형 소음 저감 기술(ANC)을 넘어 노면소음을 줄이는 RANC(Road-noise Active Noise Control) 기술을 개발했어요.",
+            "RANC는 특히 저주파 대의 노면소음을 효과적으로 줄이며,",
+            "포장된 지 오래된 아스팔트 노면이나 교량 연결부의 소음을 약 3dB 감소시켜 소음 에너지를 절반 수준으로 낮춘답니다.",
+        ],
+    },
+];

client/src/features/Rush/Background.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from "react";
+
+export default function Background({ children }: PropsWithChildren) {
+    return (
+        <div className="relative z-10">
+            <div className="absolute top-0 left-[-38px] w-[880px] h-[390px] rounded-[29px] overflow-hidden bg-n-white/[.16] -rotate-[4deg] z-20">
+                <div className="w-1/2 h-full float-left bg-gradient-green blur-[40px]" />
+                <div className="w-1/2 h-full float-right bg-gradient-red blur-[40px]" />
+            </div>
+            <div className="absolute top-0 left-[35px] w-[800px] h-[390px] rounded-[29px] overflow-hidden bg-n-white/[.16] z-5">
+                <div className="w-1/2 h-full float-right bg-gradient-red blur-[40px]" />
+            </div>
+            <div className="absolute top-0 right-[35px] w-[800px] h-[390px] rounded-[29px] overflow-hidden bg-n-white/[.16] z-5">
+                <div className="w-1/2 h-full float-left bg-gradient-green blur-[40px]" />
+            </div>
+            {children}
+        </div>
+    );
+}

client/src/features/Rush/BalanceGame.tsx

@@ -0,0 +1,44 @@
+import CTAButton from "@/components/CTAButton";
+import Scroll from "@/components/Scroll";
+import Background from "@/features/Rush/Background.tsx";
+
+export default function BalanceGame() {
+    return (
+        <section className="relative h-screen bg-n-white flex flex-col gap-8 justify-center items-center">
+            <p className="h-heading-2-bold pt-10">이제 곧 하단에 밸런스 게임 주제가 공개돼요!</p>
+            <Background>
+                <div className="flex flex-col gap-6 justify-center items-center w-[800px] h-[390px] bg-n-white rounded-[29px] relative z-20">
+                    <p className="h-body-1-regular text-n-neutral-500">
+                        밸런스 게임 주제 공개까지 남은 시간
+                    </p>
+                    <div className="flex items-end gap-6 font-['HyundaiSansTextOffice-Bold'] font-normal text-[100px] text-n-neutral-950">
+                        <span className="flex flex-col justify-center items-center gap-4 w-[116px]">
+                            <p className="h-body-2-regular text-n-neutral-500">Hours</p>
+                            <p className="leading-[100px]">04</p>
+                        </span>
+                        <p className="leading-[100px]">:</p>
+                        <span className="flex flex-col justify-center items-center gap-4 w-[116px]">
+                            <p className="h-body-2-regular text-n-neutral-500">Minutes</p>
+                            <p className="leading-[100px]">21</p>
+                        </span>
+                        <p className="leading-[100px]">:</p>
+                        <span className="flex flex-col justify-center items-center gap-4 w-[116px]">
+                            <p className="h-body-2-regular text-n-neutral-500">Seconds</p>
+                            <p className="leading-[100px]">32</p>
+                        </span>
+                    </div>
+                </div>
+            </Background>
+            <div className="flex flex-col justify-center items-center gap-4 my-3">
+                <p className="h-body-2-regular text-n-neutral-500">
+                    우리 편에 투표할 친구를 불러오세요!
+                </p>
+                <CTAButton label="이벤트 링크 공유" />
+            </div>
+            <Scroll type="dark">
+                <p className="h-body-2-bold">스크롤</p>
+                <p>하고 캐스퍼 일렉트릭의 놀라운 성능을 알아보세요</p>
+            </Scroll>
+        </section>
+    );
+}

client/src/features/Rush/CasperCharge.tsx

@@ -0,0 +1,41 @@
+import CasperDescription from "@/features/Rush/CasperDescription.tsx";
+import CasperSection from "@/features/Rush/CasperSection.tsx";
+
+export default function CasperCharge() {
+    return (
+        <CasperSection>
+            <CasperDescription
+                title={
+                    <>
+                        차 안에서도 밖에서도
+                        <br />
+                        충전 가능
+                    </>
+                }
+                subTitle="캠핑갈 때 전원을 챙길 필요 없어요"
+                description={[
+                    "캠핑갈 때마다 무겁게 전원 배터리를 챙기셨나요?",
+                    "캐스퍼 일렉트릭만 있으면 언제 어디서든 전자기기 사용이 가능해요.",
+                ]}
+            />
+            <div className="flex gap-10">
+                <div className="flex flex-col gap-2">
+                    <img
+                        alt="capser charge-1"
+                        src="/assets/rush/casper/charge-1.png"
+                        className="w-[412px] h-[380px] object-cover rounded-300"
+                    />
+                    <p className="h-heading-4-bold text-n-neutral-950">차 안에서 충전</p>
+                </div>
+                <div className="flex flex-col gap-2">
+                    <img
+                        alt="capser charge-2"
+                        src="/assets/rush/casper/charge-2.png"
+                        className="w-[560px] h-[380px] object-cover rounded-300"
+                    />
+                    <p className="h-heading-4-bold text-n-neutral-950">차 밖에서 충전</p>
+                </div>
+            </div>
+        </CasperSection>
+    );
+}

client/src/features/Rush/CasperComfortable.tsx

@@ -0,0 +1,61 @@
+import CasperDescription from "@/features/Rush/CasperDescription.tsx";
+import CasperSection from "@/features/Rush/CasperSection.tsx";
+
+export default function CasperComfortable() {
+    return (
+        <CasperSection>
+            <CasperDescription
+                title={
+                    <>
+                        국내 최초 페달 오조작
+                        <br />
+                        방지 기능 탑재
+                    </>
+                }
+                subTitle={
+                    <>
+                        초보 운전자를 위한
+                        <br />
+                        안전하고 편안한 운전을 도와줄 수 있어요
+                    </>
+                }
+            />
+            <div className="flex gap-10">
+                <div className="flex flex-col gap-2">
+                    <img
+                        alt="capser comfortable-1"
+                        src="/assets/rush/casper/comfortable-1.png"
+                        className="w-[588px] h-[380px] object-cover rounded-300"
+                    />
+                    <span className="flex gap-6 text-n-neutral-950">
+                        <p className="h-heading-4-bold">페달 오조작 안전 보조(PMSA)</p>
+                        <p className="h-body-1-regular">
+                            장애물이 가까울 때 악셀 페달을 실수로 밟으면
+                            <br />
+                            스스로 멈춰서는 페달 오조작 안전 보조(PMSA) 기능이,
+                            <br />
+                            국내 최초로 캐스퍼 일렉트릭에 기본 사양으로 탑재되었어요.
+                        </p>
+                    </span>
+                </div>
+                <div className="flex flex-col gap-2">
+                    <img
+                        alt="capser comfortable-2"
+                        src="/assets/rush/casper/comfortable-2.png"
+                        className="w-[588px] h-[380px] object-cover rounded-300"
+                    />
+                    <span className="flex gap-6 text-n-neutral-950">
+                        <p className="h-heading-4-bold">현대 스마트센스 옵션</p>
+                        <p className="h-body-1-regular">
+                            기존 캐스퍼에서는 쓸 수 없었던 현대 스마트센스 옵션이 지원되면서,
+                            <br />
+                            누가 갑자기 끼어들었을 때 충돌 위험을 막아주고, 차선 이탈을 알아서
+                            <br />
+                            잡아주는 등 다양한 안전 기술을 사용할 수 있어요.
+                        </p>
+                    </span>
+                </div>
+            </div>
+        </CasperSection>
+    );
+}

client/src/features/Rush/CasperDescription.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import CasperSubDescription from "@/features/Rush/CasperSubDescription.tsx";
+
+interface CasperDescriptionProps {
+    title: ReactNode;
+    subTitle: ReactNode;
+    description?: string[] | ReactNode;
+}
+
+export default function CasperDescription({
+    title,
+    subTitle,
+    description,
+}: CasperDescriptionProps) {
+    return (
+        <div className="flex gap-[42px]">
+            <h2 className="h-heading-2-bold text-s-blue">{title}</h2>
+            <CasperSubDescription subTitle={subTitle} description={description} />
+        </div>
+    );
+}

client/src/features/Rush/CasperFar.tsx

@@ -0,0 +1,29 @@
+import CasperDescription from "@/features/Rush/CasperDescription.tsx";
+import CasperSection from "@/features/Rush/CasperSection.tsx";
+
+export default function CasperFar() {
+    return (
+        <CasperSection>
+            <CasperDescription
+                title="315km"
+                subTitle="한 번만 충전해도 멀리 갈 수 있어요"
+                description={[
+                    "캐스퍼 일렉트릭은 소형 전기차인데도, 한 번 충전했을 때 315km를 갈 수 있어요.",
+                    "한 번만 충전해도 서울에서 인천까지 9번 운전할 수 있을 정도로, 수도권에 산다면 서울 출퇴근에 활용하기 좋아요.",
+                ]}
+            />
+            <div className="flex gap-10">
+                <img
+                    alt="capser far-1"
+                    src="/assets/rush/casper/far-1.png"
+                    className="w-[660px] h-[380px] object-cover rounded-300"
+                />
+                <img
+                    alt="capser far-2"
+                    src="/assets/rush/casper/far-2.jpeg"
+                    className="w-[516px] h-[380px] object-cover rounded-300"
+                />
+            </div>
+        </CasperSection>
+    );
+}

client/src/features/Rush/CasperFast.tsx

@@ -0,0 +1,36 @@
+import CasperDescription from "@/features/Rush/CasperDescription.tsx";
+import CasperSection from "@/features/Rush/CasperSection.tsx";
+
+export default function CasperFast() {
+    return (
+        <CasperSection>
+            <CasperDescription
+                title={
+                    <>
+                        30분에
+                        <br />
+                        80% 충전
+                    </>
+                }
+                subTitle="충전 속도가 아이폰보다 빨라요"
+                description={[
+                    "충전이 오래 걸릴까 걱정 되시나요?",
+                    "캐스퍼 일렉트릭은 30분만 충전해도 배터리가 10%에서 80%까지 충전돼요.",
+                    "대부분의 아이폰보다도 빠른 속도죠!",
+                ]}
+            />
+            <div className="flex gap-10">
+                <img
+                    alt="capser fast-1"
+                    src="/assets/rush/casper/fast-1.png"
+                    className="w-[566px] h-[380px] object-cover rounded-300"
+                />
+                <img
+                    alt="capser fast-2"
+                    src="/assets/rush/casper/fast-2.png"
+                    className="w-[620px] h-[380px] object-cover rounded-300"
+                />
+            </div>
+        </CasperSection>
+    );
+}

client/src/features/Rush/CasperSection.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+
+interface CasperSectionProps extends PropsWithChildren {
+    className?: string;
+}
+export default function CasperSection({ children, className }: CasperSectionProps) {
+    return (
+        <section className="h-screen flex flex-col items-center justify-center">
+            <div className={`w-[1200px] flex flex-col gap-16 ${className}`}>{children}</div>
+        </section>
+    );
+}

client/src/features/Rush/CasperSmartKey.tsx

@@ -0,0 +1,21 @@
+import CasperSubDescription from "@/features/Rush/CasperSubDescription.tsx";
+
+export default function CasperSmartKey() {
+    return (
+        <section className="h-[800px] flex gap-10 justify-center items-center">
+            <img
+                alt="capser smart key"
+                src="/assets/rush/casper/smart-key.png"
+                className="w-[570px] h-[380px] object-cover rounded-300"
+            />
+            <CasperSubDescription
+                subTitle="스마트 키를 사용할 수 있어요"
+                description={[
+                    "내연기관 캐스퍼에는 들어가지 않았던 디지털 키를 캐스퍼 일렉트릭에서는 이용할 수 있어요.",
+                    "실물 자동차 키를 소지하지 않아도, 스마트폰이나 스마트 워치만으로 차 문을 열 수 있게 되었죠.",
+                    "(최대 7개의 디바이스까지 키 등록 가능)",
+                ]}
+            />
+        </section>
+    );
+}

client/src/features/Rush/CasperSubDescription.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+interface CasperDescriptionProps {
+    subTitle: ReactNode;
+    description?: string[] | ReactNode;
+}
+
+export default function CasperSubDescription({ subTitle, description }: CasperDescriptionProps) {
+    return (
+        <div className="flex flex-col gap-400 text-n-neutral-950">
+            <h2 className="h-heading-2-bold">{subTitle}</h2>
+            <span className="flex flex-col h-body-1-regular">
+                {Array.isArray(description)
+                    ? description.map((line, idx) => <p key={idx}>{line}</p>)
+                    : description}
+            </span>
+        </div>
+    );
+}