From 49ec050ff4282c663b117189c41ec7332d4dbcf8 Mon Sep 17 00:00:00 2001
From: daahyunk <ekgusdl0408@naver.com>
Date: Fri, 31 May 2024 09:47:20 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=ED=96=89=EB=B3=B5=20=EC=88=98?=
 =?UTF-8?q?=EC=A7=91=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SuzipPage.tsx | 39 +++++++++++++--------------------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/src/pages/SuzipPage.tsx b/src/pages/SuzipPage.tsx
index 98040d1..bee54c9 100644
--- a/src/pages/SuzipPage.tsx
+++ b/src/pages/SuzipPage.tsx
@@ -110,7 +110,7 @@ const ContentContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 15vh;
+  margin-top: 10vh;
 `;
 
 const StyledImage = styled.img`
@@ -119,23 +119,28 @@ const StyledImage = styled.img`
   object-fit: contain;
 `;
 
-const TitleDateContainer = styled.div<{ imageWidth: number }>`
+const TitleDateContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  align-items: center;
   margin-top: 10px;
-  width: ${(props) => props.imageWidth}px;
+  width: 100%;
+  margin-bottom: 2vh;
 `;
 
 const Title = styled.p`
   font-family: "Pretendard";
-  font-size: 1.2em;
+  font-size: 1.3em;
   margin: 0;
+  text-align: center;
+  font-weight: 500;
 `;
 
 const DateText = styled.p`
   font-family: "Pretendard";
   font-size: 1.1em;
   margin: 0;
+  text-align: center;
 `;
 
 const NoImageText = styled.div`
@@ -149,8 +154,6 @@ const SuzipPage: React.FC = () => {
   const [diaryDate, setDiaryDate] = useState("");
   const [diaryTitle, setDiaryTitle] = useState("");
   const [scrollY, setScrollY] = useState(0);
-  const [imageWidth, setImageWidth] = useState(0);
-  const imageRef = useRef<HTMLImageElement>(null);
   const navigate = useNavigate(); // useNavigate 훅 사용
 
   const fetchDiaryData = async () => {
@@ -202,22 +205,6 @@ const SuzipPage: React.FC = () => {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  useEffect(() => {
-    if (imageRef.current) {
-      const handleResize = () => {
-        if (imageRef.current) {
-          const width = imageRef.current.getBoundingClientRect().width;
-          setImageWidth(width);
-          console.log("Image width:", width);
-        }
-      };
-
-      handleResize(); // Initial call to set the width
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }
-  }, [diaryImage]);
-
   return (
     <PageContainer>
       <Frame1Container>
@@ -239,16 +226,16 @@ const SuzipPage: React.FC = () => {
       <ContentContainer>
         {diaryImage ? (
           <>
-            <StyledImage src={diaryImage} alt="Diary Image" ref={imageRef} />
-            <TitleDateContainer imageWidth={imageWidth}>
+            <TitleDateContainer>
               <Title>{diaryTitle}</Title>
               <DateText>{diaryDate}</DateText>
             </TitleDateContainer>
+            <StyledImage src={diaryImage} alt="Diary Image" />
           </>
         ) : (
           <>
             <NoImageText>No Image</NoImageText>
-            <TitleDateContainer imageWidth={imageWidth}>
+            <TitleDateContainer>
               <Title>{diaryTitle}</Title>
               <DateText>{diaryDate}</DateText>
             </TitleDateContainer>