Chore: modify calendar modal style #84

TripTory · May 23, 2024 · 005f123 · 005f123
1 parent 1c4b566
commit 005f123
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 23 deletions.
diff --git a/src/components/common/DiaryPreviewContent.js b/src/components/common/DiaryPreviewContent.js
@@ -30,6 +30,11 @@ const DiaryPreviewContent = ({ diaries }) => {
     );
   };
 
+  const goToDiary = () => {
+    const currentDiary = diaries[currentSlideIndex];
+    navigate("/showdiary", { state: currentDiary.diaryID });
+  };
+
   let content = null; // 조건부 렌더링을 위한 변수
 
   if (diaries && diaries.length > 0) {
@@ -39,7 +44,7 @@ const DiaryPreviewContent = ({ diaries }) => {
           {diaries.map((diary, index) => (
             <DiaryEntry key={index}>
               <ImgDiv>
-                <DiaryImage src="https://health.chosun.com/site/data/img_dir/2023/05/31/2023053102582_0.jpg" />
+                <DiaryImage src={diary.imagePath} />
               </ImgDiv>
               <TitleDiv>{diary.diaryTitle}</TitleDiv>
               <DateDiv>
@@ -58,22 +63,14 @@ const DiaryPreviewContent = ({ diaries }) => {
             </ButtonRight>
           </>
         )}
+        <ButtonContainer>
+          <GotoDiaryBtn onClick={goToDiary}>일기 보러 가기</GotoDiaryBtn>
+        </ButtonContainer>
       </ContentWrapper>
     );
   }
 
-
-  const goToDiary = () => {
-    const currentDiary = diaries[currentSlideIndex];
-    navigate("/showdiary", {state:currentDiary.diaryID});
-  };
-
-  return (
-    <div>
-      {content}
-      <ButtonContainer><GotoDiaryBtn onClick={goToDiary}>일기 보러 가기</GotoDiaryBtn></ButtonContainer>
-    </div>
-  );
+  return <>{content}</>;
 };
 
 export default DiaryPreviewContent;
@@ -91,15 +88,18 @@ DiaryPreviewContent.propTypes = {
 };
 
 const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 100%;
-  height: 85%;
+  height: 100%;
   overflow: hidden;
   position: relative;
 `;
 
 const Slider = styled.div`
   width: 98%;
-  height: 100%;
+  height: 80%;
   display: flex;
   overflow: hidden;
   scroll-behavior: smooth;
@@ -170,9 +170,10 @@ const ButtonRight = styled(Button)`
 
 const ButtonContainer = styled.div`
   width: 100%;
-  height: 18%;
+  height: 20%;
   display: flex;
   justify-content: center;
+  align-items: center;
 `;
 
 const GotoDiaryBtn = styled.button`

diff --git a/src/components/common/TripCalendar.js b/src/components/common/TripCalendar.js
@@ -26,7 +26,8 @@ const TripCalendar = ({ diaryInfo }) => {
     // 선택된 날짜에 해당하는 모든 일기를 뽑아서 리턴하기
     const selected = diaryInfo.filter(
       (item) =>
-        moment(item.date).format("YYYY") === moment(diary.date).format("YYYY") &&
+        moment(item.date).format("YYYY") ===
+          moment(diary.date).format("YYYY") &&
         moment(item.date).format("M") === moment(diary.date).format("M") &&
         moment(item.date).format("D") === moment(diary.date).format("D"),
     );
@@ -74,7 +75,6 @@ const TripCalendar = ({ diaryInfo }) => {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              color: "white",
               position: "absolute",
             }}
             onClick={() => showDiary(diary)} // 선택된 일기 정보 업데이트
@@ -85,8 +85,6 @@ const TripCalendar = ({ diaryInfo }) => {
       }
     }
     return null;
-
-
   };
 
   return (
@@ -102,11 +100,11 @@ const TripCalendar = ({ diaryInfo }) => {
         tileContent={tileContent}
         tileClassName={tileClassName}
       />
-      <Drawer anchor="bottom" open={isOpen} onClose={toggleDrawer(false)}>
-        <DiaryModal
+      <StyledDrawer anchor="bottom" open={isOpen} onClose={toggleDrawer(false)}>
+        <StyledDiaryModal
           content={<DiaryPreviewContent diaries={selectedDiary} />}
         />
-      </Drawer>
+      </StyledDrawer>
     </CalendarWrapper>
   );
 };
@@ -223,4 +221,8 @@ const CalendarWrapper = styled.div`
   padding-bottom: 6rem;
 `;
 
+const StyledDrawer = styled(Drawer)`
+`;
 
+const StyledDiaryModal = styled(DiaryModal)`
+`;