style : 일기조회 페이지 반응형 (#267)

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

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/src/pages/DetailPage/ui/DetailPage.styled.ts b/src/pages/DetailPage/ui/DetailPage.styled.ts
@@ -5,27 +5,33 @@ export const Container = styled.div`
     flex-direction: column;
     align-items: center;
     gap: 10px;
-
-    margin-top: 150px;
     margin-bottom: 100px;
 `;
 
 export const ContentContainer = styled.div`
     max-width: 960px;
-    width: 100%;
+    width: 90%;
     display: flex;
     flex-direction: column;
     align-items: center;
+    margin-top: 150px;
+
+    @media (max-width: 550px) {
+        margin-top: 50px;
+    }
 `;
 
 export const Wrap = styled.div`
     max-width: 960px;
-    width: 100%;
+    width: 90%;
     display: flex;
-    // flex-direction: column; // 모바일 버전일 때
     align-items: stretch;
 
     gap: 10px;
+
+    @media (max-width: 550px) {
+        flex-direction: column;
+    }
 `;
 
 export const MusicContainer = styled.div`
@@ -36,6 +42,7 @@ export const EmotionMoodWrap = styled.div`
     flex: 1;
     display: flex;
     flex-direction: column;
+    width: 100%;
 
     gap: 10px;
 `;
@@ -55,19 +62,33 @@ export const EmotionWrap = styled.div`
 
 export const MainEmotionContainer = styled.div`
     flex: 1.2;
+
+    @media (max-width: 550px) {
+        flex: 1;
+    }
 `;
 export const SubEmotionContainer = styled.div`
     flex: 2;
+
+    @media (max-width: 550px) {
+        flex: 1;
+    }
 `;
 
 export const ReactionShareWrap = styled.div`
     max-width: 960px;
-    width: 100%;
-    height: 300px;
+    width: 90%;
+    margin: 100px 0;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
+
+    @media (max-width: 550px) {
+        flex-direction: column;
+        margin: 50px 0;
+        gap: 20px;
+    }
 `;
 
 export const ReactionContainer = styled.div`
@@ -77,6 +98,10 @@ export const ReactionContainer = styled.div`
 export const ShareButtonContainer = styled.div`
     position: absolute;
     right: 0;
+
+    @media (max-width: 550px) {
+        position: static;
+    }
 `;
 
 export const ButtonContainer = styled.div`

diff --git a/src/widgets/diary-text/ui/DiaryText.styled.ts b/src/widgets/diary-text/ui/DiaryText.styled.ts
@@ -12,6 +12,11 @@ export const StyledDiaryTitleContainer = styled.p`
     width: 100%;
     margin: 40px 0 0 0;
     padding: 0;
+
+    @media (max-width: 550px) {
+        flex-direction: column;
+        gap: 10px;
+    }
 `;
 
 export const StyledDiaryDate = styled.p`
@@ -22,26 +27,39 @@ export const StyledDiaryDate = styled.p`
     padding: 0;
 `;
 
+export const Wrap = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+`;
+
 export const StyledDiaryTitle = styled.p`
     width: 100%;
     font-size: 28px;
     font-weight: 600;
     text-align: center;
-    flex-grow: 1;
     margin: 0;
     padding: 0;
 `;
 export const StyledVisibilityButton = styled.div`
     position: absolute;
+
+    @media (max-width: 550px) {
+        position: static;
+    }
 `;
 
 export const StyledDiaryAuthor = styled.p`
+    width: 100%;
     font-size: 16px;
     font-weight: 500;
     color: #3a3a3a;
     text-align: center;
     margin: 0;
-    padding: 5px 0 0 0;
+    padding: 0;
 `;
 export const StyledDiaryUpdateDate = styled.p`
     font-size: 14px;

diff --git a/src/widgets/diary-text/ui/DiaryText.tsx b/src/widgets/diary-text/ui/DiaryText.tsx
@@ -9,7 +9,8 @@ import {
     StyledDiaryTitle,
     StyledDiaryTitleContainer,
     StyledDiaryUpdateDate,
-    StyledVisibilityButton
+    StyledVisibilityButton,
+    Wrap
 } from './DiaryText.styled';
 import { VisibilityButton } from '@/features/diary-write';
 
@@ -27,7 +28,10 @@ const DiaryText = ({
         <StyledDiaryTextContainer>
             <StyledDiaryDate>{titleDate}</StyledDiaryDate>
             <StyledDiaryTitleContainer>
-                <StyledDiaryTitle>{title}</StyledDiaryTitle>
+                <Wrap>
+                    <StyledDiaryTitle>{title}</StyledDiaryTitle>
+                    <StyledDiaryAuthor>{author}</StyledDiaryAuthor>
+                </Wrap>
                 <StyledVisibilityButton>
                     <VisibilityButton
                         isPublic={isPublic}
@@ -36,7 +40,6 @@ const DiaryText = ({
                     />
                 </StyledVisibilityButton>
             </StyledDiaryTitleContainer>
-            <StyledDiaryAuthor>{author}</StyledDiaryAuthor>
             <StyledDiaryUpdateDate>{updateDate}</StyledDiaryUpdateDate>
             <StyledDiaryContent>{diaryContent}</StyledDiaryContent>
         </StyledDiaryTextContainer>