From d24b7f25db43c5e00db7f6d104a3d1e37d2a37a5 Mon Sep 17 00:00:00 2001
From: smilevictory <leevictory7272@gmail.com>
Date: Fri, 5 Sep 2025 01:07:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=99=88=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?mvp=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ssh/package-lock.json                         |  29 ++
 ssh/package.json                              |   1 +
 ssh/src/components/Layout/index.tsx           |   2 +-
 ssh/src/components/ui/carousel.tsx            | 260 ++++++++++++++++++
 .../Home/components/firstsection/hero.tsx     | 106 +++++++
 .../secondsection/servicecarousel.tsx         | 106 +++++++
 ssh/src/pages/Home/index.tsx                  |  10 +-
 7 files changed, 512 insertions(+), 2 deletions(-)
 create mode 100644 ssh/src/components/ui/carousel.tsx
 create mode 100644 ssh/src/pages/Home/components/firstsection/hero.tsx
 create mode 100644 ssh/src/pages/Home/components/secondsection/servicecarousel.tsx

diff --git a/ssh/package-lock.json b/ssh/package-lock.json
index a69afef..83d714a 100644
--- a/ssh/package-lock.json
+++ b/ssh/package-lock.json
@@ -13,6 +13,7 @@
         "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.6.0",
         "lucide-react": "^0.542.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
