diff --git a/public/write.png b/public/write.png new file mode 100644 index 0000000..0096633 Binary files /dev/null and b/public/write.png differ diff --git "a/public/\352\260\220\354\240\225\352\267\270\353\236\230\355\224\204.png" "b/public/\352\260\220\354\240\225\352\267\270\353\236\230\355\224\204.png" new file mode 100644 index 0000000..da19f49 Binary files /dev/null and "b/public/\352\260\220\354\240\225\352\267\270\353\236\230\355\224\204.png" differ diff --git "a/public/\353\213\254\353\240\245.png" "b/public/\353\213\254\353\240\245.png" index a8d91cc..3a4b4de 100644 Binary files "a/public/\353\213\254\353\240\245.png" and "b/public/\353\213\254\353\240\245.png" differ diff --git "a/public/\354\235\274\352\270\260\354\236\221\354\204\261.png" "b/public/\354\235\274\352\270\260\354\236\221\354\204\261.png" new file mode 100644 index 0000000..41c55a3 Binary files /dev/null and "b/public/\354\235\274\352\270\260\354\236\221\354\204\261.png" differ diff --git "a/public/\355\225\234\353\247\210\353\224\224.png" "b/public/\355\225\234\353\247\210\353\224\224.png" new file mode 100644 index 0000000..7ebfa8a Binary files /dev/null and "b/public/\355\225\234\353\247\210\353\224\224.png" differ diff --git a/src/app/components/Calendar.tsx b/src/app/components/Calendar.tsx index edc3590..4377ecd 100644 --- a/src/app/components/Calendar.tsx +++ b/src/app/components/Calendar.tsx @@ -60,13 +60,16 @@ const ModalCalendar = ({ isOpen, closeModal }: any) => { value: Date, e: React.MouseEvent, ) => { - e.stopPropagation() - const formattedDate = moment(value).format('YYYY-MM-DD') - const destinationUrl = getDestinationUrl(formattedDate) - router.push(destinationUrl) - - // 페이지 이동 후에 달력을 닫도록 onChange 함수 호출 - onChange(null) // 또는 다른 원하는 값으로 초기화 + e.stopPropagation(); + const formattedDate = moment(value).format('YYYY-MM-DD'); + const destinationUrl = getDestinationUrl(formattedDate); + router.push(destinationUrl); + + // Call closeModal to close the modal calendar + closeModal(); + + // Optionally, you can still reset the calendar's value state if needed + onChange(null); // or any other value you want to reset to } const handleMarking = ( diff --git a/src/app/components/Nav.tsx b/src/app/components/Nav.tsx index ea745a2..977509f 100644 --- a/src/app/components/Nav.tsx +++ b/src/app/components/Nav.tsx @@ -29,10 +29,11 @@ const Nav: React.FC = () => { const [inputValue, setInputValue] = useState('') // 일기검색 const [user, setUser] = useRecoilState(userInfo) const [isCalendarOpen, setIsCalendarOpen] = useState(false) //달력모달 - const [searchBlur, setSearchBlur] = useState(false) // 검색창 선 색상 변경 용도 + const [userImg, setUserImg] = useState('') // 유저 이미지 const [snowTheme, setSnowTheme] = useState(false) - const [searchBlur, setSearchBlur] = useState(false) + + const themeOnClick = () => { setSnowTheme(!snowTheme) @@ -80,9 +81,7 @@ const Nav: React.FC = () => { setIsCalendarOpen(!isCalendarOpen) } - const handleBlur = () => { - setSearchBlur(!searchBlur) - } + useEffect(() => { // 초기 렌더링 시 테마를 라이트 모드로 설정 if (currentTheme !== 'light') { @@ -122,14 +121,7 @@ const Nav: React.FC = () => { priority onClick={onClickSearch} /> - setSearchBlur(true)} - onBlur={() => setSearchBlur(false)} - /> +
diff --git a/src/app/components/NotLoginMain.tsx b/src/app/components/NotLoginMain.tsx index 52cc188..8e47e1f 100644 --- a/src/app/components/NotLoginMain.tsx +++ b/src/app/components/NotLoginMain.tsx @@ -1,7 +1,8 @@ import { useState } from "react"; +import Link from 'next/link'; const NotLoginMain = () => { - const [hover, setHover] = useState(null); + const [hover, setHover] = useState('first'); // 초기값 설정 const [lastHoveredImage, setLastHoveredImage] = useState(null); const handleMouseOver = (image: string) => { @@ -10,13 +11,19 @@ const NotLoginMain = () => { }; const handleMouseOut = () => { - + }; const renderImage = (imageSource: string) => { return ( -
- Descriptive Text of Image +
+ + Descriptive Text of Image +
); }; @@ -30,86 +37,113 @@ const NotLoginMain = () => {
- 하루를 기록하는 일기 + 감정을 기록하는 일기 - + 당신의 감정을 기록하고, 되돌아 보세요. - - 내 감정을 기록하기 - + + + 내 감정을 기록하기 + +
-
+
- Descriptive Text of Image + Descriptive Text of Image
-
+
{/* 일기 작성하기 Section */} -
-
+
handleMouseOver('first')} onMouseOut={() => handleMouseOut()} > -
-
- 일기 작성하기 +
+
+ 일기 작성 +
+
+

