From 87622dc6159ff8d08213308acbcb4148af699d84 Mon Sep 17 00:00:00 2001 From: ry0218 Date: Sat, 16 Nov 2024 05:14:43 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20memoPage=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MemoPage/index.style.ts | 27 ++++++++++++++++++++------- src/pages/MemoPage/index.tsx | 30 +++++++++++++++++++----------- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/pages/MemoPage/index.style.ts b/src/pages/MemoPage/index.style.ts index 21b7b18..1d8b702 100644 --- a/src/pages/MemoPage/index.style.ts +++ b/src/pages/MemoPage/index.style.ts @@ -31,12 +31,14 @@ export const SelectWrapper = styled.div` `; export const Select = styled.select` - padding: 5px 10px; + padding: 8px 12px; font-size: 16px; border: 1px solid var(--color-gray); - border-radius: 4px; - background-color: #ffffff; - color: #333; + border-radius: 8px; + background-color: var(--color-white); + color: var(--color-darkgray); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + transition: border-color 0.3s; &:focus { outline: none; @@ -44,6 +46,17 @@ export const Select = styled.select` } `; +export const Option = styled.option` + font-size: 16px; + padding: 10px; + background-color: var(--color-white); + color: var(--color-darkgray); + + &:hover { + background-color: var(--color-lightgray); + } +`; + export const DateText = styled.div` font-size: 20px; font-weight: bold; @@ -67,7 +80,7 @@ export const DateItem = styled.div<{ isSelected: boolean; isToday: boolean }>` cursor: pointer; font-size: 16px; color: ${({ isSelected }) => (isSelected ? "#ffffff" : "#333")}; - background-color: ${({ isSelected, isToday }) => (isSelected ? "#4caf50" : isToday ? "#e0e0e0" : "transparent")}; + background-color: ${({ isSelected, isToday }) => (isSelected ? "var(--color-primary)" : isToday ? "#e0e0e0" : "transparent")}; border-radius: 20px; padding: 5px 10px; min-width: 60px; @@ -124,7 +137,7 @@ export const AddButton = styled.button` font-size: 40px; padding: 10px 20px; cursor: pointer; - background-color: #4caf50; + background-color: var(--color-primary); color: #ffffff; border-radius: 30px; @@ -189,4 +202,4 @@ export const ButtonContainer = styled.div` display: flex; justify-content: space-between; gap: 10px; -`; +`; \ No newline at end of file diff --git a/src/pages/MemoPage/index.tsx b/src/pages/MemoPage/index.tsx index de05af5..d593cf7 100644 --- a/src/pages/MemoPage/index.tsx +++ b/src/pages/MemoPage/index.tsx @@ -22,17 +22,20 @@ export const MemoPage = (): JSX.Element => { const calendarRef = useRef(null); const navigate = useNavigate(); - // 오늘 날짜를 문자열 형식으로 가져오기 - const today = new Date().toISOString().split("T")[0]; + // 오늘 날짜를 한국 시간대로 가져오기 + const today = new Date(new Date().getTime() + 9 * 60 * 60 * 1000).toISOString().split("T")[0]; useEffect(() => { const fetchMemosForMonth = async () => { - const daysInMonth = new Date(currentYear, currentMonth, 0).getDate(); + // const daysInMonth = new Date(currentYear, currentMonth, 0).getDate(); const monthMemos: Memo[] = []; + const todayDay = new Date(new Date().getTime() + 9 * 60 * 60 * 1000).getDate(); - for (let day = 1; day <= daysInMonth; day++) { + for (let day = todayDay - 5; day <= todayDay; day++) { const date = `${currentYear}-${String(currentMonth).padStart(2, "0")}-${String(day).padStart(2, "0")}`; - const timestamp = new Date(date).toISOString().split(".")[0]; + const localDate = new Date(`${date}T00:00:00+09:00`); // 한국 시간대 적용 + const timestamp = localDate.toISOString().split(".")[0]; + try { const fetchedMemos = await getMemosByDate(timestamp); fetchedMemos.forEach((memo) => { @@ -55,7 +58,7 @@ export const MemoPage = (): JSX.Element => { // 오늘 날짜 설정 및 캘린더 위치 조정 useEffect(() => { - const currentDate = new Date(); + const currentDate = new Date(new Date().getTime() + 9 * 60 * 60 * 1000); const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, "0")}-${String(currentDate.getDate()).padStart(2, "0")}`; setSelectedDate(formattedDate); @@ -74,7 +77,12 @@ export const MemoPage = (): JSX.Element => { const addMemo = useCallback(async () => { if (inputRef.current) { const content = inputRef.current.value; - const newMemo = { date: selectedDate, timestamp: new Date().toISOString().split(".")[0], content }; + + // 한국 시간대에 맞춰 timestamp 생성 + const now = new Date(new Date().getTime() + 9 * 60 * 60 * 1000); + const newTimestamp = now.toISOString().slice(0, 19); // 소수점 이하 제외 + + const newMemo = { date: selectedDate, timestamp: newTimestamp, content }; setMemos((prevMemos) => [...prevMemos, newMemo]); try { @@ -105,16 +113,16 @@ export const MemoPage = (): JSX.Element => { setCurrentYear(Number(e.target.value))} value={currentYear}> {[2023, 2024, 2025].map((year) => ( - + ))} setCurrentMonth(Number(e.target.value))} value={currentMonth}> {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ( - + ))}