Fix[THKV-120]: Modal 리디자인 적용, Typography 변수명 수정

src/components/common/ControlTab/index.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { Dispatch, SetStateAction } from 'react';
 import { cn } from '@/utils/core';
-import { ControlTabTypo } from '@/components/common/Typography';
+import { Body3Grey500 } from '@/components/common/Typography';
 
 type Props<T> = {
   isSortControl?: boolean;
@@ -51,13 +51,13 @@ const ControlTab = <T extends string>({
             }
           }}
         >
-          <ControlTabTypo
+          <Body3Grey500
             className={
               tab === currentTab || tab === selectedTab ? 'text-green-500' : ''
             }
           >
             {tab}
-          </ControlTabTypo>
+          </Body3Grey500>
         </Link>
       ))}
     </div>

src/components/common/InfoCard/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/utils/core';
-import { InfoCardTypo } from '../Typography';
+import { Body2Black } from '../Typography';
 import Icon from '@/components/common/Icon';
 
 type InfoCardProps = {
@@ -20,7 +20,7 @@ const InfoCard = ({ message, className }: InfoCardProps) => {
       <div className='h-fit w-fit'>
         <Icon name='info' color='black' width={ICON_SIZE} height={ICON_SIZE} />
       </div>
-      <InfoCardTypo>{message}</InfoCardTypo>
+      <Body2Black>{message}</Body2Black>
     </div>
   );
 };

src/components/common/Modal/index.tsx

@@ -43,11 +43,8 @@ const Modal = ({ children }: ModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'>
-      <div
-        ref={modalRef}
-        className='left-1/2 top-1/2 w-2/5 rounded-lg bg-white-100'
-      >
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-dimmed'>
+      <div ref={modalRef} className='left-1/2 top-1/2'>
         {children}
       </div>
     </div>

src/components/common/NavProfile/index.tsx

@@ -1,6 +1,6 @@
 import Badge from '@/components/common/Badge';
 import Icon from '@/components/common/Icon';
-import { Subtitle2Black, TableBodyTypo } from '@/components/common/Typography';
+import { Body2Black, Subtitle2Black } from '@/components/common/Typography';
 
 const NavProfile = ({ name = '냠냠' }: { name: string }) => {
   return (
@@ -12,7 +12,7 @@ const NavProfile = ({ name = '냠냠' }: { name: string }) => {
         className='border border-grey-100'
       />
       <div className='flex items-center justify-center gap-2'>
-        <TableBodyTypo>다시 만나 기뻐요!</TableBodyTypo>
+        <Body2Black>다시 만나 기뻐요!</Body2Black>
         <Subtitle2Black>{name}님</Subtitle2Black>
       </div>
       <Icon name='arrowNext' color='black' />

src/components/common/TableBody/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/utils/core';
 import { TableRowData, TableType } from '@/components/common/Table';
-import { TableBodyTypo } from '@/components/common/Typography';
+import { Body2Black } from '@/components/common/Typography';
 
 type TableBodyProps = {
   headerData: string[];
@@ -59,9 +59,9 @@ const TableBody = ({
             );
             return (
               <td key={header} className={cellClass}>
-                <TableBodyTypo>
+                <Body2Black>
                   {item[header] !== undefined ? item[header] : '-'}
-                </TableBodyTypo>
+                </Body2Black>
               </td>
             );
           })}

src/components/common/TableHeader/index.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/utils/core';
-import { TableHeaderTypo } from '@/components/common/Typography';
+import { Label1Black } from '@/components/common/Typography';
 
 type TableHeaderProps = {
   headerData: string[];
@@ -42,7 +42,7 @@ const TableHeader = ({
               (headerType === 'viewChart' && surveyHeaderStyles[header]) || '',
             )}
           >
-            <TableHeaderTypo>{header}</TableHeaderTypo>
+            <Label1Black>{header}</Label1Black>
           </th>
         ))}
       </tr>

src/components/common/Typography/index.tsx

@@ -23,22 +23,17 @@ const customTypography = (
   return Typography;
 };
 
-export const ControlTabTypo = customTypography('span', {
+export const Body3Grey500 = customTypography('span', {
   type: 'Body3',
   color: 'grey500',
 });
 
-export const TableHeaderTypo = customTypography('span', {
+export const Label1Black = customTypography('span', {
   type: 'label1',
   color: 'black',
 });
 
-export const TableBodyTypo = customTypography('span', {
-  type: 'Body2',
-  color: 'black',
-});
-
-export const InfoCardTypo = customTypography('span', {
+export const Body2Black = customTypography('span', {
   type: 'Body2',
   color: 'black',
 });

src/components/feature/MyPage/index.tsx

@@ -180,7 +180,7 @@ const MyPage = () => {
         <form onSubmit={handleSubmit(submitChangePassword)} className='w-full'>
           <fieldset className='flex w-full justify-center'>
             <legend className='sr-only'>비밀번호 변경</legend>
-            <div className='flex w-full flex-col items-center gap-6 rounded bg-white-100 p-12'>
+            <div className='flex w-full flex-col items-center gap-6 rounded-2xl bg-white-100 p-12'>
               <div className='flex w-full flex-col gap-2'>
                 <label
                   htmlFor='currentPassword'