From b720327c99ac05a7b45f56e9098d675bccae7c1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=B1=84=EB=AF=BC?= <87525734+cmlim0070@users.noreply.github.com> Date: Thu, 7 Nov 2024 15:50:22 +0900 Subject: [PATCH] =?UTF-8?q?style=20:=20=EC=9D=BC=EA=B8=B0=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91?= =?UTF-8?q?=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?(#265)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 1 + .../KeywordButton/ui/KeywordButton.styled.ts | 27 ++++++++++++++++--- .../condition/ui/ConditionButton.styled.tsx | 25 +++++++++++++++-- .../ui/ConditionButtonGroup.styled.tsx | 3 ++- .../emotion/ui/EmotionButtonGroup.styled.ts | 20 +++++++++++++- .../ui/DiaryWritePage.styled.tsx | 24 +++++++++++++++-- .../EmotionIcon/ui/EmotionIcon.styled.ts | 21 +++++++++++++-- .../date-picker/ui/DatePicker.styled.ts | 1 - src/widgets/header/ui/Header.styled.tsx | 1 + 9 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} diff --git a/src/entities/KeywordButton/ui/KeywordButton.styled.ts b/src/entities/KeywordButton/ui/KeywordButton.styled.ts index c39df3a..d36b6b4 100644 --- a/src/entities/KeywordButton/ui/KeywordButton.styled.ts +++ b/src/entities/KeywordButton/ui/KeywordButton.styled.ts @@ -1,8 +1,30 @@ import styled from 'styled-components'; +const breakpoints = { + mobile: '550px', + desktop: '1024px' +}; + +const media = { + mobile: `@media screen and (min-width: ${breakpoints.mobile})`, + desktop: `@media screen and (min-width: ${breakpoints.desktop})` +}; + export const StyledButton = styled.button<{ isActive: boolean }>` - width: 175px; - height: 134px; + width: 150px; + height: 50px; + + ${media.mobile} { + width: 150px; + height: 50px; + } + + ${media.desktop} { + width: 175px; + height: 134px; + gap: 10px; + } + border: 1px solid ${(props) => props.isActive ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.1)'}; @@ -12,7 +34,6 @@ export const StyledButton = styled.button<{ isActive: boolean }>` flex-direction: column; align-items: center; justify-content: center; - gap: 10px; font-size: 14px; font-family: 'Pretendard', sans-serif; transition: all 0.2s ease; diff --git a/src/entities/condition/ui/ConditionButton.styled.tsx b/src/entities/condition/ui/ConditionButton.styled.tsx index 0dfc450..bb637e9 100644 --- a/src/entities/condition/ui/ConditionButton.styled.tsx +++ b/src/entities/condition/ui/ConditionButton.styled.tsx @@ -4,6 +4,16 @@ interface ButtonProps { isActive?: boolean; } +const breakpoints = { + mobile: '550px', + desktop: '1024px' +}; + +const media = { + mobile: `@media screen and (min-width: ${breakpoints.mobile})`, + desktop: `@media screen and (min-width: ${breakpoints.desktop})` +}; + export const Container = styled.div` display: flex; flex-direction: row; @@ -15,8 +25,19 @@ export const StyledButton = styled.button` display: flex; align-items: center; justify-content: center; - width: 180px; - height: 60px; + width: 90px; + height: 50px; + + ${media.mobile} { + width: 90px; + height: 50px; + } + + ${media.desktop} { + width: 180px; + height: 60px; + } + border-radius: 5px; transition: all 0.2s ease; background-color: ${(props) => (props.isActive ? '#FFF4F1' : '#ffffff')}; diff --git a/src/features/diary-write/condition/ui/ConditionButtonGroup.styled.tsx b/src/features/diary-write/condition/ui/ConditionButtonGroup.styled.tsx index f73c63a..dac500c 100644 --- a/src/features/diary-write/condition/ui/ConditionButtonGroup.styled.tsx +++ b/src/features/diary-write/condition/ui/ConditionButtonGroup.styled.tsx @@ -4,6 +4,7 @@ export const Container = styled.div` display: flex; flex-direction: row; align-items: center; - justify-content: space-between; + justify-content: center; gap: 0.5rem; + flex-wrap: wrap; `; diff --git a/src/features/diary-write/emotion/ui/EmotionButtonGroup.styled.ts b/src/features/diary-write/emotion/ui/EmotionButtonGroup.styled.ts index 75af1f3..804de20 100644 --- a/src/features/diary-write/emotion/ui/EmotionButtonGroup.styled.ts +++ b/src/features/diary-write/emotion/ui/EmotionButtonGroup.styled.ts @@ -1,5 +1,15 @@ import styled from 'styled-components'; +const breakpoints = { + mobile: '550px', + desktop: '1024px' +}; + +const media = { + mobile: `@media screen and (min-width: ${breakpoints.mobile})`, + desktop: `@media screen and (min-width: ${breakpoints.desktop})` +}; + export const EmotionButtonContainer = styled.div` max-width: 960px; display: flex; @@ -11,11 +21,19 @@ export const EmotionButtonContainer = styled.div` export const Container = styled.div` display: flex; - flex-direction: row; + flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; + + ${media.mobile} { + flex-direction: column; + } + + ${media.desktop} { + flex-direction: row; + } `; export const MainKeywordContainer = styled.div` diff --git a/src/pages/DiaryWritePage/ui/DiaryWritePage.styled.tsx b/src/pages/DiaryWritePage/ui/DiaryWritePage.styled.tsx index f5712ec..7f88e73 100644 --- a/src/pages/DiaryWritePage/ui/DiaryWritePage.styled.tsx +++ b/src/pages/DiaryWritePage/ui/DiaryWritePage.styled.tsx @@ -1,5 +1,15 @@ import styled from 'styled-components'; +const breakpoints = { + mobile: '550px', + desktop: '1024px' +}; + +const media = { + mobile: `@media screen and (min-width: ${breakpoints.mobile})`, + desktop: `@media screen and (min-width: ${breakpoints.desktop})` +}; + export const Container = styled.div` display: flex; flex-direction: column; @@ -11,8 +21,18 @@ export const Section = styled.div` display: flex; flex-direction: column; align-items: center; - width: 960px; - gap: 200px; + width: 90%; + gap: 50px; + + ${media.mobile} { + width: 90%; + gap: 50px; + } + + ${media.desktop} { + max-width: 960px; + gap: 200px; + } `; export const DisabledOverlay = styled.div<{ disabled: boolean }>` diff --git a/src/shared/EmotionIcon/ui/EmotionIcon.styled.ts b/src/shared/EmotionIcon/ui/EmotionIcon.styled.ts index 2d3cc69..f3c78d9 100644 --- a/src/shared/EmotionIcon/ui/EmotionIcon.styled.ts +++ b/src/shared/EmotionIcon/ui/EmotionIcon.styled.ts @@ -1,9 +1,26 @@ import styled from 'styled-components'; +const breakpoints = { + mobile: '550px', + desktop: '1024px' +}; + +const media = { + mobile: `@media screen and (min-width: ${breakpoints.mobile})`, + desktop: `@media screen and (min-width: ${breakpoints.desktop})` +}; + export const StyledEmotionIcon = styled.div<{ width: string; height: string }>` position: relative; - width: ${({ width }) => width}; - height: ${({ height }) => height}; + + ${media.mobile} { + } + + ${media.desktop} { + width: ${({ width }) => width}; + height: ${({ height }) => height}; + } + & > img { position: absolute; top: 0; diff --git a/src/widgets/date-picker/ui/DatePicker.styled.ts b/src/widgets/date-picker/ui/DatePicker.styled.ts index 5d5bdb3..52aa538 100644 --- a/src/widgets/date-picker/ui/DatePicker.styled.ts +++ b/src/widgets/date-picker/ui/DatePicker.styled.ts @@ -4,7 +4,6 @@ import 'react-calendar/dist/Calendar.css'; export const StyledCalendarWrapper = styled.div` position: relative; - width: 330px; display: flex; justify-content: right; `; diff --git a/src/widgets/header/ui/Header.styled.tsx b/src/widgets/header/ui/Header.styled.tsx index 70fcb92..6e3d4ae 100644 --- a/src/widgets/header/ui/Header.styled.tsx +++ b/src/widgets/header/ui/Header.styled.tsx @@ -14,6 +14,7 @@ export const Container = styled.header` export const Logo = styled.div` display: flex; cursor: pointer; + padding: 0 10px 0 10px; `; export const Nav = styled.nav`