+ + "일기를 작성하면
AI가 감정을 알려줘요." +

{/* 나에게 한 마디 Section */} -
-
+
handleMouseOver('second')} onMouseOut={() => handleMouseOut()} > -
-
- 나에게 한 마디 +
+
+ 나에게 한 마디 +
+
+

+ "오늘 하루 있던 일을 털어놔 봐요.
AI가 조언해 줄거에요." +

{/* 달력 보기 Section */} -
-
+
handleMouseOver('third')} onMouseOut={() => handleMouseOut()} > -
-
- 달력 보기 +
+
+ 달력 보기 +
+
+

+ "한달 간의 감정을 둘러보고,
일기를 다시 들여다 보아요." +

{/* 감정 그래프 Section */} -
-
+
handleMouseOver('fourth')} onMouseOut={() => handleMouseOut()} > -
-
- 감정 그래프 +
+
+ 감정 그래프 +
+
+

+ "한 달 간의 감정 추이를 보며,
자신의 감정을 조절 해봐요." +

+ {/* 페이지 이용 방법 이미지 Section */} - {shouldRenderImage('first') && renderImage("/cat.jpg")} - {shouldRenderImage('second') && renderImage("/catcatcat.png")} + {shouldRenderImage('first') && renderImage("/일기작성.png")} + {shouldRenderImage('second') && renderImage("/한마디.png")} {shouldRenderImage('third') && renderImage("/달력.png")} - {shouldRenderImage('fourth') && renderImage("/cat1.png")} + {shouldRenderImage('fourth') && renderImage("/감정그래프.png")} {/* 나머지 컴포넌트 부분 */} -
- - 감정을 기록하러 가볼까요? - +
+ {/* 로그인 페이지로 이동하는 Link */} + + + 감정을 기록하러 가볼까요? + +
diff --git a/src/app/components/cal.css b/src/app/components/cal.css index 216af4e..eed525e 100644 --- a/src/app/components/cal.css +++ b/src/app/components/cal.css @@ -7,52 +7,44 @@ /* 달력 몸통 */ .react-calendar { - min-width: 550px; /* 달력의 너비 - 모바일 화면에 적합하게 조정 */ + min-width: 550px; border-radius: 20px; border: 3px solid #afa4ce; display: flex; flex-direction: column; - margin: auto; /* 수평 중앙 정렬 */ - margin-top: 75px; /* 상단에서의 마진 */ - /*max-height: 700px; /* 부모 요소의 높이를 따르도록 설정 */ + margin: auto; + margin-top: 75px; height: 760px; overflow-y: auto !important; - position: relative; /* 추가: 상대 위치 설정 */ + position: relative; } /* 달력 내부 스타일 */ .react-calendar__month-view { - min-height: 420px !important; /* 내부 높이를 자동으로 조절 */ + min-height: 420px !important; display: flex; flex-direction: column; - margin: auto; /* 수평 중앙 정렬 */ - margin-top: px; /* 상단에서의 마진 */ - max-height: 620px; /* 부모 요소의 높이를 따르도록 설정 */ - overflow-y: auto !important; /* 내용이 넘칠 경우 스크롤 표시 */ - position: relative; /* 추가: 상대 위치 설정 */ + margin: auto; + max-height: 620px; + overflow-y: auto !important; + position: relative; } -/* 달력 내부 스타일 */ .react-calendar__month-view__days { margin-top: 10px; - overflow-y: auto; /* 내용이 넘칠 경우 스크롤 표시 */ + overflow-y: auto; } /* 오버레이 스타일 */ .react-calendar::before { content: ''; - position: fixed; /* 변경: 오버레이를 화면에 고정합니다. */ + position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background-color: rgba( - 0, - 0, - 0, - 0.3 - ); /* 검정색 오버레이 색상 및 투명도 조절 */ - z-index: -1; /* 달력 아래로 배치 */ + background-color: rgba(0, 0, 0, 0.3); + z-index: -1; } .calendar-container { @@ -69,70 +61,21 @@ cursor: pointer; } -/* 미디어 쿼리 반응형 */ -@media screen and (min-width: 768px) { - .react-calendar { - min-width: 62%; /* 중간 크기 화면에 적합한 너비 */ - max-width: 900px; /* 최대 너비 */ - } - .react-calendar__navigation { - background-color: #e6e6fa; - border-bottom: 4px solid #afa4ce; - height: 100px !important; /* 크기를 고정합니다. */ - border-radius: 17px 17px 0 0; - overflow: hidden; - } - - .react-calendar__navigation span { - font-size: 32px; - } - - .react-calendar__navigation__next-button, - .react-calendar__navigation__prev-button { - font-size: 40px; - } -} - -/* 더 큰 화면을 위한 미디어 쿼리 */ -@media screen and (min-width: 1024px) { - .react-calendar { - min-width: 50%; /* 더 큰 화면에 적합한 너비 */ - } -} - -/* 다크 모드 스타일 */ -@media (prefers-color-scheme: dark) { - .react-calendar { - background-color: #333; /* 어두운 배경색 */ - color: white; /* 흰색 글자 */ - } -} - -/* 기타 스타일 설정 */ -/* ... (나머지 스타일 설정은 동일하게 유지) */ - /* 달력 상단 */ .react-calendar__navigation { background-color: #e6e6fa; border-bottom: 4px solid #afa4ce; - height: 80px; /* 높이 조절을 원하는 값으로 수정 */ + height: 80px; border-radius: 17px 17px 0 0; + z-index:100; } -/* 상단 안쪽 글자 */ .react-calendar__navigation span { font-size: 24px; font-weight: 600; color: black; } -/* <> 글자 크기 */ -.react-calendar__navigation__next-button, -.react-calendar__navigation__prev-button { - font-size: 30px; -} - -/* <> 글자 마우스 올렸을 때 색상 */ .react-calendar__navigation button:enabled:hover, .react-calendar__navigation button:enabled:focus { color: red; @@ -140,87 +83,24 @@ /* 달력 안쪽 여백 */ .react-calendar__month-view { - padding: 20px 36px; -} - -.react-calendar__month-view__days { - margin-top: 10px; - height: 450; -} - -.react-calendar__tile { - width: 40px; /* 날짜별 칸의 너비를 조절합니다. */ - height: 105px !important; /* 날짜별 칸의 높이를 조절합니다. */ - font-size: 16px; /* 날짜의 글꼴 크기를 조절합니다. */ - margin-top: 10px; -} - -/* 날짜 색상 및 크기 */ -.react-calendar__month-view abbr { - color: black; - font-size: 20px; - font-weight: 600; -} - -.react-calendar__month-view__days__day { - margin-top: 10px; -} - -/* 요일 색상 및 크기 */ -.react-calendar__month-view__weekdays abbr { - font-size: 20px; - font-weight: 900; - color: black; - text-decoration: none; -} -.react-calendar__tile--active.react-calendar__year-view__months__month { - background-color: transparent; - color: black; - border-radius: 0; - pointer-events: auto; /* 클릭 이벤트 활성화 */ -} - -.react-calendar__year-view__months abbr { - pointer-events: auto; /* 클릭 이벤트 활성화 */ + padding: 25px 30px; } .react-calendar__month-view__days { margin-top: 10px; -} - -/* 요일 색상 및 크기 */ -.react-calendar__month-view__weekdays__weekday:nth-child(1) abbr /* 일 */ { - font-size: 20px; - font-weight: 900; - color: red !important; /* 검정색으로 수정 */ - text-decoration: none; -} - -.react-calendar__month-view__weekdays__weekday:nth-child(7) abbr /* 일 */ { - font-size: 20px; - font-weight: 900; - color: blue !important; /* 검정색으로 수정 */ - text-decoration: none; -} - -.react-calendar__month-view__weekdays:nth-child(6), /* 목요일 */ -.react-calendar__month-view__weekdays:nth-child(7) { - font-size: 20px; - font-weight: 900; - color: red !important; /* 검정색으로 수정 */ - text-decoration: none; + height: 450px; } /* 날짜별 칸 스타일 */ .react-calendar__tile { text-align: center; - height: 87px; /* 수정된 부분: 날짜별 칸의 높이를 조절합니다. */ + height: 95px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; - margin-top: 10px !important; /* 수정된 부분: 날짜 간의 간격을 조절합니다. */ + margin-top: 10px !important; } /* 날짜 클릭했을 때 칸 색상 */ @@ -231,76 +111,65 @@ border-radius: 14px; } -.react-calendar__tile--active, -.react-calendar__tile--now { - pointer-events: auto; /* 클릭 이벤트 비활성화 */ - background-color: rgba(215, 175, 211, 0.3); /* RGB에 투명도 추가 */ - border-radius: 14px; - height: 87px; -} - -.react-calendar__navigation__prev2-button { - display: none; -} - -.react-calendar__navigation__next-button { - background: none; -} - -.react-calendar__navigation__next2-button { - display: none; -} - -.react-calendar__navigation__next-button, -.react-calendar__navigation__prev-button, -.react-calendar__navigation__label:hover { - background: none !important; -} - -.react-calendar__navigation__label { - font-size: 24px; - font-weight: 600; -} - -.dot-img { - width: 100%; - height: 80%; - display: flex; - justify-content: center; - align-items: center; +/* 요일 색상 및 크기 */ +.react-calendar__month-view__weekdays abbr { + font-size: 20px; + font-weight: 900; + color: black; + text-decoration: none; } -/* 스티커 크기 */ -.dot-img { - width: 100%; - height: 80%; - display: flex; - justify-content: center; - align-items: center; - pointer-events: auto; /* 클릭 이벤트 활성화 */ +.react-calendar__month-view__weekdays__weekday:nth-child(1) abbr, +.react-calendar__month-view__weekdays__weekday:nth-child(7) abbr { + color: red !important; } -/* 스티커 크기 */ +/* 스티커 스타일 */ +.dot-img, .dot { - width: 80px; /* 이미지의 너비를 조절합니다. */ - height: 80px; /* 이미지의 높이를 조절합니다. */ + width: 80px; + height: 80px; display: flex; justify-content: center; align-items: center; - pointer-events: auto; /* 클릭 이벤트 활성화 */ + pointer-events: auto; } .dot img { - max-width: 100%; /* 이미지의 최대 너비를 조절하여 비율을 유지합니다. */ - max-height: 100%; /* 이미지의 최대 높이를 조절하여 비율을 유지합니다. */ - pointer-events: auto; /* 클릭 이벤트 활성화 */ + max-width: 100%; + max-height: 100%; + pointer-events: auto; } -.calendar-container { - position: relative; /* 컨테이너 위치 설정 */ +/* 미디어 쿼리 반응형 */ +@media screen and (min-width: 768px) { + .react-calendar { + min-width: 62%; + max-width: 900px; + } + .react-calendar__navigation { + height: 100px !important; + } + .react-calendar__navigation span { + font-size: 32px; + } + .react-calendar__navigation__next-button, + .react-calendar__navigation__prev-button { + font-size: 40px; + } } -.react-calendar { - position: relative; - overflow-y: auto !important; +/* 더 큰 화면을 위한 미디어 쿼리 */ +@media screen and (min-width: 1024px) { + .react-calendar { + min-width: 50%; + } +} + +/* 다크 모드 스타일 */ +@media (prefers-color-scheme: dark) { + .react-calendar { + background-color: #333; + color: white; + } }