From 750930587823baf1f0c0f88ba3df5dc6713346c0 Mon Sep 17 00:00:00 2001 From: kanghyun98 Date: Sat, 19 Aug 2023 23:46:52 +0900 Subject: [PATCH 1/3] feat: add breakpoints to media query --- src/constants/styles/mediaQuery.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/constants/styles/mediaQuery.ts b/src/constants/styles/mediaQuery.ts index 436f064..bf76d7f 100644 --- a/src/constants/styles/mediaQuery.ts +++ b/src/constants/styles/mediaQuery.ts @@ -1,10 +1,11 @@ -const BREAK_POINTS = [800, 1280] as const; +const BREAK_POINTS = [600, 960, 1280] as const; /** * media query 적용 기준 값 */ export const MEDIA_QUERY = { mobile: `screen and (max-width: ${BREAK_POINTS[0]}px)`, - tablet: `screen and (min-width: ${BREAK_POINTS[0]}px) and (max-width: ${BREAK_POINTS[1]}px)`, - pc: `screen and (min-width: ${BREAK_POINTS[1]}px )`, + tabletSm: `screen and (min-width: ${BREAK_POINTS[0]}px) and (max-width: ${BREAK_POINTS[1]}px)`, + tabletLg: `screen and (min-width: ${BREAK_POINTS[1]}px) and (max-width: ${BREAK_POINTS[2]}px)`, + pc: `screen and (min-width: ${BREAK_POINTS[2]}px )`, } as const; From f1a1023971d3a7ee00851848dea7fe69fb72de34 Mon Sep 17 00:00:00 2001 From: kanghyun98 Date: Sat, 19 Aug 2023 23:47:13 +0900 Subject: [PATCH 2/3] feat: add text styles constant --- src/constants/styles/index.ts | 1 + src/constants/styles/textStyle.ts | 219 ++++++++++++++++++++++++++++++ 2 files changed, 220 insertions(+) create mode 100644 src/constants/styles/textStyle.ts diff --git a/src/constants/styles/index.ts b/src/constants/styles/index.ts index 7c4a580..b017987 100644 --- a/src/constants/styles/index.ts +++ b/src/constants/styles/index.ts @@ -1,2 +1,3 @@ export * from './color'; +export * from './textStyle'; export * from './mediaQuery'; diff --git a/src/constants/styles/textStyle.ts b/src/constants/styles/textStyle.ts new file mode 100644 index 0000000..8930a74 --- /dev/null +++ b/src/constants/styles/textStyle.ts @@ -0,0 +1,219 @@ +import { MEDIA_QUERY } from './mediaQuery'; + +export const TEXT_STYLE_NAME = { + maintitle: 'maintitle', + title: 'title', + subtitle1: 'subtitle1', + subtitle2B: 'subtitle2B', + subtitle2R: 'subtitle2R', + subtitle3: 'subtitle3', + body1B: 'body1B', + body1R: 'body1R', + body2B: 'body2B', + body2R: 'body2R', + body3: 'body3', + button1B: 'button1B', + button1R: 'button1R', + button2B: 'button2B', + button2R: 'button2R', + button3R: 'button3R', + button4B: 'button4B', + caption: 'caption', + description: 'description', +} as const; + +export type TextStyleNameType = + typeof TEXT_STYLE_NAME[keyof typeof TEXT_STYLE_NAME]; + +interface TextStyleType { + fontSize: number; + fontWeight: number; + lineHeight: string; +} + +const LINE_HEIGHT_RATIO = 1.5; + +export const TEXT_STYLES: Record = { + [TEXT_STYLE_NAME.maintitle]: { + fontSize: 64, + fontWeight: 700, + lineHeight: '120%', + [`@media ${MEDIA_QUERY.tabletLg}`]: { + fontSize: 48, + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + fontSize: 48, + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 36, + }, + }, + [TEXT_STYLE_NAME.title]: { + fontSize: 36, + fontWeight: 900, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 30, + fontWeight: 900, + }, + }, + [TEXT_STYLE_NAME.subtitle1]: { + fontSize: 30, + fontWeight: 800, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 22, + fontWeight: 800, + }, + }, + [TEXT_STYLE_NAME.subtitle2B]: { + fontSize: 22, + fontWeight: 700, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 20, + fontWeight: 700, + }, + }, + [TEXT_STYLE_NAME.subtitle2R]: { + fontSize: 22, + fontWeight: 500, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 20, + fontWeight: 500, + }, + }, + [TEXT_STYLE_NAME.subtitle3]: { + fontSize: 20, + fontWeight: 700, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 18, + fontWeight: 700, + }, + }, + + [TEXT_STYLE_NAME.body1B]: { + fontSize: 20, + fontWeight: 700, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 18, + fontWeight: 700, + }, + }, + [TEXT_STYLE_NAME.body1R]: { + fontSize: 20, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 18, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.body2B]: { + fontSize: 18, + fontWeight: 700, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 18, + fontWeight: 700, + }, + }, + [TEXT_STYLE_NAME.body2R]: { + fontSize: 18, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 16, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.body3]: { + fontSize: 16, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 14, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.caption]: { + fontSize: 14, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 12, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.button1B]: { + fontSize: 20, + fontWeight: 700, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 12, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.button1R]: { + fontSize: 20, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 18, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.button2B]: { + fontSize: 18, + fontWeight: 700, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 16, + fontWeight: 700, + }, + }, + [TEXT_STYLE_NAME.button2R]: { + fontSize: 18, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 16, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.button3R]: { + fontSize: 16, + fontWeight: 400, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 14, + fontWeight: 400, + }, + }, + [TEXT_STYLE_NAME.button4B]: { + fontSize: 14, + fontWeight: 800, + lineHeight: 'normal', + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 13, + fontWeight: 800, + }, + }, + [TEXT_STYLE_NAME.description]: { + fontSize: 25, + fontWeight: 500, + lineHeight: '160%', + [`@media ${MEDIA_QUERY.tabletLg}`]: { + fontSize: 20, + }, + [`@media ${MEDIA_QUERY.tabletSm}`]: { + fontSize: 20, + }, + [`@media ${MEDIA_QUERY.mobile}`]: { + fontSize: 16, + }, + }, +}; From 419dba87c8a7fe64cb8195620a74657252dfacb7 Mon Sep 17 00:00:00 2001 From: kanghyun98 Date: Sat, 19 Aug 2023 23:47:30 +0900 Subject: [PATCH 3/3] feat: add global.css to storybook --- .storybook/preview.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/preview.js b/.storybook/preview.js index c0d8562..ab2cee8 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,5 @@ import * as NextImage from 'next/image'; +import '../src/pages/global.css'; // new `next/image` support const OriginalNextImage = NextImage.default;