style : 일기 작성 페이지 반응형 디자인 적용 (#265)

prgrms-fe-devcourse · Nov 7, 2024 · b720327 · b720327
1 parent 265b9ac
commit b720327
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 12 deletions.
diff --git a/.vscode/settings.json 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
@@ -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
@@ -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<ButtonProps>`
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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`