diff --git a/client/public/assets/rush/car.jpg b/client/public/assets/rush/car.jpg new file mode 100644 index 00000000..ed799d5e Binary files /dev/null and b/client/public/assets/rush/car.jpg differ diff --git a/client/public/assets/rush/casper/charge-1.png b/client/public/assets/rush/casper/charge-1.png new file mode 100644 index 00000000..6c92c5be Binary files /dev/null and b/client/public/assets/rush/casper/charge-1.png differ diff --git a/client/public/assets/rush/casper/charge-2.png b/client/public/assets/rush/casper/charge-2.png new file mode 100644 index 00000000..96c61cfa Binary files /dev/null and b/client/public/assets/rush/casper/charge-2.png differ diff --git a/client/public/assets/rush/casper/comfortable-1.png b/client/public/assets/rush/casper/comfortable-1.png new file mode 100644 index 00000000..43366a95 Binary files /dev/null and b/client/public/assets/rush/casper/comfortable-1.png differ diff --git a/client/public/assets/rush/casper/comfortable-2.png b/client/public/assets/rush/casper/comfortable-2.png new file mode 100644 index 00000000..f8dd1ca7 Binary files /dev/null and b/client/public/assets/rush/casper/comfortable-2.png differ diff --git a/client/public/assets/rush/casper/far-1.png b/client/public/assets/rush/casper/far-1.png new file mode 100644 index 00000000..7100587e Binary files /dev/null and b/client/public/assets/rush/casper/far-1.png differ diff --git a/client/public/assets/rush/casper/far-2.jpeg b/client/public/assets/rush/casper/far-2.jpeg new file mode 100644 index 00000000..bfde3add Binary files /dev/null and b/client/public/assets/rush/casper/far-2.jpeg differ diff --git a/client/public/assets/rush/casper/fast-1.png b/client/public/assets/rush/casper/fast-1.png new file mode 100644 index 00000000..8c8f1b12 Binary files /dev/null and b/client/public/assets/rush/casper/fast-1.png differ diff --git a/client/public/assets/rush/casper/fast-2.png b/client/public/assets/rush/casper/fast-2.png new file mode 100644 index 00000000..1be34570 Binary files /dev/null and b/client/public/assets/rush/casper/fast-2.png differ diff --git a/client/public/assets/rush/casper/smart-key.png b/client/public/assets/rush/casper/smart-key.png new file mode 100644 index 00000000..b27f1c4c Binary files /dev/null and b/client/public/assets/rush/casper/smart-key.png differ diff --git a/client/public/assets/rush/casper/wide-1.png b/client/public/assets/rush/casper/wide-1.png new file mode 100644 index 00000000..6c94aaa8 Binary files /dev/null and b/client/public/assets/rush/casper/wide-1.png differ diff --git a/client/public/assets/rush/casper/wide-2.png b/client/public/assets/rush/casper/wide-2.png new file mode 100644 index 00000000..6c92c5be Binary files /dev/null and b/client/public/assets/rush/casper/wide-2.png differ diff --git a/client/public/assets/rush/electric/charge.jpg b/client/public/assets/rush/electric/charge.jpg new file mode 100644 index 00000000..bd00484c Binary files /dev/null and b/client/public/assets/rush/electric/charge.jpg differ diff --git a/client/public/assets/rush/electric/e-csp.jpg b/client/public/assets/rush/electric/e-csp.jpg new file mode 100644 index 00000000..54e2d30f Binary files /dev/null and b/client/public/assets/rush/electric/e-csp.jpg differ diff --git a/client/public/assets/rush/electric/eco-friendly.jpg b/client/public/assets/rush/electric/eco-friendly.jpg new file mode 100644 index 00000000..3ad0e96c Binary files /dev/null and b/client/public/assets/rush/electric/eco-friendly.jpg differ diff --git a/client/public/assets/rush/electric/pollution.jpg b/client/public/assets/rush/electric/pollution.jpg new file mode 100644 index 00000000..7f774e72 Binary files /dev/null and b/client/public/assets/rush/electric/pollution.jpg differ diff --git a/client/public/assets/rush/electric/ranc.jpg b/client/public/assets/rush/electric/ranc.jpg new file mode 100644 index 00000000..98adc18b Binary files /dev/null and b/client/public/assets/rush/electric/ranc.jpg differ diff --git a/client/src/components/Notice/index.tsx b/client/src/components/Notice/index.tsx index 7ec2a74d..be74725b 100644 --- a/client/src/components/Notice/index.tsx +++ b/client/src/components/Notice/index.tsx @@ -19,8 +19,8 @@ interface SectionProps { const Section: React.FC = ({ title, items, indentedIndices = [] }) => (

{title}

- {items.map((item, index) => ( -

+ {items.map((item, idx) => ( +

{`•ㅤ${item}`}

))} diff --git a/client/src/constants/Rush/electricCardData.tsx b/client/src/constants/Rush/electricCardData.tsx new file mode 100644 index 00000000..91eedff2 --- /dev/null +++ b/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: ( + <> +

대기오염환경법에 따른

+

저공해차량 1종 혜택

+ + ), + description: [ + "전기차는 대기오염물질을 배출하지 않기 때문에 대기오염환경법에 따른 저공해차량 1종으로 분류돼요.", + "저공해차량 1종은 공영주차장과 비용과 고속도로 통행료 50% 할인 등의 혜택을 받을 수 있어요.", + ], + }, + { + image: "/assets/rush/electric/e-csp.jpg", + title: ( + <> +

E-CSP:

+

클릭 한 번으로 충전소가 내 손안에

+ + ), + description: [ + "현대자동차의 E-CSP(E-pit Charging Service Platform), 전기차 충전의 게임체인저!", + "E-pit의 회원이기만 하면 제휴 충전소에서 별도의 인증 없이 자유롭게 안정적인 충전 서비스를 이용 가능해요.", + "현대자동차는 양질의 충전 인프라 확대로 전기차 이용 고객의 편의가 향상되는 선순환을 지향하고 있어요.", + ], + }, + { + image: "/assets/rush/electric/charge.jpg", + title:

주유 대신 충전으로 연료비 절감

, + description: [ + "전기차는 배터리를 충전하여 전기에너지로 바퀴를 굴리는 자동차에요.", + "주유소에 가서 주유하는 대신에 충전소에서 충전하면 연료비가 1/3로 줄어요.", + "(가솔린 연비 15km 기준)", + ], + }, + { + image: "/assets/rush/electric/eco-friendly.jpg", + title: ( + <> +

화석연료 대신

+

친환경 에너지

+

로

+ + ), + description: [ + "최신 전기차는 400V/800V 급속 충전 기술을 갖추어 충전 시간을 단축하고 더 긴 거리를 주행할 수 있답니다.", + "V2G(Vehicle-to-Grid) 기술을 통해 차량 배터리에 저장된 전기를 전력망에 판매할 수 있어,", + "전력망의 안정성을 높이고 화석연료 의존도를 줄이는 데 기여해 환경오염을 줄일 수 있어요.", + ], + }, + { + image: "/assets/rush/electric/ranc.jpg", + title: ( + <> +

노면소음을 줄이는

+

RANC 기술

+ + ), + description: [ + "현대차는 능동형 소음 저감 기술(ANC)을 넘어 노면소음을 줄이는 RANC(Road-noise Active Noise Control) 기술을 개발했어요.", + "RANC는 특히 저주파 대의 노면소음을 효과적으로 줄이며,", + "포장된 지 오래된 아스팔트 노면이나 교량 연결부의 소음을 약 3dB 감소시켜 소음 에너지를 절반 수준으로 낮춘답니다.", + ], + }, +]; diff --git a/client/src/features/Rush/Background.tsx b/client/src/features/Rush/Background.tsx new file mode 100644 index 00000000..ec3dba79 --- /dev/null +++ b/client/src/features/Rush/Background.tsx @@ -0,0 +1,19 @@ +import { PropsWithChildren } from "react"; + +export default function Background({ children }: PropsWithChildren) { + return ( +
+
+
+
+
+
+
+
+
+
+
+ {children} +
+ ); +} diff --git a/client/src/features/Rush/BalanceGame.tsx b/client/src/features/Rush/BalanceGame.tsx new file mode 100644 index 00000000..005b2843 --- /dev/null +++ b/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 ( +
+

이제 곧 하단에 밸런스 게임 주제가 공개돼요!

+ +
+

+ 밸런스 게임 주제 공개까지 남은 시간 +

+
+ +

Hours

+

04

+ +

:

+ +

Minutes

+

21

+ +

:

+ +

Seconds

+

32

+ +
+
+ +
+

+ 우리 편에 투표할 친구를 불러오세요! +

+ +
+ +

스크롤

+

하고 캐스퍼 일렉트릭의 놀라운 성능을 알아보세요

+ +
+ ); +} diff --git a/client/src/features/Rush/CasperCharge.tsx b/client/src/features/Rush/CasperCharge.tsx new file mode 100644 index 00000000..988d4742 --- /dev/null +++ b/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 ( + + + 차 안에서도 밖에서도 +
+ 충전 가능 + + } + subTitle="캠핑갈 때 전원을 챙길 필요 없어요" + description={[ + "캠핑갈 때마다 무겁게 전원 배터리를 챙기셨나요?", + "캐스퍼 일렉트릭만 있으면 언제 어디서든 전자기기 사용이 가능해요.", + ]} + /> +
+
+ capser charge-1 +

차 안에서 충전

+
+
+ capser charge-2 +

차 밖에서 충전

+
+
+ + ); +} diff --git a/client/src/features/Rush/CasperComfortable.tsx b/client/src/features/Rush/CasperComfortable.tsx new file mode 100644 index 00000000..fcfbfea2 --- /dev/null +++ b/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 ( + + + 국내 최초 페달 오조작 +
+ 방지 기능 탑재 + + } + subTitle={ + <> + 초보 운전자를 위한 +
+ 안전하고 편안한 운전을 도와줄 수 있어요 + + } + /> +
+
+ capser comfortable-1 + +

