[FEAT] PrioritySelector & TagSelector & 드롭다운 셸 컴포넌트 구현

packages/timo-design-system/src/components/index.ts

@@ -1,8 +1,11 @@
 export { Checkbox } from "@components/checkbox/Checkbox";
-export { Color } from "@components/color/Color";
-export { Typography } from "@components/typography/Typography";
-export { Tag } from "@components/tag/Tag";
-export { PriorityIcon } from "@components/priority-icon/PriorityIcon";
+export { Color } from "@components/tokens/color/Color";
+export { Typography } from "@components/tokens/typography/Typography";
+export { TagIcon } from "@components/tag/tag-icon/TagIcon";
+export { TagSelector } from "@components/tag/tag-selector/TagSelector";
+export { PriorityIcon } from "@components/priority/priority-icon/PriorityIcon";
+export { PrioritySelector } from "@components/priority/priority-selector/PrioritySelector";
+export { CreateButton } from "@components/button/create-button/CreateButton";
 export { AddTaskButton } from "@components/button/add-task-button/AddTaskButton";
 export { TodayBadge } from "@components/badge/today-badge/TodayBadge";
 export { PlayButton } from "@components/button/play-button/PlayButton";

packages/timo-design-system/src/components/layout/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,44 @@
+import { Dropdown } from "@components/layout/dropdown/Dropdown";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/layout/Dropdown",
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light-gray",
+      values: [
+        { name: "light-gray", value: "#F5F5F5" },
+        { name: "dark", value: "#333333" },
+        { name: "white", value: "#FFFFFF" },
+      ],
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SAMPLE_ITEMS = ["옵션 1", "옵션 2", "옵션 3"];
+
+export const Default: Story = {
+  name: "Basic Usage",
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger className="typo-headline-r-14 text-timo-black rounded-4 bg-timo-gray-300 px-3 py-1.5">
+        트리거
+      </Dropdown.Trigger>
+
+      <Dropdown.Panel className="gap-1">
+        {SAMPLE_ITEMS.map((item) => (
+          <Dropdown.Item key={item} className="px-1.5 py-1">
+            <span className="typo-headline-r-14 text-timo-black whitespace-nowrap">
+              {item}
+            </span>
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Panel>
+    </Dropdown>
+  ),
+};

packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { cn } from "@lib";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+
+interface DropdownContextValue {
+  isOpen: boolean;
+  toggle: () => void;
+  close: () => void;
+}
+
+const DropdownContext = createContext<DropdownContextValue | null>(null);
+
+const useDropdownContext = (): DropdownContextValue => {
+  const context = useContext(DropdownContext);
+
+  if (!context) {
+    throw new Error(
+      "Dropdown.Trigger, Dropdown.Panel은 Dropdown 내부에서만 사용할 수 있습니다.",
+    );
+  }
+
+  return context;
+};
+
+export interface DropdownProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const DropdownRoot = ({ children, className }: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscapeKeydown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("keydown", handleEscapeKeydown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("keydown", handleEscapeKeydown);
+    };
+  }, [isOpen]);
+
+  const toggle = () => setIsOpen((prev) => !prev);
+  const close = () => setIsOpen(false);
+
+  return (
+    <DropdownContext.Provider value={{ isOpen, toggle, close }}>
+      <div ref={rootRef} className={cn("relative inline-block", className)}>
+        {children}
+      </div>
+    </DropdownContext.Provider>
+  );
+};
+
+export type DropdownTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+const DropdownTrigger = ({ className, ...rest }: DropdownTriggerProps) => {
+  const { isOpen, toggle } = useDropdownContext();
+
+  return (
+    <button
+      type="button"
+      {...rest}
+      onClick={toggle}
+      aria-expanded={isOpen}
+      className={className}
+    />
+  );
+};
+
+export interface DropdownPanelProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const DropdownPanel = ({ children, className }: DropdownPanelProps) => {
+  const { isOpen } = useDropdownContext();
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={cn(
+        "rounded-4 absolute top-full left-0 z-10 mt-1 flex flex-col items-start bg-white p-2",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type DropdownItemProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+const DropdownItem = ({ className, ...rest }: DropdownItemProps) => {
+  return (
+    <button
+      type="button"
+      {...rest}
+      className={cn(
+        "rounded-4 flex w-full items-center transition-colors duration-200 ease-in-out",
+        className,
+      )}
+    />
+  );
+};
+
+export const Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTrigger,
+  Panel: DropdownPanel,
+  Item: DropdownItem,
+});

packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx → packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.stories.tsx

@@ -3,15 +3,15 @@ import { PriorityIcon, type Priority } from "./PriorityIcon";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
-  title: "Components/PriorityIcon",
+  title: "Components/Priority/PriorityIcon",
   component: PriorityIcon,
   parameters: {
     layout: "centered",
   },
   argTypes: {
     priority: {
       control: "select",
-      options: ["매우중요", "중요", "보통", "낮음", "Disable", "white", "blue"],
+      options: ["urgent", "high", "medium", "low", "Disable", "white", "blue"],
     },
   },
 } satisfies Meta<typeof PriorityIcon>;
@@ -20,19 +20,19 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const 매우중요: Story = {
-  args: { priority: "매우중요" },
+  args: { priority: "urgent" },
 };
 
 export const 중요: Story = {
-  args: { priority: "중요" },
+  args: { priority: "high" },
 };
 
 export const 보통: Story = {
-  args: { priority: "보통" },
+  args: { priority: "medium" },
 };
 
 export const 낮음: Story = {
-  args: { priority: "낮음" },
+  args: { priority: "low" },
 };
 
 export const Disable: Story = {
@@ -57,17 +57,17 @@ export const blue: Story = {
 };
 
 const ALL_PRIORITIES: Priority[] = [
-  "매우중요",
-  "중요",
-  "보통",
-  "낮음",
+  "urgent",
+  "high",
+  "medium",
+  "low",
   "Disable",
   "white",
   "blue",
 ];
 
 export const AllPriorities: Story = {
-  args: { priority: "매우중요" },
+  args: { priority: "urgent" },
   parameters: {
     backgrounds: {
       default: "light-gray",

packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx → packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx

@@ -1,19 +1,19 @@
 import { cn } from "@lib";
 
 export type Priority =
-  | "매우중요"
-  | "중요"
-  | "보통"
-  | "낮음"
+  | "urgent"
+  | "high"
+  | "medium"
+  | "low"
   | "Disable"
   | "white"
   | "blue";
 
 const PRIORITY_COLOR: Record<Priority, string> = {
-  매우중요: "bg-timo-red",
-  중요: "bg-timo-orange",
-  보통: "bg-timo-gray-600",
-  낮음: "bg-timo-black",
+  urgent: "bg-timo-red",
+  high: "bg-timo-orange",
+  medium: "bg-timo-gray-600",
+  low: "bg-timo-black",
   Disable: "bg-timo-gray-500",
   white: "bg-white",
   blue: "bg-timo-blue-300",
@@ -26,7 +26,10 @@ export interface PriorityIconProps {
 export const PriorityIcon = ({ priority }: PriorityIconProps) => {
   return (
     <div
-      className={cn("size-4.5 shrink-0 rounded-full", PRIORITY_COLOR[priority])}
+      className={cn(
+        "size-2 shrink-0 rounded-full transition-colors duration-200 ease-in-out",
+        PRIORITY_COLOR[priority],
+      )}
     />
   );
 };

packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.stories.tsx

@@ -0,0 +1,54 @@
+import { PrioritySelector } from "./PrioritySelector";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Priority/PrioritySelector",
+  component: PrioritySelector,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light-gray",
+      values: [
+        { name: "light-gray", value: "#F5F5F5" },
+        { name: "dark", value: "#333333" },
+        { name: "white", value: "#FFFFFF" },
+      ],
+    },
+  },
+  argTypes: {
+    selected: {
+      control: "select",
+      options: ["urgent", "high", "medium", "low"],
+    },
+  },
+} satisfies Meta<typeof PrioritySelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const TRIGGER = (
+  <span className="typo-headline-r-14 text-timo-black rounded-4 bg-timo-gray-300 px-3 py-1.5">
+    우선순위
+  </span>
+);
+
+export const Default: Story = {
+  args: { trigger: TRIGGER },
+};
+
+export const 매우중요: Story = {
+  args: { trigger: TRIGGER, selected: "urgent" },
+};
+
+export const 중요: Story = {
+  args: { trigger: TRIGGER, selected: "high" },
+};
+
+export const 보통: Story = {
+  args: { trigger: TRIGGER, selected: "medium" },
+};
+
+export const 낮음: Story = {
+  args: { trigger: TRIGGER, selected: "low" },
+};