[#3] 공통 컴포넌트 개발

.github/ISSUE_TEMPLATE/🐞-버그-리포트-템플릿.md

@@ -0,0 +1,25 @@
+---
+name: "\U0001F41E 버그 리포트 템플릿"
+about: 프로젝트에서 발생하는 버그에 대해 명세합니다.
+title: "[Bug] Issue title"
+labels: "\U0001F41E BugFix"
+assignees: ""
+---
+
+## 💬 버그 설명
+
+문제가 생긴 상황을 간단히 설명해주세요.
+
+## 🔁 재현 방법
+
+문제가 어떻게 발생했는지 순서대로 작성해주세요.
+
+## ⚙️ 기대 동작
+
+정상적으로 어떤 동작을 기대했는지 설명해주세요.
+
+## 📸 스크린샷 (선택사항)
+
+## 📄 추가 정보
+
+기타 참고할만한 정보나 자료가 있다면 자유롭게 작성해주세요.

.github/ISSUE_TEMPLATE/🐞-버그-리포트-템플릿.md

@@ -3,20 +3,23 @@ name: "\U0001F41E 버그 리포트 템플릿"
 about: 프로젝트에서 발생하는 버그에 대해 명세합니다.
 title: "[Bug] Issue title"
 labels: "\U0001F41E BugFix"
-assignees: ''
-
+assignees: ""
 ---
 
 ## 💬 버그 설명
+
 문제가 생긴 상황을 간단히 설명해주세요.
 
 ## 🔁 재현 방법
+
 문제가 어떻게 발생했는지 순서대로 작성해주세요.
 
 ## ⚙️ 기대 동작
+
 정상적으로 어떤 동작을 기대했는지 설명해주세요.
 
 ## 📸 스크린샷 (선택사항)
 
 ## 📄 추가 정보
+
 기타 참고할만한 정보나 자료가 있다면 자유롭게 작성해주세요.

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/nextjs";
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mdc|ts|tsx)"],
   addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
@@ -11,6 +12,7 @@ const config: StorybookConfig = {
       },
     },
   },
+  staticDirs: ["../public"],
   typescript: {
     check: false,
     reactDocgen: "react-docgen-typescript",
@@ -36,4 +38,5 @@ const config: StorybookConfig = {
     return config;
   },
 };
+
 export default config;

src/app/example/page.tsx

@@ -1,21 +1,76 @@
 "use client";
 
-import { SelectType } from "@/components";
-import Header from "@/components/header/Header";
+import { Chip, DropdownMenu, Flavor, Header, SelectType } from "@/components";
 import React, { ChangeEvent } from "react";
 
 const Page = () => {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     console.log(e.target.value);
   };
   return (
-    <div>
+    <div className="flex-col-center gap-4">
       <Header
         review="5,446"
         title="Sentinel Carbernet Sauvignon 2016"
         description="Western Cape, South Africa"
         price="64,990"
       />
+      <div className="flex-center gap-4">
+        <DropdownMenu
+          items={[
+            { label: "마이페이지", href: "/my-page" },
+            { label: "로그아웃", onClick: () => console.log("로그아웃") },
+          ]}
+        />
+        <DropdownMenu
+          items={[
+            { label: "example", href: "/example" },
+            { label: "임시", onClick: () => console.log("임시") },
+          ]}
+        />
+        <DropdownMenu
+          items={[
+            { label: "수정하기", onClick: () => console.log("수정하기") },
+            { label: "삭제하기", onClick: () => console.log("삭제하기") },
+          ]}
+        />
+        <DropdownMenu
+          items={[
+            { label: "메인페이지", href: "/" },
+            { label: "버튼클릭", onClick: () => console.log("버튼클릭") },
+          ]}
+        />
+      </div>
+      <div className="flex-center gap-4">
+        <Chip label="후추" />
+        <Chip label="후추" img="/images/test/test_chip.jpg" />
+      </div>
+      <div>
+        <Flavor
+          count={5}
+          items={[
+            "CHERRY",
+            "OAK",
+            "VANILLA",
+            "PEPPER",
+            "BAKING",
+            "GRASS",
+            "APPLE",
+            "PEACH",
+            "CITRUS",
+            "TROPICAL",
+            "MINERAL",
+            "FLOWER",
+            "TOBACCO",
+            "EARTH",
+            "CHOCOLATE",
+            "SPICE",
+            "CARAMEL",
+            "LEATHER",
+            "EMPTY",
+          ]}
+        />
+      </div>
 
       <section>
         <SelectType isError={false} onChange={handleChange} />

src/app/globals.css

@@ -51,3 +51,13 @@ body {
     /* stroke: currentColor; */
   }
 }
