From 1c6e95a9c0b3074210360f92c62060c4f1bf5d60 Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Fri, 17 Nov 2023 18:11:45 +0900 Subject: [PATCH 01/13] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20mock=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/mocks/datas/room.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/mocks/datas/room.ts b/src/core/mocks/datas/room.ts index 6f2792ad..df079d6f 100644 --- a/src/core/mocks/datas/room.ts +++ b/src/core/mocks/datas/room.ts @@ -10,7 +10,7 @@ export const RoomInfo = { maxUserCount: 9, announcement: '2번 연속 인증 안하는 사람은 추방할 예정입니다 ㅅㄱ!', completePercentage: 66.7, - certifiedDates: ['2023-03-02', '2023-03-03', '2023-03-02'], + certifiedDates: ['2023-11-13', '2023-11-14', '2023-11-16'], routine: [ { routineId: 5, From 352d81c2980c6acb299990cd51e5cd5345436361 Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Fri, 17 Nov 2023 18:13:48 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=ED=98=84=EC=9E=AC=20=EB=82=A0=EC=A7=9C=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20=EB=82=A0=EC=A7=9C=20=EC=84=A0=ED=83=9D=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/RoomDetail/components/RoomCalendar.tsx | 97 ++++++++++----------- src/RoomDetail/components/RoomWorkspace.tsx | 5 +- src/RoomDetail/constants/constant.ts | 1 + src/RoomDetail/utils/utils.ts | 17 ++++ 4 files changed, 67 insertions(+), 53 deletions(-) create mode 100644 src/RoomDetail/constants/constant.ts create mode 100644 src/RoomDetail/utils/utils.ts diff --git a/src/RoomDetail/components/RoomCalendar.tsx b/src/RoomDetail/components/RoomCalendar.tsx index c6a38826..afde04ea 100644 --- a/src/RoomDetail/components/RoomCalendar.tsx +++ b/src/RoomDetail/components/RoomCalendar.tsx @@ -1,64 +1,55 @@ +import { useEffect, useRef, useState } from 'react'; import clsx from 'clsx'; +import { makeDays } from '../utils/utils'; +import { DAY_OF_THE_WEEK } from '../constants/constant'; import { Icon } from '@/shared/Icon'; -const calendar = [ - { - day: '월', - date: '8', - bug: true, - point: false - }, - { - day: '화', - date: '9', - bug: true, - point: false - }, - { - day: '수', - date: '10', - bug: false, - point: false - }, - { - day: '목', - date: '11', - bug: true, - point: true - }, - { - day: '금', - date: '12', - bug: true, - point: false - }, - { - day: '토', - date: '13', - bug: false, - point: false - }, - { - day: '일', - date: '14', - bug: true, - point: false - } -]; +interface RoomCalendarProps { + certifiedDates: string[]; +} + +const RoomCalendar = ({ certifiedDates }: RoomCalendarProps) => { + const [selectDay, setSelectDay] = useState(null); + const dayRef = useRef(null); + + const { thisWeekDays, today } = makeDays(); + const stringThisWeekDays = thisWeekDays.map( + (el) => `${el.getFullYear()}-${el.getMonth() + 1}-${el.getDate()}` + ); + + useEffect(() => { + const handleOutsideClose = (e: MouseEvent) => { + if (dayRef.current && !dayRef.current?.contains(e.target as Node)) { + setSelectDay(null); + } + }; + document.addEventListener('click', handleOutsideClose); + + return () => document.removeEventListener('click', handleOutsideClose); + }, [setSelectDay, selectDay]); -const RoomCalendar = () => { return (

2023년 10월

-
- {calendar.map(({ day, date, point, bug }) => { +
+ {stringThisWeekDays.map((value, idx) => { + const todayDate = today.getDate(); + + const date = new Date(value).getDate(); + const day = DAY_OF_THE_WEEK[new Date(value).getDay()]; + const bug = certifiedDates.find((el) => el === value); + const RoomCalendarStyle = { calendarItem: clsx( - 'flex h-[5.87rem] w-[3.12rem] flex-col items-center rounded-[0.62rem] pt-1 text-center ', + 'flex h-[5.87rem] w-[3.12rem] cursor-default flex-col items-center rounded-[0.62rem] pt-1 text-center', { 'border-light-point text-light-point dark:border-dark-point dark:text-dark-point border-[0.06rem]': - point === true, - 'text-darkGray': point === false + todayDate === date, + 'text-dark-gray': todayDate !== date, + 'bg-light-gray': idx === selectDay && todayDate > date } ) }; @@ -67,8 +58,12 @@ const RoomCalendar = () => {
{ + setSelectDay(idx); + // TODO 해당 날짜의 데이터 불러오기 + }} > -
{day}
+
{day}
{date}
{bug && ( diff --git a/src/RoomDetail/components/RoomWorkspace.tsx b/src/RoomDetail/components/RoomWorkspace.tsx index b54a42d4..e5662b43 100644 --- a/src/RoomDetail/components/RoomWorkspace.tsx +++ b/src/RoomDetail/components/RoomWorkspace.tsx @@ -9,7 +9,8 @@ import { RoomInfo } from '@/core/types/Room'; const RoomWorkspace = ({ completePercentage, routine, - todayCertificateRank + todayCertificateRank, + certifiedDates }: RoomInfo) => { const { bottomSheetProps, toggle, close } = useBottomSheet(); @@ -41,7 +42,7 @@ const RoomWorkspace = ({ defaultIndex={0} > - +
); From 47e11ee9b210f617f1f8564d663f7a4b521cc608 Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Tue, 21 Nov 2023 13:37:01 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20API=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/api/functions/roomAPI.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/core/api/functions/roomAPI.ts b/src/core/api/functions/roomAPI.ts index 737c2608..f846b8f9 100644 --- a/src/core/api/functions/roomAPI.ts +++ b/src/core/api/functions/roomAPI.ts @@ -14,10 +14,8 @@ const roomAPI = { return await baseInstance.post<{ message: string }>('/rooms', body); }, - getRoomDetail: async (roomId: string, date?: string) => { - return await baseInstance.get( - `/rooms/${roomId}${date ? `/${date}` : ''}` - ); + getRoomDetail: async (roomId: string, date: string) => { + return await baseInstance.get(`/rooms/${roomId}/${date}`); }, putRoom: async (params: { From ec6c541a75ff870714c5c2a203bf06f3104f8b64 Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Tue, 21 Nov 2023 15:05:29 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20detailByDate=20API=20=EB=8B=A4?= =?UTF-8?q?=EC=8B=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/api/functions/roomAPI.ts | 7 +++++-- src/core/api/options/room.ts | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/core/api/functions/roomAPI.ts b/src/core/api/functions/roomAPI.ts index f846b8f9..5948803c 100644 --- a/src/core/api/functions/roomAPI.ts +++ b/src/core/api/functions/roomAPI.ts @@ -14,8 +14,8 @@ const roomAPI = { return await baseInstance.post<{ message: string }>('/rooms', body); }, - getRoomDetail: async (roomId: string, date: string) => { - return await baseInstance.get(`/rooms/${roomId}/${date}`); + getRoomDetail: async (roomId: string) => { + return await baseInstance.get(`/rooms/${roomId}`); }, putRoom: async (params: { @@ -49,6 +49,9 @@ const roomAPI = { return await baseInstance.put( `/rooms/${roomId}/members/${memberId}/delegation` ); + }, + getRoomDetailByDate: async (roomId: string, date: string) => { + return await baseInstance.get(`/rooms/${roomId}/${date}`); } }; diff --git a/src/core/api/options/room.ts b/src/core/api/options/room.ts index c259a3a1..4eb5a832 100644 --- a/src/core/api/options/room.ts +++ b/src/core/api/options/room.ts @@ -11,7 +11,7 @@ const roomOptions = { detailByDate: (roomId: string, date: string) => queryOptions({ queryKey: ['rooms', 'detail', roomId, date] as const, - queryFn: () => roomAPI.getRoomDetail(roomId, date) + queryFn: () => roomAPI.getRoomDetailByDate(roomId, date) }), myJoin: () => From 4a0b3502664557cb99f4dfc89c0bfd87a9453ef3 Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Tue, 21 Nov 2023 15:06:32 +0900 Subject: [PATCH 11/13] =?UTF-8?q?style:=20roomDetail=20provider=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/RoomDetail/components/RoomCalendar.tsx | 20 +++++----- .../components/RoomDetailContainer.tsx | 6 +-- .../components/RoomDetailProvider.tsx | 38 +++++++++++++++++++ src/pages/RoomDetailPage.tsx | 28 ++++---------- 4 files changed, 58 insertions(+), 34 deletions(-) create mode 100644 src/RoomDetail/components/RoomDetailProvider.tsx diff --git a/src/RoomDetail/components/RoomCalendar.tsx b/src/RoomDetail/components/RoomCalendar.tsx index 655db1fb..85648f7d 100644 --- a/src/RoomDetail/components/RoomCalendar.tsx +++ b/src/RoomDetail/components/RoomCalendar.tsx @@ -1,11 +1,11 @@ -import { useEffect, useRef, useContext, useMemo } from 'react'; +import { useEffect, useRef, useContext } from 'react'; import clsx from 'clsx'; import { twMerge } from 'tailwind-merge'; import { makeWeekCalendar } from '../utils/utils'; import { DAY_OF_THE_WEEK } from '../constants/constant'; +import { DateRoomDetailContext } from './RoomDetailProvider'; import { Icon } from '@/shared/Icon'; import { Toast } from '@/shared/Toast'; -import { DateRoomDetailContext } from '@/pages/RoomDetailPage'; interface RoomCalendarProps { certifiedDates: string[]; @@ -19,23 +19,23 @@ const RoomCalendar = ({ serverTime }: RoomCalendarProps) => { const dateRef = useRef(null); - const { changeDate, date: changedDate } = useContext(DateRoomDetailContext); + const { selectDate, date: chooseDate } = useContext(DateRoomDetailContext); const { thisWeekTimestamp } = makeWeekCalendar(serverTime); - const changedDateTimestamp = `${changedDate.getFullYear()}-${ - changedDate.getMonth() + 1 - }-${changedDate.getDate()}`; + const chooseDateTimestamp = `${chooseDate.getFullYear()}-${ + chooseDate.getMonth() + 1 + }-${chooseDate.getDate()}`; useEffect(() => { const handleOutsideClose = (e: MouseEvent) => { if (dateRef.current && !dateRef.current?.contains(e.target as Node)) { - changeDate(serverTime); + selectDate(serverTime); } }; document.addEventListener('click', handleOutsideClose); return () => document.removeEventListener('click', handleOutsideClose); - }, [changeDate, serverTime]); + }, [selectDate, serverTime]); return (
@@ -61,7 +61,7 @@ const RoomCalendar = ({ 'text-dark-gray': serverTime.getTime() < thisDate.getTime(), 'text-black': serverTime.getTime() >= thisDate.getTime(), 'rounded-[0.62rem] border-light-point text-light-point dark:border-dark-point dark:text-dark-point border-[0.06rem]': - thisDateTimestamp === changedDateTimestamp + thisDateTimestamp === chooseDateTimestamp } ) ) @@ -77,7 +77,7 @@ const RoomCalendar = ({ routineLimitTime.setMinutes(50); if (serverTime.getTime() >= thisDate.getTime()) { - changeDate(thisDate); + selectDate(thisDate); if ( thisDate.getDate() === routineLimitTime.getDate() && diff --git a/src/RoomDetail/components/RoomDetailContainer.tsx b/src/RoomDetail/components/RoomDetailContainer.tsx index 69926dd6..462f28ad 100644 --- a/src/RoomDetail/components/RoomDetailContainer.tsx +++ b/src/RoomDetail/components/RoomDetailContainer.tsx @@ -1,8 +1,8 @@ import { useContext } from 'react'; import { useQuery } from '@tanstack/react-query'; import { roomOptions } from '@/core/api/options'; +import { DateRoomDetailContext } from './RoomDetailProvider'; import { RoomInfo, RoomWorkspace } from '@/RoomDetail'; -import { DateRoomDetailContext } from '@/pages/RoomDetailPage'; import { RoomInfo as RoomInfoType } from '@/core/types/Room'; interface RoomDetailContainerProps { roomDetailData: RoomInfoType; @@ -15,10 +15,10 @@ const RoomDetailContainer = ({ }: RoomDetailContainerProps) => { const { date } = useContext(DateRoomDetailContext); const roomId = '1234'; - const stringDate = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`; + const chooseDate = `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`; const { data: roomDetailDataByDate, status } = useQuery({ - ...roomOptions.detailByDate(roomId, stringDate) + ...roomOptions.detailByDate(roomId, chooseDate) }); if (roomDetailDataByDate) { diff --git a/src/RoomDetail/components/RoomDetailProvider.tsx b/src/RoomDetail/components/RoomDetailProvider.tsx new file mode 100644 index 00000000..9971bd24 --- /dev/null +++ b/src/RoomDetail/components/RoomDetailProvider.tsx @@ -0,0 +1,38 @@ +import { ReactNode, useState, createContext } from 'react'; + +export const DateRoomDetailContext = createContext<{ + date: Date; + selectDate: (value: Date) => void; +}>({ + date: new Date(), + selectDate: (value: Date) => { + return value; + } +}); + +interface RoomDetailProviderProps { + children: ReactNode; + serverTime: Date; +} + +const RoomDetailProvider = ({ + children, + serverTime +}: RoomDetailProviderProps) => { + const [changedDate, setChangeDate] = useState(serverTime); + + return ( + { + setChangeDate(dateValue); + } + }} + > + {children} + + ); +}; + +export default RoomDetailProvider; diff --git a/src/pages/RoomDetailPage.tsx b/src/pages/RoomDetailPage.tsx index b7a7c5e7..615e1d06 100644 --- a/src/pages/RoomDetailPage.tsx +++ b/src/pages/RoomDetailPage.tsx @@ -1,4 +1,3 @@ -import { createContext, useState } from 'react'; import { Link } from 'react-router-dom'; import { useQuery } from '@tanstack/react-query'; import { roomOptions } from '@/core/api/options'; @@ -6,22 +5,16 @@ import { RoomNotice } from '@/RoomDetail'; import { Header } from '@/shared/Header'; import { Icon } from '@/shared/Icon'; import RoomDetailContainer from '@/RoomDetail/components/RoomDetailContainer'; - -export const DateRoomDetailContext = createContext<{ - date: Date; - changeDate: (value: Date) => void; -}>({ - date: new Date(), - changeDate: (value: Date) => {} -}); +import RoomDetailProvider from '@/RoomDetail/components/RoomDetailProvider'; const RoomDetailPage = () => { const roomId = '1234'; + const serverTime = new Date(); + + const todayDate = `${serverTime.getFullYear()}-${serverTime.getMonth()}-${serverTime.getDate()}`; const { data: roomDetailData, status } = useQuery({ - ...roomOptions.detail(roomId) + ...roomOptions.detailByDate(roomId, todayDate) }); - const serverTime = new Date(); - const [changedDate, setChangeDate] = useState(serverTime); if (status !== 'success') return
임시 Loading...
; @@ -52,19 +45,12 @@ const RoomDetailPage = () => {
- { - setChangeDate(dateValue); - } - }} - > + - +
); }; From 2adc53b2f97b25445957ed8a10535f84738b65c5 Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Thu, 23 Nov 2023 01:20:07 +0900 Subject: [PATCH 12/13] =?UTF-8?q?fix:=20PR=EB=A6=AC=EB=B7=B0=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 ++-- src/RoomDetail/components/RoomCalendar.tsx | 20 +++++++++----------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0ee901bf..03f2301a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx'; import { useRouteData, useTheme } from '@/core/hooks'; import timeOption from './core/api/options/time'; import getTimeRange from './core/utils/getTimeRange'; -import useCheckAuthRequired from './useCheckAuthRequired'; +// import useCheckAuthRequired from './useCheckAuthRequired'; import { Navbar } from './shared/Navbar'; import { UnknownFallback } from './shared/ErrorBoundary'; import 'swiper/css'; @@ -15,7 +15,7 @@ import 'swiper/css/bundle'; const App = () => { const { navBarRequired, path } = useRouteData(); const { theme, setTheme } = useTheme(); - useCheckAuthRequired(); + // useCheckAuthRequired(); const { data, isSuccess } = useQuery({ ...timeOption, diff --git a/src/RoomDetail/components/RoomCalendar.tsx b/src/RoomDetail/components/RoomCalendar.tsx index 85648f7d..a6a8ca72 100644 --- a/src/RoomDetail/components/RoomCalendar.tsx +++ b/src/RoomDetail/components/RoomCalendar.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useContext } from 'react'; +import { MouseEvent, useRef, useContext } from 'react'; import clsx from 'clsx'; import { twMerge } from 'tailwind-merge'; import { makeWeekCalendar } from '../utils/utils'; @@ -26,16 +26,13 @@ const RoomCalendar = ({ chooseDate.getMonth() + 1 }-${chooseDate.getDate()}`; - useEffect(() => { - const handleOutsideClose = (e: MouseEvent) => { - if (dateRef.current && !dateRef.current?.contains(e.target as Node)) { - selectDate(serverTime); - } - }; - document.addEventListener('click', handleOutsideClose); + const handleDateClick = (e: MouseEvent) => { + if (e.target !== dateRef.current) { + return; + } - return () => document.removeEventListener('click', handleOutsideClose); - }, [selectDate, serverTime]); + selectDate(new Date()); + }; return (
@@ -43,6 +40,7 @@ const RoomCalendar = ({
{thisWeekTimestamp.map((thisDate) => { const date = thisDate.getDate(); @@ -56,7 +54,7 @@ const RoomCalendar = ({ const RoomCalendarStyle = { calendarItem: twMerge( clsx( - 'relative flex h-[5.87rem] w-[3.12rem] cursor-default flex-col items-center pt-1 text-center ', + 'relative flex h-[5.87rem] w-[3.12rem] cursor-default flex-col items-center pt-1 text-center', { 'text-dark-gray': serverTime.getTime() < thisDate.getTime(), 'text-black': serverTime.getTime() >= thisDate.getTime(), From 89914416deda00eb4f4f589de1ca242a8f370e6f Mon Sep 17 00:00:00 2001 From: Park Nayeon Date: Thu, 23 Nov 2023 01:25:54 +0900 Subject: [PATCH 13/13] =?UTF-8?q?fix:=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EC=9A=A9=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 03f2301a..0ee901bf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import clsx from 'clsx'; import { useRouteData, useTheme } from '@/core/hooks'; import timeOption from './core/api/options/time'; import getTimeRange from './core/utils/getTimeRange'; -// import useCheckAuthRequired from './useCheckAuthRequired'; +import useCheckAuthRequired from './useCheckAuthRequired'; import { Navbar } from './shared/Navbar'; import { UnknownFallback } from './shared/ErrorBoundary'; import 'swiper/css'; @@ -15,7 +15,7 @@ import 'swiper/css/bundle'; const App = () => { const { navBarRequired, path } = useRouteData(); const { theme, setTheme } = useTheme(); - // useCheckAuthRequired(); + useCheckAuthRequired(); const { data, isSuccess } = useQuery({ ...timeOption,