[#588] 폰트 디자인 시스템 적용

src/app/book/[bookId]/page.tsx

@@ -78,7 +78,7 @@ const BookTitle = ({ bookId }: { bookId: APIBook['bookId'] }) => {
 };
 
 const Heading = ({ text }: { text: string }) => (
-  <p className="text-xl font-bold">{text}</p>
+  <p className="font-subheading-bold">{text}</p>
 );
 
 const AddBookCommentButton = ({ bookId }: { bookId: APIBook['bookId'] }) => {

src/app/book/search/page.tsx

@@ -52,7 +52,7 @@ const BookSearchPage = () => {
 
         {/** 최근 검색어 + 베스트 셀러 */}
         <section
-          className={`flex flex-col gap-[1.6rem] ${watchedKeyword && 'hidden'}`}
+          className={`flex flex-col gap-[2rem] ${watchedKeyword && 'hidden'}`}
         >
           <SSRSafeSuspense fallback={<ContentsSkelton />}>
             <RecentSearchResult

src/app/bookshelf/[bookshelfId]/page.tsx

@@ -54,12 +54,12 @@ export default function UserBookShelfPage({
         </TopNavigation.RightItem>
       </TopNavigation>
       <div className="mt-[0.8rem] flex flex-col gap-[0.8rem] pb-[2rem] pt-[1rem] font-bold">
-        <h1 className="text-[1.8rem]">
+        <h1 className="font-subheading-bold">
           <span className="text-main-900">{data.userNickname}</span>
           님의 책장
         </h1>
         <div className="flex items-center justify-between">
-          <span className="text-[1.4rem] text-[#939393]">
+          <span className="text-black-600 font-body2-regular">
             {`${data.job.jobGroupKoreanName} • ${data.job.jobNameKoreanName}`}
           </span>
           <LikeButton
@@ -123,22 +123,22 @@ const BookShelfContent = ({
         <BookShelfRow books={initialBookImageUrl} />
       </div>
       <div className="mt-[3.8rem] flex flex-col gap-[2rem] rounded-[4px] border border-[#CFCFCF] px-[1.7rem] py-[4rem]">
-        <p className="text-center text-md font-bold">
+        <p className="text-center font-body1-bold">
           지금 로그인하면
           <br />
           책장에 담긴 모든 책을 볼 수 있어요!
         </p>
-        <p className="text-center text-xs text-placeholder">
+        <p className="text-center text-placeholder font-body2-regular">
           <span className="text-main-900">{userNickname}</span>님의 책장에서
           다양한
           <br />
           인사이트를 얻을 수 있어요.
         </p>
         <Link href={KAKAO_OAUTH_LOGIN_URL}>
           <Button colorScheme="kakao" size="full">
-            <div className="flex justify-center gap-[1rem]">
+            <div className="flex items-center justify-center gap-[1rem]">
               <IconKakao width={16} height={'auto'} />
-              <span className="text-md font-normal">카카오 로그인</span>
+              <span className="font-body1-regular">카카오 로그인</span>
             </div>
           </Button>
         </Link>

src/app/error.tsx

@@ -10,7 +10,7 @@ export const ErrorPage = () => {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
       <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
-      <div className="text-2xl">
+      <div className="font-heading">
         <span className="font-bold text-main-900">다독이</span>도 몰라요~ 왜
         이래요~
       </div>

src/app/group/[groupId]/join/page.tsx

@@ -64,12 +64,12 @@ const BookGroupJoinForm = ({ groupId }: { groupId: number }) => {
       className="mt-[2.5rem] flex flex-col gap-[2.5rem]"
       onSubmit={handleSubmit(submitJoinForm)}
     >
-      <p className="whitespace-pre-line text-2xl font-bold leading-snug">
+      <p className="whitespace-pre-line !leading-snug font-subheading-bold">
         {`문제를 맞추면
           모임에 가입할 수 있어요`}
       </p>
       <div className="flex flex-col gap-[1.5rem]">
-        <p className="text-sm">{question}</p>
+        <p className="font-body2-regular">{question}</p>
         <div className="flex flex-col gap-[0.5rem]">
           <Input
             {...register('answer', {

src/app/group/[groupId]/not-found.tsx

@@ -6,7 +6,7 @@ export default function NotFound() {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
       <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
-      <p className="text-2xl">
+      <p className="font-heading">
         <span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
       </p>
       <Link href="/group">

src/app/group/[groupId]/page.tsx

@@ -50,7 +50,7 @@ const DetailBookGroupPage = ({
 export default DetailBookGroupPage;
 
 const Heading = ({ text }: { text: string }) => (
-  <p className=" text-xl font-bold">{text}</p>
+  <p className="font-subheading-bold">{text}</p>
 );
 
 const PageSkeleton = () => (

src/app/group/page.tsx

@@ -75,7 +75,7 @@ const MyBookGroupList = () => {
   const { data: myId } = useMyProfileId({ enabled: isAuthenticated });
 
   return (
-    <section className="flex gap-[1rem] overflow-scroll">
+    <section className="flex gap-[1rem] overflow-y-hidden overflow-x-scroll pb-[1.5rem]">
       {bookGroups.map(({ title, book, bookGroupId, owner }) => (
         <SimpleBookGroupCard
           key={bookGroupId}

src/app/not-found.tsx

@@ -10,7 +10,7 @@ const NotFound = () => {
   return (
     <div className="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-[2rem]">
       <Image src="/images/loading.gif" width={230} height={160} alt="loading" />
-      <div className="text-2xl">
+      <div className="font-heading">
         <span className="font-bold text-main-900">다독이</span>가 길을 잃었어요.
       </div>
       <Button

src/app/profile/me/page.tsx

@@ -43,8 +43,10 @@ const MyProfileForUnAuth = () => {
         <div className="mb-[2rem] flex items-center gap-[1rem]">
           <Avatar size="large" />
           <div className="flex-grow">
-            <h2 className="text-lg font-bold">로그인 / 회원가입</h2>
-            <p className="text-sm text-placeholder">
+            <h2 className="pb-[0.2rem] font-subheading-bold">
+              로그인 / 회원가입
+            </h2>
+            <p className="text-placeholder font-body2-regular">
               카카오로 3초만에 가입할 수 있어요.
             </p>
           </div>
@@ -54,21 +56,25 @@ const MyProfileForUnAuth = () => {
         </div>
         <div className="flex flex-col gap-[0.6rem]">
           <div className="flex items-center justify-between">
-            <h3 className="text-lg font-bold">책장</h3>
+            <h3 className="font-body1-bold">책장</h3>
           </div>
           <BookShelf>
             <div className="w-app pb-[2.5rem] pt-[2rem] shadow-[0px_20px_20px_-16px_#D1D1D1]">
               <BookShelf.Background />
               <div className="pb-[5.5rem] pt-[3rem] text-center">
-                <p className="text-sm text-placeholder">책장이 비었어요.</p>
+                <p className="text-placeholder font-body2-regular">
+                  책장이 비었어요.
+                </p>
               </div>
             </div>
           </BookShelf>
         </div>
         <div className="flex flex-col gap-[0.6rem]">
-          <h3 className="text-lg font-bold">참여한 모임</h3>
+          <h3 className="font-body1-bold">참여한 모임</h3>
           <div className="pb-[5.5rem] pt-[5.5rem] text-center">
-            <p className="text-sm text-placeholder">참여 중인 모임이 없어요.</p>
+            <p className="text-placeholder font-body2-regular">
+              참여 중인 모임이 없어요.
+            </p>
           </div>
         </div>
       </div>
@@ -101,7 +107,7 @@ const MyProfileForAuth = () => {
         <ProfileInfo userId={USER_ID} />
         <Link href="/profile/me/edit" className="w-full">
           <Button colorScheme="main-light" size="full">
-            <span className="mr-[0.5rem] text-sm font-bold text-black-700">
+            <span className="mr-[0.5rem] text-black-700 font-body2-bold">
               프로필 수정
             </span>
           </Button>

src/v1/base/BottomNavigation.tsx

@@ -50,7 +50,7 @@ const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
             }`}
           >
             <div className="h-[2.6rem] w-[2.6rem]">{icon}</div>
-            <p className="text-xs font-bold">{label}</p>
+            <p className="font-caption1-bold">{label}</p>
           </button>
         </Link>
       ))}

src/v1/base/Button.tsx

@@ -15,20 +15,20 @@ type ButtonProps = PropsWithChildren<{
 const getSizeClasses = (size: Size) => {
   switch (size) {
     case 'small': {
-      return 'text-sm px-[1.2rem] py-[0.6rem]';
+      return 'font-body2-bold px-[1.2rem] py-[0.6rem]';
     }
     case 'medium': {
-      return 'text-md px-[1.6rem] py-[0.8rem]';
+      return 'font-body1-bold px-[1.6rem] py-[0.8rem]';
     }
     case 'large': {
-      return 'text-lg px-[2.4rem] py-[1rem]';
+      return 'font-body1-bold px-[2.4rem] py-[1rem]';
     }
     case 'full': {
-      return 'text-lg px-[2.4rem] py-[1rem] w-full';
+      return 'font-body1-bold px-[2.4rem] py-[1rem] w-full';
     }
     default: {
       // medium
-      return 'text-md px-[1.6rem] py-[0.8rem]';
+      return 'font-body1-bold px-[1.6rem] py-[0.8rem]';
     }
   }
 };
@@ -41,7 +41,7 @@ const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
         : 'border-main-900 text-main-900';
     }
     case 'main-light': {
-      return 'border-transparent bg-main-600/[.18] text-main-900 font-normal';
+      return 'border-transparent bg-main-600/[.18] text-main-900 !font-normal';
     }
     case 'warning': {
       return isFill
@@ -60,7 +60,7 @@ const getSchemeClasses = (theme: ColorScheme, isFill: boolean) => {
 };
 
 const BASE_BUTTON_CLASSES =
-  'cursor-pointer border-[0.1rem] leading-none inline-block font-bold focus:outline-none focus:ring-2';
+  'cursor-pointer border-[0.1rem] leading-none inline-block focus:outline-none focus:ring-2';
 
 const Button = ({
   size = 'medium',

src/v1/base/DatePicker.tsx

@@ -53,7 +53,7 @@ const DatePicker = (
 
   return (
     <label
-      className={`relative flex h-[3rem] max-w-[14rem] items-center justify-between gap-[0.5rem] bg-transparent ${disabledClasses}`}
+      className={`relative flex h-[3rem] max-w-[16rem] items-center justify-between gap-[0.5rem] bg-transparent ${disabledClasses}`}
       htmlFor={name}
     >
       <div className="flex h-full min-w-0 flex-grow items-center">
@@ -69,8 +69,8 @@ const DatePicker = (
           {...props}
         />
         <p
-          className={`truncate text-sm ${
-            currentDate ? 'text-inherit' : 'text-placeholder'
+          className={`truncate font-body1-regular ${
+            currentDate ? 'text-black-700' : 'text-placeholder'
           }`}
         >
           {currentDate

src/v1/base/Drawer.tsx

@@ -86,12 +86,16 @@ const DrawerHeader = ({ children }: { children?: ReactNode }) => {
 };
 
 const DrawerContent = ({ children }: { children?: ReactNode }) => {
-  return <div className="w-full px-6 pt-6 text-md sm:px-8">{children}</div>;
+  return (
+    <div className="w-full px-6 pt-6 font-body1-regular sm:px-8">
+      {children}
+    </div>
+  );
 };
 
 const Title = ({ text }: { text?: string }) => {
   return (
-    <h1 className="flex-grow truncate pl-[2.5rem] text-center text-md">
+    <h1 className="flex-grow truncate pl-[2.5rem] text-center font-body1-regular">
       {text}
     </h1>
   );

src/v1/base/ErrorMessage.tsx

@@ -5,7 +5,7 @@ const ErrorMessage = ({ children }: { children?: ReactNode }) => {
   return (
     <>
       {children && (
-        <div className="flex items-center gap-[0.4rem] text-xs text-warning-800">
+        <div className="flex items-center gap-[0.4rem] text-warning-800 font-caption1-regular">
           <div className="h-[1.2rem] w-[1.2rem]">
             <IconWarningCircle />
           </div>

src/v1/base/Input.tsx

@@ -13,8 +13,8 @@ interface InputProps extends ComponentPropsWithoutRef<'input'> {
 }
 
 const FONT_SIZE_CLASSES = {
-  small: 'text-sm after:text-sm',
-  large: 'text-lg font-bold after:text-lg after:font-bold',
+  small: 'font-body1-regular after:font-body1-regular',
+  large: 'font-subheading-bold after:font-subheading-bold',
 };
 
 const getInputStyleClasses = (inputStyle: InputStyle) => {

src/v1/base/InputLength.tsx

@@ -12,7 +12,7 @@ const InputLength = ({
   const textColor = isError ? 'text-warning-800 ' : 'text-main-900';
 
   return (
-    <p className="text-xs">
+    <p className="font-caption1-regular">
       <span className={textColor}>{currentLength ? currentLength : 0}</span>/
       {maxLength}
     </p>

src/v1/base/LikeButton.tsx

@@ -21,7 +21,7 @@ const LikeButton = ({ isLiked, likeCount, onClick }: LikeButtonProps) => {
         className={`${ICON_COLOR_CLASS} h-[1.5rem] w-[1.5rem] fill-white stroke-[0.15rem]`}
       />
       <p
-        className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center text-xs font-bold`}
+        className={`${TEXT_COLOR_CLASS} min-w-[1.5rem] text-center font-caption1-bold`}
       >
         {likeCount}
       </p>

src/v1/base/Menu.tsx

@@ -83,7 +83,7 @@ const Item = ({
 
   return (
     <li
-      className="block cursor-pointer list-none truncate whitespace-nowrap rounded-[0.5rem] px-[1rem] py-[0.7rem] text-sm hover:bg-black-100"
+      className="block cursor-pointer list-none truncate whitespace-nowrap rounded-[0.5rem] px-[1rem] py-[0.7rem] font-body2-regular hover:bg-black-100"
       onClick={handleItemClick}
     >
       {children}

src/v1/base/QueryErrorBoundaryFallback.tsx

@@ -7,9 +7,7 @@ const QueryErrorBoundaryFallback = ({
 }) => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-[1rem] rounded-lg py-[2rem]">
-      <p className="text-md font-bold">
-        데이터를 불러오는 중 문제가 발생했어요.
-      </p>
+      <p className="font-body1-bold">데이터를 불러오는 중 문제가 발생했어요.</p>
       <Button size="small" onClick={resetErrorBoundary}>
         다시 불러오기
       </Button>

src/v1/base/RadioButton.tsx

@@ -5,7 +5,7 @@ type RadioButtonProps = {
 } & Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'type' | 'className'>;
 
 const BASE_RADIO_BUTTON_CLASSES =
-  'px-[1.2rem] py-[0.5rem] bg-main-600/[0.18] text-main-900 text-sm font-normal rounded-[2rem] cursor-pointer w-full h-full peer-checked:bg-main-900 peer-checked:text-white';
+  'px-[1.4rem] py-[0.6rem] bg-main-600/[0.18] text-main-900 font-body2-regular rounded-[2rem] cursor-pointer peer-checked:bg-main-900 peer-checked:text-white';
 
 const RadioButton = (
   { name, value, label, ...props }: RadioButtonProps,
@@ -22,7 +22,7 @@ const RadioButton = (
         ref={ref}
         {...props}
       />
-      <span className={BASE_RADIO_BUTTON_CLASSES}>{label ?? value}</span>
+      <p className={BASE_RADIO_BUTTON_CLASSES}>{label ?? value}</p>
     </label>
   );
 };

src/v1/base/Select.tsx

@@ -17,7 +17,7 @@ const _Select = (
     : 'border-black-400 focus:border-main-900';
 
   return (
-    <div className="text-sm">
+    <div className="font-body2-regular">
       <select
         ref={ref}
         defaultValue=""

src/v1/base/Switch.tsx

@@ -9,7 +9,7 @@ const Switch = (
 ) => {
   return (
     <label
-      className="relative inline-flex h-[2.4rem] w-[4.2rem] cursor-pointer items-center"
+      className="relative inline-flex h-[2.8rem] w-[4.9rem] cursor-pointer items-center"
       htmlFor={name}
     >
       <input
@@ -21,7 +21,7 @@ const Switch = (
         {...props}
       />
       <div className="absolute bottom-0 left-0 right-0 top-0 rounded-full bg-cancel peer-checked:bg-main-900" />
-      <span className="absolute left-0 h-[2rem] w-[2rem] translate-x-[0.25rem] transform rounded-full bg-white transition peer-checked:translate-x-[2rem]" />
+      <span className="absolute left-0 h-[2.4rem] w-[2.4rem] translate-x-[0.2rem] transform rounded-full bg-white transition peer-checked:translate-x-[2.3rem]" />
       <span className="sr-only">{`Enable ${name}`}</span>
     </label>
   );

src/v1/base/TextArea.tsx

@@ -92,7 +92,7 @@ const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(
 
     return (
       <textarea
-        className={`min-h-[8rem] w-full resize-none rounded-[0.5rem] border-[0.05rem] p-[1rem] text-sm outline-none placeholder:text-placeholder ${borderColor}`}
+        className={`min-h-[8rem] w-full resize-none rounded-[0.5rem] border-[0.05rem] p-[1rem] outline-none font-body1-regular placeholder:text-placeholder ${borderColor}`}
         placeholder={placeholder || '내용을 입력해주세요'}
         ref={ref}
         {...props}

src/v1/base/Toast/ToastItem.tsx

@@ -34,7 +34,9 @@ const ToastItem = ({ type = 'normal', message }: ToastOption) => {
           {scheme.icon}
         </div>
       )}
-      <p className={`text-sm leading-tight ${scheme.textColor}`}>{message}</p>
+      <p className={`!leading-tight font-body2-regular ${scheme.textColor}`}>
+        {message}
+      </p>
     </div>
   );
 };