diff --git a/frontend/src/atom/textAtom.ts b/frontend/src/atom/textAtom.ts index 782f5a2..a233a21 100644 --- a/frontend/src/atom/textAtom.ts +++ b/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, }, ]; diff --git a/frontend/src/components/TextPreview.tsx b/frontend/src/components/TextPreview.tsx index e14a63f..19bf011 100644 --- a/frontend/src/components/TextPreview.tsx +++ b/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 ( diff --git a/frontend/src/styles/TextItem.module.css b/frontend/src/styles/TextItem.module.css index b7599e6..443b27a 100644 --- a/frontend/src/styles/TextItem.module.css +++ b/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; diff --git a/frontend/src/styles/TextTool.module.css b/frontend/src/styles/TextTool.module.css index 370782d..f28d247 100644 --- a/frontend/src/styles/TextTool.module.css +++ b/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); diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 53508e4..44415cf 100644 --- a/frontend/tailwind.config.js +++ b/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',