From d581d2d8135ec566206211bacae5d9a4744f8ba4 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Mon, 16 Sep 2024 16:34:27 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design:=20768px=20=EC=9D=B4=ED=95=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94,=20bo?= =?UTF-8?q?dy=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/globalStyles.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index af22f8efd..eefcfc82c 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -35,6 +35,15 @@ const globalStyles = css` background: #f1f2f4; /*스크롤바 배경 색상 (lightGray)*/ border-radius: 0.8rem; } + + ${media.small` + body { + padding-right: initial; + } + ::-webkit-scrollbar-track { + background: transparent; + } + `} `; export default globalStyles; From 69dedb0ecd288691da51b8df23aa9b7d182cd1e9 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Mon, 16 Sep 2024 16:35:18 +0900 Subject: [PATCH 2/9] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC=EB=A1=9C=20=EC=9D=B8?= =?UTF-8?q?=ED=95=9C=20prettier=20=EC=A0=81=EC=9A=A9=EB=90=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/globalStyles.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index eefcfc82c..7ae4af9f6 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -1,23 +1,24 @@ import { css } from '@emotion/react'; +import media from '@/utils/media'; + import reset from './reset'; const globalStyles = css` ${reset()} html { - font-size: 62.5%; // NOTE: 1rem = 10px을 위한 트릭 + font-size: 62.5%; /*NOTE: 1rem = 10px을 위한 트릭*/ } body { - font-family: 'Pretendard Variable', 'Noto Sans', sans-serif; + box-sizing: border-box; margin: 0; padding: 0; - box-sizing: border-box; + padding-right: 1.2rem; + font-family: 'Pretendard Variable', 'Noto Sans', sans-serif; font-size: 1.6rem; - - padding-right: 1.2rem; } /* 스크롤바 설정 */ From 05a6ec3f7782b41c6ce85a0cb586427b71700813 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Mon, 16 Sep 2024 16:38:49 +0900 Subject: [PATCH 3/9] =?UTF-8?q?design:=20768px=20=EC=9D=B4=ED=95=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20bodya=20padding-right=3D0=20=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/globalStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index 7ae4af9f6..64439216d 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -39,7 +39,7 @@ const globalStyles = css` ${media.small` body { - padding-right: initial; + padding-right: 0; } ::-webkit-scrollbar-track { background: transparent; From 482c6a0e5e8441fb49015f286ccf94cb7d7835f2 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Mon, 16 Sep 2024 16:58:32 +0900 Subject: [PATCH 4/9] =?UTF-8?q?design:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=B0=94=20=ED=88=AC=EB=AA=85=20=EB=B0=8F=20boday=20padding-ri?= =?UTF-8?q?ght=20=EC=97=86=EB=8A=94=20=EB=AF=B8=EB=94=94=EC=96=B4=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=20=EB=B2=94=EC=9C=84=20=EB=B3=80=EA=B2=BD(76?= =?UTF-8?q?8px=20->=201024px)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/globalStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index 64439216d..90e025259 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -37,7 +37,7 @@ const globalStyles = css` border-radius: 0.8rem; } - ${media.small` + ${media.medium` body { padding-right: 0; } From 6fc6ecf5c56e053846a80ff30d4cfef46e85503b Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Mon, 16 Sep 2024 16:59:18 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20globalStyle=EC=97=90=EC=84=9C=20the?= =?UTF-8?q?me=20=EC=82=AC=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD,=20theme=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 2 +- frontend/src/styles/globalStyles.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 04da49f76..6b368220b 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -115,7 +115,7 @@ enableMocking().then(() => { - + globalStyles(theme)} /> diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index 90e025259..fd1e33d6f 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -1,10 +1,10 @@ -import { css } from '@emotion/react'; +import { css, Theme } from '@emotion/react'; import media from '@/utils/media'; import reset from './reset'; -const globalStyles = css` +const globalStyles = (theme: Theme) => css` ${reset()} html { @@ -33,7 +33,7 @@ const globalStyles = css` } ::-webkit-scrollbar-track { - background: #f1f2f4; /*스크롤바 배경 색상 (lightGray)*/ + background: ${theme.colors.lightGray}; /*스크롤바 배경 색상 (lightGray)*/ border-radius: 0.8rem; } @@ -41,6 +41,7 @@ const globalStyles = css` body { padding-right: 0; } + ::-webkit-scrollbar-track { background: transparent; } From 6a06d38039dafde05a56cd5eb22fc1e2f27c85b3 Mon Sep 17 00:00:00 2001 From: chysis Date: Wed, 18 Sep 2024 22:19:44 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20media=20=EC=9C=A0=ED=8B=B8=EB=A6=AC?= =?UTF-8?q?=ED=8B=B0=20=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/theme.ts | 12 +++++----- frontend/src/types/emotion.ts | 6 ++--- frontend/src/utils/media.ts | 42 ++++++++++------------------------- 3 files changed, 22 insertions(+), 38 deletions(-) diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index 45969c844..fa6d9f3c8 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -16,10 +16,12 @@ export const componentHeight = { breadCrumb: '4.3rem', }; -export const breakpoints: ThemeProperty = { - desktop: '102.4rem', - tablet: '72rem', - mobile: '57.6rem', +export const breakpoint = { + xxSmall: 320, + xSmall: 425, + small: 768, + medium: 1024, + large: 1025, }; // NOTE: 1rem = 10px export const fontSize: ThemeProperty = { @@ -68,7 +70,7 @@ const theme: Theme = { fontWeight, zIndex, colors, - breakpoints, + breakpoint, sidebarWidth, borderRadius, formWidth, diff --git a/frontend/src/types/emotion.ts b/frontend/src/types/emotion.ts index c95da554d..615afbcb0 100644 --- a/frontend/src/types/emotion.ts +++ b/frontend/src/types/emotion.ts @@ -5,7 +5,7 @@ import { fontSize, fontWeight, zIndex, - breakpoints, + breakpoint, sidebarWidth, borderRadius, componentHeight, @@ -16,7 +16,7 @@ export type Color = typeof colors; export type ZIndex = typeof zIndex; export type FontSize = typeof fontSize; export type FontWeight = typeof fontWeight; -export type Breakpoints = typeof breakpoints; +export type Breakpoint = typeof breakpoint; export type SidebarWidthStyle = typeof sidebarWidth; export type BorderRadius = typeof borderRadius; export type ComponentHeight = typeof componentHeight; @@ -26,7 +26,7 @@ type ThemeType = { fontWeight: FontWeight; colors: Color; zIndex: ZIndex; - breakpoints: Breakpoints; + breakpoint: Breakpoint; sidebarWidth: SidebarWidthStyle; borderRadius: BorderRadius; formWidth: string; diff --git a/frontend/src/utils/media.ts b/frontend/src/utils/media.ts index 2ed6bb6e5..ab61e7285 100644 --- a/frontend/src/utils/media.ts +++ b/frontend/src/utils/media.ts @@ -1,35 +1,17 @@ -import { css, SerializedStyles } from '@emotion/react'; -import { CSSObject } from '@emotion/styled'; +import theme from '@/styles/theme'; -export type Breakpoints = 'xxSmall' | 'xSmall' | 'small' | 'medium' | 'large'; +const { breakpoint } = theme; -export const breakpoints: Record = { - xxSmall: '@media (max-width: 320px)', - xSmall: '@media (max-width: 425px)', - small: '@media (max-width: 768px)', - medium: '@media (max-width: 1024px)', - large: '@media (min-width: 1025px)', -}; +export type Breakpoints = keyof typeof breakpoint; +type Media = { [key in Breakpoints]: string }; -const media = Object.entries(breakpoints).reduce( - (acc, [key, value]) => { - acc[key as Breakpoints] = ( - styles: CSSObject | TemplateStringsArray, - ...interpolations: Array - ) => css` - ${value} { - ${css(styles, ...interpolations)} - } - `; - return acc; - }, - {} as Record< - Breakpoints, - ( - styles: CSSObject | TemplateStringsArray, - ...interpolations: Array - ) => SerializedStyles - >, -); +const breakpointsKeyList = Object.keys(breakpoint) as Breakpoints[]; + +const media = breakpointsKeyList.reduce((prev, key, index) => { + const mediaType = index === breakpointsKeyList.length - 1 ? 'min' : 'max'; + + prev[key] = `@media (${mediaType}-width: ${breakpoint[key]}px)`; + return prev; +}, {} as Media); export default media; From 923f58ca3c29203574f37023396695c656eb3346 Mon Sep 17 00:00:00 2001 From: chysis Date: Wed, 18 Sep 2024 22:39:51 +0900 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20breakp?= =?UTF-8?q?oint=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/layouts/Main/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/layouts/Main/styles.ts b/frontend/src/components/layouts/Main/styles.ts index 5e062a170..f04d66f51 100644 --- a/frontend/src/components/layouts/Main/styles.ts +++ b/frontend/src/components/layouts/Main/styles.ts @@ -29,7 +29,7 @@ export const Contents = styled.div` box-sizing: border-box; width: 100%; - max-width: ${({ theme }) => theme.breakpoints.desktop}; + max-width: ${({ theme }) => theme.breakpoint.medium}px; height: 100%; min-height: inherit; From 0f310ce5d17e3984816b97a3b29edd2b5382e7fd Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 18 Sep 2024 23:23:58 +0900 Subject: [PATCH 8/9] =?UTF-8?q?chore:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20medi?= =?UTF-8?q?a=20=EC=9C=A0=ED=8B=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/globalStyles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index fd1e33d6f..0d9c92411 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -37,15 +37,15 @@ const globalStyles = (theme: Theme) => css` border-radius: 0.8rem; } - ${media.medium` - body { + ${media.medium} { + body { padding-right: 0; } ::-webkit-scrollbar-track { background: transparent; } - `} + } `; export default globalStyles; From 7954cc30a5e440f674ce481f544e1dfdcc0026f4 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Thu, 19 Sep 2024 16:25:24 +0900 Subject: [PATCH 9/9] =?UTF-8?q?design:=20body=20margin-right,=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EB=B0=94=20=EB=B0=B0=EA=B2=BD=20=ED=88=AC?= =?UTF-8?q?=EB=AA=85=EC=9D=84=20768px=20=EC=9D=B4=ED=95=98=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/globalStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts index 0d9c92411..ea61abef9 100644 --- a/frontend/src/styles/globalStyles.ts +++ b/frontend/src/styles/globalStyles.ts @@ -37,7 +37,7 @@ const globalStyles = (theme: Theme) => css` border-radius: 0.8rem; } - ${media.medium} { + ${media.small} { body { padding-right: 0; }