페달 오조작 안전 보조(PMSA)

+

+ 장애물이 가까울 때 악셀 페달을 실수로 밟으면 +
+ 스스로 멈춰서는 페달 오조작 안전 보조(PMSA) 기능이, +
+ 국내 최초로 캐스퍼 일렉트릭에 기본 사양으로 탑재되었어요. +

+ +
+
+ capser comfortable-2 + +

현대 스마트센스 옵션

+

+ 기존 캐스퍼에서는 쓸 수 없었던 현대 스마트센스 옵션이 지원되면서, +
+ 누가 갑자기 끼어들었을 때 충돌 위험을 막아주고, 차선 이탈을 알아서 +
+ 잡아주는 등 다양한 안전 기술을 사용할 수 있어요. +

+ +
+
+ + ); +} diff --git a/client/src/features/Rush/CasperDescription.tsx b/client/src/features/Rush/CasperDescription.tsx new file mode 100644 index 00000000..8a5868a7 --- /dev/null +++ b/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 ( +
+

{title}

+ +
+ ); +} diff --git a/client/src/features/Rush/CasperFar.tsx b/client/src/features/Rush/CasperFar.tsx new file mode 100644 index 00000000..7b59b005 --- /dev/null +++ b/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 ( + + +
+ capser far-1 + capser far-2 +
+ + ); +} diff --git a/client/src/features/Rush/CasperFast.tsx b/client/src/features/Rush/CasperFast.tsx new file mode 100644 index 00000000..651b888d --- /dev/null +++ b/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 ( + + + 30분에 +
+ 80% 충전 + + } + subTitle="충전 속도가 아이폰보다 빨라요" + description={[ + "충전이 오래 걸릴까 걱정 되시나요?", + "캐스퍼 일렉트릭은 30분만 충전해도 배터리가 10%에서 80%까지 충전돼요.", + "대부분의 아이폰보다도 빠른 속도죠!", + ]} + /> +
+ capser fast-1 + capser fast-2 +
+ + ); +} diff --git a/client/src/features/Rush/CasperSection.tsx b/client/src/features/Rush/CasperSection.tsx new file mode 100644 index 00000000..718941ba --- /dev/null +++ b/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 ( +
+
{children}
+
+ ); +} diff --git a/client/src/features/Rush/CasperSmartKey.tsx b/client/src/features/Rush/CasperSmartKey.tsx new file mode 100644 index 00000000..e74445de --- /dev/null +++ b/client/src/features/Rush/CasperSmartKey.tsx @@ -0,0 +1,21 @@ +import CasperSubDescription from "@/features/Rush/CasperSubDescription.tsx"; + +export default function CasperSmartKey() { + return ( +
+ capser smart key + +
+ ); +} diff --git a/client/src/features/Rush/CasperSubDescription.tsx b/client/src/features/Rush/CasperSubDescription.tsx new file mode 100644 index 00000000..159b8ac8 --- /dev/null +++ b/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 ( +
+

{subTitle}

+ + {Array.isArray(description) + ? description.map((line, idx) =>

{line}

) + : description} + +
+ ); +} diff --git a/client/src/features/Rush/CasperWide.tsx b/client/src/features/Rush/CasperWide.tsx new file mode 100644 index 00000000..00e070ec --- /dev/null +++ b/client/src/features/Rush/CasperWide.tsx @@ -0,0 +1,51 @@ +import CasperDescription from "@/features/Rush/CasperDescription.tsx"; +import CasperSection from "@/features/Rush/CasperSection.tsx"; + +export default function CasperWide() { + return ( + + + 풀 폴딩 시트로 +
+ 차박하기 + + } + subTitle="실내 공간이 여유롭게 넓어졌어요" + description={ + <> + 캐스퍼 일렉트릭은 캐스퍼에 비해 크기가 더 커지면서, 다리를 둘 수 있는 공간이 + 더 여유로워졌어요. +
+ 또 1열과 2열의 의자를 모두 완전히 접을 수 있어 차박을 하거나, 골프백도 넣을 + 수 있어요. +
+
+ *전장 3,825mm, 전폭 1,610mm, 전고 1,575mm, 휠베이스 2,580mm + + } + /> +
+
+ capser wide-1 +

+ 2열 슬라이딩 & 리클라이닝 시트 +

+
+
+ capser wide-2 +

풀 폴딩 시트(전좌석)

+
+
+ + ); +} diff --git a/client/src/features/Rush/ElectricAdvantage.tsx b/client/src/features/Rush/ElectricAdvantage.tsx new file mode 100644 index 00000000..0b7b5f72 --- /dev/null +++ b/client/src/features/Rush/ElectricAdvantage.tsx @@ -0,0 +1,69 @@ +import { ElectricSection } from "@/features/Rush/ElectricSection.tsx"; + +export default function ElectricAdvantage() { + return ( + +

다른 전기차에 비해 가격 부담이 적어요

+

전기차 가격의 혁신을 이뤄냈거든요

+ + } + descriptionClass="flex flex-col justify-center items-center" + descriptionChildren={ + <> + +

+ 캐스퍼 일렉트릭은 전기차를 대중적으로 사용하게 하는걸 목표로, 일반적인 + 전기차들보다{" "} +

+

+ 훨씬 저렴하게 나온 도심형 전기차 +

+

예요.

+ +

+ 도시 주행에 필요한 기능만 알차게 담아, 일반적으로 다른 전기차 모델보다 20% + 저렴한 가격에 구매할 수 있어요. +

+ + } + > +
+
+
+
+

2957만

+
+
+
+

+ 4671만 +

+
+
+
+

+ 5213만 +

+
+
+
+ +

캐스퍼 일렉트릭

+

소형 SUV

+

중형 SUV

+ +
+
+

2957만 원*

+ +

Inspiration 트림 기준

+

세금감면 시(옵션 제외)

+ +
+
+ + ); +} diff --git a/client/src/features/Rush/ElectricReason.tsx b/client/src/features/Rush/ElectricReason.tsx new file mode 100644 index 00000000..5fae9c15 --- /dev/null +++ b/client/src/features/Rush/ElectricReason.tsx @@ -0,0 +1,34 @@ +import { useState } from "react"; +import Toggle from "@/components/Toggle"; +import { CARD_DATA, TOGGLE_OPTIONS } from "@/constants/Rush/electricCardData.tsx"; +import ElectricReasonCard from "@/features/Rush/ElectricReasonCard.tsx"; +import { ElectricSection } from "@/features/Rush/ElectricSection.tsx"; + +export default function ElectricReason() { + const [selectedIdx, setSelectedIdx] = useState(0); + + const handleToggle = (idx: number) => { + setSelectedIdx(idx); + }; + + return ( + 전기차를 사야 하는 5가지 이유

} + descriptionChildren={ + <> +

궁금한 문장을

+

클릭

+

해 세부 내용을 확인해보세요

+ + } + > + + + + ); +} diff --git a/client/src/features/Rush/ElectricReasonCard.tsx b/client/src/features/Rush/ElectricReasonCard.tsx new file mode 100644 index 00000000..3539792d --- /dev/null +++ b/client/src/features/Rush/ElectricReasonCard.tsx @@ -0,0 +1,27 @@ +import { ReactNode } from "react"; + +interface CardData { + image: string; + title: ReactNode; + description: string[]; +} + +interface ElectricReasonCardProps { + data: CardData; +} + +export default function ElectricReasonCard({ data }: ElectricReasonCardProps) { + return ( +
+ card image + + {data.title} + + {data.description.map((line, idx) => ( +

{line}

+ ))} + + +
+ ); +} diff --git a/client/src/features/Rush/ElectricSection.tsx b/client/src/features/Rush/ElectricSection.tsx new file mode 100644 index 00000000..ecdbb8df --- /dev/null +++ b/client/src/features/Rush/ElectricSection.tsx @@ -0,0 +1,30 @@ +import { ReactNode } from "react"; +import Tooltip from "@/components/Tooltip"; + +interface ElectricSectionProps { + tooltipContent: string; + tooltipChildren: ReactNode; + children: ReactNode; + descriptionClass?: string; + descriptionChildren: ReactNode; +} + +export function ElectricSection({ + tooltipContent, + tooltipChildren, + children, + descriptionClass, + descriptionChildren, +}: ElectricSectionProps) { + return ( +
+ + {tooltipChildren} + + + {descriptionChildren} + + {children} +
+ ); +} diff --git a/client/src/features/Rush/FAQ.tsx b/client/src/features/Rush/FAQ.tsx new file mode 100644 index 00000000..416d465f --- /dev/null +++ b/client/src/features/Rush/FAQ.tsx @@ -0,0 +1,27 @@ +export default function FAQ() { + return ( +
+ +

캐스퍼가 전기차로 돌아왔어요

+

전기차가 아직 낯설다구요?

+ +

+ 전기차에 대한 작고 큰 오해들, 캐스퍼 일렉트릭과 함께 이번 기회에 풀어봐요 +

+ +

+ 충전소를 찾기 어려울 것 같아요 +

+

+ 주행 거리가 짧지 않나요? +

+

+ 충전이 너무 오래 걸릴 것 같아요 +

+

+ 배터리 수명이 짧진 않나요? +

+ +
+ ); +} diff --git a/client/src/features/Rush/Intro.tsx b/client/src/features/Rush/Intro.tsx new file mode 100644 index 00000000..0469fd26 --- /dev/null +++ b/client/src/features/Rush/Intro.tsx @@ -0,0 +1,16 @@ +export default function Intro() { + return ( +
+

나의 첫 전기차 CASPER Electric

+ +

전기차가 처음이라면

+

CASPER Electric으로 시작해요

+ + +

캐스퍼 일렉트릭은 이번에 현대자동차에서 새롭게 출시한 도심형 전기차예요.

+

SUV 캐스퍼의 전기차 모델로, 2024년 7월 9일부터 사전예약을 받기 시작해

+

아직 실제 길에서는 볼 수 없는 따끈따끈한 신모델이랍니다.

+ +
+ ); +} diff --git a/client/src/features/Rush/ReasonFirst.tsx b/client/src/features/Rush/ReasonFirst.tsx new file mode 100644 index 00000000..fb931304 --- /dev/null +++ b/client/src/features/Rush/ReasonFirst.tsx @@ -0,0 +1,14 @@ +import ReasonSection from "@/features/Rush/ReasonSection.tsx"; + +export default function ReasonFirst() { + return ( + +

전기차가 처음이라면

+ +

캐스퍼 일렉트릭의 뛰어난

+

성능

+

에 놀라실 거예요

+ + + ); +} diff --git a/client/src/features/Rush/ReasonSecond.tsx b/client/src/features/Rush/ReasonSecond.tsx new file mode 100644 index 00000000..cd817a1e --- /dev/null +++ b/client/src/features/Rush/ReasonSecond.tsx @@ -0,0 +1,10 @@ +import ReasonSection from "@/features/Rush/ReasonSection.tsx"; + +export default function ReasonSecond() { + return ( + +

라이프스타일 그대로

+

캐스퍼 일렉트릭과 함께해요

+ + ); +} diff --git a/client/src/features/Rush/ReasonSection.tsx b/client/src/features/Rush/ReasonSection.tsx new file mode 100644 index 00000000..9fada850 --- /dev/null +++ b/client/src/features/Rush/ReasonSection.tsx @@ -0,0 +1,17 @@ +import { ReactNode } from "react"; + +interface ReasonSectionProps { + subtitle: string; + children: ReactNode; +} + +export default function ReasonSection({ subtitle, children }: ReasonSectionProps) { + return ( +
+

{subtitle}

+ + {children} + +
+ ); +} diff --git a/client/src/pages/Lottery/index.tsx b/client/src/pages/Lottery/index.tsx index b7090554..7458875b 100644 --- a/client/src/pages/Lottery/index.tsx +++ b/client/src/pages/Lottery/index.tsx @@ -54,7 +54,6 @@ export default function Lottery() { -