diff --git a/packages/tailwind-config/theme.css b/packages/tailwind-config/theme.css
index 5c2c7bab..bdbbc4f0 100644
--- a/packages/tailwind-config/theme.css
+++ b/packages/tailwind-config/theme.css
@@ -1,4 +1,8 @@
 @import "./tokens/colors.css";
 @import "./tokens/typography.css";
 @import "./tokens/radius.css";
-@import "./scrollbar.css";
\ No newline at end of file
+@import "./scrollbar.css";
+
+@theme {
+  --shadow-timo: 0px 0px 3px 0px rgba(0, 0, 0, 0.12);
+}
\ No newline at end of file
diff --git a/packages/timo-design-system/src/components/dropdown-view/DropdownView.stories.tsx b/packages/timo-design-system/src/components/dropdown-view/DropdownView.stories.tsx
new file mode 100644
index 00000000..d93b0d79
--- /dev/null
+++ b/packages/timo-design-system/src/components/dropdown-view/DropdownView.stories.tsx
@@ -0,0 +1,25 @@
+import { DropdownView } from "@components/dropdown-view/DropdownView";
+import { useState } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/DropdownView",
+  component: DropdownView,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof DropdownView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DefaultStory = () => {
+  const [value, setValue] = useState("");
+  return (
+    <DropdownView items={["기본", "7일"]} value={value} onChange={setValue} />
+  );
+};
+
+export const Default: Story = {
+  args: { items: [], value: "", onChange: () => {} },
+  render: () => <DefaultStory />,
+};
diff --git a/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx b/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx
new file mode 100644
index 00000000..f48958e4
--- /dev/null
+++ b/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx
@@ -0,0 +1,65 @@
+import { Dropdown } from "@components/layout/dropdown/Dropdown";
+import { ChevronDownIcon, ChevronUpIcon } from "@icons";
+import { cn } from "@lib";
+import { Fragment } from "react";
+
+export interface DropdownViewProps {
+  items: string[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export const DropdownView = ({
+  items,
+  value,
+  onChange,
+  placeholder = "기본",
+  className,
+}: DropdownViewProps) => {
+  return (
+    <Dropdown className={cn("w-[74px]", className)}>
+      <Dropdown.Trigger
+        aria-haspopup="listbox"
+        className={cn(
+          "group border-timo-gray-500 flex h-8 w-full items-center justify-between rounded-[4px] border bg-white px-2",
+          "aria-expanded:shadow-timo aria-expanded:rounded-b-none",
+        )}
+      >
+        <span className="typo-headline-m-14 text-timo-gray-900 whitespace-nowrap">
+          {value || placeholder}
+        </span>
+        <div className="flex size-6 shrink-0 items-center justify-center">
+          <ChevronDownIcon className="group-aria-expanded:hidden" />
+          <ChevronUpIcon className="hidden group-aria-expanded:block" />
+        </div>
+      </Dropdown.Trigger>
+
+      <Dropdown.Panel
+        role="listbox"
+        className="border-timo-gray-500 shadow-timo mt-0 w-full gap-1.5 rounded-t-none rounded-b-[4px] border-x border-b px-2 py-1"
+      >
+        {items.map((item, i) => {
+          const isSelected = item === value;
+
+          return (
+            <Fragment key={item}>
+              <Dropdown.Item
+                role="option"
+                aria-selected={isSelected}
+                onClick={() => onChange(item)}
+                className="typo-body-m-12 text-timo-gray-900 px-1.5 py-1"
+              >
+                {item}
+              </Dropdown.Item>
+              {i < items.length - 1 && (
+                <div className="bg-timo-gray-500 h-px w-full" />
+              )}
+            </Fragment>
+          );
+        })}
+      </Dropdown.Panel>
+    </Dropdown>
+  );
+};
diff --git a/packages/timo-design-system/src/components/index.ts b/packages/timo-design-system/src/components/index.ts
index d1d5599a..db28e097 100644
--- a/packages/timo-design-system/src/components/index.ts
+++ b/packages/timo-design-system/src/components/index.ts
@@ -1,4 +1,6 @@
 export { Checkbox } from "@components/checkbox/Checkbox";
+export { Dropdown } from "@components/layout/dropdown/Dropdown";
+export { DropdownView } from "@components/dropdown-view/DropdownView";
 export { Color } from "@components/tokens/color/Color";
 export { Typography } from "@components/tokens/typography/Typography";
 export { TagIcon } from "@components/tag/tag-icon/TagIcon";
diff --git a/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx b/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx
index c254fb76..f210eb96 100644
--- a/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx
+++ b/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx
@@ -8,13 +8,16 @@ import {
   useRef,
   useState,
   type ButtonHTMLAttributes,
+  type HTMLAttributes,
   type ReactNode,
+  type RefObject,
 } from "react";
 
 interface DropdownContextValue {
   isOpen: boolean;
   toggle: () => void;
   close: () => void;
+  triggerRef: RefObject<HTMLButtonElement | null>;
 }
 
 const DropdownContext = createContext<DropdownContextValue | null>(null);
@@ -39,6 +42,7 @@ export interface DropdownProps {
 const DropdownRoot = ({ children, className }: DropdownProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -52,6 +56,7 @@ const DropdownRoot = ({ children, className }: DropdownProps) => {
     const handleEscapeKeydown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
         setIsOpen(false);
+        triggerRef.current?.focus();
       }
     };
 
@@ -68,7 +73,7 @@ const DropdownRoot = ({ children, className }: DropdownProps) => {
   const close = () => setIsOpen(false);
 
   return (
-    <DropdownContext.Provider value={{ isOpen, toggle, close }}>
+    <DropdownContext.Provider value={{ isOpen, toggle, close, triggerRef }}>
       <div ref={rootRef} className={cn("relative inline-block", className)}>
         {children}
       </div>
@@ -78,32 +83,42 @@ const DropdownRoot = ({ children, className }: DropdownProps) => {
 
 export type DropdownTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
-const DropdownTrigger = ({ className, ...rest }: DropdownTriggerProps) => {
-  const { isOpen, toggle } = useDropdownContext();
+const DropdownTrigger = ({
+  className,
+  onClick,
+  ...rest
+}: DropdownTriggerProps) => {
+  const { isOpen, toggle, triggerRef } = useDropdownContext();
 
   return (
     <button
       type="button"
       {...rest}
-      onClick={toggle}
+      ref={triggerRef}
+      onClick={(e) => {
+        onClick?.(e);
+        toggle();
+      }}
       aria-expanded={isOpen}
       className={className}
     />
   );
 };
 
-export interface DropdownPanelProps {
-  children: ReactNode;
-  className?: string;
-}
+export type DropdownPanelProps = HTMLAttributes<HTMLDivElement>;
 
-const DropdownPanel = ({ children, className }: DropdownPanelProps) => {
+const DropdownPanel = ({
+  children,
+  className,
+  ...rest
+}: DropdownPanelProps) => {
   const { isOpen } = useDropdownContext();
 
   if (!isOpen) return null;
 
   return (
     <div
+      {...rest}
       className={cn(
         "rounded-4 absolute top-full left-0 z-10 mt-1 flex flex-col items-start bg-white p-2",
         className,
@@ -116,11 +131,17 @@ const DropdownPanel = ({ children, className }: DropdownPanelProps) => {
 
 export type DropdownItemProps = ButtonHTMLAttributes<HTMLButtonElement>;
 
-const DropdownItem = ({ className, ...rest }: DropdownItemProps) => {
+const DropdownItem = ({ className, onClick, ...rest }: DropdownItemProps) => {
+  const { close } = useDropdownContext();
+
   return (
     <button
       type="button"
       {...rest}
+      onClick={(e) => {
+        onClick?.(e);
+        close();
+      }}
       className={cn(
         "rounded-4 flex w-full items-center transition-colors duration-200 ease-in-out",
         className,