From f9f03f4bd17013fd56222a0ba6c552395e668f03 Mon Sep 17 00:00:00 2001
From: kangminguu <131148077+kangminguu@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:21:50 +0900
Subject: [PATCH] =?UTF-8?q?style=20:=20=EC=9D=BC=EA=B8=B0=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20(#267)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/DetailPage/ui/DetailPage.styled.ts  | 39 +++++++++++++++----
 src/widgets/diary-text/ui/DiaryText.styled.ts | 22 ++++++++++-
 src/widgets/diary-text/ui/DiaryText.tsx       |  9 +++--
 3 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/src/pages/DetailPage/ui/DetailPage.styled.ts b/src/pages/DetailPage/ui/DetailPage.styled.ts
index c0d8e58..71709ad 100644
--- 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
index de92178..6adb558 100644
--- 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
index 2411d18..32c0d63 100644
--- 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>