Merge pull request #126 from Yangjaecheon-Otter-Guardians/develop

develop to main merge

Author: caseBread

frontend/src/atom/textAtom.ts

@@ -4,15 +4,18 @@ import { atom, atomFamily } from 'recoil';
 export const TEXT_WHITE: RGBColor = { r: 251, g: 251, b: 251, a: 1 };
 export const TEXT_BLACK: RGBColor = { r: 10, g: 10, b: 10, a: 1 };
 
-export const TEXT_LG = 'text-lg';
-export const TEXT_MD = 'text-md2';
-export const TEXT_SM = 'text-sm';
-export type TextSizeType = 'text-lg' | 'text-md1' | 'text-md2' | 'text-sm' | 'text-xsm';
+export const TEXT_LG = 'tablet:text-[34px] text-[21px]';
+export const TEXT_MD = 'tablet:text-[26px] text-[16px]';
+export const TEXT_SM = 'tablet:text-[22px] text-[14px]';
+export type TextSizeType =
+  | 'tablet:text-[34px] text-[21px]'
+  | 'tablet:text-[26px] text-[16px]'
+  | 'tablet:text-[22px] text-[14px]';
 
 export type TextType = {
   id: number;
   content: string;
-  fontSize: TextSizeType;
+  fontSize: string;
   fontColor: RGBColor;
 };
 
@@ -32,19 +35,19 @@ const texts: TextType[] = [
   {
     id: 0,
     content: '제목을 입력하세요.',
-    fontSize: 'text-lg',
+    fontSize: 'tablet:text-[34px] text-[21px]',
     fontColor: TEXT_WHITE,
   },
   {
     id: 1,
     content: '내용을 입력하세요.',
-    fontSize: 'text-md2',
+    fontSize: 'tablet:text-[26px] text-[16px]',
     fontColor: TEXT_WHITE,
   },
   {
     id: 2,
     content: '내용을 입력하세요.',
-    fontSize: 'text-sm',
+    fontSize: 'tablet:text-[22px] text-[14px]',
     fontColor: TEXT_WHITE,
   },
 ];

frontend/src/components/TextPreview.tsx

@@ -12,12 +12,12 @@ const TextPreview = () => {
   const third = useRecoilValue(textsAll(2));
 
   const styles = {
-    container: `w-full h-full grid grid-cols-1 place-content-cneter p-5 overflow-hidden font-bold`,
+    container: `w-full h-full grid grid-cols-1 place-content-cneter p-5 overflow-hidden tracking-[0.8px] leading-normal`,
     pos: `flex flex-col ${pos.justifyContent} ${pos.alignItems}`,
     sub: `flex flex-col w-full ${pos.justifyContent} ${pos.subAlignItems} `,
-    first: `break-all ${first.fontSize}`,
-    second: `break-all ${second.fontSize}`,
-    third: `break-all ${third.fontSize}`,
+    first: `break-all ${first.fontSize} font-bold`,
+    second: `break-all ${second.fontSize} font-semibold`,
+    third: `break-all ${third.fontSize} font-medium`,
   };
 
   return (

frontend/src/styles/TextItem.module.css

@@ -3,7 +3,7 @@
   background-color: var(--bg-on-surface);
   padding: 12px 16px;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   box-sizing: border-box;
   margin: 12px 0;

frontend/src/styles/TextTool.module.css

@@ -5,12 +5,12 @@
   flex-direction: column;
 }
 .title {
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 700;
   margin-bottom: 10px;
 }
 .subtitle {
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   margin-bottom: 12px;
 }
@@ -53,7 +53,7 @@
   background-color: var(--bg-on-surface);
   color: var(--text-active);
   margin-bottom: 16px;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 .selectedCountButton {
   background-color: var(--bg-input-border-focus);

frontend/tailwind.config.js

@@ -58,11 +58,11 @@ module.exports = {
         'always-red': '#FF3040',
       },
       fontSize: {
-        lg: '21px',
-        md1: '18px',
-        md2: '16px',
-        sm: '14px',
-        xsm: '12px',
+        lg: '1.3125rem',
+        md1: '1.125rem',
+        md2: '1rem',
+        sm: '0.875rem',
+        xsm: '0.75rem',
       },
       borderWidth: {
         1: '1px',