feature: 메인화면 퍼블리싱

app/home/_components/Home.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { Button } from "@/components/common/Button/Button";
+import BasisSection from "@/components/common/Layout/BasisSection";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+
+import Image from "next/image";
+import React, { Children } from "react";
+
+const TEMP_ITEM = {
+  comp: (
+    <div className="h-[100px]">
+      <Image
+        src="/png/ic_picture_24.png"
+        width={100}
+        height={100}
+        alt="ic_picture_24.png"
+      />
+    </div>
+  ),
+};
+
+const TEMP_SLIDE_ITEMS = Array.from({ length: 3 }).fill(
+  TEMP_ITEM.comp
+) as React.ReactNode[];
+
+const Home = () => {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) return;
+
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    <BasisSection className="bg-primary-100">
+      <div className="flex justify-between items-center h-[56px]  py-[8px] px-[12px]">
+        <div className="w-[100px] h-[40px] bg-neutral-200 flex justify-center items-center">
+          <Image
+            src="/png/ic_picture_24.png"
+            width={24}
+            height={24}
+            alt="ic_picture_24.png"
+          />
+        </div>
+        <p className="text-bold-15 text-primary-700 cursor-pointer">건너뛰기</p>
+      </div>
+
+      <div>
+        <div className="pt-[16px] pb-[27px] flex flex-col text-center bg-primary-100">
+          <p className="text-primary-700 text-black-22">모임에 가기 전</p>
+          <p className="text-black-22">가고 싶은 후보지를 모아봐요</p>
+        </div>
+
+        <Carousel setApi={setApi}>
+          <CarouselContent>
+            {Children.toArray(
+              TEMP_SLIDE_ITEMS.map((item, index) => {
+                return (
+                  <CarouselItem>
+                    <div className="bg-neutral-200 h-[312px] flex justify-center items-center">
+                      {item}
+                      {index}
+                    </div>
+                  </CarouselItem>
+                );
+              })
+            )}
+          </CarouselContent>
+        </Carousel>
+      </div>
+
+      <ul className="flex justify-center gap-[8px] py-[16px] mt-[6px]">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <li
+            key={index}
+            className={`w-[8px] h-[8px] rounded-full cursor-pointer ${
+              current - 1 === index
+                ? "bg-primary-700 opacity-100"
+                : "bg-primary-700 opacity-30"
+            }`}
+            onClick={() => {
+              api?.scrollTo(index);
+            }}
+          />
+        ))}
+      </ul>
+
+      <div className="absolute w-full bottom-0 bg-white py-[10px] px-[20px]">
+        <Button className="h-[56px]">
+          {current - 1 === 2 ? `모임 만들기` : "다음"}
+        </Button>
+      </div>
+    </BasisSection>
+  );
+};
+
+export default Home;

app/page.tsx

@@ -1,11 +1,13 @@
 import Image from "next/image";
+import Home from "./home/_components/Home";
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="flex justify-center items-center h-full flex-col gap-[16px]">
-      <p className="text-black-22">이것은 홈이다</p>
-      <p className="text-semibold-20">아직은 개발중!</p>
-      <p className="text-regular-16">뚝딱뚝딱</p>
-    </div>
+    // <div className="flex justify-center items-center h-full flex-col gap-[16px]">
+    //   <p className="text-black-22">이것은 홈이다</p>
+    //   <p className="text-semibold-20">아직은 개발중!</p>
+    //   <p className="text-regular-16">뚝딱뚝딱</p>
+    // </div>
+    <Home />
   );
 }

components/common/Button/Button.tsx

@@ -27,21 +27,18 @@ const buttonVariants = cva(
         default: `bg-primary-700 
           text-primary-foreground
           hover:bg-primary-800
-          max-w-[330px]
           w-[100%]`,
         secondary: `bg-secondary-dislike-100
           text-secondary-dislike-700
           hover:bg-secondary-dislike-700
           hover:text-white
-          max-w-[113px]
           w-[100%]
           rounded-[28px]
           `,
         natural: `bg-natural/0
           text-black
           hover:bg-natural-200
           hover:text-black
-          max-w-[113px]
           w-[100%]
           rounded-[10px]
           border-[1px]

components/common/Layout/BasisSection.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+import { cva } from "class-variance-authority";
+import React from "react";
+
+const basisSectionVariarnts = cva("min-h-screen");
+
+export interface BasisSectionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+  children: React.ReactNode;
+}
+
+const BasisSection = React.forwardRef<HTMLDivElement, BasisSectionProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(basisSectionVariarnts({ className }))}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+BasisSection.displayName = "BasisSection";
+
+export default BasisSection;

components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }