Team-Timo · kimminna · Jul 2, 2026 · Jul 2, 2026 · Jul 2, 2026 · Jul 2, 2026
@@ -1,7 +1,9 @@
 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 { TodayBadge } from "@components/badge/today-badge/TodayBadge";
@@ -0,0 +1,44 @@
+import { Dropdown } from "./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>
+  ),
+};
@@ -0,0 +1,133 @@
+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 interface DropdownTriggerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const DropdownTrigger = ({ children, className }: DropdownTriggerProps) => {
+  const { toggle } = useDropdownContext();
+
+  return (
+    <button type="button" onClick={toggle} className={className}>
+      {children}
+    </button>
+  );
+};
+
+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,
+});
@@ -3,7 +3,7 @@ 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",

@@ -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],
+      )}
     />
   );
 };
@@ -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: ["매우중요", "중요", "보통", "낮음"],
+    },
+  },
+} 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: "매우중요" },
+};
+
+export const 중요: Story = {
+  args: { trigger: TRIGGER, selected: "중요" },
+};
+
+export const 보통: Story = {
+  args: { trigger: TRIGGER, selected: "보통" },
+};
+
+export const 낮음: Story = {
+  args: { trigger: TRIGGER, selected: "낮음" },
+};
@@ -0,0 +1,63 @@
+import { Dropdown } from "@components/layout/dropdown/Dropdown";
+import { PriorityIcon } from "@components/priority/priority-icon/PriorityIcon";
+import { cn } from "@lib";
+
+import type { ReactNode } from "react";
+
+export type PriorityLevel = "매우중요" | "중요" | "보통" | "낮음";
+
+const PRIORITY_LEVELS: PriorityLevel[] = ["매우중요", "중요", "보통", "낮음"];
+
+const PRIORITY_BG_COLOR: Record<PriorityLevel, string> = {
+  매우중요: "bg-timo-red",
+  중요: "bg-timo-orange",
+  보통: "bg-timo-gray",
+  낮음: "bg-timo-gray-900",
+};
+
+export interface PrioritySelectorProps {
+  trigger: ReactNode;
+  selected?: PriorityLevel;
+  onSelect?: (priority: PriorityLevel) => void;
+}
+
+export const PrioritySelector = ({
+  trigger,
+  selected,
+  onSelect,
+}: PrioritySelectorProps) => {
+  return (
+    <Dropdown>
+      <Dropdown.Trigger>{trigger}</Dropdown.Trigger>
+
+      <Dropdown.Panel className="gap-1">
+        {PRIORITY_LEVELS.map((priority) => {
+          const isSelected = priority === selected;
+
+          return (
+            <Dropdown.Item
+              key={priority}
+              onClick={() => onSelect?.(priority)}
+              aria-pressed={isSelected}
+              className={cn(
+                "gap-2.25 py-0.5 pr-1 pl-2.75",
+                isSelected && PRIORITY_BG_COLOR[priority],
+              )}
+            >
+              <PriorityIcon priority={isSelected ? "white" : priority} />
+
+              <span
+                className={cn(
+                  "typo-headline-r-14 whitespace-nowrap transition-colors duration-200 ease-in-out",
+                  isSelected ? "text-white" : "text-timo-black",
+                )}
+              >
+                {priority}
+              </span>
+            </Dropdown.Item>
+          );
+        })}
+      </Dropdown.Panel>
+    </Dropdown>
+  );
+};
@@ -1,10 +1,10 @@
-import { Tag } from "./Tag";
+import { TagIcon } from "@components/tag/tag-icon/TagIcon";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
-  title: "Components/Tag",
-  component: Tag,
+  title: "Components/Tag/TagIcon",
+  component: TagIcon,
   parameters: {
     layout: "centered",
   },
@@ -19,7 +19,7 @@ const meta = {
       description: "태그 스타일 베리언트",
     },
   },
-} satisfies Meta<typeof Tag>;
+} satisfies Meta<typeof TagIcon>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

@@ -1,11 +1,11 @@
 export type TagVariant = "default" | "blue";
 
-export interface TagProps {
+export interface TagIconProps {
   text: string;
   variant?: TagVariant;
 }
 
-export const Tag = ({ text, variant = "default" }: TagProps) => {
+export const TagIcon = ({ text, variant = "default" }: TagIconProps) => {
   const isBlue = variant === "blue";
   return (
     <div