diff --git a/.claude/settings.json b/.claude/settings.json
index 1bcd18fa..e9a8e70b 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,5 +1,13 @@
 {
   "enabledPlugins": {
-    "playwright@claude-plugins-official": true
+    "playwright@claude-plugins-official": true,
+    "context7@claude-plugins-official": true
+  },
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp@latest"]
+    },
+    "context7": { "command": "npx", "args": ["-y", "@upstash/context7-mcp@latest"] }
   }
 }
diff --git a/.gitignore b/.gitignore
index 13e7f8ae..828b65c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,4 +48,6 @@ storybook-static
 AGENTS.md
 
 # docs
-docs
\ No newline at end of file
+docs
+
+.playwright-mcp
\ No newline at end of file
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index f0252873..2f7cc723 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -47,33 +47,35 @@ export interface BadgeProps
   children: React.ReactNode;
   showIcon?: boolean;
   onIconClick?: () => void;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, status, radius, showIcon = false, onIconClick, children, ...props }, ref) => {
-    const canRenderIconButton = showIcon && typeof onIconClick === "function";
+export function Badge({
+  className,
+  status,
+  radius,
+  showIcon = false,
+  onIconClick,
+  children,
+  ref,
+  ...props
+}: BadgeProps) {
+  const canRenderIconButton = showIcon && typeof onIconClick === "function";
 
-    return (
-      <span
-        ref={ref}
-        className={cn(
-          BADGE_VARIANTS({ status, radius }),
-          canRenderIconButton && "gap-1",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {canRenderIconButton && (
-          <button type="button" onClick={onIconClick} className="inline-flex items-center">
-            <XIcon size="xsmall" />
-          </button>
-        )}
-      </span>
-    );
-  }
-);
-
-Badge.displayName = "Badge";
+  return (
+    <span
+      ref={ref}
+      className={cn(BADGE_VARIANTS({ status, radius }), canRenderIconButton && "gap-1", className)}
+      {...props}
+    >
+      {children}
+      {canRenderIconButton && (
+        <button type="button" onClick={onIconClick} className="inline-flex items-center">
+          <XIcon size="xsmall" />
+        </button>
+      )}
+    </span>
+  );
+}
 
 export { BADGE_VARIANTS };
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 12f1d0c0..4e4af62e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -112,46 +112,41 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   ButtonVariantProps & {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
   };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      colorScheme,
-      size,
-      iconOnly,
-      leftIcon,
-      rightIcon,
-      children,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(buttonVariants({ variant, colorScheme, size, iconOnly, className }))}
-        disabled={disabled}
-        aria-disabled={disabled}
-        {...props}
-      >
-        {iconOnly ? (
-          (leftIcon ?? rightIcon)
-        ) : (
-          <>
-            {leftIcon}
-            {children}
-            {rightIcon}
-          </>
-        )}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";
+export function Button({
+  className,
+  variant,
+  colorScheme,
+  size,
+  iconOnly,
+  leftIcon,
+  rightIcon,
+  children,
+  disabled,
+  ref,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, colorScheme, size, iconOnly, className }))}
+      disabled={disabled}
+      aria-disabled={disabled}
+      {...props}
+    >
+      {iconOnly ? (
+        (leftIcon ?? rightIcon)
+      ) : (
+        <>
+          {leftIcon}
+          {children}
+          {rightIcon}
+        </>
+      )}
+    </button>
+  );
+}
 
 export { buttonVariants };
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 1f478ca7..f54376d8 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,11 +1,13 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 
 import { cn } from "@/lib/utils/utils";
 
