fix: font 프리셋 변경

Author: sikkzz

apps/tuk-web/public/fonts/NotoSans-serif-Medium.otf

@@ -32,8 +32,8 @@ const InviteMeet = () => {
       }
     }
 
-    // 애니메이션 트리거
-    const timeout = setTimeout(() => setAnimateCardIn(true), 100); // 약간의 delay
+    const timeout = setTimeout(() => setAnimateCardIn(true), 100);
+
     return () => clearTimeout(timeout);
   }, []);
 
@@ -49,23 +49,23 @@ const InviteMeet = () => {
             </button>
             <div className="flex gap-2.5">
               <div className="size-10 rounded-[0.3125rem] bg-gray-500" />
-              <p className="text-body-14-R">
+              <p className="pretendard-body-14-R">
                 앱을 다운받고 편하게 만남을
                 <br />
                 이어나가보세요
               </p>
             </div>
           </div>
 
-          <div className="rounded-[1.25rem] bg-white-default px-2.5 py-2 text-body-12-B text-black-500">
+          <div className="pretendard-body-12-B rounded-[1.25rem] bg-white-default px-2.5 py-2 text-black-500">
             앱으로 열기
           </div>
         </div>
       )}
 
       <h2
         className={cn(
-          'text-title-22-M text-black-500',
+          'serif-title-22-M font-bold text-black-500',
           showBanner ? 'mt-[6.875rem]' : 'mt-[1.875rem]'
         )}
       >
@@ -82,27 +82,27 @@ const InviteMeet = () => {
           )}
         >
           <div className="flex justify-end">
-            <p className="text-body-14-R text-gray-800">
+            <p className="serif-body-14-R text-gray-800">
               다음 만남은 계획대로
               <br />
               되지 않아 친구들에게
             </p>
           </div>
 
-          <div className="mt-16">
+          <div className="mt-[4.375rem]">
             <QuoteIcon />
-            <div className="mt-6 flex flex-col gap-2">
-              <p className="text-body-16-M text-black-500">제주도 여행가서</p>
-              <p className="text-body-16-M text-black-500">새벽 4시까지</p>
-              <p className="text-body-16-M text-black-500">전생 이야기 나누기</p>
+            <div className="mt-[0.8125rem] flex flex-col gap-[0.3125rem]">
+              <p className="serif-body-16-M text-black-500">제주도 여행가서</p>
+              <p className="serif-body-16-M text-black-500">새벽 4시까지</p>
+              <p className="serif-body-16-M text-black-500">전생 이야기 나누기</p>
             </div>
 
-            <p className="mt-6 text-body-16-M text-black-500">어때</p>
+            <p className="serif-body-16-M mt-5 text-black-500">어때</p>
           </div>
 
           <div className="absolute bottom-0 left-0 flex w-full justify-between px-4 pb-4">
-            <p className="text-body-12-R text-[#cccccc]">연락이</p>
-            <p className="text-body-12-R text-[#cccccc]">뜸해진 우리</p>
+            <p className="serif-body-12-R text-[#cccccc]">연락이</p>
+            <p className="serif-body-12-R text-[#cccccc]">뜸해진 우리</p>
           </div>
         </div>
 

apps/tuk-web/public/fonts/NotoSans-serif-Regular.otf

@@ -4,24 +4,85 @@
 
 @font-face {
   font-family: 'Pretendard';
-  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
+  src: url('/fonts/Pretendard-Regular.oft') format('woff2');
   font-weight: 400;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
-  src: url('/fonts/Pretendard-Medium.woff2') format('woff2');
+  src: url('/fonts/Pretendard-Medium.oft') format('woff2');
   font-weight: 500;
-  font-style: normal;
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Pretendard';
-  src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
+  src: url('/fonts/Pretendard-Bold.otf') format('woff2');
   font-weight: 700;
-  font-style: normal;
   font-display: swap;
 }
+
+@font-face {
+  font-family: 'Noto Serif KR';
+  src: url('/fonts/NotoSans-serif-Regular.otf') format('woff2');
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Serif KR';
+  src: url('/fonts/NotoSans-serif-Medium.otf') format('woff2');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@layer utilities {
+  .pretendard-body-12-R {
+    @apply font-pretendard text-[12px] font-normal leading-[18px] tracking-[-0.03125rem];
+  }
+
+  .pretendard-body-12-M {
+    @apply font-pretendard text-[12px] font-medium leading-[18px] tracking-[-0.03125rem];
+  }
+
+  .pretendard-body-12-B {
+    @apply font-pretendard text-[12px] font-bold leading-[18px] tracking-[-0.03125rem];
+  }
+
+  .pretendard-body-14-R {
+    @apply font-pretendard text-[14px] font-normal leading-[20px] tracking-[-0.03125rem];
+  }
+
+  .pretendard-body-14-M {
+    @apply font-pretendard text-[14px] font-medium leading-[20px] tracking-[-0.03125rem];
+  }
+
+  .pretendard-body-16-R {
+    @apply font-pretendard text-[16px] font-normal leading-[20px] tracking-[-0.03125rem];
+  }
+
+  .serif-body-12-R {
+    @apply font-noto text-[12px] font-normal leading-[18px] tracking-[-0.0625rem];
+  }
+
+  .serif-body-14-R {
+    @apply font-noto text-[14px] font-normal leading-[20px] tracking-[-0.0625rem];
+  }
+
+  .serif-body-16-M {
+    @apply font-noto text-[16px] font-medium leading-[22px] tracking-[-0.0625rem];
+  }
+
+  .serif-body-18-M {
+    @apply font-noto text-[18px] font-medium leading-[25px] tracking-[-0.0625rem];
+  }
+
+  .serif-title-22-M {
+    @apply font-noto text-[22px] font-medium leading-[30px] tracking-[-0.09375rem];
+  }
+
+  .serif-title-24-M {
+    @apply font-noto text-[24px] font-medium leading-[33px] tracking-[-0.09375rem];
+  }
+}