+
+/* 스크롤바 숨기기 */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

src/components/chip/Chip.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import Chip from "./Chip";
+
+const meta: Meta<typeof Chip> = {
+  title: "Components/Chip",
+  parameters: {
+    layout: "centered",
+  },
+  component: Chip,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[66px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "후추",
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    label: "후추",
+    img: "/images/test/test_chip.jpg",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[100px]">
+        <Story />
+      </div>
+    ),
+  ],
+};

src/components/chip/Chip.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { useState } from "react";
+
+interface ChipProps {
+  img?: string;
+  label: string;
+}
+
+const Chip = ({ img, label }: ChipProps) => {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <button
+      data-selected={selected}
+      aria-pressed={selected}
+      className={cn(
+        "flex-center h-[38px] cursor-pointer rounded-full border text-body-sm tracking-[-0.02em]",
+        "transition-colors duration-150 ease-in-out hover:bg-gray-100 hover:text-black",
+        "data-[selected=true]:bg-gray-800 data-[selected=true]:text-white data-[selected=true]:hover:bg-gray-800 data-[selected=true]:hover:text-white",
+        "pc:h-[48px] pc:text-body-md",
+        img
+          ? "gap-2 pl-2 pr-4 mobile:gap-[6px] mobile:pr-3"
+          : "px-[18px] mobile:px-3"
+      )}
+      onClick={() => setSelected(!selected)}
+    >
+      {img && (
+        <Image
+          src={img}
+          alt={`${label} 이미지`}
+          width={32}
+          height={32}
+          className="h-8 w-8 rounded-full mobile:h-6 mobile:w-6"
+        />
+      )}
+      <span>{label}</span>
+    </button>
+  );
+};
+
+export default Chip;

src/components/dropdown-menu/DropdownMenu.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import DropdownMenu from "./DropdownMenu";
+
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    items: { control: "object" },
+  },
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: "마이페이지", href: "/my-page" },
+      { label: "로그아웃", onClick: () => console.log("로그아웃") },
+    ],
+  },
+};
+
+export const EditDelete: Story = {
+  parameters: { nextjs: { navigation: { pathname: "/write" } } },
+  args: {
+    items: [
+      { label: "수정하기", onClick: () => console.log("수정하기") },
+      { label: "삭제하기", onClick: () => console.log("삭제하기") },
+    ],
+  },
+};

src/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+interface DropdownMenuProps {
+  items: { label: string; href?: string; onClick?: () => void }[];
+}
+
+const style = {
+  itemBase:
+    "flex-center h-full w-full rounded-md text-[16px] leading-[26px] text-gray-800 transition-colors hover:bg-gray-200",
+};
+
+function DropdownMenu({ items }: DropdownMenuProps) {
+  const pathname = usePathname();
+
+  const isActive = (href?: string) => Boolean(href && pathname === href);
+
+  return (
+    <div
+      className={cn(
+        "flex-col-center rounded-[4px] border border-gray-300 p-[3px] shadow-md",
+        "h-[92px] w-[101px]",
+        "tablet:h-[90px] tablet:w-[126px]",
+        "pc:h-[90px] pc:w-[126px]"
+      )}
+    >
+      {items.map(({ label, href, onClick }) =>
+        href ? (
+          <Link
+            key={label}
+            href={href}
+            className={cn(
+              style.itemBase,
+              isActive(href) && "bg-gray-800 text-white"
+            )}
+          >
+            {label}
+          </Link>
+        ) : (
+          <button key={label} onClick={onClick} className={style.itemBase}>
+            {label}
+          </button>
+        )
+      )}
+    </div>
+  );
+}
+
+export default DropdownMenu;

src/components/flavor/Flavor.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/nextjs";
+import Flavor from "./Flavor";
+import { AromaKey } from "@/types/AromaType";
+
+const meta: Meta<typeof Flavor> = {
+  title: "Components/Flavor",
+  component: Flavor,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    count: { control: "number", description: "참여 인원 수 표시" },
+    items: {
+      control: "object",
+      description: "향 아이템 키 목록 (AromaKey[])",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Flavor>;
+
+const ITEMS: AromaKey[] = ["CHERRY", "PEPPER", "EMPTY"];
+
+export const Default: Story = {
+  args: {
+    count: 12,
+    items: ITEMS.slice(0, 1),
+  },
+};
+
+export const ThreeItems: Story = {
+  args: {
+    count: 3,
+    items: ITEMS,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    count: 0,
+    items: [],
+  },
+};