refactor: 불필요한 React import 제거 및 빌드오류 해결

Author: jjangminii

src/shared/components/datePicker/CalendarDropdownAdapter.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CustomDropdown } from './CustomDropdown';
 import type { DropdownProps } from 'react-day-picker';
 
@@ -11,7 +10,7 @@ export function CalendarDropdownAdapter({
   return (
     <CustomDropdown
       value={value as number}
-      options={options as any}
+      options={options ?? []}
       aria-label={ariaLabel}
       onChange={(next) => {
         const evt = {

src/shared/components/datePicker/CustomDropdown.tsx

@@ -1,85 +1,75 @@
-import * as React from 'react';
 import { cn } from '@/shared/lib';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { DropdownOption } from 'react-day-picker';
 
 export interface CustomDropdownProps {
   value?: number;
   onChange: (next: number) => void;
   options: DropdownOption[];
   'aria-label'?: string;
+  className?: string;
 }
 
 export function CustomDropdown({
   value,
   onChange,
   options,
   'aria-label': ariaLabel,
+  className,
 }: CustomDropdownProps) {
-  const [open, setOpen] = React.useState(false);
-  const buttonRef = React.useRef<HTMLButtonElement>(null);
-  const listRef = React.useRef<HTMLUListElement>(null);
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
 
-  const selectedIndex = Math.max(
-    0,
-    options.findIndex((o) => o.value === value),
-  );
-  const [activeIndex, setActiveIndex] = React.useState(
-    selectedIndex === -1 ? 0 : selectedIndex,
-  );
+  const calcSelectedIndex = useCallback(() => {
+    const i = options.findIndex((o) => o.value === value);
+    return i >= 0 ? i : 0;
+  }, [options, value]);
 
-  React.useEffect(() => {
-    if (selectedIndex >= 0) {
-      setActiveIndex(selectedIndex);
-    } else if (options.length > 0) {
-      setActiveIndex(0);
-    } else {
-      setActiveIndex(0);
-    }
-  }, [selectedIndex, options.length]);
+  const [activeIndex, setActiveIndex] = useState<number>(calcSelectedIndex());
+
+  useEffect(() => {
+    setActiveIndex(calcSelectedIndex());
+  }, [calcSelectedIndex]);
 
   const label =
     options.find((o) => o.value === value)?.label ?? options[0]?.label ?? '';
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!open) return;
 
     const handler = (e: Event) => {
-      const t = e.target as Node;
+      const t = (e as Event).target as Node | null;
+      if (!t) return;
       if (!buttonRef.current?.contains(t) && !listRef.current?.contains(t)) {
         setOpen(false);
       }
     };
 
-    const hasPointer =
+    const usePointer =
       typeof window !== 'undefined' && 'PointerEvent' in window;
 
-    if (hasPointer) {
-      document.addEventListener('pointerdown', handler as EventListener, {
-        capture: true,
-      });
+    if (usePointer) {
+      document.addEventListener('pointerdown', handler as EventListener, true);
       return () =>
         document.removeEventListener(
           'pointerdown',
           handler as EventListener,
-          { capture: true } as any,
+          true,
         );
     } else {
-      document.addEventListener('mousedown', handler as EventListener, {
-        capture: true,
-      });
-      document.addEventListener('touchstart', handler as EventListener, {
-        capture: true,
-      });
+      document.addEventListener('mousedown', handler as EventListener, true);
+      document.addEventListener('touchstart', handler as EventListener, true);
       return () => {
         document.removeEventListener(
           'mousedown',
           handler as EventListener,
-          { capture: true } as any,
+          true,
         );
         document.removeEventListener(
           'touchstart',
           handler as EventListener,
-          { capture: true } as any,
+          true,
         );
       };
     }
@@ -122,7 +112,7 @@ export function CustomDropdown({
   };
 
   return (
-    <div className='relative inline-block'>
+    <div className={cn('relative inline-block', className)}>
       <button
         ref={buttonRef}
         type='button'

src/shared/components/datePicker/PopoverContent.client.tsx

@@ -1,10 +1,9 @@
 'use client';
-
-import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { cn } from '@/shared/lib';
+import { forwardRef } from 'react';
 
-export const PopoverContent = React.forwardRef<
+export const PopoverContent = forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(function PopoverContent(

src/shared/components/datePicker/calendar.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import { DayPicker, DayButton } from 'react-day-picker';
 import { cn } from '@/shared/lib';
 import { Button } from './button';
 import { Icon } from '@/shared/icons';
 import { createCalendarClassNames } from './calendar.classes';
 import { CalendarDropdownAdapter } from './CalendarDropdownAdapter';
+import { useEffect, useRef } from 'react';
 
 function Calendar({
   className,
@@ -60,8 +60,8 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
+  const ref = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
 

src/shared/components/datePicker/popover.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import dynamic from 'next/dynamic';