style : 이모티콘 반응형 수정 (#270)

* style : 이모티콘 반응형 수정 * style : datePicker css 수정
prgrms-fe-devcourse · Nov 7, 2024 · 10f17f7 · 10f17f7
1 parent 196a579
commit 10f17f7
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 27 deletions.
diff --git a/src/entities/KeywordButton/ui/KeywordButton.styled.ts b/src/entities/KeywordButton/ui/KeywordButton.styled.ts
@@ -6,8 +6,8 @@ const breakpoints = {
 };
 
 const media = {
-    mobile: `@media screen and (min-width: ${breakpoints.mobile})`,
-    desktop: `@media screen and (min-width: ${breakpoints.desktop})`
+    mobile: `@media screen and (max-width: ${breakpoints.mobile})`,
+    desktop: `@media screen and (max-width: ${breakpoints.desktop})`
 };
 
 export const StyledButton = styled.button<{ isActive: boolean }>`
@@ -17,21 +17,21 @@ export const StyledButton = styled.button<{ isActive: boolean }>`
     ${media.mobile} {
         width: 150px;
         height: 50px;
+        gap: 5px;
+        flex-direction: row;
     }
 
-    ${media.desktop} {
-        width: 175px;
-        height: 134px;
-        gap: 10px;
-    }
+    width: 175px;
+    height: 134px;
+    gap: 10px;
+    flex-direction: column;
 
     border: 1px solid
         ${(props) =>
             props.isActive ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.1)'};
     border-radius: 10px;
     background-color: #ffffff;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     font-size: 14px;

diff --git a/src/pages/DetailPage/ui/DetailPage.styled.ts b/src/pages/DetailPage/ui/DetailPage.styled.ts
@@ -16,7 +16,7 @@ export const ContentContainer = styled.div`
     align-items: center;
     margin-top: 150px;
 
-    @media (max-width: 550px) {
+    @media (max-width: 768px) {
         margin-top: 50px;
     }
 `;
@@ -29,7 +29,7 @@ export const Wrap = styled.div`
 
     gap: 10px;
 
-    @media (max-width: 550px) {
+    @media (max-width: 768px) {
         flex-direction: column;
     }
 `;
@@ -56,21 +56,24 @@ export const EmotionWrap = styled.div`
     flex: 1;
     width: 100%;
     display: flex;
-
     gap: 10px;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+    }
 `;
 
 export const MainEmotionContainer = styled.div`
     flex: 1.2;
 
-    @media (max-width: 550px) {
+    @media (max-width: 768px) {
         flex: 1;
     }
 `;
 export const SubEmotionContainer = styled.div`
     flex: 2;
 
-    @media (max-width: 550px) {
+    @media (max-width: 768px) {
         flex: 1;
     }
 `;
@@ -84,7 +87,7 @@ export const ReactionShareWrap = styled.div`
     align-items: center;
     position: relative;
 
-    @media (max-width: 550px) {
+    @media (max-width: 768px) {
         flex-direction: column;
         margin: 50px 0;
         gap: 20px;
@@ -99,7 +102,7 @@ export const ShareButtonContainer = styled.div`
     position: absolute;
     right: 0;
 
-    @media (max-width: 550px) {
+    @media (max-width: 768px) {
         position: static;
     }
 `;

diff --git a/src/shared/EmotionIcon/ui/EmotionIcon.styled.ts b/src/shared/EmotionIcon/ui/EmotionIcon.styled.ts
@@ -6,20 +6,20 @@ const breakpoints = {
 };
 
 const media = {
-    mobile: `@media screen and (min-width: ${breakpoints.mobile})`,
-    desktop: `@media screen and (min-width: ${breakpoints.desktop})`
+    mobile: `@media screen and (max-width: ${breakpoints.mobile})`,
+    desktop: `@media screen and (max-width: ${breakpoints.desktop})`
 };
 
 export const StyledEmotionIcon = styled.div<{ width: string; height: string }>`
     position: relative;
 
     ${media.mobile} {
+        width: 25px;
+        height: 25px;
     }
 
-    ${media.desktop} {
-        width: ${({ width }) => width};
-        height: ${({ height }) => height};
-    }
+    width: ${({ width }) => width};
+    height: ${({ height }) => height};
 
     & > img {
         position: absolute;

diff --git a/src/widgets/date-picker/ui/DatePicker.styled.ts b/src/widgets/date-picker/ui/DatePicker.styled.ts
@@ -4,6 +4,7 @@ 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/diary-text/ui/DiaryText.styled.ts b/src/widgets/diary-text/ui/DiaryText.styled.ts
@@ -13,7 +13,7 @@ export const StyledDiaryTitleContainer = styled.p`
     margin: 40px 0 0 0;
     padding: 0;
 
-    @media (max-width: 550px) {
+    @media (max-width: 870px) {
         flex-direction: column;
         gap: 10px;
     }
@@ -37,7 +37,7 @@ export const Wrap = styled.div`
 `;
 
 export const StyledDiaryTitle = styled.p`
-    width: 100%;
+    padding: 70px 0;
     font-size: 28px;
     font-weight: 600;
     text-align: center;
@@ -47,13 +47,12 @@ export const StyledDiaryTitle = styled.p`
 export const StyledVisibilityButton = styled.div`
     position: absolute;
 
-    @media (max-width: 550px) {
+    @media (max-width: 870px) {
         position: static;
     }
 `;
 
 export const StyledDiaryAuthor = styled.p`
-    width: 100%;
     font-size: 16px;
     font-weight: 500;
     color: #3a3a3a;

diff --git a/src/widgets/show-main-emotion/ui/ShowMainEmotionContainer.styles.ts b/src/widgets/show-main-emotion/ui/ShowMainEmotionContainer.styles.ts
@@ -14,6 +14,11 @@ export const Container = styled.div`
     font-size: 16px;
     font-weight: bold;
     font-family: 'Pretendard', sans-serif;
+
+    @media (max-width: 768px) {
+        gap: 10px;
+        align-items: start;
+    }
 `;
 
 export const SubContainer = styled.div`

diff --git a/src/widgets/show-sub-emotion/ui/ShowSubEmotionContainer.styled.ts b/src/widgets/show-sub-emotion/ui/ShowSubEmotionContainer.styled.ts
@@ -12,6 +12,13 @@ export const Container = styled.div`
     font-size: 16px;
     font-weight: bold;
     font-family: 'Pretendard', sans-serif;
+
+    @media (max-width: 768px) {
+        gap: 10px;
+        display: flex;
+        flex-direction: column;
+        // align-items: center;
+    }
 `;
 
 export const SubContainer = styled.div`

diff --git a/src/widgets/write-diary/ui/WriteDiaryContainer.styled.tsx b/src/widgets/write-diary/ui/WriteDiaryContainer.styled.tsx
@@ -11,18 +11,25 @@ export const Container = styled.div`
 
 export const SelectDateContainer = styled.div`
     display: flex;
-    justify-content: space-between;
+    justify-content: right;
     align-items: center;
     width: 100%;
 `;
 
 export const DateContainer = styled.div`
+    position: absolute;
+    left: 0;
+
     font-size: 24px;
     font-weight: bold;
     font-family: 'Pretendard', sans-serif;
 `;
 
-export const DatePickeContainer = styled.div``;
+export const DatePickeContainer = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: right;
+`;
 
 export const TitleContainer = styled.div``;