-export type ButtonGroupProps = HTMLAttributes<HTMLDivElement>;
+export type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
 
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ className, children, ...props }, ref) => (
+export function ButtonGroup({ className, children, ref, ...props }: ButtonGroupProps) {
+  return (
     <div
       ref={ref}
       className={cn("inline-flex flex-row flex-wrap items-center gap-2", className)}
@@ -14,7 +16,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     >
       {children}
     </div>
-  )
-);
-
-ButtonGroup.displayName = "ButtonGroup";
+  );
+}
diff --git a/src/components/CategoryFilterButton/CategoryFilterButton.tsx b/src/components/CategoryFilterButton/CategoryFilterButton.tsx
index 61d70996..d1340510 100644
--- a/src/components/CategoryFilterButton/CategoryFilterButton.tsx
+++ b/src/components/CategoryFilterButton/CategoryFilterButton.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -34,23 +34,26 @@ const CATEGORY_FILTER_BUTTON_VARIANTS = cva(
 export type CategoryFilterButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   Omit<VariantProps<typeof CATEGORY_FILTER_BUTTON_VARIANTS>, "isSelected"> & {
     isSelected?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
   };
 
-export const CategoryFilterButton = forwardRef<HTMLButtonElement, CategoryFilterButtonProps>(
-  ({ className, isSelected = false, children, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(CATEGORY_FILTER_BUTTON_VARIANTS({ isSelected, className }))}
-        aria-pressed={isSelected}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-CategoryFilterButton.displayName = "CategoryFilterButton";
+export function CategoryFilterButton({
+  className,
+  isSelected = false,
+  children,
+  ref,
+  ...props
+}: CategoryFilterButtonProps) {
+  return (
+    <button
+      ref={ref}
+      className={cn(CATEGORY_FILTER_BUTTON_VARIANTS({ isSelected, className }))}
+      aria-pressed={isSelected}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
 
 export { CATEGORY_FILTER_BUTTON_VARIANTS };
diff --git a/src/components/ChipGroup/ChipGroup.tsx b/src/components/ChipGroup/ChipGroup.tsx
index 349775e1..ea2a0a6b 100644
--- a/src/components/ChipGroup/ChipGroup.tsx
+++ b/src/components/ChipGroup/ChipGroup.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -9,18 +9,15 @@ const CHIPGROUP_VARIANTS = cva(["inline-flex", "flex-row", "flex-wrap", "items-c
 export interface ChipGroupProps
   extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof CHIPGROUP_VARIANTS> {
   children: React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn(CHIPGROUP_VARIANTS({ className }))} role="group" {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-
-ChipGroup.displayName = "ChipGroup";
+export function ChipGroup({ className, children, ref, ...props }: ChipGroupProps) {
+  return (
+    <div ref={ref} className={cn(CHIPGROUP_VARIANTS({ className }))} role="group" {...props}>
+      {children}
+    </div>
+  );
+}
 
 export { CHIPGROUP_VARIANTS };
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index f1f93d37..163991e4 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { forwardRef, useState, useCallback } from "react";
-
 import { CalendarIcon } from "@/components/Icon/CalendarIcon";
 import { ChevronDownIcon } from "@/components/Icon/ChevronDownIcon";
 import { cn } from "@/lib/utils/utils";
@@ -21,283 +19,277 @@ function isRangeProps(props: DatePickerProps): props is DatePickerRangeProps {
   return props.mode !== "single";
 }
 
-const DatePickerRange = forwardRef<HTMLDivElement, DatePickerRangeProps>(
-  ({ value, defaultValue, onChange, disabled, className }, ref) => {
-    const {
-      displayYearMonth,
-      displayText,
-      calendarDays,
-      goToPrevMonth,
-      goToNextMonth,
-      handleDateClick,
-    } = useDatePicker({ value, defaultValue, onChange });
+function DatePickerRange({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  className,
+  ref,
+}: DatePickerRangeProps) {
+  const {
+    displayYearMonth,
+    displayText,
+    calendarDays,
+    goToPrevMonth,
+    goToNextMonth,
+    handleDateClick,
+  } = useDatePicker({ value, defaultValue, onChange });
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "border-border-subtle flex min-h-[345px] w-[356px] flex-col rounded-md border p-4",
-          disabled && "pointer-events-none opacity-50",
-          className
-        )}
-      >
-        {/* Header */}
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <span className="text-text-secondary text-lg font-semibold">{displayYearMonth}</span>
-            <div className="text-text-disabled flex items-center gap-1 text-[13px]">
-              <CalendarIcon size="xsmall" />
-              <span>{displayText}</span>
-            </div>
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "border-border-subtle flex min-h-[345px] w-[356px] flex-col rounded-md border p-4",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-text-secondary text-lg font-semibold">{displayYearMonth}</span>
+          <div className="text-text-disabled flex items-center gap-1 text-[13px]">
+            <CalendarIcon size="xsmall" />
+            <span>{displayText}</span>
           </div>
-
-          <div className="flex items-center gap-1">
-            <button
-              type="button"
-              onClick={goToPrevMonth}
-              className="text-text-disabled hover:text-text-secondary transition-colors"
-              aria-label="이전 달"
-            >
-              <ChevronDownIcon size="small" className="rotate-90" />
-            </button>
-            <button
-              type="button"
-              onClick={goToNextMonth}
-              className="text-text-disabled hover:text-text-secondary transition-colors"
-              aria-label="다음 달"
-            >
-              <ChevronDownIcon size="small" className="-rotate-90" />
-            </button>
-          </div>
-        </div>
-
-        {/* Weekday Headers */}
-        <div className="mb-2 grid grid-cols-7">
-          {WEEKDAYS.map((day) => (
-            <div
-              key={day}
-              className="text-text-secondary py-2 text-center text-[15px] font-semibold"
-            >
-              {day}
-            </div>
-          ))}
         </div>
 
-        {/* Calendar Grid */}
-        <div className="grid flex-1 grid-cols-7">
-          {calendarDays.map((day, index) => (
-            <button
-              key={day.date ? day.date.toISOString() : `empty-${index}`}
-              type="button"
-              disabled={day.isDisabled || !day.date}
-              onClick={() => day.date && handleDateClick(day.date)}
-              className={cn(
-                "flex h-11 w-full items-center justify-center text-[15px] transition-colors",
-                !day.date && "cursor-default",
-                day.date && !day.isDisabled && "hover:bg-alpha-white-8 cursor-pointer",
-                day.isDisabled && "text-text-disabled cursor-not-allowed",
-                !day.isDisabled && !day.isSelected && "text-text-secondary",
-                day.isToday && !day.isSelected && !day.isInRange && "bg-alpha-white-16 rounded-sm",
-                day.isInRange && "bg-alpha-white-8",
-                day.isRangeStart && "rounded-l-sm",
-                day.isRangeEnd && "rounded-r-sm"
-              )}
-            >
-              {day.date ? (
-                <span
-                  className={cn(
-                    "flex h-9 w-9 items-center justify-center",
-                    day.isSelected &&
-                      "text-text-brand-default rounded-sm bg-green-500/10 font-semibold"
-                  )}
-                >
-                  {day.dayOfMonth}
-                </span>
-              ) : (
-                ""
-              )}
-            </button>
-          ))}
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={goToPrevMonth}
+            className="text-text-disabled hover:text-text-secondary transition-colors"
+            aria-label="이전 달"
+          >
+            <ChevronDownIcon size="small" className="rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={goToNextMonth}
+            className="text-text-disabled hover:text-text-secondary transition-colors"
+            aria-label="다음 달"
+          >
+            <ChevronDownIcon size="small" className="-rotate-90" />
+          </button>
         </div>
       </div>
-    );
-  }
-);
 
-DatePickerRange.displayName = "DatePickerRange";
+      {/* Weekday Headers */}
+      <div className="mb-2 grid grid-cols-7">
+        {WEEKDAYS.map((day) => (
+          <div key={day} className="text-text-secondary py-2 text-center text-[15px] font-semibold">
+            {day}
+          </div>
+        ))}
+      </div>
 
-const DatePickerSingle = forwardRef<HTMLDivElement, DatePickerSingleProps>(
-  ({ value, defaultValue, onChange, disabled, className, showTimePicker }, ref) => {
-    const [hour, setHour] = useState(() => (value ? value.getHours() : new Date().getHours()));
-    const [minute, setMinute] = useState(() => {
-      const mins = value ? value.getMinutes() : new Date().getMinutes();
-      return Math.floor(mins / 5) * 5;
-    });
+      {/* Calendar Grid */}
+      <div className="grid flex-1 grid-cols-7">
+        {calendarDays.map((day, index) => (
+          <button
+            key={day.date ? day.date.toISOString() : `empty-${index}`}
+            type="button"
+            disabled={day.isDisabled || !day.date}
+            onClick={() => day.date && handleDateClick(day.date)}
+            className={cn(
+              "flex h-11 w-full items-center justify-center text-[15px] transition-colors",
+              !day.date && "cursor-default",
+              day.date && !day.isDisabled && "hover:bg-alpha-white-8 cursor-pointer",
+              day.isDisabled && "text-text-disabled cursor-not-allowed",
+              !day.isDisabled && !day.isSelected && "text-text-secondary",
+              day.isToday && !day.isSelected && !day.isInRange && "bg-alpha-white-16 rounded-sm",
+              day.isInRange && "bg-alpha-white-8",
+              day.isRangeStart && "rounded-l-sm",
+              day.isRangeEnd && "rounded-r-sm"
+            )}
+          >
+            {day.date ? (
+              <span
+                className={cn(
+                  "flex h-9 w-9 items-center justify-center",
+                  day.isSelected &&
+                    "text-text-brand-default rounded-sm bg-green-500/10 font-semibold"
+                )}
+              >
+                {day.dayOfMonth}
+              </span>
+            ) : (
+              ""
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
 
-    const {
-      displayYearMonth,
-      displayText,
-      calendarDays,
-      selectedDate,
-      goToPrevMonth,
-      goToNextMonth,
-      handleDateClick: baseHandleDateClick,
-    } = useDatePickerSingle({ value, defaultValue, onChange });
+function DatePickerSingle({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  className,
+  showTimePicker,
+  ref,
+}: DatePickerSingleProps) {
+  const {
+    displayYearMonth,
+    displayText,
+    calendarDays,
+    selectedDate,
+    goToPrevMonth,
+    goToNextMonth,
+    handleDateClick: baseHandleDateClick,
+  } = useDatePickerSingle({ value, defaultValue, onChange });
 
-    const handleDateClick = useCallback(
-      (date: Date) => {
-        if (showTimePicker) {
-          const newDate = new Date(date);
-          newDate.setHours(hour, minute, 0, 0);
-          onChange?.(newDate);
-        } else {
-          baseHandleDateClick(date);
-        }
-      },
-      [showTimePicker, hour, minute, onChange, baseHandleDateClick]
-    );
+  const timeSource = selectedDate ?? defaultValue;
+  const hour = timeSource ? timeSource.getHours() : new Date().getHours();
+  const minute = timeSource
+    ? Math.floor(timeSource.getMinutes() / 5) * 5
+    : Math.floor(new Date().getMinutes() / 5) * 5;
 
-    const handleHourChange = useCallback(
-      (newHour: number) => {
-        setHour(newHour);
-        if (selectedDate) {
-          const newDate = new Date(selectedDate);
-          newDate.setHours(newHour, minute, 0, 0);
-          onChange?.(newDate);
-        }
-      },
-      [selectedDate, minute, onChange]
-    );
+  const handleDateClick = (date: Date) => {
+    if (showTimePicker) {
+      const newDate = new Date(date);
+      newDate.setHours(hour, minute, 0, 0);
+      baseHandleDateClick(newDate);
+    } else {
+      baseHandleDateClick(date);
+    }
+  };
 
-    const handleMinuteChange = useCallback(
-      (newMinute: number) => {
-        setMinute(newMinute);
-        if (selectedDate) {
-          const newDate = new Date(selectedDate);
-          newDate.setHours(hour, newMinute, 0, 0);
-          onChange?.(newDate);
-        }
-      },
-      [selectedDate, hour, onChange]
-    );
+  const handleHourChange = (newHour: number) => {
+    if (selectedDate) {
+      const newDate = new Date(selectedDate);
+      newDate.setHours(newHour, minute, 0, 0);
+      baseHandleDateClick(newDate);
+    }
+  };
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "border-border-subtle flex min-h-[345px] flex-col rounded-md border p-4",
-          showTimePicker ? "w-[480px]" : "w-[356px]",
-          disabled && "pointer-events-none opacity-50",
-          className
-        )}
-      >
-        <div className="flex gap-4">
-          {/* Calendar Section */}
-          <div className="flex flex-1 flex-col">
-            {/* Header */}
-            <div className="mb-4 flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <span className="text-text-secondary text-lg font-semibold">
-                  {displayYearMonth}
-                </span>
-                <div className="text-text-disabled flex items-center gap-1 text-[13px]">
-                  <CalendarIcon size="xsmall" />
-                  <span>{displayText}</span>
-                </div>
-              </div>
+  const handleMinuteChange = (newMinute: number) => {
+    if (selectedDate) {
+      const newDate = new Date(selectedDate);
+      newDate.setHours(hour, newMinute, 0, 0);
+      baseHandleDateClick(newDate);
+    }
+  };
 
-              <div className="flex items-center gap-1">
-                <button
-                  type="button"
-                  onClick={goToPrevMonth}
-                  className="text-text-disabled hover:text-text-secondary transition-colors"
-                  aria-label="이전 달"
-                >
-                  <ChevronDownIcon size="small" className="rotate-90" />
-                </button>
-                <button
-                  type="button"
-                  onClick={goToNextMonth}
-                  className="text-text-disabled hover:text-text-secondary transition-colors"
-                  aria-label="다음 달"
-                >
-                  <ChevronDownIcon size="small" className="-rotate-90" />
-                </button>
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "border-border-subtle flex min-h-[345px] flex-col rounded-md border p-4",
+        showTimePicker ? "w-[480px]" : "w-[356px]",
+        disabled && "pointer-events-none opacity-50",
+        className
+      )}
+    >
+      <div className="flex gap-4">
+        {/* Calendar Section */}
+        <div className="flex flex-1 flex-col">
+          {/* Header */}
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <span className="text-text-secondary text-lg font-semibold">{displayYearMonth}</span>
+              <div className="text-text-disabled flex items-center gap-1 text-[13px]">
+                <CalendarIcon size="xsmall" />
+                <span>{displayText}</span>
               </div>
             </div>
 
-            {/* Weekday Headers */}
-            <div className="mb-2 grid grid-cols-7">
-              {WEEKDAYS.map((day) => (
-                <div
-                  key={day}
-                  className="text-text-secondary py-2 text-center text-[15px] font-semibold"
-                >
-                  {day}
-                </div>
-              ))}
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={goToPrevMonth}
+                className="text-text-disabled hover:text-text-secondary transition-colors"
+                aria-label="이전 달"
+              >
+                <ChevronDownIcon size="small" className="rotate-90" />
+              </button>
+              <button
+                type="button"
+                onClick={goToNextMonth}
+                className="text-text-disabled hover:text-text-secondary transition-colors"
+                aria-label="다음 달"
+              >
+                <ChevronDownIcon size="small" className="-rotate-90" />
+              </button>
             </div>
+          </div>
 
-            {/* Calendar Grid */}
-            <div className="grid flex-1 grid-cols-7">
-              {calendarDays.map((day, index) => (
-                <button
-                  key={day.date ? day.date.toISOString() : `empty-${index}`}
-                  type="button"
-                  disabled={day.isDisabled || !day.date}
-                  onClick={() => day.date && handleDateClick(day.date)}
-                  className={cn(
-                    "flex h-11 w-full items-center justify-center text-[15px] transition-colors",
-                    !day.date && "cursor-default",
-                    day.date && !day.isDisabled && "hover:bg-alpha-white-8 cursor-pointer",
-                    day.isDisabled && "text-text-disabled cursor-not-allowed",
-                    !day.isDisabled && !day.isSelected && "text-text-secondary",
-                    day.isToday && !day.isSelected && "bg-alpha-white-16 rounded-sm"
-                  )}
-                >
-                  {day.date ? (
-                    <span
-                      className={cn(
-                        "flex h-9 w-9 items-center justify-center",
-                        day.isSelected &&
-                          "text-text-brand-default rounded-sm bg-green-500/10 font-semibold"
-                      )}
-                    >
-                      {day.dayOfMonth}
-                    </span>
-                  ) : (
-                    ""
-                  )}
-                </button>
-              ))}
-            </div>
+          {/* Weekday Headers */}
+          <div className="mb-2 grid grid-cols-7">
+            {WEEKDAYS.map((day) => (
+              <div
+                key={day}
+                className="text-text-secondary py-2 text-center text-[15px] font-semibold"
+              >
+                {day}
+              </div>
+            ))}
           </div>
 
-          {/* Time Picker Section */}
-          {showTimePicker && (
-            <div className="border-divider-subtle flex flex-col border-l pl-4">
-              <span className="text-text-secondary mb-4 text-lg font-semibold">시간</span>
-              <TimePickerPanel
-                hour={hour}
-                minute={minute}
-                onHourChange={handleHourChange}
-                onMinuteChange={handleMinuteChange}
-              />
-            </div>
-          )}
+          {/* Calendar Grid */}
+          <div className="grid flex-1 grid-cols-7">
+            {calendarDays.map((day, index) => (
+              <button
+                key={day.date ? day.date.toISOString() : `empty-${index}`}
+                type="button"
+                disabled={day.isDisabled || !day.date}
+                onClick={() => day.date && handleDateClick(day.date)}
+                className={cn(
+                  "flex h-11 w-full items-center justify-center text-[15px] transition-colors",
+                  !day.date && "cursor-default",
+                  day.date && !day.isDisabled && "hover:bg-alpha-white-8 cursor-pointer",
+                  day.isDisabled && "text-text-disabled cursor-not-allowed",
+                  !day.isDisabled && !day.isSelected && "text-text-secondary",
+                  day.isToday && !day.isSelected && "bg-alpha-white-16 rounded-sm"
+                )}
+              >
+                {day.date ? (
+                  <span
+                    className={cn(
+                      "flex h-9 w-9 items-center justify-center",
+                      day.isSelected &&
+                        "text-text-brand-default rounded-sm bg-green-500/10 font-semibold"
+                    )}
+                  >
+                    {day.dayOfMonth}
+                  </span>
+                ) : (
+                  ""
+                )}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
-    );
-  }
-);
 
-DatePickerSingle.displayName = "DatePickerSingle";
+        {/* Time Picker Section */}
+        {showTimePicker && (
+          <div
+            className={cn(
+              "border-divider-subtle flex flex-col border-l pl-4",
+              !selectedDate && "pointer-events-none opacity-50"
+            )}
+          >
+            <span className="text-text-secondary mb-4 text-lg font-semibold">시간</span>
+            <TimePickerPanel
+              hour={hour}
+              minute={minute}
+              onHourChange={handleHourChange}
+              onMinuteChange={handleMinuteChange}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
 
-export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
+export function DatePicker(props: DatePickerProps) {
   if (isRangeProps(props)) {
-    return <DatePickerRange ref={ref} {...props} />;
+    return <DatePickerRange {...props} />;
   }
-  return <DatePickerSingle ref={ref} {...props} />;
-});
-
-DatePicker.displayName = "DatePicker";
+  return <DatePickerSingle {...props} />;
+}
diff --git a/src/components/DatePicker/DatePicker.types.ts b/src/components/DatePicker/DatePicker.types.ts
index bebe0d9e..2a4e42d5 100644
--- a/src/components/DatePicker/DatePicker.types.ts
+++ b/src/components/DatePicker/DatePicker.types.ts
@@ -8,6 +8,7 @@ export interface DatePickerBaseProps {
   disabled?: boolean;
   /** Custom class name */
   className?: string;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 export interface DatePickerRangeProps extends DatePickerBaseProps {
diff --git a/src/components/DatePicker/TimePickerPanel.tsx b/src/components/DatePicker/TimePickerPanel.tsx
index 98d10842..d63f1a82 100644
--- a/src/components/DatePicker/TimePickerPanel.tsx
+++ b/src/components/DatePicker/TimePickerPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 
 import { cn } from "@/lib/utils/utils";
 
@@ -25,24 +25,21 @@ export function TimePickerPanel({
   const hourListRef = useRef<HTMLDivElement>(null);
   const minuteListRef = useRef<HTMLDivElement>(null);
 
-  const scrollToSelected = useCallback(
-    (ref: React.RefObject<HTMLDivElement | null>, index: number) => {
-      if (ref.current) {
-        const itemHeight = 36;
-        ref.current.scrollTop = index * itemHeight;
-      }
-    },
-    []
-  );
+  const scrollToSelected = (ref: React.RefObject<HTMLDivElement | null>, index: number) => {
+    if (ref.current) {
+      const itemHeight = 36;
+      ref.current.scrollTop = index * itemHeight;
+    }
+  };
 
   useEffect(() => {
     scrollToSelected(hourListRef, hour);
-  }, [hour, scrollToSelected]);
+  }, [hour]);
 
   useEffect(() => {
     const minuteIndex = Math.floor(minute / 5);
     scrollToSelected(minuteListRef, minuteIndex);
-  }, [minute, scrollToSelected]);
+  }, [minute]);
 
   return (
     <div className={cn("flex gap-2", className)}>
diff --git a/src/components/DatePicker/useDatePicker.ts b/src/components/DatePicker/useDatePicker.ts
index c38b76b1..5d9edde7 100644
--- a/src/components/DatePicker/useDatePicker.ts
+++ b/src/components/DatePicker/useDatePicker.ts
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from "react";
+import { useState } from "react";
 
 import {
   formatDateRangeDisplay,
@@ -51,14 +51,12 @@ export function useDatePicker({
   const selectedRange = value ?? internalRange;
   const displayYearMonth = formatYearMonth(currentMonth);
 
-  const displayText = useMemo(() => {
-    if (selectedRange.startDate && selectedRange.endDate) {
-      return formatDateRangeDisplay(selectedRange.startDate, selectedRange.endDate);
-    }
-    return formatDateWithDay(new Date());
-  }, [selectedRange.startDate, selectedRange.endDate]);
+  const displayText =
+    selectedRange.startDate && selectedRange.endDate
+      ? formatDateRangeDisplay(selectedRange.startDate, selectedRange.endDate)
+      : formatDateWithDay(new Date());
 
-  const calendarDays = useMemo((): CalendarDay[] => {
+  const calendarDays = ((): CalendarDay[] => {
     const year = currentMonth.getFullYear();
     const month = currentMonth.getMonth();
 
@@ -139,44 +137,41 @@ export function useDatePicker({
     }
 
     return days;
-  }, [currentMonth, selectedRange]);
+  })();
 
-  const goToPrevMonth = useCallback(() => {
+  const goToPrevMonth = () => {
     setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
-  }, []);
+  };
 
-  const goToNextMonth = useCallback(() => {
+  const goToNextMonth = () => {
     setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
-  }, []);
-
-  const handleDateClick = useCallback(
-    (date: Date) => {
-      let newRange: DateRange;
+  };
 
-      if (selectionPhase === "start") {
-        newRange = { startDate: date, endDate: null };
-        setSelectionPhase("end");
-      } else {
-        if (selectedRange.startDate) {
-          // 클릭한 날짜가 startDate 이후면 그대로, 이전이면 swap
-          if (date >= selectedRange.startDate) {
-            newRange = { startDate: selectedRange.startDate, endDate: date };
-          } else {
-            newRange = { startDate: date, endDate: selectedRange.startDate };
-          }
+  const handleDateClick = (date: Date) => {
+    let newRange: DateRange;
+
+    if (selectionPhase === "start") {
+      newRange = { startDate: date, endDate: null };
+      setSelectionPhase("end");
+    } else {
+      if (selectedRange.startDate) {
+        // 클릭한 날짜가 startDate 이후면 그대로, 이전이면 swap
+        if (date >= selectedRange.startDate) {
+          newRange = { startDate: selectedRange.startDate, endDate: date };
         } else {
-          newRange = { startDate: date, endDate: null };
+          newRange = { startDate: date, endDate: selectedRange.startDate };
         }
-        setSelectionPhase("start");
+      } else {
+        newRange = { startDate: date, endDate: null };
       }
+      setSelectionPhase("start");
+    }
 
-      if (!value) {
-        setInternalRange(newRange);
-      }
-      onChange?.(newRange);
-    },
-    [selectionPhase, selectedRange.startDate, value, onChange]
-  );
+    if (!value) {
+      setInternalRange(newRange);
+    }
+    onChange?.(newRange);
+  };
 
   return {
     currentMonth,
@@ -201,14 +196,11 @@ export function useDatePickerSingle({
   const selectedDate = value !== undefined ? value : internalDate;
   const displayYearMonth = formatYearMonth(currentMonth);
 
-  const displayText = useMemo(() => {
-    if (selectedDate) {
-      return formatDateWithDay(selectedDate);
-    }
-    return formatDateWithDay(new Date());
-  }, [selectedDate]);
+  const displayText = selectedDate
+    ? formatDateWithDay(selectedDate)
+    : formatDateWithDay(new Date());
 
-  const calendarDays = useMemo((): CalendarDay[] => {
+  const calendarDays = ((): CalendarDay[] => {
     const year = currentMonth.getFullYear();
     const month = currentMonth.getMonth();
 
@@ -277,25 +269,22 @@ export function useDatePickerSingle({
     }
 
     return days;
-  }, [currentMonth, selectedDate]);
+  })();
 
-  const goToPrevMonth = useCallback(() => {
+  const goToPrevMonth = () => {
     setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
-  }, []);
+  };
 
-  const goToNextMonth = useCallback(() => {
+  const goToNextMonth = () => {
     setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
-  }, []);
+  };
 
-  const handleDateClick = useCallback(
-    (date: Date) => {
-      if (value === undefined) {
-        setInternalDate(date);
-      }
-      onChange?.(date);
-    },
-    [value, onChange]
-  );
+  const handleDateClick = (date: Date) => {
+    if (value === undefined) {
+      setInternalDate(date);
+    }
+    onChange?.(date);
+  };
 
   return {
     currentMonth,
diff --git a/src/components/Dropdown/useDropdown.ts b/src/components/Dropdown/useDropdown.ts
index 47e01108..58225373 100644
--- a/src/components/Dropdown/useDropdown.ts
+++ b/src/components/Dropdown/useDropdown.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import type { UseDropdownProps, UseDropdownReturn } from "./Dropdown.types";
 
@@ -19,7 +19,7 @@ export function useDropdown({
   const isControlled = value !== undefined;
   const selectedValue = isControlled ? value : internalValue;
 
-  const toggle = useCallback(() => {
+  const toggle = () => {
     if (disabled) return;
     setIsOpen((prev) => {
       if (!prev) {
@@ -28,19 +28,16 @@ export function useDropdown({
       }
       return !prev;
     });
-  }, [disabled]);
+  };
 
-  const selectOption = useCallback(
-    (optionValue: string) => {
-      if (!isControlled) {
-        setInternalValue(optionValue);
-      }
-      onChange?.(optionValue);
-      setIsOpen(false);
-      setFocusedIndex(-1);
-    },
-    [isControlled, onChange]
-  );
+  const selectOption = (optionValue: string) => {
+    if (!isControlled) {
+      setInternalValue(optionValue);
+    }
+    onChange?.(optionValue);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
 
   // Click outside & Escape key handling
   useEffect(() => {
diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index 67bbba30..e0727446 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -45,38 +45,42 @@ const FILTER_VARIANTS = cva(
 export interface FilterProps
   extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof FILTER_VARIANTS> {
   isOpen?: boolean;
+  ref?: React.Ref<HTMLButtonElement>;
 }
 
-export const Filter = forwardRef<HTMLButtonElement, FilterProps>(
-  ({ className, size, radius, bordered, isOpen = false, children, ...props }, ref) => {
-    const iconSize = size === "medium" ? "small" : "medium";
+export function Filter({
+  className,
+  size,
+  radius,
+  bordered,
+  isOpen = false,
+  children,
+  ref,
+  ...props
+}: FilterProps) {
+  const iconSize = size === "medium" ? "small" : "medium";
 
-    return (
-      <button
-        ref={ref}
-        type="button"
-        className={cn(
-          FILTER_VARIANTS({ size, radius, bordered }),
-          isOpen
-            ? "bg-surface-strong border-border-default text-text-primary"
-            : "bg-surface-default",
-          className
-        )}
-        aria-expanded={isOpen}
-        {...props}
-      >
-        <div className="gap-xs flex items-center">
-          <span className="truncate">{children}</span>
-          <ChevronDownIcon
-            size={iconSize}
-            className={cn("shrink-0 transition-transform duration-200", isOpen && "rotate-180")}
-          />
-        </div>
-      </button>
-    );
-  }
-);
-
-Filter.displayName = "Filter";
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        FILTER_VARIANTS({ size, radius, bordered }),
+        isOpen ? "bg-surface-strong border-border-default text-text-primary" : "bg-surface-default",
+        className
+      )}
+      aria-expanded={isOpen}
+      {...props}
+    >
+      <div className="gap-xs flex items-center">
+        <span className="truncate">{children}</span>
+        <ChevronDownIcon
+          size={iconSize}
+          className={cn("shrink-0 transition-transform duration-200", isOpen && "rotate-180")}
+        />
+      </div>
+    </button>
+  );
+}
 
 export { FILTER_VARIANTS };
diff --git a/src/components/Icon/AlertIcon.tsx b/src/components/Icon/AlertIcon.tsx
index 01ba1575..fbd98ca4 100644
--- a/src/components/Icon/AlertIcon.tsx
+++ b/src/components/Icon/AlertIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const AlertSvg = (
@@ -19,18 +17,19 @@ const AlertSvg = (
 
 export type AlertIconProps = Omit<IconProps, "svg">;
 
-export const AlertIcon = forwardRef<HTMLSpanElement, AlertIconProps>(
-  ({ size = "xlarge", className, ...props }, ref) => {
-    return (
-      <Icon
-        ref={ref}
-        size={size}
-        svg={AlertSvg}
-        className={className ?? "text-text-primary"}
-        {...props}
-      />
-    );
-  }
-);
-
-AlertIcon.displayName = "AlertIcon";
+export function AlertIcon({
+  ref,
+  size = "xlarge",
+  className,
+  ...props
+}: AlertIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return (
+    <Icon
+      ref={ref}
+      size={size}
+      svg={AlertSvg}
+      className={className ?? "text-text-primary"}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/Icon/ArrowLeftIcon.tsx b/src/components/Icon/ArrowLeftIcon.tsx
index 6ae93111..a49c775c 100644
--- a/src/components/Icon/ArrowLeftIcon.tsx
+++ b/src/components/Icon/ArrowLeftIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ARROW_LEFT_SVG = (
@@ -19,8 +17,9 @@ const ARROW_LEFT_SVG = (
 
 export type ArrowLeftIconProps = Omit<IconProps, "svg">;
 
-export const ArrowLeftIcon = forwardRef<HTMLSpanElement, ArrowLeftIconProps>((props, ref) => {
+export function ArrowLeftIcon({
+  ref,
+  ...props
+}: ArrowLeftIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ARROW_LEFT_SVG} {...props} />;
-});
-
-ArrowLeftIcon.displayName = "ArrowLeftIcon";
+}
diff --git a/src/components/Icon/ArrowRightIcon.tsx b/src/components/Icon/ArrowRightIcon.tsx
index f40f1ddf..472e241f 100644
--- a/src/components/Icon/ArrowRightIcon.tsx
+++ b/src/components/Icon/ArrowRightIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ARROW_RIGHT_SVG = (
@@ -19,8 +17,9 @@ const ARROW_RIGHT_SVG = (
 
 export type ArrowRightIconProps = Omit<IconProps, "svg">;
 
-export const ArrowRightIcon = forwardRef<HTMLSpanElement, ArrowRightIconProps>((props, ref) => {
+export function ArrowRightIcon({
+  ref,
+  ...props
+}: ArrowRightIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ARROW_RIGHT_SVG} {...props} />;
-});
-
-ArrowRightIcon.displayName = "ArrowRightIcon";
+}
diff --git a/src/components/Icon/ArrowRotateRightIcon.tsx b/src/components/Icon/ArrowRotateRightIcon.tsx
index a4ca50a2..73dbf3ea 100644
--- a/src/components/Icon/ArrowRotateRightIcon.tsx
+++ b/src/components/Icon/ArrowRotateRightIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ArrowRotateRightSvg = (
@@ -19,10 +17,9 @@ const ArrowRotateRightSvg = (
 
 export type ArrowRotateRightIconProps = Omit<IconProps, "svg">;
 
-export const ArrowRotateRightIcon = forwardRef<HTMLSpanElement, ArrowRotateRightIconProps>(
-  (props, ref) => {
-    return <Icon ref={ref} svg={ArrowRotateRightSvg} {...props} />;
-  }
-);
-
-ArrowRotateRightIcon.displayName = "ArrowRotateRightIcon";
+export function ArrowRotateRightIcon({
+  ref,
+  ...props
+}: ArrowRotateRightIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return <Icon ref={ref} svg={ArrowRotateRightSvg} {...props} />;
+}
diff --git a/src/components/Icon/BarGraphIcon.tsx b/src/components/Icon/BarGraphIcon.tsx
index 53d739d5..3bc863cf 100644
--- a/src/components/Icon/BarGraphIcon.tsx
+++ b/src/components/Icon/BarGraphIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const BarGraphSvg = (
@@ -19,8 +17,9 @@ const BarGraphSvg = (
 
 export type BarGraphIconProps = Omit<IconProps, "svg">;
 
-export const BarGraphIcon = forwardRef<HTMLSpanElement, BarGraphIconProps>((props, ref) => {
+export function BarGraphIcon({
+  ref,
+  ...props
+}: BarGraphIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={BarGraphSvg} {...props} />;
-});
-
-BarGraphIcon.displayName = "BarGraphIcon";
+}
diff --git a/src/components/Icon/CalendarIcon.tsx b/src/components/Icon/CalendarIcon.tsx
index 9c148df6..061e428e 100644
--- a/src/components/Icon/CalendarIcon.tsx
+++ b/src/components/Icon/CalendarIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const CalendarSvg = (
@@ -43,8 +41,9 @@ const CalendarSvg = (
 
 export type CalendarIconProps = Omit<IconProps, "svg">;
 
-export const CalendarIcon = forwardRef<HTMLSpanElement, CalendarIconProps>((props, ref) => {
+export function CalendarIcon({
+  ref,
+  ...props
+}: CalendarIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={CalendarSvg} {...props} />;
-});
-
-CalendarIcon.displayName = "CalendarIcon";
+}
diff --git a/src/components/Icon/ChatIcon.tsx b/src/components/Icon/ChatIcon.tsx
index c314ae37..65918fa3 100644
--- a/src/components/Icon/ChatIcon.tsx
+++ b/src/components/Icon/ChatIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ChatSvg = (
@@ -19,8 +17,6 @@ const ChatSvg = (
 
 export type ChatIconProps = Omit<IconProps, "svg">;
 
-export const ChatIcon = forwardRef<HTMLSpanElement, ChatIconProps>((props, ref) => {
+export function ChatIcon({ ref, ...props }: ChatIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ChatSvg} {...props} />;
-});
-
-ChatIcon.displayName = "ChatIcon";
+}
diff --git a/src/components/Icon/CheckIcon.tsx b/src/components/Icon/CheckIcon.tsx
index 72f3b3dc..a20f415c 100644
--- a/src/components/Icon/CheckIcon.tsx
+++ b/src/components/Icon/CheckIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const CheckSvg = (
@@ -19,8 +17,9 @@ const CheckSvg = (
 
 export type CheckIconProps = Omit<IconProps, "svg">;
 
-export const CheckIcon = forwardRef<HTMLSpanElement, CheckIconProps>((props, ref) => {
+export function CheckIcon({
+  ref,
+  ...props
+}: CheckIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={CheckSvg} {...props} />;
-});
-
-CheckIcon.displayName = "CheckIcon";
+}
diff --git a/src/components/Icon/ChevronDownIcon.tsx b/src/components/Icon/ChevronDownIcon.tsx
index 86a2f17c..455c83d7 100644
--- a/src/components/Icon/ChevronDownIcon.tsx
+++ b/src/components/Icon/ChevronDownIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ChevronDownSvg = (
@@ -19,8 +17,9 @@ const ChevronDownSvg = (
 
 export type ChevronDownIconProps = Omit<IconProps, "svg">;
 
-export const ChevronDownIcon = forwardRef<HTMLSpanElement, ChevronDownIconProps>((props, ref) => {
+export function ChevronDownIcon({
+  ref,
+  ...props
+}: ChevronDownIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ChevronDownSvg} {...props} />;
-});
-
-ChevronDownIcon.displayName = "ChevronDownIcon";
+}
diff --git a/src/components/Icon/ChevronLeftIcon.tsx b/src/components/Icon/ChevronLeftIcon.tsx
index ce2709a8..9e5800cb 100644
--- a/src/components/Icon/ChevronLeftIcon.tsx
+++ b/src/components/Icon/ChevronLeftIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const CHEVRON_LEFT_SVG = (
@@ -16,8 +14,9 @@ const CHEVRON_LEFT_SVG = (
 
 export type ChevronLeftIconProps = Omit<IconProps, "svg">;
 
-export const ChevronLeftIcon = forwardRef<HTMLSpanElement, ChevronLeftIconProps>((props, ref) => {
+export function ChevronLeftIcon({
+  ref,
+  ...props
+}: ChevronLeftIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={CHEVRON_LEFT_SVG} {...props} />;
-});
-
-ChevronLeftIcon.displayName = "ChevronLeftIcon";
+}
diff --git a/src/components/Icon/ChevronRightIcon.tsx b/src/components/Icon/ChevronRightIcon.tsx
index b13d352d..c38d8764 100644
--- a/src/components/Icon/ChevronRightIcon.tsx
+++ b/src/components/Icon/ChevronRightIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const CHEVRON_RIGHT_SVG = (
@@ -16,8 +14,9 @@ const CHEVRON_RIGHT_SVG = (
 
 export type ChevronRightIconProps = Omit<IconProps, "svg">;
 
-export const ChevronRightIcon = forwardRef<HTMLSpanElement, ChevronRightIconProps>((props, ref) => {
+export function ChevronRightIcon({
+  ref,
+  ...props
+}: ChevronRightIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={CHEVRON_RIGHT_SVG} {...props} />;
-});
-
-ChevronRightIcon.displayName = "ChevronRightIcon";
+}
diff --git a/src/components/Icon/ClearIcon.tsx b/src/components/Icon/ClearIcon.tsx
index 67ea6771..3b87e8ad 100644
--- a/src/components/Icon/ClearIcon.tsx
+++ b/src/components/Icon/ClearIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ClearSvg = (
@@ -23,8 +21,9 @@ const ClearSvg = (
 
 export type ClearIconProps = Omit<IconProps, "svg">;
 
-export const ClearIcon = forwardRef<HTMLSpanElement, ClearIconProps>((props, ref) => {
+export function ClearIcon({
+  ref,
+  ...props
+}: ClearIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ClearSvg} {...props} />;
-});
-
-ClearIcon.displayName = "ClearIcon";
+}
diff --git a/src/components/Icon/ClockIcon.tsx b/src/components/Icon/ClockIcon.tsx
index 04d9bb64..345d52d0 100644
--- a/src/components/Icon/ClockIcon.tsx
+++ b/src/components/Icon/ClockIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ClockSvg = (
@@ -29,8 +27,9 @@ const ClockSvg = (
 
 export type ClockIconProps = Omit<IconProps, "svg">;
 
-export const ClockIcon = forwardRef<HTMLSpanElement, ClockIconProps>((props, ref) => {
+export function ClockIcon({
+  ref,
+  ...props
+}: ClockIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ClockSvg} {...props} />;
-});
-
-ClockIcon.displayName = "ClockIcon";
+}
diff --git a/src/components/Icon/CloseIcon.tsx b/src/components/Icon/CloseIcon.tsx
index 8770ef03..32e74ee3 100644
--- a/src/components/Icon/CloseIcon.tsx
+++ b/src/components/Icon/CloseIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const CloseSvg = (
@@ -19,18 +17,19 @@ const CloseSvg = (
 
 export type CloseIconProps = Omit<IconProps, "svg">;
 
-export const CloseIcon = forwardRef<HTMLSpanElement, CloseIconProps>(
-  ({ size = "medium", className, ...props }, ref) => {
-    return (
-      <Icon
-        ref={ref}
-        size={size}
-        svg={CloseSvg}
-        className={className ?? "text-text-muted"}
-        {...props}
-      />
-    );
-  }
-);
-
-CloseIcon.displayName = "CloseIcon";
+export function CloseIcon({
+  ref,
+  size = "medium",
+  className,
+  ...props
+}: CloseIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return (
+    <Icon
+      ref={ref}
+      size={size}
+      svg={CloseSvg}
+      className={className ?? "text-text-muted"}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/Icon/CloudUploadIcon.tsx b/src/components/Icon/CloudUploadIcon.tsx
index 37d31fdb..f691a459 100644
--- a/src/components/Icon/CloudUploadIcon.tsx
+++ b/src/components/Icon/CloudUploadIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const CloudUploadSvg = (
@@ -19,8 +17,9 @@ const CloudUploadSvg = (
 
 export type CloudUploadIconProps = Omit<IconProps, "svg">;
 
-export const CloudUploadIcon = forwardRef<HTMLSpanElement, CloudUploadIconProps>((props, ref) => {
+export function CloudUploadIcon({
+  ref,
+  ...props
+}: CloudUploadIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={CloudUploadSvg} {...props} />;
-});
-
-CloudUploadIcon.displayName = "CloudUploadIcon";
+}
diff --git a/src/components/Icon/DefaultProfileIcon.tsx b/src/components/Icon/DefaultProfileIcon.tsx
index f7444090..692b9f98 100644
--- a/src/components/Icon/DefaultProfileIcon.tsx
+++ b/src/components/Icon/DefaultProfileIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type DefaultProfileIconProps = Omit<IconProps, "svg">;
@@ -26,10 +24,9 @@ const DEFAULT_PROFILE_SVG = (
   </svg>
 );
 
-export const DefaultProfileIcon = forwardRef<HTMLSpanElement, DefaultProfileIconProps>(
-  (props, ref) => {
-    return <Icon ref={ref} svg={DEFAULT_PROFILE_SVG} {...props} />;
-  }
-);
-
-DefaultProfileIcon.displayName = "DefaultProfileIcon";
+export function DefaultProfileIcon({
+  ref,
+  ...props
+}: DefaultProfileIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return <Icon ref={ref} svg={DEFAULT_PROFILE_SVG} {...props} />;
+}
diff --git a/src/components/Icon/EditContainedIcon.tsx b/src/components/Icon/EditContainedIcon.tsx
index 7e32673a..22f7b34b 100644
--- a/src/components/Icon/EditContainedIcon.tsx
+++ b/src/components/Icon/EditContainedIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const EditContainedSvg = (
@@ -19,10 +17,9 @@ const EditContainedSvg = (
 
 export type EditContainedIconProps = Omit<IconProps, "svg">;
 
-export const EditContainedIcon = forwardRef<HTMLSpanElement, EditContainedIconProps>(
-  (props, ref) => {
-    return <Icon ref={ref} svg={EditContainedSvg} {...props} />;
-  }
-);
-
-EditContainedIcon.displayName = "EditContainedIcon";
+export function EditContainedIcon({
+  ref,
+  ...props
+}: EditContainedIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return <Icon ref={ref} svg={EditContainedSvg} {...props} />;
+}
diff --git a/src/components/Icon/EditIcon.tsx b/src/components/Icon/EditIcon.tsx
index eb318870..1a6ec4a6 100644
--- a/src/components/Icon/EditIcon.tsx
+++ b/src/components/Icon/EditIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const EditSvg = (
@@ -19,8 +17,6 @@ const EditSvg = (
 
 export type EditIconProps = Omit<IconProps, "svg">;
 
-export const EditIcon = forwardRef<HTMLSpanElement, EditIconProps>((props, ref) => {
+export function EditIcon({ ref, ...props }: EditIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={EditSvg} {...props} />;
-});
-
-EditIcon.displayName = "EditIcon";
+}
diff --git a/src/components/Icon/EditProfileIcon.tsx b/src/components/Icon/EditProfileIcon.tsx
index 7a8b763b..d8dd3b9f 100644
--- a/src/components/Icon/EditProfileIcon.tsx
+++ b/src/components/Icon/EditProfileIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type EditProfileIconProps = Omit<IconProps, "svg">;
@@ -26,8 +24,9 @@ const EDIT_PROFILE_SVG = (
   </svg>
 );
 
-export const EditProfileIcon = forwardRef<HTMLSpanElement, EditProfileIconProps>((props, ref) => {
+export function EditProfileIcon({
+  ref,
+  ...props
+}: EditProfileIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={EDIT_PROFILE_SVG} {...props} />;
-});
-
-EditProfileIcon.displayName = "EditProfileIcon";
+}
diff --git a/src/components/Icon/FileIcon.tsx b/src/components/Icon/FileIcon.tsx
index a25bb6ec..2a6cfb1d 100644
--- a/src/components/Icon/FileIcon.tsx
+++ b/src/components/Icon/FileIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const FileSvg = (
@@ -23,8 +21,6 @@ const FileSvg = (
 
 export type FileIconProps = Omit<IconProps, "svg">;
 
-export const FileIcon = forwardRef<HTMLSpanElement, FileIconProps>((props, ref) => {
+export function FileIcon({ ref, ...props }: FileIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={FileSvg} {...props} />;
-});
-
-FileIcon.displayName = "FileIcon";
+}
diff --git a/src/components/Icon/FrameIcon.tsx b/src/components/Icon/FrameIcon.tsx
index 245c222b..f4363128 100644
--- a/src/components/Icon/FrameIcon.tsx
+++ b/src/components/Icon/FrameIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type FrameIconProps = Omit<IconProps, "svg">;
@@ -36,8 +34,9 @@ const FrameSvg = (
   </svg>
 );
 
-export const FrameIcon = forwardRef<HTMLSpanElement, FrameIconProps>((props, ref) => {
+export function FrameIcon({
+  ref,
+  ...props
+}: FrameIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={FrameSvg} {...props} />;
-});
-
-FrameIcon.displayName = "FrameIcon";
+}
diff --git a/src/components/Icon/GoogleIcon.tsx b/src/components/Icon/GoogleIcon.tsx
index 9a3f6c57..2b716b0c 100644
--- a/src/components/Icon/GoogleIcon.tsx
+++ b/src/components/Icon/GoogleIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const GoogleSvg = (
@@ -40,8 +38,9 @@ const GoogleSvg = (
 
 export type GoogleIconProps = Omit<IconProps, "svg">;
 
-export const GoogleIcon = forwardRef<HTMLSpanElement, GoogleIconProps>((props, ref) => {
+export function GoogleIcon({
+  ref,
+  ...props
+}: GoogleIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={GoogleSvg} {...props} />;
-});
-
-GoogleIcon.displayName = "GoogleIcon";
+}
diff --git a/src/components/Icon/HeartFillIcon.tsx b/src/components/Icon/HeartFillIcon.tsx
index 5ee9f647..12783992 100644
--- a/src/components/Icon/HeartFillIcon.tsx
+++ b/src/components/Icon/HeartFillIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const HeartFillSvg = (
@@ -19,8 +17,9 @@ const HeartFillSvg = (
 
 export type HeartFillIconProps = Omit<IconProps, "svg">;
 
-export const HeartFillIcon = forwardRef<HTMLSpanElement, HeartFillIconProps>((props, ref) => {
+export function HeartFillIcon({
+  ref,
+  ...props
+}: HeartFillIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={HeartFillSvg} {...props} />;
-});
-
-HeartFillIcon.displayName = "HeartFillIcon";
+}
diff --git a/src/components/Icon/HeartIcon.tsx b/src/components/Icon/HeartIcon.tsx
index 2abe9720..c33e6437 100644
--- a/src/components/Icon/HeartIcon.tsx
+++ b/src/components/Icon/HeartIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const HeartSvg = (
@@ -19,8 +17,9 @@ const HeartSvg = (
 
 export type HeartIconProps = Omit<IconProps, "svg">;
 
-export const HeartIcon = forwardRef<HTMLSpanElement, HeartIconProps>((props, ref) => {
+export function HeartIcon({
+  ref,
+  ...props
+}: HeartIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={HeartSvg} {...props} />;
-});
-
-HeartIcon.displayName = "HeartIcon";
+}
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 3ba34014..2a984d24 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithoutRef } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -22,18 +22,15 @@ const iconVariants = cva("inline-block shrink-0", {
 export interface IconProps
   extends Omit<ComponentPropsWithoutRef<"span">, "children">, VariantProps<typeof iconVariants> {
   svg: React.ReactNode;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
-export const Icon = forwardRef<HTMLSpanElement, IconProps>(
-  ({ className, size, svg, ...props }, ref) => {
-    return (
-      <span ref={ref} className={cn(iconVariants({ size, className }))} {...props}>
-        {svg}
-      </span>
-    );
-  }
-);
-
-Icon.displayName = "Icon";
+export function Icon({ className, size, svg, ref, ...props }: IconProps) {
+  return (
+    <span ref={ref} className={cn(iconVariants({ size, className }))} {...props}>
+      {svg}
+    </span>
+  );
+}
 
 export { iconVariants };
diff --git a/src/components/Icon/InfoIcon.tsx b/src/components/Icon/InfoIcon.tsx
index e4ebc427..500beca7 100644
--- a/src/components/Icon/InfoIcon.tsx
+++ b/src/components/Icon/InfoIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const InfoSvg = (
@@ -22,8 +20,6 @@ const InfoSvg = (
 
 export type InfoIconProps = Omit<IconProps, "svg">;
 
-export const InfoIcon = forwardRef<HTMLSpanElement, InfoIconProps>((props, ref) => {
+export function InfoIcon({ ref, ...props }: InfoIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={InfoSvg} {...props} />;
-});
-
-InfoIcon.displayName = "InfoIcon";
+}
diff --git a/src/components/Icon/KakaoIcon.tsx b/src/components/Icon/KakaoIcon.tsx
index 8621db39..f6d0bdcf 100644
--- a/src/components/Icon/KakaoIcon.tsx
+++ b/src/components/Icon/KakaoIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const KakaoSvg = (
@@ -21,8 +19,9 @@ const KakaoSvg = (
 
 export type KakaoIconProps = Omit<IconProps, "svg">;
 
-export const KakaoIcon = forwardRef<HTMLSpanElement, KakaoIconProps>((props, ref) => {
+export function KakaoIcon({
+  ref,
+  ...props
+}: KakaoIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={KakaoSvg} {...props} />;
-});
-
-KakaoIcon.displayName = "KakaoIcon";
+}
diff --git a/src/components/Icon/LogoutIcon.tsx b/src/components/Icon/LogoutIcon.tsx
index 510dabbe..bd286eaf 100644
--- a/src/components/Icon/LogoutIcon.tsx
+++ b/src/components/Icon/LogoutIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type LogoutIconProps = Omit<IconProps, "svg">;
@@ -19,8 +17,9 @@ const LogoutSvg = (
   </svg>
 );
 
-export const LogoutIcon = forwardRef<HTMLSpanElement, LogoutIconProps>((props, ref) => {
+export function LogoutIcon({
+  ref,
+  ...props
+}: LogoutIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={LogoutSvg} {...props} />;
-});
-
-LogoutIcon.displayName = "LogoutIcon";
+}
diff --git a/src/components/Icon/MinusIcon.tsx b/src/components/Icon/MinusIcon.tsx
index f5837c03..9edbb447 100644
--- a/src/components/Icon/MinusIcon.tsx
+++ b/src/components/Icon/MinusIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const MinusSvg = (
@@ -19,8 +17,9 @@ const MinusSvg = (
 
 export type MinusIconProps = Omit<IconProps, "svg">;
 
-export const MinusIcon = forwardRef<HTMLSpanElement, MinusIconProps>((props, ref) => {
+export function MinusIcon({
+  ref,
+  ...props
+}: MinusIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={MinusSvg} {...props} />;
-});
-
-MinusIcon.displayName = "MinusIcon";
+}
diff --git a/src/components/Icon/NoteIcon.tsx b/src/components/Icon/NoteIcon.tsx
index caf9ed08..bb7cfe79 100644
--- a/src/components/Icon/NoteIcon.tsx
+++ b/src/components/Icon/NoteIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type NoteIconProps = Omit<IconProps, "svg">;
@@ -55,8 +53,6 @@ const NoteSvg = (
   </svg>
 );
 
-export const NoteIcon = forwardRef<HTMLSpanElement, NoteIconProps>((props, ref) => {
+export function NoteIcon({ ref, ...props }: NoteIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={NoteSvg} {...props} />;
-});
-
-NoteIcon.displayName = "NoteIcon";
+}
diff --git a/src/components/Icon/PencilIcon.tsx b/src/components/Icon/PencilIcon.tsx
index f18e7752..c8e04efb 100644
--- a/src/components/Icon/PencilIcon.tsx
+++ b/src/components/Icon/PencilIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const PencilSvg = (
@@ -19,8 +17,9 @@ const PencilSvg = (
 
 export type PencilIconProps = Omit<IconProps, "svg">;
 
-export const PencilIcon = forwardRef<HTMLSpanElement, PencilIconProps>((props, ref) => {
+export function PencilIcon({
+  ref,
+  ...props
+}: PencilIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={PencilSvg} {...props} />;
-});
-
-PencilIcon.displayName = "PencilIcon";
+}
diff --git a/src/components/Icon/PlusIcon.tsx b/src/components/Icon/PlusIcon.tsx
index 28f564d0..beeb85e0 100644
--- a/src/components/Icon/PlusIcon.tsx
+++ b/src/components/Icon/PlusIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const PlusSvg = (
@@ -19,8 +17,6 @@ const PlusSvg = (
 
 export type PlusIconProps = Omit<IconProps, "svg">;
 
-export const PlusIcon = forwardRef<HTMLSpanElement, PlusIconProps>((props, ref) => {
+export function PlusIcon({ ref, ...props }: PlusIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={PlusSvg} {...props} />;
-});
-
-PlusIcon.displayName = "PlusIcon";
+}
diff --git a/src/components/Icon/ProfileCircleIcon.tsx b/src/components/Icon/ProfileCircleIcon.tsx
index 82fc004d..9f3615e2 100644
--- a/src/components/Icon/ProfileCircleIcon.tsx
+++ b/src/components/Icon/ProfileCircleIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type ProfileCircleIconProps = Omit<IconProps, "svg">;
@@ -23,10 +21,9 @@ const ProfileCircleSvg = (
   </svg>
 );
 
-export const ProfileCircleIcon = forwardRef<HTMLSpanElement, ProfileCircleIconProps>(
-  (props, ref) => {
-    return <Icon ref={ref} svg={ProfileCircleSvg} {...props} />;
-  }
-);
-
-ProfileCircleIcon.displayName = "ProfileCircleIcon";
+export function ProfileCircleIcon({
+  ref,
+  ...props
+}: ProfileCircleIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return <Icon ref={ref} svg={ProfileCircleSvg} {...props} />;
+}
diff --git a/src/components/Icon/ProfileIcon.tsx b/src/components/Icon/ProfileIcon.tsx
index 06c3a395..881b8373 100644
--- a/src/components/Icon/ProfileIcon.tsx
+++ b/src/components/Icon/ProfileIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 export type ProfileIconProps = Omit<IconProps, "svg">;
@@ -26,8 +24,9 @@ const ProfileSvg = (
   </svg>
 );
 
-export const ProfileIcon = forwardRef<HTMLSpanElement, ProfileIconProps>((props, ref) => {
+export function ProfileIcon({
+  ref,
+  ...props
+}: ProfileIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ProfileSvg} {...props} />;
-});
-
-ProfileIcon.displayName = "ProfileIcon";
+}
diff --git a/src/components/Icon/SearchIcon.tsx b/src/components/Icon/SearchIcon.tsx
index ef6e0c97..932e02f5 100644
--- a/src/components/Icon/SearchIcon.tsx
+++ b/src/components/Icon/SearchIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const SearchSvg = (
@@ -28,8 +26,9 @@ const SearchSvg = (
 
 export type SearchIconProps = Omit<IconProps, "svg">;
 
-export const SearchIcon = forwardRef<HTMLSpanElement, SearchIconProps>((props, ref) => {
+export function SearchIcon({
+  ref,
+  ...props
+}: SearchIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={SearchSvg} {...props} />;
-});
-
-SearchIcon.displayName = "SearchIcon";
+}
diff --git a/src/components/Icon/ShareIcon.tsx b/src/components/Icon/ShareIcon.tsx
index e75e44e2..9fa6f991 100644
--- a/src/components/Icon/ShareIcon.tsx
+++ b/src/components/Icon/ShareIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ShareSvg = (
@@ -24,18 +22,19 @@ const ShareSvg = (
 
 export type ShareIconProps = Omit<IconProps, "svg">;
 
-export const ShareIcon = forwardRef<HTMLSpanElement, ShareIconProps>(
-  ({ size = "medium", className, ...props }, ref) => {
-    return (
-      <Icon
-        ref={ref}
-        size={size}
-        svg={ShareSvg}
-        className={className ?? "text-text-muted"}
-        {...props}
-      />
-    );
-  }
-);
-
-ShareIcon.displayName = "ShareIcon";
+export function ShareIcon({
+  ref,
+  size = "medium",
+  className,
+  ...props
+}: ShareIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return (
+    <Icon
+      ref={ref}
+      size={size}
+      svg={ShareSvg}
+      className={className ?? "text-text-muted"}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/Icon/StarIcon.tsx b/src/components/Icon/StarIcon.tsx
index 17e036dd..051497ac 100644
--- a/src/components/Icon/StarIcon.tsx
+++ b/src/components/Icon/StarIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const StarSvg = (
@@ -19,8 +17,6 @@ const StarSvg = (
 
 export type StarIconProps = Omit<IconProps, "svg">;
 
-export const StarIcon = forwardRef<HTMLSpanElement, StarIconProps>((props, ref) => {
+export function StarIcon({ ref, ...props }: StarIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={StarSvg} {...props} />;
-});
-
-StarIcon.displayName = "StarIcon";
+}
diff --git a/src/components/Icon/ThumbDownIcon.tsx b/src/components/Icon/ThumbDownIcon.tsx
index 1af11483..863b242d 100644
--- a/src/components/Icon/ThumbDownIcon.tsx
+++ b/src/components/Icon/ThumbDownIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ThumbDownSvg = (
@@ -19,8 +17,9 @@ const ThumbDownSvg = (
 
 export type ThumbDownIconProps = Omit<IconProps, "svg">;
 
-export const ThumbDownIcon = forwardRef<HTMLSpanElement, ThumbDownIconProps>((props, ref) => {
+export function ThumbDownIcon({
+  ref,
+  ...props
+}: ThumbDownIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ThumbDownSvg} {...props} />;
-});
-
-ThumbDownIcon.displayName = "ThumbDownIcon";
+}
diff --git a/src/components/Icon/ThumbUpIcon.tsx b/src/components/Icon/ThumbUpIcon.tsx
index ac953181..2bf5d98c 100644
--- a/src/components/Icon/ThumbUpIcon.tsx
+++ b/src/components/Icon/ThumbUpIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ThumbUpSvg = (
@@ -19,8 +17,9 @@ const ThumbUpSvg = (
 
 export type ThumbUpIconProps = Omit<IconProps, "svg">;
 
-export const ThumbUpIcon = forwardRef<HTMLSpanElement, ThumbUpIconProps>((props, ref) => {
+export function ThumbUpIcon({
+  ref,
+  ...props
+}: ThumbUpIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ThumbUpSvg} {...props} />;
-});
-
-ThumbUpIcon.displayName = "ThumbUpIcon";
+}
diff --git a/src/components/Icon/ThumbsDownIcon.tsx b/src/components/Icon/ThumbsDownIcon.tsx
index ebe1d759..f184032b 100644
--- a/src/components/Icon/ThumbsDownIcon.tsx
+++ b/src/components/Icon/ThumbsDownIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ThumbsDownSvg = (
@@ -19,8 +17,9 @@ const ThumbsDownSvg = (
 
 export type ThumbsDownIconProps = Omit<IconProps, "svg">;
 
-export const ThumbsDownIcon = forwardRef<HTMLSpanElement, ThumbsDownIconProps>((props, ref) => {
+export function ThumbsDownIcon({
+  ref,
+  ...props
+}: ThumbsDownIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ThumbsDownSvg} {...props} />;
-});
-
-ThumbsDownIcon.displayName = "ThumbsDownIcon";
+}
diff --git a/src/components/Icon/ThumbsUpIcon.tsx b/src/components/Icon/ThumbsUpIcon.tsx
index 29d4fa47..05c09af5 100644
--- a/src/components/Icon/ThumbsUpIcon.tsx
+++ b/src/components/Icon/ThumbsUpIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const ThumbsUpSvg = (
@@ -19,8 +17,9 @@ const ThumbsUpSvg = (
 
 export type ThumbsUpIconProps = Omit<IconProps, "svg">;
 
-export const ThumbsUpIcon = forwardRef<HTMLSpanElement, ThumbsUpIconProps>((props, ref) => {
+export function ThumbsUpIcon({
+  ref,
+  ...props
+}: ThumbsUpIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={ThumbsUpSvg} {...props} />;
-});
-
-ThumbsUpIcon.displayName = "ThumbsUpIcon";
+}
diff --git a/src/components/Icon/UsersIcon.tsx b/src/components/Icon/UsersIcon.tsx
index 4e2b3439..953d6690 100644
--- a/src/components/Icon/UsersIcon.tsx
+++ b/src/components/Icon/UsersIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const UsersSvg = (
@@ -43,8 +41,9 @@ const UsersSvg = (
 
 export type UsersIconProps = Omit<IconProps, "svg">;
 
-export const UsersIcon = forwardRef<HTMLSpanElement, UsersIconProps>((props, ref) => {
+export function UsersIcon({
+  ref,
+  ...props
+}: UsersIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return <Icon ref={ref} svg={UsersSvg} {...props} />;
-});
-
-UsersIcon.displayName = "UsersIcon";
+}
diff --git a/src/components/Icon/XIcon.tsx b/src/components/Icon/XIcon.tsx
index bff82c34..64dace8e 100644
--- a/src/components/Icon/XIcon.tsx
+++ b/src/components/Icon/XIcon.tsx
@@ -1,5 +1,3 @@
-import { forwardRef } from "react";
-
 import { Icon, type IconProps } from "./Icon";
 
 const XSvg = (
@@ -19,18 +17,19 @@ const XSvg = (
 
 export type XIconProps = Omit<IconProps, "svg">;
 
-export const XIcon = forwardRef<HTMLSpanElement, XIconProps>(
-  ({ size = "xsmall", className, ...props }, ref) => {
-    return (
-      <Icon
-        ref={ref}
-        size={size}
-        svg={XSvg}
-        className={className ?? "text-text-brand-default"}
-        {...props}
-      />
-    );
-  }
-);
-
-XIcon.displayName = "XIcon";
+export function XIcon({
+  ref,
+  size = "xsmall",
+  className,
+  ...props
+}: XIconProps & { ref?: React.Ref<HTMLSpanElement> }) {
+  return (
+    <Icon
+      ref={ref}
+      size={size}
+      svg={XSvg}
+      className={className ?? "text-text-brand-default"}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/ImageUploader/ImageUploader.tsx b/src/components/ImageUploader/ImageUploader.tsx
index 2a5953d1..e71dbdeb 100644
--- a/src/components/ImageUploader/ImageUploader.tsx
+++ b/src/components/ImageUploader/ImageUploader.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useRef, useCallback, useId, type InputHTMLAttributes } from "react";
+import { useRef, useId, type InputHTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -80,167 +80,153 @@ export interface ImageUploaderProps
   containerClassName?: string;
   /** 업로드 취소 시 콜백 */
   onCancel?: () => void;
+  ref?: React.Ref<HTMLInputElement>;
 }
 
-export const ImageUploader = forwardRef<HTMLInputElement, ImageUploaderProps>(
-  (
-    {
-      className,
-      containerClassName,
-      onFileSelect,
-      uploadProgress,
-      accept = "image/*",
-      maxFileSize = DEFAULT_MAX_FILE_SIZE,
-      onFileSizeError,
-      disabled = false,
-      hintText = "최대 5MB 파일만 허용 가능",
-      uploadingText = "업로드 중...",
-      onCancel,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    const generatedId = useId();
-    const inputId = id ?? generatedId;
-    const internalInputRef = useRef<HTMLInputElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const isUploading = uploadProgress !== undefined && uploadProgress >= 0 && uploadProgress < 100;
-
-    const handleFileSelection = useCallback(
-      (file: File | null) => {
-        if (!file) {
-          onFileSelect?.(null);
-          return;
-        }
-
-        if (file.size > maxFileSize) {
-          onFileSizeError?.(file, maxFileSize);
-          return;
-        }
-
-        onFileSelect?.(file);
-      },
-      [maxFileSize, onFileSelect, onFileSizeError]
-    );
-
-    const { isDragging, dragFileName, mousePosition, dragHandlers } = useDragAndDrop({
-      disabled: disabled || isUploading,
-      onFileDrop: handleFileSelection,
-      containerRef,
-    });
-
-    const state: UploadState = isUploading ? "uploading" : isDragging ? "dragging" : "default";
-
-    const handleClick = useCallback(() => {
-      if (disabled || isUploading) return;
-      internalInputRef.current?.click();
-    }, [disabled, isUploading]);
-
-    const handleFileChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0] || null;
-        handleFileSelection(file);
-        e.target.value = "";
-      },
-      [handleFileSelection]
-    );
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleClick();
-        }
-      },
-      [handleClick]
-    );
-
-    return (
-      <div className={cn("w-full", containerClassName)}>
-        <div
-          ref={containerRef}
-          className={cn(imageUploaderVariants({ state, disabled, className }))}
-          onDragEnter={dragHandlers.onDragEnter}
-          onDragLeave={dragHandlers.onDragLeave}
-          onDragOver={dragHandlers.onDragOver}
-          onDrop={dragHandlers.onDrop}
-          onClick={handleClick}
-          onKeyDown={handleKeyDown}
-          role="button"
-          tabIndex={disabled || isUploading ? -1 : 0}
-          aria-label="이미지 업로드 영역"
-          aria-disabled={disabled || isUploading}
-        >
-          {/* 숨겨진 파일 input */}
-          <input
-            ref={(node) => {
-              internalInputRef.current = node;
-              if (typeof ref === "function") {
-                ref(node);
-              } else if (ref) {
-                ref.current = node;
-              }
+export function ImageUploader({
+  className,
+  containerClassName,
+  onFileSelect,
+  uploadProgress,
+  accept = "image/*",
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  onFileSizeError,
+  disabled = false,
+  hintText = "최대 5MB 파일만 허용 가능",
+  uploadingText = "업로드 중...",
+  onCancel,
+  id,
+  ref,
+  ...props
+}: ImageUploaderProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isUploading = uploadProgress !== undefined && uploadProgress >= 0 && uploadProgress < 100;
+
+  const handleFileSelection = (file: File | null) => {
+    if (!file) {
+      onFileSelect?.(null);
+      return;
+    }
+
+    if (file.size > maxFileSize) {
+      onFileSizeError?.(file, maxFileSize);
+      return;
+    }
+
+    onFileSelect?.(file);
+  };
+
+  const { isDragging, dragFileName, mousePosition, dragHandlers } = useDragAndDrop({
+    disabled: disabled || isUploading,
+    onFileDrop: handleFileSelection,
+    containerRef,
+  });
+
+  const state: UploadState = isUploading ? "uploading" : isDragging ? "dragging" : "default";
+
+  const handleClick = () => {
+    if (disabled || isUploading) return;
+    internalInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    handleFileSelection(file);
+    e.target.value = "";
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <div className={cn("w-full", containerClassName)}>
+      <div
+        ref={containerRef}
+        className={cn(imageUploaderVariants({ state, disabled, className }))}
+        onDragEnter={dragHandlers.onDragEnter}
+        onDragLeave={dragHandlers.onDragLeave}
+        onDragOver={dragHandlers.onDragOver}
+        onDrop={dragHandlers.onDrop}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={disabled || isUploading ? -1 : 0}
+        aria-label="이미지 업로드 영역"
+        aria-disabled={disabled || isUploading}
+      >
+        {/* 숨겨진 파일 input */}
+        <input
+          ref={(node) => {
+            internalInputRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          }}
+          type="file"
+          id={inputId}
+          accept={accept}
+          disabled={disabled || isUploading}
+          onChange={handleFileChange}
+          className="sr-only"
+          aria-describedby={`${inputId}-hint`}
+          {...props}
+        />
+
+        {/* 드래그 중 파일명 툴팁 - OS 프리뷰 위에 표시되도록 위쪽에 배치 */}
+        {isDragging && dragFileName && (
+          <div
+            className="pointer-events-none absolute z-50 flex items-center gap-1.5 rounded bg-green-600 px-2 py-1 shadow-lg"
+            style={{
+              left: mousePosition.x + 16,
+              top: mousePosition.y - 36,
             }}
-            type="file"
-            id={inputId}
-            accept={accept}
-            disabled={disabled || isUploading}
-            onChange={handleFileChange}
-            className="sr-only"
-            aria-describedby={`${inputId}-hint`}
-            {...props}
-          />
-
-          {/* 드래그 중 파일명 툴팁 - OS 프리뷰 위에 표시되도록 위쪽에 배치 */}
-          {isDragging && dragFileName && (
-            <div
-              className="pointer-events-none absolute z-50 flex items-center gap-1.5 rounded bg-green-600 px-2 py-1 shadow-lg"
-              style={{
-                left: mousePosition.x + 16,
-                top: mousePosition.y - 36,
+          >
+            <FileIcon size="xsmall" className="text-white" />
+            <span className="text-xs font-medium text-gray-800">{dragFileName}</span>
+          </div>
+        )}
+
+        {/* 상태별 콘텐츠 렌더링 */}
+        {isUploading ? (
+          <div className="flex flex-col items-center gap-3">
+            <ProgressRing progress={uploadProgress!} />
+            <span id={`${inputId}-hint`} className="text-text-secondary text-sm leading-[1.43]">
+              {uploadingText}
+            </span>
+            <Button
+              variant="outlined"
+              colorScheme="secondary"
+              size="small"
+              onClick={(e) => {
+                e.stopPropagation();
+                onCancel?.();
               }}
             >
-              <FileIcon size="xsmall" className="text-white" />
-              <span className="text-xs font-medium text-gray-800">{dragFileName}</span>
-            </div>
-          )}
-
-          {/* 상태별 콘텐츠 렌더링 */}
-          {isUploading ? (
-            <div className="flex flex-col items-center gap-3">
-              <ProgressRing progress={uploadProgress!} />
-              <span id={`${inputId}-hint`} className="text-text-secondary text-sm leading-[1.43]">
-                {uploadingText}
-              </span>
-              <Button
-                variant="outlined"
-                colorScheme="secondary"
-                size="small"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onCancel?.();
-                }}
-              >
-                취소하기
-              </Button>
-            </div>
-          ) : (
-            <>
-              <CloudUploadIcon size="xlarge" className="text-green-600" />
-              <span className="text-sm text-gray-50">커버 사진을 등록해주세요</span>
-              <span id={`${inputId}-hint`} className="text-text-secondary text-sm leading-[1.43]">
-                {hintText}
-              </span>
-            </>
-          )}
-        </div>
+              취소하기
+            </Button>
+          </div>
+        ) : (
+          <>
+            <CloudUploadIcon size="xlarge" className="text-green-600" />
+            <span className="text-sm text-gray-50">커버 사진을 등록해주세요</span>
+            <span id={`${inputId}-hint`} className="text-text-secondary text-sm leading-[1.43]">
+              {hintText}
+            </span>
+          </>
+        )}
       </div>
-    );
-  }
-);
-
-ImageUploader.displayName = "ImageUploader";
+    </div>
+  );
+}
 
 export { imageUploaderVariants };
diff --git a/src/components/Input/TextInput.tsx b/src/components/Input/TextInput.tsx
index 84cf32ed..7572cb9d 100644
--- a/src/components/Input/TextInput.tsx
+++ b/src/components/Input/TextInput.tsx
@@ -1,7 +1,5 @@
 import {
-  forwardRef,
   useState,
-  useCallback,
   useId,
   type InputHTMLAttributes,
   type FocusEvent,
@@ -80,158 +78,142 @@ export interface TextInputProps
   containerClassName?: string;
   fullWidth?: boolean;
   showCharacterCount?: boolean;
+  ref?: React.Ref<HTMLInputElement>;
 }
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  (
-    {
-      className,
-      containerClassName,
-      fullWidth = false,
-      label,
-      error = false,
-      errorMessage,
-      helperText,
-      helperTextType = "default",
-      disabled = false,
-      value,
-      defaultValue,
-      size = "md",
-      onClear,
-      onFocus,
-      onBlur,
-      onChange,
-      showCharacterCount = false,
-      maxLength,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    const generatedId = useId();
-    const inputId = id ?? generatedId;
-    const errorMessageId = `${inputId}-error`;
-
-    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
-    const [isFocused, setIsFocused] = useState(false);
-
-    const isControlled = value !== undefined;
-    const currentValue = isControlled ? value : internalValue;
-    const characterCount = String(currentValue).length;
-    const hasValue = characterCount > 0;
-    const showCount = showCharacterCount && maxLength !== undefined;
-
-    const getState = () => {
-      if (disabled) return "disabled";
-      if (error) return "error";
-      if (hasValue) return "filled";
-      return "default";
-    };
-
-    const handleFocus = useCallback(
-      (e: FocusEvent<HTMLInputElement>) => {
-        setIsFocused(true);
-        onFocus?.(e);
-      },
-      [onFocus]
-    );
-
-    const handleBlur = useCallback(
-      (e: FocusEvent<HTMLInputElement>) => {
-        setIsFocused(false);
-        onBlur?.(e);
-      },
-      [onBlur]
-    );
-
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLInputElement>) => {
-        if (!isControlled) {
-          setInternalValue(e.target.value);
-        }
-        onChange?.(e);
-      },
-      [isControlled, onChange]
-    );
-
-    const handleClear = useCallback(() => {
-      if (!isControlled) {
-        setInternalValue("");
-      }
-      onClear?.();
-    }, [isControlled, onClear]);
-
-    const showClearButton = hasValue && isFocused && !disabled && !error;
-
-    return (
-      <div
-        className={cn("flex w-full flex-col gap-2", !fullWidth && "max-w-95", containerClassName)}
-      >
-        {label && (
-          <label htmlFor={inputId} className="text-text-secondary text-base">
-            {label}
-          </label>
+export function TextInput({
+  className,
+  containerClassName,
+  fullWidth = false,
+  label,
+  error = false,
+  errorMessage,
+  helperText,
+  helperTextType = "default",
+  disabled = false,
+  value,
+  defaultValue,
+  size = "md",
+  onClear,
+  onFocus,
+  onBlur,
+  onChange,
+  showCharacterCount = false,
+  maxLength,
+  id,
+  ref,
+  ...props
+}: TextInputProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const errorMessageId = `${inputId}-error`;
+
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [isFocused, setIsFocused] = useState(false);
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+  const characterCount = String(currentValue).length;
+  const hasValue = characterCount > 0;
+  const showCount = showCharacterCount && maxLength !== undefined;
+
+  const getState = () => {
+    if (disabled) return "disabled";
+    if (error) return "error";
+    if (hasValue) return "filled";
+    return "default";
+  };
+
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setIsFocused(true);
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    setIsFocused(false);
+    onBlur?.(e);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isControlled) {
+      setInternalValue(e.target.value);
+    }
+    onChange?.(e);
+  };
+
+  const handleClear = () => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onClear?.();
+  };
+
+  const showClearButton = hasValue && isFocused && !disabled && !error;
+
+  return (
+    <div className={cn("flex w-full flex-col gap-2", !fullWidth && "max-w-95", containerClassName)}>
+      {label && (
+        <label htmlFor={inputId} className="text-text-secondary text-base">
+          {label}
+        </label>
+      )}
+
+      <div className="relative">
+        <input
+          ref={ref}
+          id={inputId}
+          className={cn(
+            textInputVariants({ state: getState(), size }),
+            showClearButton && "pr-12",
+            className
+          )}
+          disabled={disabled}
+          value={currentValue}
+          maxLength={maxLength}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          aria-invalid={error}
+          aria-describedby={error && errorMessage ? errorMessageId : undefined}
+          {...(props as Omit<InputHTMLAttributes<HTMLInputElement>, "size">)}
+        />
+
+        {showClearButton && (
+          <button
+            type="button"
+            className="right-md absolute top-1/2 flex -translate-y-1/2 cursor-pointer items-center justify-center"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={handleClear}
+            tabIndex={-1}
+            aria-label="입력 초기화"
+          >
+            <ClearIcon size="small" />
+          </button>
         )}
+      </div>
 
-        <div className="relative">
-          <input
-            ref={ref}
-            id={inputId}
+      {showCount && (
+        <div className="flex w-full justify-end">
+          <span
             className={cn(
-              textInputVariants({ state: getState(), size }),
-              showClearButton && "pr-12",
-              className
+              "text-sm",
+              error ? "text-text-status-negative-default" : "text-text-muted"
             )}
-            disabled={disabled}
-            value={currentValue}
-            maxLength={maxLength}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            onChange={handleChange}
-            aria-invalid={error}
-            aria-describedby={error && errorMessage ? errorMessageId : undefined}
-            {...(props as Omit<InputHTMLAttributes<HTMLInputElement>, "size">)}
-          />
-
-          {showClearButton && (
-            <button
-              type="button"
-              className="right-md absolute top-1/2 flex -translate-y-1/2 cursor-pointer items-center justify-center"
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={handleClear}
-              tabIndex={-1}
-              aria-label="입력 초기화"
-            >
-              <ClearIcon size="small" />
-            </button>
-          )}
+            aria-live="polite"
+          >
+            {characterCount}/{maxLength}
+          </span>
         </div>
-
-        {showCount && (
-          <div className="flex w-full justify-end">
-            <span
-              className={cn(
-                "text-sm",
-                error ? "text-text-status-negative-default" : "text-text-muted"
-              )}
-              aria-live="polite"
-            >
-              {characterCount}/{maxLength}
-            </span>
-          </div>
-        )}
-
-        {/* Priority: errorMessage > helperText */}
-        {error && errorMessage ? (
-          <HelperText id={errorMessageId} text={errorMessage} type="negative" />
-        ) : helperText ? (
-          <HelperText text={helperText} type={helperTextType} />
-        ) : null}
-      </div>
-    );
-  }
-);
-
-TextInput.displayName = "TextInput";
+      )}
+
+      {/* Priority: errorMessage > helperText */}
+      {error && errorMessage ? (
+        <HelperText id={errorMessageId} text={errorMessage} type="negative" />
+      ) : helperText ? (
+        <HelperText text={helperText} type={helperTextType} />
+      ) : null}
+    </div>
+  );
+}
 
 export { textInputVariants };
diff --git a/src/components/Input/Textarea.tsx b/src/components/Input/Textarea.tsx
index 15207c6b..3a09a8cd 100644
--- a/src/components/Input/Textarea.tsx
+++ b/src/components/Input/Textarea.tsx
@@ -1,7 +1,5 @@
 import {
-  forwardRef,
   useState,
-  useCallback,
   useId,
   type TextareaHTMLAttributes,
   type FocusEvent,
@@ -81,123 +79,109 @@ export interface TextareaProps
   showCharacterCount?: boolean;
   containerClassName?: string;
   size?: keyof typeof SIZE_STYLES;
+  ref?: React.Ref<HTMLTextAreaElement>;
 }
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      className,
-      containerClassName,
-      label,
-      error = false,
-      errorMessage,
-      helperText,
-      helperTextType = "default",
-      disabled = false,
-      value,
-      defaultValue,
-      size = "medium",
-      showCharacterCount = false,
-      maxLength,
-      onFocus,
-      onBlur,
-      onChange,
-      id,
-      ...props
-    },
-    ref
-  ) => {
-    const generatedId = useId();
-    const textareaId = id ?? generatedId;
-    const errorMessageId = `${textareaId}-error`;
-
-    const [internalValue, setInternalValue] = useState(defaultValue ?? "");
-
-    const isControlled = value !== undefined;
-    const currentValue = isControlled ? value : internalValue;
-    const characterCount = String(currentValue).length;
-    const hasValue = characterCount > 0;
-
-    const getState = () => {
-      if (disabled) return "disabled";
-      if (error) return "error";
-      if (hasValue) return "filled";
-      return "default";
-    };
-
-    const handleFocus = useCallback(
-      (e: FocusEvent<HTMLTextAreaElement>) => {
-        onFocus?.(e);
-      },
-      [onFocus]
-    );
-
-    const handleBlur = useCallback(
-      (e: FocusEvent<HTMLTextAreaElement>) => {
-        onBlur?.(e);
-      },
-      [onBlur]
-    );
-
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLTextAreaElement>) => {
-        if (!isControlled) {
-          setInternalValue(e.target.value);
-        }
-        onChange?.(e);
-      },
-      [isControlled, onChange]
-    );
-
-    const showCount = showCharacterCount && maxLength !== undefined;
-
-    return (
-      <div className={cn("flex w-full max-w-90 flex-col gap-2", containerClassName)}>
-        {label && (
-          <label htmlFor={textareaId} className="text-text-secondary text-base">
-            {label}
-          </label>
-        )}
-
-        <textarea
-          ref={ref}
-          id={textareaId}
-          className={cn(textareaVariants({ state: getState() }), className)}
-          style={SIZE_STYLES[size]}
-          disabled={disabled}
-          value={currentValue}
-          maxLength={maxLength}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          aria-invalid={error}
-          aria-describedby={error && errorMessage ? errorMessageId : undefined}
-          {...props}
-        />
-
-        {showCount && (
-          <div className="flex w-full justify-end">
-            <span
-              className={cn(
-                "text-sm",
-                error ? "text-text-status-negative-default" : "text-text-muted"
-              )}
-              aria-live="polite"
-            >
-              {characterCount}/{maxLength}
-            </span>
-          </div>
-        )}
-
-        {/* Priority: errorMessage > helperText */}
-        {error && errorMessage ? (
-          <HelperText id={errorMessageId} text={errorMessage} type="negative" />
-        ) : helperText ? (
-          <HelperText text={helperText} type={helperTextType} />
-        ) : null}
-      </div>
-    );
-  }
-);
-
-Textarea.displayName = "Textarea";
+export function Textarea({
+  className,
+  containerClassName,
+  label,
+  error = false,
+  errorMessage,
+  helperText,
+  helperTextType = "default",
+  disabled = false,
+  value,
+  defaultValue,
+  size = "medium",
+  showCharacterCount = false,
+  maxLength,
+  onFocus,
+  onBlur,
+  onChange,
+  id,
+  ref,
+  ...props
+}: TextareaProps) {
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const errorMessageId = `${textareaId}-error`;
+
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+  const characterCount = String(currentValue).length;
+  const hasValue = characterCount > 0;
+
+  const getState = () => {
+    if (disabled) return "disabled";
+    if (error) return "error";
+    if (hasValue) return "filled";
+    return "default";
+  };
+
+  const handleFocus = (e: FocusEvent<HTMLTextAreaElement>) => {
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLTextAreaElement>) => {
+    onBlur?.(e);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    if (!isControlled) {
+      setInternalValue(e.target.value);
+    }
+    onChange?.(e);
+  };
+
+  const showCount = showCharacterCount && maxLength !== undefined;
+
+  return (
+    <div className={cn("flex w-full max-w-90 flex-col gap-2", containerClassName)}>
+      {label && (
+        <label htmlFor={textareaId} className="text-text-secondary text-base">
+          {label}
+        </label>
+      )}
+
+      <textarea
+        ref={ref}
+        id={textareaId}
+        className={cn(textareaVariants({ state: getState() }), className)}
+        style={SIZE_STYLES[size]}
+        disabled={disabled}
+        value={currentValue}
+        maxLength={maxLength}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        aria-invalid={error}
+        aria-describedby={error && errorMessage ? errorMessageId : undefined}
+        {...props}
+      />
+
+      {showCount && (
+        <div className="flex w-full justify-end">
+          <span
+            className={cn(
+              "text-sm",
+              error ? "text-text-status-negative-default" : "text-text-muted"
+            )}
+            aria-live="polite"
+          >
+            {characterCount}/{maxLength}
+          </span>
+        </div>
+      )}
+
+      {/* Priority: errorMessage > helperText */}
+      {error && errorMessage ? (
+        <HelperText id={errorMessageId} text={errorMessage} type="negative" />
+      ) : helperText ? (
+        <HelperText text={helperText} type={helperTextType} />
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 17a91349..e72e73cf 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { type ComponentPropsWithoutRef } from "react";
 
 import { cn } from "@/lib/utils/utils";
 
@@ -11,38 +11,33 @@ export interface ProgressBarProps extends ComponentPropsWithoutRef<"div"> {
   trackClassName?: string;
   /** 진행 바 색상 클래스 (기본: bg-green-100) */
   indicatorClassName?: string;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
-  (
-    {
-      progress,
-      trackClassName = "bg-gray-700",
-      indicatorClassName = "bg-green-100",
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const clampedProgress = Math.min(100, Math.max(0, progress));
+export function ProgressBar({
+  progress,
+  trackClassName = "bg-gray-700",
+  indicatorClassName = "bg-green-100",
+  className,
+  ref,
+  ...props
+}: ProgressBarProps) {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
 
-    return (
+  return (
+    <div
+      ref={ref}
+      role="progressbar"
+      aria-valuenow={clampedProgress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className={cn("h-1.5 w-full overflow-hidden rounded-full", trackClassName, className)}
+      {...props}
+    >
       <div
-        ref={ref}
-        role="progressbar"
-        aria-valuenow={clampedProgress}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        className={cn("h-1.5 w-full overflow-hidden rounded-full", trackClassName, className)}
-        {...props}
-      >
-        <div
-          className={cn("h-full transition-[width] duration-300 ease-in-out", indicatorClassName)}
-          style={{ width: `${clampedProgress}%` }}
-        />
-      </div>
-    );
-  }
-);
-
-ProgressBar.displayName = "ProgressBar";
+        className={cn("h-full transition-[width] duration-300 ease-in-out", indicatorClassName)}
+        style={{ width: `${clampedProgress}%` }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/ProgressRing/ProgressRing.tsx b/src/components/ProgressRing/ProgressRing.tsx
index c77d8934..8ff19055 100644
--- a/src/components/ProgressRing/ProgressRing.tsx
+++ b/src/components/ProgressRing/ProgressRing.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 
 import { cn } from "@/lib/utils/utils";
 
@@ -19,77 +19,72 @@ export interface ProgressRingProps extends ComponentPropsWithoutRef<"div"> {
   showPercent?: boolean;
   /** 중앙 콘텐츠 */
   children?: ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const ProgressRing = forwardRef<HTMLDivElement, ProgressRingProps>(
-  (
-    {
-      progress,
-      size = 42,
-      strokeWidth = 4,
-      trackClassName = "stroke-gray-700",
-      progressClassName = "stroke-green-600",
-      showPercent = true,
-      children,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
-    const clampedProgress = Math.min(100, Math.max(0, progress));
-    const strokeDashoffset = circumference - (clampedProgress / 100) * circumference;
+export function ProgressRing({
+  progress,
+  size = 42,
+  strokeWidth = 4,
+  trackClassName = "stroke-gray-700",
+  progressClassName = "stroke-green-600",
+  showPercent = true,
+  children,
+  className,
+  ref,
+  ...props
+}: ProgressRingProps) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+  const strokeDashoffset = circumference - (clampedProgress / 100) * circumference;
 
-    return (
-      <div
-        ref={ref}
-        className={cn("relative inline-flex items-center justify-center", className)}
-        style={{ width: size, height: size }}
-        role="progressbar"
-        aria-valuenow={clampedProgress}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-label={`${Math.round(clampedProgress)}% 완료`}
-        {...props}
-      >
-        <svg width={size} height={size} className="rotate-[-90deg]">
-          {/* 배경 트랙 */}
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            fill="none"
-            strokeWidth={strokeWidth}
-            className={trackClassName}
-          />
-          {/* 진행 바 */}
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={radius}
-            fill="none"
-            strokeWidth={strokeWidth}
-            className={cn(progressClassName, "transition-[stroke-dashoffset] duration-300")}
-            style={{
-              strokeDasharray: circumference,
-              strokeDashoffset,
-            }}
-          />
-        </svg>
-        {/* 중앙 퍼센트 텍스트 */}
-        {showPercent && (
-          <div className="absolute inset-0 flex items-center justify-center">
-            {children || (
-              <span className="text-[10px] font-semibold text-gray-300">
-                {Math.round(clampedProgress)}%
-              </span>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-ProgressRing.displayName = "ProgressRing";
+  return (
+    <div
+      ref={ref}
+      className={cn("relative inline-flex items-center justify-center", className)}
+      style={{ width: size, height: size }}
+      role="progressbar"
+      aria-valuenow={clampedProgress}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={`${Math.round(clampedProgress)}% 완료`}
+      {...props}
+    >
+      <svg width={size} height={size} className="rotate-[-90deg]">
+        {/* 배경 트랙 */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          className={trackClassName}
+        />
+        {/* 진행 바 */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          className={cn(progressClassName, "transition-[stroke-dashoffset] duration-300")}
+          style={{
+            strokeDasharray: circumference,
+            strokeDashoffset,
+          }}
+        />
+      </svg>
+      {/* 중앙 퍼센트 텍스트 */}
+      {showPercent && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {children || (
+            <span className="text-[10px] font-semibold text-gray-300">
+              {Math.round(clampedProgress)}%
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 942ca5e3..1d96b1db 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, type InputHTMLAttributes } from "react";
+import { type InputHTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -50,34 +50,31 @@ export interface SearchInputProps
     Omit<InputHTMLAttributes<HTMLInputElement>, "type">,
     VariantProps<typeof searchInputContainerVariants> {
   onSearchClick?: () => void;
+  ref?: React.Ref<HTMLInputElement>;
 }
 
-export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ className, onSearchClick, ...props }, ref) => {
-    return (
-      <div className={cn(searchInputContainerVariants(), className)}>
-        <input
-          ref={ref}
-          type="text"
-          className={searchInputVariants()}
-          placeholder={props.placeholder ?? " "}
-          {...props}
+export function SearchInput({ className, onSearchClick, ref, ...props }: SearchInputProps) {
+  return (
+    <div className={cn(searchInputContainerVariants(), className)}>
+      <input
+        ref={ref}
+        type="text"
+        className={searchInputVariants()}
+        placeholder={props.placeholder ?? " "}
+        {...props}
+      />
+      <button
+        type="button"
+        onClick={onSearchClick}
+        className="p-xs flex shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-gray-800"
+      >
+        <SearchIcon
+          size="small"
+          className="group-focus-within:text-text-primary text-gray-300 transition-colors"
         />
-        <button
-          type="button"
-          onClick={onSearchClick}
-          className="p-xs flex shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors hover:bg-gray-800"
-        >
-          <SearchIcon
-            size="small"
-            className="group-focus-within:text-text-primary text-gray-300 transition-colors"
-          />
-        </button>
-      </div>
-    );
-  }
-);
-
-SearchInput.displayName = "SearchInput";
+      </button>
+    </div>
+  );
+}
 
 export { searchInputContainerVariants, searchInputVariants };
diff --git a/src/components/StepperSlide/StepperSlide.tsx b/src/components/StepperSlide/StepperSlide.tsx
index e1a52a46..c620d81c 100644
--- a/src/components/StepperSlide/StepperSlide.tsx
+++ b/src/components/StepperSlide/StepperSlide.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef } from "react";
+import React from "react";
 
 import { cn } from "@/lib/utils/utils";
 
@@ -10,140 +10,132 @@ import type { StepperSlideProps } from "./StepperSlide.types";
 
 const TICK_VALUES = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] as const;
 
-export const StepperSlide = forwardRef<HTMLDivElement, StepperSlideProps>(
-  (
-    {
+export function StepperSlide({
+  value,
+  onChange,
+  myFocusValue,
+  myFocusLabel = "내 집중도",
+  min = 0,
+  max = 100,
+  disabled = false,
+  className,
+  ref,
+}: StepperSlideProps & { ref?: React.Ref<HTMLDivElement> }) {
+  const { isDragging, percentage, trackRef, handleMouseDown, handleTrackClick, handleKeyDown } =
+    useStepperSlide({
       value,
       onChange,
-      myFocusValue,
-      myFocusLabel = "내 집중도",
-      min = 0,
-      max = 100,
-      disabled = false,
-      className,
-    },
-    ref
-  ) => {
-    const { isDragging, percentage, trackRef, handleMouseDown, handleTrackClick, handleKeyDown } =
-      useStepperSlide({
-        value,
-        onChange,
-        min,
-        max,
-        disabled,
-      });
+      min,
+      max,
+      disabled,
+    });
 
-    const myFocusPercentage =
-      myFocusValue !== undefined ? ((myFocusValue - min) / (max - min)) * 100 : undefined;
+  const myFocusPercentage =
+    myFocusValue !== undefined ? ((myFocusValue - min) / (max - min)) * 100 : undefined;
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "relative w-full select-none",
-          disabled && "cursor-not-allowed opacity-50",
-          className
-        )}
-      >
-        {/* 말풍선 영역 */}
-        <div className="relative mb-3 h-9.5">
-          {/* 내 집중도 말풍선 */}
-          {myFocusPercentage !== undefined && (
-            <div className="absolute top-0" style={{ left: `${myFocusPercentage}%` }}>
-              <div
-                className={cn(
-                  "relative -translate-x-1/2",
-                  "flex h-8.75 w-14 items-center justify-center",
-                  "rounded-sm bg-gray-700 font-semibold whitespace-nowrap text-gray-200",
-                  "after:absolute after:top-full after:left-1/2 after:-translate-x-1/2",
-                  "after:border-4 after:border-transparent after:border-t-gray-700 after:content-['']"
-                )}
-              >
-                <span className="px-xs box-border text-xs">{myFocusLabel}</span>
-              </div>
-            </div>
-          )}
-
-          {/* 현재 값 말풍선 */}
-          <div className="absolute top-0" style={{ left: `${percentage}%` }}>
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative w-full select-none",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      )}
+    >
+      {/* 말풍선 영역 */}
+      <div className="relative mb-3 h-9.5">
+        {/* 내 집중도 말풍선 */}
+        {myFocusPercentage !== undefined && (
+          <div className="absolute top-0" style={{ left: `${myFocusPercentage}%` }}>
             <div
               className={cn(
                 "relative -translate-x-1/2",
-                "flex h-8.75 w-13 items-center justify-center",
-                "rounded-sm bg-green-600 font-semibold",
+                "flex h-8.75 w-14 items-center justify-center",
+                "rounded-sm bg-gray-700 font-semibold whitespace-nowrap text-gray-200",
                 "after:absolute after:top-full after:left-1/2 after:-translate-x-1/2",
-                "after:border-4 after:border-transparent after:border-t-green-600 after:content-['']",
-                isDragging && "scale-110 transition-transform"
+                "after:border-4 after:border-transparent after:border-t-gray-700 after:content-['']"
               )}
             >
-              <div className="text-text-inverse text-base">{value}%</div>
+              <span className="px-xs box-border text-xs">{myFocusLabel}</span>
             </div>
           </div>
+        )}
+
+        {/* 현재 값 말풍선 */}
+        <div className="absolute top-0" style={{ left: `${percentage}%` }}>
+          <div
+            className={cn(
+              "relative -translate-x-1/2",
+              "flex h-8.75 w-13 items-center justify-center",
+              "rounded-sm bg-green-600 font-semibold",
+              "after:absolute after:top-full after:left-1/2 after:-translate-x-1/2",
+              "after:border-4 after:border-transparent after:border-t-green-600 after:content-['']",
+              isDragging && "scale-110 transition-transform"
+            )}
+          >
+            <div className="text-text-inverse text-base">{value}%</div>
+          </div>
         </div>
+      </div>
 
-        {/* 슬라이더 트랙 */}
+      {/* 슬라이더 트랙 */}
+      <div
+        ref={trackRef}
+        className={cn("relative h-2 cursor-pointer rounded-full bg-gray-700")}
+        onClick={handleTrackClick}
+      >
+        {/* 채워진 영역 */}
         <div
-          ref={trackRef}
-          className={cn("relative h-2 cursor-pointer rounded-full bg-gray-700")}
-          onClick={handleTrackClick}
-        >
-          {/* 채워진 영역 */}
+          className="absolute top-0 left-0 h-full rounded-full bg-green-600"
+          style={{ width: `${percentage}%` }}
+        />
+
+        {/* 내 집중도 마커 */}
+        {myFocusPercentage !== undefined && (
           <div
-            className="absolute top-0 left-0 h-full rounded-full bg-green-600"
-            style={{ width: `${percentage}%` }}
+            className="absolute top-1/2 h-4 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-400"
+            style={{ left: `${myFocusPercentage}%` }}
           />
+        )}
 
-          {/* 내 집중도 마커 */}
-          {myFocusPercentage !== undefined && (
-            <div
-              className="absolute top-1/2 h-4 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-400"
-              style={{ left: `${myFocusPercentage}%` }}
-            />
+        {/* 드래그 핸들 */}
+        <div
+          className={cn(
+            "absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
+            "h-5 w-5 rounded-full",
+            "border-common-white border-2 bg-green-600",
+            "cursor-grab shadow-[0_0_8px_0_#00000029]",
+            "focus:ring-2 focus:ring-green-400 focus:outline-none",
+            isDragging && "scale-110 cursor-grabbing"
           )}
+          style={{ left: `${percentage}%` }}
+          onMouseDown={handleMouseDown}
+          onKeyDown={handleKeyDown}
+          tabIndex={disabled ? -1 : 0}
+          role="slider"
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          aria-disabled={disabled}
+        />
+      </div>
 
-          {/* 드래그 핸들 */}
+      {/* 격자선 및 숫자 */}
+      <div className="relative mt-2 h-6 w-full">
+        {TICK_VALUES.map((tick) => (
           <div
-            className={cn(
-              "absolute top-1/2 -translate-x-1/2 -translate-y-1/2",
-              "h-5 w-5 rounded-full",
-              "border-common-white border-2 bg-green-600",
-              "cursor-grab shadow-[0_0_8px_0_#00000029]",
-              "focus:ring-2 focus:ring-green-400 focus:outline-none",
-              isDragging && "scale-110 cursor-grabbing"
-            )}
-            style={{ left: `${percentage}%` }}
-            onMouseDown={handleMouseDown}
-            onKeyDown={handleKeyDown}
-            tabIndex={disabled ? -1 : 0}
-            role="slider"
-            aria-valuemin={min}
-            aria-valuemax={max}
-            aria-valuenow={value}
-            aria-disabled={disabled}
-          />
-        </div>
+            key={tick}
+            className="absolute flex -translate-x-1/2 transform flex-col items-center"
+            style={{ left: `${tick}%` }}
+          >
+            {/* 격자선 */}
+            <div className={cn("w-px", tick % 20 === 0 ? "h-3 bg-gray-400" : "h-2 bg-gray-600")} />
 
-        {/* 격자선 및 숫자 */}
-        <div className="relative mt-2 h-6 w-full">
-          {TICK_VALUES.map((tick) => (
-            <div
-              key={tick}
-              className="absolute flex -translate-x-1/2 transform flex-col items-center"
-              style={{ left: `${tick}%` }}
-            >
-              {/* 격자선 */}
-              <div
-                className={cn("w-px", tick % 20 === 0 ? "h-3 bg-gray-400" : "h-2 bg-gray-600")}
-              />
-
-              {/* 20단위 숫자 */}
-              {tick % 20 === 0 && <span className="mt-1 text-xs text-gray-400">{tick}</span>}
-            </div>
-          ))}
-        </div>
+            {/* 20단위 숫자 */}
+            {tick % 20 === 0 && <span className="mt-1 text-xs text-gray-400">{tick}</span>}
+          </div>
+        ))}
       </div>
-    );
-  }
-);
-
-StepperSlide.displayName = "StepperSlide";
+    </div>
+  );
+}
diff --git a/src/components/StepperSlide/useStepperSlide.ts b/src/components/StepperSlide/useStepperSlide.ts
index 3222d325..c6bdaa68 100644
--- a/src/components/StepperSlide/useStepperSlide.ts
+++ b/src/components/StepperSlide/useStepperSlide.ts
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 
 interface UseStepperSlideOptions {
   value: number;
@@ -29,64 +29,52 @@ export function useStepperSlide({
 
   const percentage = ((value - min) / (max - min)) * 100;
 
-  const getValueFromPosition = useCallback(
-    (clientX: number) => {
-      if (!trackRef.current) return min;
-      const rect = trackRef.current.getBoundingClientRect();
-      const position = (clientX - rect.left) / rect.width;
-      const rawValue = min + position * (max - min);
-      return Math.round(Math.min(max, Math.max(min, rawValue)));
-    },
-    [min, max]
-  );
+  const getValueFromPosition = (clientX: number) => {
+    if (!trackRef.current) return min;
+    const rect = trackRef.current.getBoundingClientRect();
+    const position = (clientX - rect.left) / rect.width;
+    const rawValue = min + position * (max - min);
+    return Math.round(Math.min(max, Math.max(min, rawValue)));
+  };
 
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (disabled) return;
-      e.preventDefault();
-      setIsDragging(true);
-    },
-    [disabled]
-  );
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+  };
 
-  const handleTrackClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (disabled || isDragging) return;
-      const newValue = getValueFromPosition(e.clientX);
-      onChange(newValue);
-    },
-    [disabled, isDragging, getValueFromPosition, onChange]
-  );
+  const handleTrackClick = (e: React.MouseEvent) => {
+    if (disabled || isDragging) return;
+    const newValue = getValueFromPosition(e.clientX);
+    onChange(newValue);
+  };
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (disabled) return;
-      let newValue = value;
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowUp":
-          newValue = Math.min(max, value + 1);
-          break;
-        case "ArrowLeft":
-        case "ArrowDown":
-          newValue = Math.max(min, value - 1);
-          break;
-        case "Home":
-          newValue = min;
-          break;
-        case "End":
-          newValue = max;
-          break;
-        default:
-          return;
-      }
-      if (newValue !== value) {
-        e.preventDefault();
-        onChange(newValue);
-      }
-    },
-    [disabled, value, min, max, onChange]
-  );
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+    let newValue = value;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        newValue = Math.min(max, value + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        newValue = Math.max(min, value - 1);
+        break;
+      case "Home":
+        newValue = min;
+        break;
+      case "End":
+        newValue = max;
+        break;
+      default:
+        return;
+    }
+    if (newValue !== value) {
+      e.preventDefault();
+      onChange(newValue);
+    }
+  };
 
   useEffect(() => {
     if (!isDragging) return;
diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx
index b9f5da4d..f7908e71 100644
--- a/src/components/Thumbnail/Thumbnail.tsx
+++ b/src/components/Thumbnail/Thumbnail.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useState } from "react";
+import { useState } from "react";
 
 import Image from "next/image";
 
@@ -48,6 +48,7 @@ export interface ThumbnailProps
   src: string | null | undefined;
   alt: string;
   fallbackSrc?: string;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 interface ThumbnailImageProps {
@@ -84,32 +85,37 @@ const ThumbnailImage = ({ src, alt, fallbackSrc, onLoadingChange }: ThumbnailIma
   );
 };
 
-export const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(
-  ({ className, radius, border, src, alt, fallbackSrc = DEFAULT_PLACEHOLDER, ...props }, ref) => {
-    const [isLoading, setIsLoading] = useState(true);
-    const imageSrc = src || fallbackSrc;
+export function Thumbnail({
+  className,
+  radius,
+  border,
+  src,
+  alt,
+  fallbackSrc = DEFAULT_PLACEHOLDER,
+  ref,
+  ...props
+}: ThumbnailProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const imageSrc = src || fallbackSrc;
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          THUMBNAIL_VARIANTS({ radius, border, className }),
-          isLoading && "animate-pulse"
-        )}
-        {...props}
-      >
-        <ThumbnailImage
-          key={imageSrc}
-          src={imageSrc}
-          alt={alt}
-          fallbackSrc={fallbackSrc}
-          onLoadingChange={setIsLoading}
-        />
-      </div>
-    );
-  }
-);
-
-Thumbnail.displayName = "Thumbnail";
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        THUMBNAIL_VARIANTS({ radius, border, className }),
+        isLoading && "animate-pulse"
+      )}
+      {...props}
+    >
+      <ThumbnailImage
+        key={imageSrc}
+        src={imageSrc}
+        alt={alt}
+        fallbackSrc={fallbackSrc}
+        onLoadingChange={setIsLoading}
+      />
+    </div>
+  );
+}
 
 export { THUMBNAIL_VARIANTS };
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index 9a79f728..c7882739 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { CloseIcon } from "@/components/Icon/CloseIcon";
 import { InfoIcon } from "@/components/Icon/InfoIcon";
@@ -28,12 +28,12 @@ const TOAST_STYLES: Record<ToastType, string> = {
 export function Toast({ id, type, message, duration = 3000, onClose }: ToastProps) {
   const [isClosing, setIsClosing] = useState(false);
 
-  const handleClose = useCallback(() => {
+  const handleClose = () => {
     setIsClosing(true);
     setTimeout(() => {
       onClose(id);
     }, 200); // 200ms duration for exit animation to complete
-  }, [id, onClose]);
+  };
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -41,7 +41,7 @@ export function Toast({ id, type, message, duration = 3000, onClose }: ToastProp
     }, duration);
 
     return () => clearTimeout(timer);
-  }, [duration, handleClose]);
+  }, [duration]);
 
   return (
     <div
diff --git a/src/features/lobby/components/KickConfirmDialog.tsx b/src/features/lobby/components/KickConfirmDialog.tsx
index 869f6a09..724e8df1 100644
--- a/src/features/lobby/components/KickConfirmDialog.tsx
+++ b/src/features/lobby/components/KickConfirmDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Button } from "@/components/Button/Button";
 import { AlertIcon } from "@/components/Icon/AlertIcon";
@@ -24,12 +24,12 @@ export function KickConfirmDialog({
 
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
-  const setDialogRef = useCallback((node: HTMLDialogElement | null) => {
+  const setDialogRef = (node: HTMLDialogElement | null) => {
     if (node && !node.open) {
       node.showModal();
     }
     dialogRef.current = node;
-  }, []);
+  };
 
   const handleBackdropClick = (event: React.MouseEvent<HTMLDialogElement>) => {
     if (event.target !== dialogRef.current) return;
diff --git a/src/features/lobby/components/KickedDialog.tsx b/src/features/lobby/components/KickedDialog.tsx
index 1e88ff77..c35ae354 100644
--- a/src/features/lobby/components/KickedDialog.tsx
+++ b/src/features/lobby/components/KickedDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Button } from "@/components/Button/Button";
 import { Portal } from "@/components/Portal/Portal";
@@ -15,12 +15,12 @@ export function KickedDialog({ onConfirm }: KickedDialogProps) {
 
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
-  const setDialogRef = useCallback((node: HTMLDialogElement | null) => {
+  const setDialogRef = (node: HTMLDialogElement | null) => {
     if (node && !node.open) {
       node.showModal();
     }
     dialogRef.current = node;
-  }, []);
+  };
 
   return (
     <Portal>
diff --git a/src/features/lobby/components/SessionJoinModal.tsx b/src/features/lobby/components/SessionJoinModal.tsx
index 7c482405..4467b252 100644
--- a/src/features/lobby/components/SessionJoinModal.tsx
+++ b/src/features/lobby/components/SessionJoinModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import { Button } from "@/components/Button/Button";
 import { ButtonGroup } from "@/components/ButtonGroup/ButtonGroup";
@@ -39,12 +39,12 @@ export function SessionJoinModal({ sessionId, onClose, onJoinSuccess }: SessionJ
   const joinSessionMutation = useJoinSession();
 
   // callback ref: dialog 요소가 DOM에 마운트되면 showModal 호출
-  const setDialogRef = useCallback((node: HTMLDialogElement | null) => {
+  const setDialogRef = (node: HTMLDialogElement | null) => {
     if (node && !node.open) {
       node.showModal();
     }
     dialogRef.current = node;
-  }, []);
+  };
 
   const handleBackdropClick = (event: React.MouseEvent<HTMLDialogElement>) => {
     if (event.target !== dialogRef.current) return;
diff --git a/src/features/lobby/hooks/useCountdown.ts b/src/features/lobby/hooks/useCountdown.ts
index a49a103d..fcb7407d 100644
--- a/src/features/lobby/hooks/useCountdown.ts
+++ b/src/features/lobby/hooks/useCountdown.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 
 interface CountdownResult {
   hours: number;
@@ -11,9 +11,9 @@ interface CountdownResult {
 }
 
 export function useCountdown(targetTime: Date): CountdownResult {
-  const calculateRemaining = useCallback(() => {
+  const calculateRemaining = () => {
     return Math.max(0, Math.floor((targetTime.getTime() - Date.now()) / 1000));
-  }, [targetTime]);
+  };
 
   const [totalSeconds, setTotalSeconds] = useState(calculateRemaining);
 
@@ -27,7 +27,7 @@ export function useCountdown(targetTime: Date): CountdownResult {
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [calculateRemaining]);
+  }, [targetTime]);
 
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
diff --git a/src/features/member/components/Profile/AccountProfileCard.tsx b/src/features/member/components/Profile/AccountProfileCard.tsx
index f3a46af2..188b8690 100644
--- a/src/features/member/components/Profile/AccountProfileCard.tsx
+++ b/src/features/member/components/Profile/AccountProfileCard.tsx
@@ -1,5 +1,3 @@
-import { memo } from "react";
-
 import { Avatar } from "@/components/Avatar/Avatar";
 import { Badge } from "@/components/Badge/Badge";
 import type { MemberProfileView } from "@/features/member/types";
@@ -23,7 +21,7 @@ function AccountProfileCardSkeleton() {
   );
 }
 
-export const AccountProfileCard = memo(function AccountProfileCard({
+export function AccountProfileCard({
   profile,
   isLoading,
 }: {
@@ -58,4 +56,4 @@ export const AccountProfileCard = memo(function AccountProfileCard({
       ) : null}
     </div>
   );
-});
+}
diff --git a/src/features/member/components/Profile/DeleteAccountWarnings.tsx b/src/features/member/components/Profile/DeleteAccountWarnings.tsx
index 7f3cf2b4..c91d3b50 100644
--- a/src/features/member/components/Profile/DeleteAccountWarnings.tsx
+++ b/src/features/member/components/Profile/DeleteAccountWarnings.tsx
@@ -1,5 +1,3 @@
-import { memo } from "react";
-
 interface DeleteWarningSection {
   title: string;
   items: string[];
@@ -30,7 +28,7 @@ const DELETE_ACCOUNT_WARNING_SECTIONS: DeleteWarningSection[] = [
   },
 ];
 
-export const DeleteAccountWarnings = memo(function DeleteAccountWarnings() {
+export function DeleteAccountWarnings() {
   return (
     <div className="gap-xl flex flex-col">
       <h4 className="text-text-primary text-lg font-bold">회원 탈퇴 시 주의사항</h4>
@@ -46,4 +44,4 @@ export const DeleteAccountWarnings = memo(function DeleteAccountWarnings() {
       ))}
     </div>
   );
-});
+}
diff --git a/src/features/member/components/Profile/LogoutModal.tsx b/src/features/member/components/Profile/LogoutModal.tsx
index 358cb190..2cfecfcc 100644
--- a/src/features/member/components/Profile/LogoutModal.tsx
+++ b/src/features/member/components/Profile/LogoutModal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { useRouter } from "next/navigation";
 
@@ -23,14 +23,14 @@ export function LogoutModal({ onClose }: LogoutModalProps) {
   const previousActiveElementRef = useRef<HTMLElement | null>(null);
   const { mutate: logout, isPending: isLoggingOut } = useLogout();
 
-  const setDialogRef = useCallback((node: HTMLDialogElement | null) => {
+  const setDialogRef = (node: HTMLDialogElement | null) => {
     if (node && !node.open) {
       previousActiveElementRef.current =
         document.activeElement instanceof HTMLElement ? document.activeElement : null;
       node.showModal();
     }
     dialogRef.current = node;
-  }, []);
+  };
 
   const restoreFocus = () => {
     previousActiveElementRef.current?.focus();
diff --git a/src/features/member/hooks/useDeleteAccountFlow.ts b/src/features/member/hooks/useDeleteAccountFlow.ts
index 9541df9c..3dd70f72 100644
--- a/src/features/member/hooks/useDeleteAccountFlow.ts
+++ b/src/features/member/hooks/useDeleteAccountFlow.ts
@@ -1,7 +1,5 @@
 "use client";
 
-import { useCallback } from "react";
-
 import { useRouter } from "next/navigation";
 
 import { getApiErrorMessage } from "@/lib/error/api-error-utils";
@@ -13,7 +11,7 @@ export function useDeleteAccountFlow() {
   const router = useRouter();
   const { mutate: deleteMe, isPending: isDeleting } = useDeleteMe();
 
-  const deleteAccount = useCallback(() => {
+  const deleteAccount = () => {
     if (isDeleting) return;
 
     deleteMe(undefined, {
@@ -25,7 +23,7 @@ export function useDeleteAccountFlow() {
         toast.error(getApiErrorMessage(error));
       },
     });
-  }, [deleteMe, isDeleting, router]);
+  };
 
   return { deleteAccount, isDeleting };
 }
diff --git a/src/features/session/components/Banner/Banner.tsx b/src/features/session/components/Banner/Banner.tsx
index f64e764c..ca4289f6 100644
--- a/src/features/session/components/Banner/Banner.tsx
+++ b/src/features/session/components/Banner/Banner.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { motion } from "motion/react";
 
@@ -25,14 +25,14 @@ export function Banner() {
 
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-  const clearAutoRoll = useCallback(() => {
+  const clearAutoRoll = () => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
       intervalRef.current = null;
     }
-  }, []);
+  };
 
-  const startAutoRoll = useCallback(() => {
+  const startAutoRoll = () => {
     clearAutoRoll();
     intervalRef.current = setInterval(() => {
       setActiveIndex((prev) => {
@@ -41,7 +41,7 @@ export function Banner() {
         return next;
       });
     }, AUTO_ROLL_INTERVAL);
-  }, [clearAutoRoll]);
+  };
 
   useEffect(() => {
     if (isHovered) {
@@ -52,10 +52,10 @@ export function Banner() {
     return clearAutoRoll;
   }, [isHovered, startAutoRoll, clearAutoRoll]);
 
-  const goTo = useCallback((index: number) => {
+  const goTo = (index: number) => {
     setDirection(index === 1 ? "forward" : "backward");
     setActiveIndex(index);
-  }, []);
+  };
 
   const isDefault = activeIndex === 0;
 
diff --git a/src/features/session/components/LeaveConfirmDialog.tsx b/src/features/session/components/LeaveConfirmDialog.tsx
index c490a296..479bf13e 100644
--- a/src/features/session/components/LeaveConfirmDialog.tsx
+++ b/src/features/session/components/LeaveConfirmDialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Button } from "@/components/Button/Button";
 import { AlertIcon } from "@/components/Icon/AlertIcon";
@@ -26,12 +26,12 @@ export function LeaveConfirmDialog({
 
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
-  const setDialogRef = useCallback((node: HTMLDialogElement | null) => {
+  const setDialogRef = (node: HTMLDialogElement | null) => {
     if (node && !node.open) {
       node.showModal();
     }
     dialogRef.current = node;
-  }, []);
+  };
 
   const handleBackdropClick = (event: React.MouseEvent<HTMLDialogElement>) => {
     if (event.target !== dialogRef.current) return;
diff --git a/src/features/session/components/MyTimer/MyTimer.tsx b/src/features/session/components/MyTimer/MyTimer.tsx
index 29e9c012..69eeefc8 100644
--- a/src/features/session/components/MyTimer/MyTimer.tsx
+++ b/src/features/session/components/MyTimer/MyTimer.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { useCallback } from "react";
-
 import { Button } from "@/components/Button/Button";
 import { ProgressRing } from "@/components/ProgressRing/ProgressRing";
 import { ApiError } from "@/lib/api/api-client";
@@ -27,7 +25,7 @@ export function MyTimer({ sessionId, sessionDurationMinutes }: MyTimerProps) {
 
   const { mutate: toggleStatus, isPending } = useToggleMyStatus();
 
-  const handleToggle = useCallback(() => {
+  const handleToggle = () => {
     // 이중 호출 방지
     if (isPending) return;
 
@@ -64,7 +62,7 @@ export function MyTimer({ sessionId, sessionDurationMinutes }: MyTimerProps) {
         },
       }
     );
-  }, [isPending, isRunning, sessionId, toggleStatus, start, pause]);
+  };
 
   return (
     <div className="gap-xl p-xl bg-surface-strong flex h-full rounded-2xl">
diff --git a/src/features/session/components/RecommendedSection/RecommendedSectionContent.tsx b/src/features/session/components/RecommendedSection/RecommendedSectionContent.tsx
index 780ad318..dc229b80 100644
--- a/src/features/session/components/RecommendedSection/RecommendedSectionContent.tsx
+++ b/src/features/session/components/RecommendedSection/RecommendedSectionContent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Suspense, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { Suspense, useEffect, useRef, useState, type ReactNode } from "react";
 
 import { useSearchParams } from "next/navigation";
 
@@ -39,12 +39,9 @@ export function RecommendedSectionContent() {
   const [searchPage, setSearchPage] = useState(1);
   const [searchTotalPage, setSearchTotalPage] = useState(1);
 
-  const handleSearchPageChange = useCallback(
-    (page: number) => {
-      setSearchPage(Math.max(1, Math.min(page, Math.max(searchTotalPage, 1))));
-    },
-    [searchTotalPage]
-  );
+  const handleSearchPageChange = (page: number) => {
+    setSearchPage(Math.max(1, Math.min(page, Math.max(searchTotalPage, 1))));
+  };
 
   const handleMetaChange = (meta: { totalPage: number }) => {
     setSearchTotalPage(meta.totalPage);
diff --git a/src/features/session/components/SessionCreateForm.tsx b/src/features/session/components/SessionCreateForm.tsx
index 5d952640..dfca2cbe 100644
--- a/src/features/session/components/SessionCreateForm.tsx
+++ b/src/features/session/components/SessionCreateForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { useState, useRef, useEffect } from "react";
 
 import Image from "next/image";
 import { useRouter } from "next/navigation";
@@ -62,14 +62,11 @@ export function SessionCreateForm() {
   const datePickerContainerRef = useRef<HTMLDivElement>(null);
 
   // 외부 클릭 시 DatePicker 닫기
-  const closeDatePicker = useCallback(() => setIsDatePickerOpen(false), []);
+  const closeDatePicker = () => setIsDatePickerOpen(false);
   useClickOutside(datePickerContainerRef, closeDatePicker, isDatePickerOpen);
 
   // 이미지 미리보기 URL 생성
-  const imagePreviewUrl = useMemo(() => {
-    if (!selectedImage) return null;
-    return URL.createObjectURL(selectedImage);
-  }, [selectedImage]);
+  const imagePreviewUrl = selectedImage ? URL.createObjectURL(selectedImage) : null;
 
   // 이미지 미리보기 URL 정리 (메모리 누수 방지)
   useEffect(() => {
@@ -80,9 +77,9 @@ export function SessionCreateForm() {
     };
   }, [imagePreviewUrl]);
 
-  const handleImageRemove = useCallback(() => {
+  const handleImageRemove = () => {
     setSelectedImage(null);
-  }, []);
+  };
 
   // validation / API 연동 상태
   const [formErrors, setFormErrors] = useState<SessionFormErrors>({});
@@ -90,14 +87,14 @@ export function SessionCreateForm() {
   const router = useRouter();
   const { mutate: createSession, isPending } = useCreateSession();
 
-  const clearFieldError = useCallback((field: keyof SessionFormErrors) => {
+  const clearFieldError = (field: keyof SessionFormErrors) => {
     setFormErrors((prev) => {
       if (!prev[field]) return prev;
       const next = { ...prev };
       delete next[field];
       return next;
     });
-  }, []);
+  };
 
   const hasUnsavedChanges =
     roomName.trim().length > 0 ||
diff --git a/src/features/session/components/SessionList/DateRangeFilter.tsx b/src/features/session/components/SessionList/DateRangeFilter.tsx
index 8a32e701..62795c6c 100644
--- a/src/features/session/components/SessionList/DateRangeFilter.tsx
+++ b/src/features/session/components/SessionList/DateRangeFilter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { DatePicker } from "@/components/DatePicker/DatePicker";
 import type { DateRange } from "@/components/DatePicker/DatePicker.types";
@@ -27,7 +27,7 @@ export function DateRangeFilter({
 }: DateRangeFilterProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const closeFilter = useCallback(() => onOpenChange(false), [onOpenChange]);
+  const closeFilter = () => onOpenChange(false);
   useClickOutside(containerRef, closeFilter, isOpen);
 
   return (
diff --git a/src/features/session/components/SessionList/DurationFilter.tsx b/src/features/session/components/SessionList/DurationFilter.tsx
index b0378d5d..9e7abf95 100644
--- a/src/features/session/components/SessionList/DurationFilter.tsx
+++ b/src/features/session/components/SessionList/DurationFilter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Filter } from "@/components/Filter/Filter";
 import { useClickOutside } from "@/hooks/useClickOutside";
@@ -22,10 +22,10 @@ export function DurationFilter({ isOpen, value, onOpenChange, onSelect }: Durati
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
-  const closeFilter = useCallback(() => {
+  const closeFilter = () => {
     onOpenChange(false);
     triggerRef.current?.focus();
-  }, [onOpenChange]);
+  };
   useClickOutside(containerRef, closeFilter, isOpen);
 
   const hasSelection = Boolean(value);
diff --git a/src/features/session/components/SessionList/ParticipantsFilter.tsx b/src/features/session/components/SessionList/ParticipantsFilter.tsx
index c55800af..a704c17f 100644
--- a/src/features/session/components/SessionList/ParticipantsFilter.tsx
+++ b/src/features/session/components/SessionList/ParticipantsFilter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Filter } from "@/components/Filter/Filter";
 import { NumericStepper } from "@/components/NumericStepper/NumericStepper";
@@ -34,10 +34,10 @@ export function ParticipantsFilter({
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
-  const closeFilter = useCallback(() => {
+  const closeFilter = () => {
     onOpenChange(false);
     triggerRef.current?.focus();
-  }, [onOpenChange]);
+  };
   useClickOutside(containerRef, closeFilter, isOpen);
 
   const selectedParticipants = Number(
diff --git a/src/features/session/components/SessionList/SortFilter.tsx b/src/features/session/components/SessionList/SortFilter.tsx
index ffec5485..d60b4c6d 100644
--- a/src/features/session/components/SessionList/SortFilter.tsx
+++ b/src/features/session/components/SessionList/SortFilter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Filter } from "@/components/Filter/Filter";
 import { useClickOutside } from "@/hooks/useClickOutside";
@@ -22,10 +22,10 @@ export function SortFilter({ isOpen, value, onOpenChange, onSelect, className }:
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
-  const closeFilter = useCallback(() => {
+  const closeFilter = () => {
     onOpenChange(false);
     triggerRef.current?.focus();
-  }, [onOpenChange]);
+  };
   useClickOutside(containerRef, closeFilter, isOpen);
 
   const triggerLabel = getOptionLabel(SORT_OPTIONS, value, "정렬");
diff --git a/src/features/session/components/SessionList/StartTimeFilter.tsx b/src/features/session/components/SessionList/StartTimeFilter.tsx
index 72fc0912..295e3eda 100644
--- a/src/features/session/components/SessionList/StartTimeFilter.tsx
+++ b/src/features/session/components/SessionList/StartTimeFilter.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useRef } from "react";
+import { useRef } from "react";
 
 import { Filter } from "@/components/Filter/Filter";
 import { CheckIcon } from "@/components/Icon/CheckIcon";
@@ -28,10 +28,10 @@ export function StartTimeFilter({
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
-  const closeFilter = useCallback(() => {
+  const closeFilter = () => {
     onOpenChange(false);
     triggerRef.current?.focus();
-  }, [onOpenChange]);
+  };
   useClickOutside(containerRef, closeFilter, isOpen);
 
   const hasTimeSlotSelection = selectedTimeSlots.length > 0;
diff --git a/src/features/session/components/SessionPageContent.tsx b/src/features/session/components/SessionPageContent.tsx
index 6e31b171..ebb1ca02 100644
--- a/src/features/session/components/SessionPageContent.tsx
+++ b/src/features/session/components/SessionPageContent.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { useCallback } from "react";
-
 import { notFound } from "next/navigation";
 
 import { ButtonLink } from "@/components/Button/ButtonLink";
@@ -50,7 +48,7 @@ export function SessionPageContent({ sessionId }: SessionPageContentProps) {
   const sessionDurationMinutes = sessionData?.result?.sessionDurationMinutes;
 
   // 세션 완료 시 결과 제출 및 페이지 이동
-  const handleSessionComplete = useCallback(async () => {
+  const handleSessionComplete = async () => {
     const maxSeconds = (sessionDurationMinutes ?? 0) * 60;
     const timerState = getTimerState(sessionId, maxSeconds);
 
@@ -75,7 +73,7 @@ export function SessionPageContent({ sessionId }: SessionPageContentProps) {
     // 타이머 상태 정리 후 이동
     clearTimerState(sessionId);
     window.location.replace(`/session/${sessionId}/result`);
-  }, [sessionId, sessionDurationMinutes, submitResultMutation]);
+  };
 
   // 세션 상태 SSE - 진행 중 상태가 아니면 적절한 페이지로 이동
   useSessionStatusSSE({
diff --git a/src/features/session/components/SessionTimerSection.tsx b/src/features/session/components/SessionTimerSection.tsx
index 6afef63d..d7ec5bc3 100644
--- a/src/features/session/components/SessionTimerSection.tsx
+++ b/src/features/session/components/SessionTimerSection.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import { useMemo } from "react";
-
 import dynamic from "next/dynamic";
 
 const MyTimer = dynamic(() => import("./MyTimer/MyTimer").then((mod) => mod.MyTimer), {
@@ -29,9 +27,8 @@ export function SessionTimerSection({
   totalCount,
   className,
 }: SessionTimerSectionProps) {
-  const sessionEndTime = useMemo(
-    () => new Date(new Date(startTime).getTime() + sessionDurationMinutes * 60 * 1000),
-    [startTime, sessionDurationMinutes]
+  const sessionEndTime = new Date(
+    new Date(startTime).getTime() + sessionDurationMinutes * 60 * 1000
   );
 
   return (
diff --git a/src/features/session/hooks/useCountUp.ts b/src/features/session/hooks/useCountUp.ts
index 9efb426a..c91f49cb 100644
--- a/src/features/session/hooks/useCountUp.ts
+++ b/src/features/session/hooks/useCountUp.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 interface CountUpResult {
   totalSeconds: number;
@@ -30,18 +30,18 @@ export function useCountUp(options: UseCountUpOptions = {}): CountUpResult {
   const [isRunning, setIsRunning] = useState(autoStart);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
-  const start = useCallback(() => {
+  const start = () => {
     setIsRunning(true);
-  }, []);
+  };
 
-  const pause = useCallback(() => {
+  const pause = () => {
     setIsRunning(false);
-  }, []);
+  };
 
-  const reset = useCallback(() => {
+  const reset = () => {
     setTotalSeconds(startTime);
     setIsRunning(false);
-  }, [startTime]);
+  };
 
   useEffect(() => {
     if (isRunning) {
diff --git a/src/features/session/hooks/useRecommendedCarousel.ts b/src/features/session/hooks/useRecommendedCarousel.ts
index a0827d6e..89b999b1 100644
--- a/src/features/session/hooks/useRecommendedCarousel.ts
+++ b/src/features/session/hooks/useRecommendedCarousel.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState } from "react";
 
 /**
  * useRecommendedCarousel - 추천 세션 캐러셀 슬라이드 관리
@@ -12,12 +12,9 @@ export function useRecommendedCarousel(totalPages: number) {
 
   const safeTotal = Math.max(totalPages, 1);
 
-  const handlePageChange = useCallback(
-    (page: number) => {
-      setCurrentPage(Math.max(1, Math.min(page, safeTotal)));
-    },
-    [safeTotal]
-  );
+  const handlePageChange = (page: number) => {
+    setCurrentPage(Math.max(1, Math.min(page, safeTotal)));
+  };
 
   return {
     currentPage,
diff --git a/src/features/session/hooks/useSessionListFilters.ts b/src/features/session/hooks/useSessionListFilters.ts
index 85cc4daf..eada82b3 100644
--- a/src/features/session/hooks/useSessionListFilters.ts
+++ b/src/features/session/hooks/useSessionListFilters.ts
@@ -1,7 +1,5 @@
 "use client";
 
-import { useCallback } from "react";
-
 import { useRouter, useSearchParams } from "next/navigation";
 
 import { SORT_OPTIONS } from "../components/SessionList/sessionListFilter.types";
@@ -57,18 +55,15 @@ export function useSessionListFilters() {
     sort: parsedParams.sort,
   };
 
-  const updateFilters = useCallback(
-    (
-      updates: SessionSearchParamUpdates,
-      options: UpdateFiltersOptions = DEFAULT_UPDATE_OPTIONS
-    ) => {
-      const href = buildUpdatedSessionSearchHref(searchParams, updates, {
-        resetPage: options.resetPage,
-      });
-      router.push(href, { scroll: false });
-    },
-    [router, searchParams]
-  );
+  const updateFilters = (
+    updates: SessionSearchParamUpdates,
+    options: UpdateFiltersOptions = DEFAULT_UPDATE_OPTIONS
+  ) => {
+    const href = buildUpdatedSessionSearchHref(searchParams, updates, {
+      resetPage: options.resetPage,
+    });
+    router.push(href, { scroll: false });
+  };
 
   const setDateRange = (startDate: Date | null, endDate: Date | null) => {
     updateFilters({
@@ -114,19 +109,16 @@ export function useSessionListFilters() {
     updateFilters({ sort: nextSort });
   };
 
-  const setPage = useCallback(
-    (page: number) => {
-      updateFilters(
-        {
-          page: page === 1 ? null : String(page),
-        },
-        { resetPage: false }
-      );
-    },
-    [updateFilters]
-  );
-
-  const resetFilters = useCallback(() => {
+  const setPage = (page: number) => {
+    updateFilters(
+      {
+        page: page === 1 ? null : String(page),
+      },
+      { resetPage: false }
+    );
+  };
+
+  const resetFilters = () => {
     updateFilters({
       startDate: null,
       endDate: null,
@@ -134,7 +126,7 @@ export function useSessionListFilters() {
       durationRange: null,
       participants: null,
     });
-  }, [updateFilters]);
+  };
 
   return {
     values,
diff --git a/src/features/session/hooks/useSessionTimer.ts b/src/features/session/hooks/useSessionTimer.ts
index d45363f6..4a157de6 100644
--- a/src/features/session/hooks/useSessionTimer.ts
+++ b/src/features/session/hooks/useSessionTimer.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 
 interface TimerState {
   elapsedSeconds: number;
@@ -166,44 +166,41 @@ export function useSessionTimer({
   const lastTickRef = useRef<number>(0);
 
   // 시간 델타를 적용하는 공통 함수
-  const applyDelta = useCallback(
-    (delta: number, countFocus: boolean) => {
-      setState((prev) => {
-        if (!prev.isRunning) return prev;
-
-        const nextElapsed = Math.min(prev.elapsedSeconds + delta, maxSeconds);
-        const focusDelta = countFocus && prev.isFocusing ? delta : 0;
-        const nextFocused = Math.min(prev.focusedSeconds + focusDelta, nextElapsed);
-
-        const nextFocusRate =
-          maxSeconds > 0 ? Math.min(Math.round((nextElapsed / maxSeconds) * 100), 100) : 0;
-        const focusRateChanged = Math.abs(nextFocusRate - prev.focusRate) >= 1;
-
-        if (nextElapsed >= maxSeconds) {
-          const next: TimerState = {
-            ...prev,
-            elapsedSeconds: maxSeconds,
-            focusedSeconds: nextFocused,
-            focusRate: nextFocusRate,
-            isRunning: false,
-            isFocusing: false,
-          };
-          saveTimerState(sessionId, next);
-          return next;
-        }
+  const applyDelta = (delta: number, countFocus: boolean) => {
+    setState((prev) => {
+      if (!prev.isRunning) return prev;
+
+      const nextElapsed = Math.min(prev.elapsedSeconds + delta, maxSeconds);
+      const focusDelta = countFocus && prev.isFocusing ? delta : 0;
+      const nextFocused = Math.min(prev.focusedSeconds + focusDelta, nextElapsed);
+
+      const nextFocusRate =
+        maxSeconds > 0 ? Math.min(Math.round((nextElapsed / maxSeconds) * 100), 100) : 0;
+      const focusRateChanged = Math.abs(nextFocusRate - prev.focusRate) >= 1;
 
+      if (nextElapsed >= maxSeconds) {
         const next: TimerState = {
           ...prev,
-          elapsedSeconds: nextElapsed,
+          elapsedSeconds: maxSeconds,
           focusedSeconds: nextFocused,
-          focusRate: focusRateChanged ? nextFocusRate : prev.focusRate,
+          focusRate: nextFocusRate,
+          isRunning: false,
+          isFocusing: false,
         };
         saveTimerState(sessionId, next);
         return next;
-      });
-    },
-    [maxSeconds, sessionId]
-  );
+      }
+
+      const next: TimerState = {
+        ...prev,
+        elapsedSeconds: nextElapsed,
+        focusedSeconds: nextFocused,
+        focusRate: focusRateChanged ? nextFocusRate : prev.focusRate,
+      };
+      saveTimerState(sessionId, next);
+      return next;
+    });
+  };
 
   // 매 초 타이머 틱 - 시간 델타 기반으로 백그라운드 탭에서도 정확한 시간 계산
   useEffect(() => {
@@ -222,7 +219,7 @@ export function useSessionTimer({
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [state.isRunning, maxSeconds, sessionId, applyDelta]);
+  }, [state.isRunning, maxSeconds, sessionId]);
 
   // 탭이 다시 보일 때 즉시 시간 보정
   useEffect(() => {
@@ -247,23 +244,23 @@ export function useSessionTimer({
 
     document.addEventListener("visibilitychange", handleVisibilityChange);
     return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
-  }, [state.isRunning, maxSeconds, sessionId, applyDelta]);
+  }, [state.isRunning, maxSeconds, sessionId]);
 
-  const start = useCallback(() => {
+  const start = () => {
     setState((prev) => {
       const next: TimerState = { ...prev, isRunning: true, isFocusing: true };
       saveTimerState(sessionId, next);
       return next;
     });
-  }, [sessionId]);
+  };
 
-  const pause = useCallback(() => {
+  const pause = () => {
     setState((prev) => {
       const next: TimerState = { ...prev, isRunning: false, isFocusing: false };
       saveTimerState(sessionId, next);
       return next;
     });
-  }, [sessionId]);
+  };
 
   const progress = maxSeconds > 0 ? Math.min((state.elapsedSeconds / maxSeconds) * 100, 100) : 0;
   const formatted = formatTime(state.elapsedSeconds);
diff --git a/src/features/session/hooks/useShareSession.ts b/src/features/session/hooks/useShareSession.ts
index ace013ab..2959f77c 100644
--- a/src/features/session/hooks/useShareSession.ts
+++ b/src/features/session/hooks/useShareSession.ts
@@ -1,10 +1,8 @@
-import { useCallback } from "react";
-
 import { toast } from "@/lib/toast";
 import { getSessionShareUrl } from "@/lib/utils/url";
 
 export function useShareSession() {
-  const shareSession = useCallback(async (sessionId: number) => {
+  const shareSession = async (sessionId: number) => {
     const url = getSessionShareUrl(sessionId);
 
     try {
@@ -13,7 +11,7 @@ export function useShareSession() {
     } catch {
       toast.error("링크 복사에 실패했습니다");
     }
-  }, []);
+  };
 
   return { shareSession };
 }
diff --git a/src/hooks/useDialog.ts b/src/hooks/useDialog.ts
index 24e56bd9..9322f557 100644
--- a/src/hooks/useDialog.ts
+++ b/src/hooks/useDialog.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { useRouter } from "next/navigation";
 
@@ -22,14 +22,14 @@ export function useDialog(fallbackPath: string = "/") {
 
   useBodyScrollLock();
 
-  const handleClose = useCallback(() => {
+  const handleClose = () => {
     if (window.history.length > 1) {
       router.back();
       return;
     }
 
     router.replace(fallbackPath);
-  }, [router, fallbackPath]);
+  };
 
   useEffect(() => {
     const dialog = dialogRef.current;
@@ -46,13 +46,10 @@ export function useDialog(fallbackPath: string = "/") {
     };
   }, []);
 
-  const handleBackdropClick = useCallback(
-    (event: React.MouseEvent<HTMLDialogElement>) => {
-      if (event.target !== dialogRef.current) return;
-      handleClose();
-    },
-    [handleClose]
-  );
+  const handleBackdropClick = (event: React.MouseEvent<HTMLDialogElement>) => {
+    if (event.target !== dialogRef.current) return;
+    handleClose();
+  };
 
   return { dialogRef, handleClose, handleBackdropClick };
 }
diff --git a/src/hooks/useDragAndDrop.ts b/src/hooks/useDragAndDrop.ts
index 710c638f..1152248e 100644
--- a/src/hooks/useDragAndDrop.ts
+++ b/src/hooks/useDragAndDrop.ts
@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef } from "react";
 
 export interface UseDragAndDropOptions {
   /** 비활성화 상태 */
@@ -40,7 +40,7 @@ export function useDragAndDrop({
   const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
   const dragCounter = useRef(0);
 
-  const extractFileName = useCallback((e: React.DragEvent<HTMLElement>): string | null => {
+  const extractFileName = (e: React.DragEvent<HTMLElement>): string | null => {
     // files에서 파일명 추출 시도 (드롭 시 동작)
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       return e.dataTransfer.files[0].name;
@@ -63,88 +63,76 @@ export function useDragAndDrop({
     }
 
     return null;
-  }, []);
+  };
 
-  const resetDragState = useCallback(() => {
+  const resetDragState = () => {
     setIsDragging(false);
     setDragFileName(null);
     dragCounter.current = 0;
-  }, []);
-
-  const handleDragEnter = useCallback(
-    (e: React.DragEvent<HTMLElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (disabled) return;
-
-      dragCounter.current++;
-      if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
-        setIsDragging(true);
-        const fileName = extractFileName(e);
-        if (fileName) {
-          setDragFileName(fileName);
-        }
-      }
-    },
-    [disabled, extractFileName]
-  );
-
-  const handleDragLeave = useCallback(
-    (e: React.DragEvent<HTMLElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (disabled) return;
-
-      dragCounter.current--;
-      if (dragCounter.current === 0) {
-        setIsDragging(false);
-        setDragFileName(null);
-      }
-    },
-    [disabled]
-  );
-
-  const handleDragOver = useCallback(
-    (e: React.DragEvent<HTMLElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (containerRef?.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        setMousePosition({
-          x: e.clientX - rect.left,
-          y: e.clientY - rect.top,
-        });
-      }
+  };
 
-      // 파일명이 아직 설정되지 않은 경우 추출 시도
-      if (!dragFileName || dragFileName === "파일") {
-        const fileName = extractFileName(e);
-        if (fileName && fileName !== "파일") {
-          setDragFileName(fileName);
-        } else if (!dragFileName && fileName) {
-          setDragFileName(fileName);
-        }
+  const handleDragEnter = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+
+    dragCounter.current++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+      const fileName = extractFileName(e);
+      if (fileName) {
+        setDragFileName(fileName);
       }
-    },
-    [containerRef, dragFileName, extractFileName]
-  );
+    }
+  };
 
-  const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      resetDragState();
+  const handleDragLeave = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
 
-      if (disabled) return;
+    dragCounter.current--;
+    if (dragCounter.current === 0) {
+      setIsDragging(false);
+      setDragFileName(null);
+    }
+  };
 
-      const files = e.dataTransfer.files;
-      if (files && files.length > 0) {
-        onFileDrop?.(files[0]);
+  const handleDragOver = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (containerRef?.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      setMousePosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      });
+    }
+
+    // 파일명이 아직 설정되지 않은 경우 추출 시도
+    if (!dragFileName || dragFileName === "파일") {
+      const fileName = extractFileName(e);
+      if (fileName && fileName !== "파일") {
+        setDragFileName(fileName);
+      } else if (!dragFileName && fileName) {
+        setDragFileName(fileName);
       }
-    },
-    [disabled, onFileDrop, resetDragState]
-  );
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resetDragState();
+
+    if (disabled) return;
+
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      onFileDrop?.(files[0]);
+    }
+  };
 
   return {
     isDragging,
diff --git a/src/lib/sse/useSSE.ts b/src/lib/sse/useSSE.ts
index a4aeecfe..7872a0f1 100644
--- a/src/lib/sse/useSSE.ts
+++ b/src/lib/sse/useSSE.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { SSEClient } from "./client";
 
@@ -50,21 +50,21 @@ export function useSSE<T>({
     onErrorRef.current = onError;
   }, [onError]);
 
-  const connect = useCallback(() => {
+  const connect = () => {
     if (!clientRef.current) return;
 
     setError(null);
     clientRef.current.connect(url);
-  }, [url]);
+  };
 
-  const disconnect = useCallback(() => {
+  const disconnect = () => {
     clientRef.current?.disconnect();
-  }, []);
+  };
 
-  const reconnect = useCallback(() => {
+  const reconnect = () => {
     disconnect();
     connect();
-  }, [disconnect, connect]);
+  };
 
   useEffect(() => {
     if (!enabled) return;
diff --git a/src/stories/components/DatePicker/DatePicker.stories.tsx b/src/stories/components/DatePicker/DatePicker.stories.tsx
index 707b2f76..76eac071 100644
--- a/src/stories/components/DatePicker/DatePicker.stories.tsx
+++ b/src/stories/components/DatePicker/DatePicker.stories.tsx
@@ -1,7 +1,11 @@
 import { useState } from "react";
 
 import { DatePicker } from "@/components/DatePicker/DatePicker";
-import type { DateRange, DatePickerRangeProps } from "@/components/DatePicker/DatePicker.types";
+import type {
+  DateRange,
+  DatePickerRangeProps,
+  DatePickerSingleProps,
+} from "@/components/DatePicker/DatePicker.types";
 
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 
@@ -154,3 +158,65 @@ export const SingleWithTimePicker: Story = {
     },
   },
 };
+
+export const ControlledTimePicker: StoryObj<DatePickerSingleProps> = {
+  render: function ControlledTimePickerStory() {
+    const [date, setDate] = useState<Date | null>(new Date());
+
+    const setToMorning = () => {
+      const d = new Date(date ?? new Date());
+      d.setHours(9, 0, 0, 0);
+      setDate(d);
+    };
+
+    const setToEvening = () => {
+      const d = new Date(date ?? new Date());
+      d.setHours(18, 30, 0, 0);
+      setDate(d);
+    };
+
+    const setToNow = () => {
+      setDate(new Date());
+    };
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={setToMorning}
+            className="rounded bg-white/10 px-3 py-1 text-sm text-white hover:bg-white/20"
+          >
+            오전 9:00
+          </button>
+          <button
+            type="button"
+            onClick={setToEvening}
+            className="rounded bg-white/10 px-3 py-1 text-sm text-white hover:bg-white/20"
+          >
+            오후 6:30
+          </button>
+          <button
+            type="button"
+            onClick={setToNow}
+            className="rounded bg-white/10 px-3 py-1 text-sm text-white hover:bg-white/20"
+          >
+            현재 시각
+          </button>
+        </div>
+        <DatePicker mode="single" showTimePicker value={date} onChange={setDate} />
+        <div className="text-text-secondary text-sm">
+          <p>선택된 날짜/시간: {date?.toLocaleString() ?? "선택 안됨"}</p>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "외부에서 value를 변경했을 때 시간 선택기 UI가 올바르게 갱신되는지 확인하는 스토리입니다. 버튼을 클릭하여 시간을 변경하면 TimePicker의 선택 상태가 동기화됩니다.",
+      },
+    },
+  },
+};