✨feat: 모달 컴포넌트 개선 및 접근성 향상 & 경로수정

src/components/ui/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './button';

src/components/ui/index.ts

@@ -1,4 +1,7 @@
-export { Notification } from '@/components/ui/modal/notification';
 export { Table } from '@/components/ui/table';
+export { Button } from './button';
 export { Dropdown } from './dropdown';
 export { Icon } from './icon';
+export { Input } from './input';
+export { Modal, Notification } from './modal';
+

src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './input';

src/components/ui/modal/index.ts

@@ -1 +1,2 @@
-export { Notification } from '@/components/ui/modal/notification';
+export { default as Notification } from '@/components/ui/modal/notification';
+export { default as Modal } from './modal';

src/components/ui/modal/modal.tsx

@@ -1,31 +1,105 @@
 import { Icon } from '@/components/ui';
 import Button from '@/components/ui/button/button';
 import type { IconName } from '@/constants/icon';
+import { cn } from '@/lib/utils/cn';
 import { ReactNode, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-type Variant = 'success' | 'warning'; //체크 아이콘 | 느낌표 아이콘
+type Variant = 'success' | 'warning';
 
 type ModalProps = {
-  open: boolean; // 모달 열림 여부
-  onClose: () => void; // 닫기 함수
-  title: string; // 타이틀 (필수)
-  description?: ReactNode; // 본문 (선택)
-  variant?: Variant; // success | warning (기본 warning)
-  primaryText: string; // 주 버튼 라벨
-  onPrimary: () => void; // 주 버튼 핸들러
-  secondaryText?: string; // 보조 버튼 라벨 (선택)
-  onSecondary?: () => void; // 보조 버튼 핸들러
-  closeOnDimmed?: boolean; // 딤 클릭 닫기 여부 (기본 true)
-  disablePortal?: boolean; // 포털 비활성화 (기본 false)
-  className?: string; // 커스텀 class 추가
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: ReactNode;
+  variant?: Variant;
+  primaryText: string;
+  onPrimary: () => void;
+  secondaryText?: string;
+  onSecondary?: () => void;
+  closeOnDimmed?: boolean;
+  disablePortal?: boolean;
+  className?: string;
 };
 
 const ICON_MAP: Record<Variant, { circle: IconName; glyph: IconName }> = {
   success: { circle: 'successCircle', glyph: 'success' },
   warning: { circle: 'warningCircle', glyph: 'warning' },
 };
 
+// ESC 닫기
+function useEscClose(open: boolean, onClose: () => void) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+}
+
+/** Header */
+function ModalHeader({ variant, title }: { variant: Variant; title: string }) {
+  return (
+    <div className='flex flex-col items-center gap-3 px-6 pt-6 text-center'>
+      <span className='relative inline-flex items-center justify-center'>
+        <Icon
+          iconName={ICON_MAP[variant].circle}
+          iconSize='lg'
+          className='bg-red-500'
+          decorative
+          ariaLabel={`${variant} circle`}
+        />
+        <Icon
+          iconName={ICON_MAP[variant].glyph}
+          iconSize='x-sm'
+          className='absolute bg-white'
+          decorative
+          ariaLabel={`${variant} glyph`}
+        />
+      </span>
+      <h2 className='font-medium leading-[var(--lh-modal)] text-[var(--fs-modal)] text-black'>
+        {title}
+      </h2>
+    </div>
+  );
+}
+
+/** Body (optional) */
+function ModalBody({ description }: { description?: ReactNode }) {
+  if (!description) return null;
+  return (
+    <div className='px-6 py-4 leading-[var(--lh-body-m)] text-[var(--fs-body-m)] text-black'>
+      {description}
+    </div>
+  );
+}
+
+/** Footer */
+function ModalFooter({
+  primaryText,
+  onPrimary,
+  secondaryText,
+  onSecondary,
+}: {
+  primaryText: string;
+  onPrimary: () => void;
+  secondaryText?: string;
+  onSecondary?: () => void;
+}) {
+  return (
+    <div className='flex items-center justify-center gap-3 px-6 pb-6 pt-6'>
+      {secondaryText && onSecondary && (
+        <Button size='md' variant='secondary' onClick={onSecondary}>
+          {secondaryText}
+        </Button>
+      )}
+      <Button size='md' variant='primary' onClick={onPrimary}>
+        {primaryText}
+      </Button>
+    </div>
+  );
+}
+
 export default function Modal({
   open,
   onClose,
@@ -38,15 +112,9 @@ export default function Modal({
   onSecondary,
   closeOnDimmed = true,
   disablePortal = false,
-  className = '',
+  className,
 }: ModalProps) {
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [open, onClose]);
-
+  useEscClose(open, onClose);
   if (!open) return null;
 
   const node = (
@@ -67,53 +135,20 @@ export default function Modal({
       )}
 
       <div
-        className={[
-          'relative w-full max-w-md rounded-2xl bg-[var(--modal-frame)]',
+        className={cn(
+          'relative w-full max-w-md rounded-2xl bg-[var(--modal-frame)] shadow-lg',
           'flex flex-col',
-          className,
-        ].join(' ')}
-      >
-        {/* Header (아이콘, 제목) */}
-        <div className='flex flex-col items-center gap-3 px-6 pt-6 text-center'>
-          <span className='relative inline-flex items-center justify-center'>
-            <Icon
-              iconName={ICON_MAP[variant].circle}
-              iconSize='lg'
-              className='bg-[var(--red-500)]'
-              ariaLabel={`${variant} circle`}
-              decorative
-            />
-            <Icon
-              iconName={ICON_MAP[variant].glyph}
-              iconSize='x-sm'
-              className='absolute bg-white'
-              ariaLabel={`${variant} glyph`}
-              decorative
-            />
-          </span>
-          <h2 className='font-medium leading-[var(--lh-modal)] text-[var(--black)] text-[var(--fs-modal)]'>
-            {title}
-          </h2>
-        </div>
-
-        {/* Body(description ->선택) */}
-        {description && (
-          <div className='px-6 py-4 leading-[var(--lh-body-m)] text-[var(--black)] text-[var(--fs-body-m)]'>
-            {description}
-          </div>
+          className
         )}
-
-        {/* Footer (버튼)*/}
-        <div className='flex items-center justify-center gap-3 px-6 pb-6 pt-6'>
-          {secondaryText && (
-            <Button size='md' variant='secondary' onClick={onSecondary}>
-              {secondaryText}
-            </Button>
-          )}
-          <Button size='md' variant='primary' onClick={onPrimary}>
-            {primaryText}
-          </Button>
-        </div>
+      >
+        <ModalHeader variant={variant} title={title} />
+        <ModalBody description={description} />
+        <ModalFooter
+          primaryText={primaryText}
+          onPrimary={onPrimary}
+          secondaryText={secondaryText}
+          onSecondary={onSecondary}
+        />
       </div>
     </div>
   );

src/components/ui/modal/notification/index.ts

@@ -1 +1 @@
-export { default as Notification } from '@/components/ui/modal/notification/Notification';
+export { default } from '@/components/ui/modal/notification/Notification';