[design] 팝업에 공통 component 추가, toast ui 수정

Author: ahk0413

src/app/design-system/page.tsx

@@ -2,10 +2,9 @@
 
 import Button from '@/shared/components/button/Button';
 import TextButton from '@/shared/components/button/TextButton';
-import ConfirmPop from '@/shared/components/ModalPop/ConfirmPop';
-import ModalLayout from '@/shared/components/ModalPop/ModalLayout';
+import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
+import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import { useState } from 'react';
-import CustomToast from '@/shared/components/toast/CustomToast';
 import { customToast } from '@/shared/components/toast/CustomToastUtils';
 
 function Page() {
@@ -23,29 +22,29 @@ function Page() {
 
         {/* Input */}
         <div className="flex flex-col gap-2 space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">Input</h3>
+          <h3 className="text-lg font-medium border-b pb-1">Input</h3>
           {/* 여기 컴포넌트 삽입 */}
         </div>
 
         {/* checkbox */}
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">checkbox</h3>
+          <h3 className="text-lg font-medium border-b pb-1">checkbox</h3>
           {/* 여기 컴포넌트 삽입 */}
         </div>
 
         {/* select */}
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">select</h3>
+          <h3 className="text-lg font-medium border-b pb-1">select</h3>
           {/* 여기 컴포넌트 삽입 */}
         </div>
       </div>
 
       {/* Button */}
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold border-b pb-1">Button</h2>
+        <h2 className="text-2xl font-semibold pb-1">Button</h2>
 
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">Button</h3>
+          <h3 className="text-lg font-medium border-b pb-1">Button</h3>
           <Button type="button">버튼</Button>
           <Button color="purple" type="button">
             Button
@@ -68,36 +67,36 @@ function Page() {
 
       {/* popup */}
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold border-b pb-1">popup</h2>
+        <h2 className="text-2xl font-semibold pb-1">popup</h2>
 
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">toast</h3>
+          <h3 className="text-lg font-medium border-b pb-1">toast</h3>
           <div className="flex gap-2">
             <button
               className="px-4 py-2 bg-green-300 text-black rounded"
-              onClick={() => customToast.success('성공 메시지입니다! 멋져요')}
+              onClick={() => customToast.success('성공 메시지')}
             >
               Success Toast
             </button>
 
             <button
               className="px-4 py-2 bg-yellow-100 text-black rounded"
-              onClick={() => customToast.info('정보 메시지입니다!')}
+              onClick={() => customToast.info('정보 메시지')}
             >
               Info Toast
             </button>
 
             <button
               className="px-4 py-2 bg-red-200 text-black rounded"
-              onClick={() => customToast.error('오류 메시지입니다!')}
+              onClick={() => customToast.error('오류 메시지')}
             >
               Error Toast
             </button>
           </div>
         </div>
 
         <div className="space-y-2">
-          <h3 className="text-xl font-medium border-b pb-1">popup</h3>
+          <h3 className="text-lg font-medium border-b pb-1">popup</h3>
           {/* 모달 열기 버튼 */}
           <button
             onClick={() => setModalOpen(true)}
@@ -117,7 +116,11 @@ function Page() {
             onClose={() => setModalOpen(false)}
             title="제목"
             description="설명"
-            buttons={<>{/* 여기다가 버튼 컴포넌트 넣으면 됨 */}</>}
+            buttons={
+              <>
+                <Button type="button">버튼</Button>
+              </>
+            }
           >
             <div>모달팝업 내용</div>
           </ModalLayout>

src/shared/components/ModalPop/ConfirmPop.tsx

@@ -1,3 +1,4 @@
+import Button from '../button/Button';
 import ModalLayout from './ModalLayout';
 
 interface Props {
@@ -19,8 +20,12 @@ function ConfirmPop({ ref, open, onClose, title, description, children }: Props)
       description={description}
       buttons={
         <>
-          <button>취소</button>
-          <button>확인</button>
+          <Button type="button" size="sm">
+            취소
+          </Button>
+          <Button type="button" size="sm" color="purple">
+            확인
+          </Button>
         </>
       }
     >

src/shared/components/ModalPop/ModalLayout.tsx

@@ -46,9 +46,9 @@ function ModalLayout({
       <div className="fixed inset-0 bg-black/80 flex-center " onClick={onClose} aria-hidden="true">
         <div
           className={tw(
-            'relative p-8 rounded-lg bg-bg-pop shadow-[0_4px_9px_0_rgba(255,255,255,0.25)]',
-            size === 'sm' && 'p-5 w-[18.75rem]',
-            size === 'md' && 'w-[31.25rem]'
+            'relative w-[calc(100%-1.5rem)] p-8 rounded-lg bg-bg-pop shadow-[0_4px_9px_0_rgba(255,255,255,0.25)]',
+            size === 'sm' && 'p-5 max-w-[18.75rem]',
+            size === 'md' && 'max-w-[31.25rem]'
           )}
           ref={ref}
           aria-modal="true"

src/shared/components/toast/CustomToast.tsx

@@ -18,12 +18,12 @@ function CustomToast({ type, message, onClose }: Props) {
         {type === 'error' && <ErrorSvg />}
       </div>
 
-      <p className="text-sm text-white">{message}</p>
+      <p className="text-sm text-white pr-4">{message}</p>
       <button
         type="button"
         onClick={onClose}
         aria-label="toast 닫기"
-        className="absolute top-1 right-1"
+        className="absolute top-1 right-2"
       >
         <Close aria-hidden />
       </button>