diff --git a/src/components/common/DiaryPreviewContent.js b/src/components/common/DiaryPreviewContent.js index a8ac2be..e96483a 100644 --- 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) => ( - + {diary.diaryTitle} @@ -58,22 +63,14 @@ const DiaryPreviewContent = ({ diaries }) => { )} + + 일기 보러 가기 + ); } - - const goToDiary = () => { - const currentDiary = diaries[currentSlideIndex]; - navigate("/showdiary", {state:currentDiary.diaryID}); - }; - - return ( -
- {content} - 일기 보러 가기 -
- ); + 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 index 918b212..e91334d 100644 --- 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} /> - - + } /> - + ); }; @@ -223,4 +221,8 @@ const CalendarWrapper = styled.div` padding-bottom: 6rem; `; +const StyledDrawer = styled(Drawer)` +`; +const StyledDiaryModal = styled(DiaryModal)` +`;