@@ -2835,6 +2836,34 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
diff --git a/ssh/package.json b/ssh/package.json
index 8968ab7..17cf776 100644
--- a/ssh/package.json
+++ b/ssh/package.json
@@ -15,6 +15,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.542.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/ssh/src/components/Layout/index.tsx b/ssh/src/components/Layout/index.tsx
index c67e38b..007669c 100644
--- a/ssh/src/components/Layout/index.tsx
+++ b/ssh/src/components/Layout/index.tsx
@@ -6,7 +6,7 @@ export default function RootLayout() {
   return (
     <>
       <Header />
-      <main className="mx-auto w-full max-w-screen-xl px-4 pt-20 pb-6 flex-1">
+      <main className="w-full pt-20">
         <Outlet />
       </main>
       <Footer />
diff --git a/ssh/src/components/ui/carousel.tsx b/ssh/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..9c2b9bf
--- /dev/null
+++ b/ssh/src/components/ui/carousel.tsx
@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
diff --git a/ssh/src/pages/Home/components/firstsection/hero.tsx b/ssh/src/pages/Home/components/firstsection/hero.tsx
new file mode 100644
index 0000000..7ab6db2
--- /dev/null
+++ b/ssh/src/pages/Home/components/firstsection/hero.tsx
@@ -0,0 +1,106 @@
+import { Button } from "@/components/ui/button";
+
+export default function Hero() {
+  return (
+    <section className="relative isolate w-full bg-background pb-16">
+      <div
+        aria-hidden
+        className="
+          absolute left-1/2 -translate-x-1/2 z-0
+          w-[100vw] h-[100vw] -top-[50vw]
+          rounded-full
+          bg-[radial-gradient(ellipse_at_center,_#ecfdf5_0%,_#e6fff5_35%,_#d1fae5_65%,_#a7f3d0_100%)]
+        "
+      />
+
+      <div className="relative z-10 mx-auto w-full max-w-screen-lg px-6">
+        <div className="h-[50vw] flex flex-col items-center justify-center text-center gap-4 sm:gap-6 md:gap-8">
+          <h1 className="text-4xl font-extrabold sm:text-2xl md:text-6xl">
+            <span className="block">대화로 이어지는 당신의 금융 동반자</span>
+            <span className="block mt-4">마음잇는 목소리</span>
+          </h1>
+
+          <p className="text-base text-muted-foreground sm:text-lg">
+            우리 사이트 한줄 소개
+          </p>
+
+          <Waveform className="h-28 w-full max-auto" />
+
+          <h2 className="text-2xl font-semibold sm:text-3xl">
+            지금 바로 사용해보세요
+          </h2>
+
+          <div className="flex flex-wrap items-center justify-center gap-5">
+            <Button
+              size="lg"
+              className="rounded-full px-20 py-8 text-2xl shadow-md hover:shadow-lg"
+            >
+              시작하기
+            </Button>
+
+            <Button
+              size="lg"
+              variant="secondary"
+              className="rounded-full px-20 py-8 text-2xl shadow-md hover:shadow-lg"
+            >
+              더 알아보기
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Waveform({ className = "" }: { className?: string }) {
+  const base = [
+    60, 96, 78, 64, 72, 66, 56, 82, 60, 82, 56, 66, 72, 64, 78, 96, 60,
+  ];
+  const scale = 1.4;
+  const mid = 60;
+  const vbH = 120;
+
+  const scaled = base.map((h) => h * scale);
+  const maxH = Math.max(...scaled);
+  const safety = 0.95;
+  const fit = Math.min(1, (vbH * safety) / maxH);
+  const heights = scaled.map((h) => h * fit);
+
+  return (
+    <svg
+      viewBox="0 0 520 120"
+      className={className + " drop-shadow-[0_6px_12px_rgba(2,132,199,0.20)]"}
+      role="img"
+      aria-label="음성 파형"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      <defs>
+        <linearGradient id="waveBar" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#67e8f9" />
+          <stop offset="100%" stopColor="#3b82f6" />
+        </linearGradient>
+      </defs>
+
+      {heights.map((h, i) => {
+        const barW = 16;
+        const gap = 14;
+        const x = 20 + i * (barW + gap);
+        const y = mid - h / 2;
+        const delay = (i % 6) * 0.08;
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={y}
+            width={barW}
+            height={h}
+            rx={8}
+            fill="url(#waveBar)"
+            className="origin-center animate-[pulse_2.2s_ease-in-out_infinite]"
+            style={{ animationDelay: `${delay}s` }}
+          />
+        );
+      })}
+    </svg>
+  );
+}
diff --git a/ssh/src/pages/Home/components/secondsection/servicecarousel.tsx b/ssh/src/pages/Home/components/secondsection/servicecarousel.tsx
new file mode 100644
index 0000000..481cfa2
--- /dev/null
+++ b/ssh/src/pages/Home/components/secondsection/servicecarousel.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import * as React from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import { MessagesSquare, MapPinned, Heart, ClipboardCheck } from "lucide-react";
+
+export default function ServiceCarousel() {
+  const [api, setApi] = React.useState<CarouselApi | null>(null);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) return;
+
+    const onSelect = () => setActiveIndex(api.selectedScrollSnap());
+
+    onSelect();
+    api.on("select", onSelect);
+    api.on("reInit", onSelect);
+
+    return () => {
+      api.off("select", onSelect);
+      api.off("reInit", onSelect);
+    };
+  }, [api]);
+
+  const services = [
+    {
+      icon: <MessagesSquare className="w-10 h-10 text-primary" />,
+      title: "간편한 은행 안내 서비스",
+      desc: "말로 하시면 글자로 바꿔주고, 글자는 소리로 읽어주는 기능을 지원합니다. 음성으로도, 문자로도 쉽고 편하게 은행 서비스를 이용할 수 있습니다.",
+    },
+    {
+      icon: <MapPinned className="w-10 h-10 text-primary" />,
+      title: "ATM 위치 안내",
+      desc: "늦은 밤이나 인터넷 뱅킹을 쓰기 어려울 때, 내 주변에서 가까운 ATM을 바로 찾아드립니다. 은행 이름과 이용 가능 시간도 함께 알려주어 편리하고 안전하게 현금을 찾을 수 있습니다.",
+    },
+    {
+      icon: <Heart className="w-10 h-10 text-primary" />,
+      title: "사전 유산 서비스",
+      desc: "내가 세상을 떠난 후 남은 재산이 어디에 쓰일지 알 수 없을 때, 미리 원하는 곳을 지정해 의미 있게 사용되도록 할 수 있습니다.",
+    },
+    {
+      icon: <ClipboardCheck className="w-10 h-10 text-primary" />,
+      title: "보이스 피싱 진단",
+      desc: "내가 받은 연락이 혹시 보이스피싱일까? 의심될 때 직접 전화번호 또는 계좌번호를 조회해서 확인하고, 단계별 검사를 통해 자가 진단할 수 있습니다.",
+    },
+  ];
+
+  return (
+    <section className="w-full bg-gray-50 py-20">
+      <div className="mx-auto max-w-screen-lg px-6 text-center">
+        <p className="text-muted-foreground mb-2">
+          우리 서비스를 소개하겠습니다
+        </p>
+        <h2 className="text-2xl sm:text-3xl font-bold mb-10">
+          "이제는 한줄 한줄 직접 대화하는 듯한 설명으로 금융 서비스에 다가가요"
+        </h2>
+
+        <Carousel
+          className="mx-auto max-w-4xl"
+          setApi={setApi}
+          opts={{ loop: true, align: "center" }}
+        >
+          <CarouselContent>
+            {services.map((s, i) => (
+              <CarouselItem
+                key={i}
+                className="basis-full md:basis-1/3 px-4 py-12 flex justify-center"
+              >
+                <div
+                  className={`bg-card text-card-foreground rounded-2xl p-6 transition-[transform,box-shadow] duration-300
+                  ${
+                    activeIndex === i
+                      ? "scale-110 shadow-xl"
+                      : "scale-95 opacity-75 shadow-md"
+                  }`}
+                >
+                  <div className="mb-4 flex justify-center">{s.icon}</div>
+                  <h3 className="text-lg font-semibold mb-2">{s.title}</h3>
+                  <p className="text-sm text-muted-foreground">{s.desc}</p>
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          <div className="mt-6 flex items-center justify-center gap-2">
+            <CarouselPrevious className="static translate-y-0 top-auto left-auto right-auto h-10 w-10 rounded-full border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80" />
+            <div className="mx-1 flex items-center gap-1.5" aria-hidden="true">
+              <span className="h-2 w-2 rounded-full bg-primary/30"></span>
+              <span className="h-2 w-2 rounded-full bg-primary/30"></span>
+              <span className="h-2 w-2 rounded-full bg-primary/30"></span>
+            </div>
+            <CarouselNext className="static translate-y-0 top-auto left-auto right-auto h-10 w-10 rounded-full border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80" />
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+}
diff --git a/ssh/src/pages/Home/index.tsx b/ssh/src/pages/Home/index.tsx
index a60423f..39ddf5d 100644
--- a/ssh/src/pages/Home/index.tsx
+++ b/ssh/src/pages/Home/index.tsx
@@ -1,5 +1,13 @@
+import Hero from "./components/firstsection/hero";
+import ServiceCarousel from "./components/secondsection/servicecarousel";
+
 const HomePage = () => {
-  return <h1>홈페이지</h1>;
+  return (
+    <>
+      <Hero />
+      <ServiceCarousel />
+    </>
+  );
 };
 
 export default HomePage;