From b20b38c5b5f854d1dbd132cc25602f62c122af82 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Fri, 21 Jun 2024 15:27:00 +0900 Subject: [PATCH 01/33] =?UTF-8?q?Feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EC=B6=9C=EC=84=9D=20=EC=97=B4=EA=B8=B0=20?= =?UTF-8?q?=EC=8B=A4=ED=96=89=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/organisms/Modal/Modal.tsx | 75 ++++++++----------- .../attendance/components/TodaySchedule.tsx | 32 ++++---- .../manager/useAttendanceStartQuery.ts | 4 +- src/types/schedule/types.ts | 14 ++-- 4 files changed, 62 insertions(+), 63 deletions(-) diff --git a/src/components/organisms/Modal/Modal.tsx b/src/components/organisms/Modal/Modal.tsx index 80a3129..8b79aac 100644 --- a/src/components/organisms/Modal/Modal.tsx +++ b/src/components/organisms/Modal/Modal.tsx @@ -12,54 +12,52 @@ import { ModalTitle } from "./ModalTitle"; import styles from "./Modal.module.css"; // children 요소 중 Dimmed filtering -const ModalDimmedType= ().type; +const ModalDimmedType = ().type; function getModalDimmed(children: ReactNode) { const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalDimmedType, - ) - .slice(0, 1)[0] || null; + return ( + childrenArray + .filter( + (child) => isValidElement(child) && child.type === ModalDimmedType + ) + .slice(0, 1)[0] || null + ); } // children 요소 중 Header filtering -const ModalHeaderType= ().type; +const ModalHeaderType = ().type; function getModalHeader(children: ReactNode) { const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalHeaderType, - ); + return childrenArray.filter( + (child) => isValidElement(child) && child.type === ModalHeaderType + ); } // children 요소 중 Content filtering -const ModalContentType= ().type; +const ModalContentType = ().type; function getModalContents(children: ReactNode) { const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalContentType, - ); + return childrenArray.filter( + (child) => isValidElement(child) && child.type === ModalContentType + ); } // children 요소 중 Footer filtering -const ModalFooterType= ().type; +const ModalFooterType = ().type; function getModalFooter(children: ReactNode) { const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalFooterType, - ) + return childrenArray.filter( + (child) => isValidElement(child) && child.type === ModalFooterType + ); } - interface ModalProps { children?: ReactNode; isOpen: boolean; -}; +} export const Modal = ({ children, isOpen }: ModalProps) => { - if(!isOpen){ + if (!isOpen) { return null; } @@ -69,24 +67,15 @@ export const Modal = ({ children, isOpen }: ModalProps) => { return createPortal(
{/*
{getModalDimmed(children)}
*/} - { - modalHeader && ( -
{modalHeader}
- ) - } - { - modalContents && ( -
{modalContents}
- ) - } - { - modalFooter && ( -
{modalFooter}
- ) - } -
- , document.body); -} + {modalHeader &&
{modalHeader}
} + {modalContents && ( +
{modalContents}
+ )} + {modalFooter &&
{modalFooter}
} + , + document.body + ); +}; Modal.Dimmed = ModalDimmed; Modal.Header = ModalHeader; @@ -95,4 +84,4 @@ Modal.Footer = ModalFooter; Modal.Title = ModalTitle; Modal.Subtitle = ModalSubtitle; -Modal.Button = ModalButtons; \ No newline at end of file +Modal.Button = ModalButtons; diff --git a/src/features/manager/attendance/components/TodaySchedule.tsx b/src/features/manager/attendance/components/TodaySchedule.tsx index 3878d3c..6122cdc 100644 --- a/src/features/manager/attendance/components/TodaySchedule.tsx +++ b/src/features/manager/attendance/components/TodaySchedule.tsx @@ -5,8 +5,8 @@ import { ATTENDANCE_MODAL, TODAY_SCHEDULE_TITLE } from "../constants/const"; import AttendanceItem from "@/components/molecules/attendanceItem/AttendanceItem"; import { Text } from "@/components/atoms/text"; import "./Attendance.css"; -import { useAttendanceStartQuery } from "@/hook/attendance/manager/useAttendanceStartQuery"; import { useTodayScheduleListQuery } from "@/hook/attendance/manager/useTodayScheduleListQuery"; +import { useAttendanceStartQuery } from "@/hook/attendance/manager/useAttendanceStartQuery"; import { ScheduleContent } from "@/types/schedule"; import { Modal } from "@/components/organisms/Modal/Modal"; @@ -22,8 +22,8 @@ const TodaySchedule: React.FC = ({ const clubId = 1; const [selectedSchedule, setSelectedSchedule] = useState(null); - const [startAttendance, setStartAttendance] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); + const [startAttendance, setStartAttendance] = useState(false); const { data: todayScheduleData, @@ -36,33 +36,36 @@ const TodaySchedule: React.FC = ({ eDate: "2024-05-28", }); - const { data: attendanceData, refetch: refetchAttendance } = - useAttendanceStartQuery({ - clubId: clubId, - scheduleId: selectedSchedule?.scheduleId || 0, - }); - - useEffect(() => { - refetchTodaySchedule(); - }, [attendanceUpdated, refetchTodaySchedule]); + const { refetch: refetchAttendance } = useAttendanceStartQuery({ + clubId: clubId, + scheduleId: selectedSchedule?.scheduleId || 0, + enabled: false, + }); const handleOpenModal = (schedule: ScheduleContent) => { + console.log("handleOpenModal called with schedule:", schedule); // 디버깅 로그 추가 if (schedule.attendanceStatus === "BEFORE") { setSelectedSchedule(schedule); setIsModalOpen(true); + console.log("Modal opened with schedule:", schedule); // 디버깅 로그 추가 } }; const handleAttendanceStart = () => { - setStartAttendance(true); + console.log("handleAttendanceStart called"); // 디버깅 로그 추가 + if (selectedSchedule) { + setStartAttendance(true); + } }; useEffect(() => { if (startAttendance && selectedSchedule) { refetchAttendance().then(() => { - setStartAttendance(false); - onAttendanceUpdate(); // 상태 변경 함수 호출 + onAttendanceUpdate(); + refetchTodaySchedule(); setIsModalOpen(false); + setStartAttendance(false); + console.log("Attendance started and modal closed"); // 디버깅 로그 추가 }); } }, [ @@ -70,6 +73,7 @@ const TodaySchedule: React.FC = ({ selectedSchedule, refetchAttendance, onAttendanceUpdate, + refetchTodaySchedule, ]); if (isTodayScheduleError) { diff --git a/src/hook/attendance/manager/useAttendanceStartQuery.ts b/src/hook/attendance/manager/useAttendanceStartQuery.ts index 280fd3b..9cec4ea 100644 --- a/src/hook/attendance/manager/useAttendanceStartQuery.ts +++ b/src/hook/attendance/manager/useAttendanceStartQuery.ts @@ -6,7 +6,8 @@ import { useQuery } from "@tanstack/react-query"; export const useAttendanceStartQuery = ({ clubId, scheduleId, -}: ScheduleDetailProp) => { + enabled = true, +}: ScheduleDetailProp & { enabled?: boolean }) => { return useQuery({ queryKey: [`attendanceStart`, { clubId, scheduleId }], queryFn: () => @@ -14,5 +15,6 @@ export const useAttendanceStartQuery = ({ `/${clubId}/schedules/${scheduleId}/attendance-start`, { headers: { accept: "*/*" } } ), + enabled, // enabled 옵션 추가 }); }; diff --git a/src/types/schedule/types.ts b/src/types/schedule/types.ts index c288ccb..9c1d73c 100644 --- a/src/types/schedule/types.ts +++ b/src/types/schedule/types.ts @@ -1,8 +1,8 @@ export enum Attendance { - BEFORE = "BEFORE", + BEFORE = "BEFORE", ONGOING = "ONGOING", - COMPLETE = "COMPLETE" -}; + COMPLETE = "COMPLETE", +} // 일정 목록 data export interface ScheduleContent { @@ -47,7 +47,11 @@ export interface ScheduleData { export interface ScheduleDetailProp { clubId: number; - scheduleId: number + scheduleId: number; +} + +export interface ScheduleStartProp extends ScheduleDetailProp { + enabled: boolean; } export interface ScheduleDetailContent { @@ -61,4 +65,4 @@ export interface ScheduleDetailContent { registerProfileImage: string; registrationDate: string; attendanceStatus: Attendance; -} \ No newline at end of file +} From 66ba17275cc175ccdd84f9545af6654a6bb2172d Mon Sep 17 00:00:00 2001 From: imi21123 Date: Fri, 21 Jun 2024 15:45:18 +0900 Subject: [PATCH 02/33] =?UTF-8?q?Feat:=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB?= =?UTF-8?q?=EA=B8=B0=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../attendance/components/TodaySchedule.tsx | 33 +++++++++---------- .../manager/useAttendanceStartQuery.ts | 2 +- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/features/manager/attendance/components/TodaySchedule.tsx b/src/features/manager/attendance/components/TodaySchedule.tsx index 6122cdc..e116142 100644 --- a/src/features/manager/attendance/components/TodaySchedule.tsx +++ b/src/features/manager/attendance/components/TodaySchedule.tsx @@ -9,6 +9,7 @@ import { useTodayScheduleListQuery } from "@/hook/attendance/manager/useTodaySch import { useAttendanceStartQuery } from "@/hook/attendance/manager/useAttendanceStartQuery"; import { ScheduleContent } from "@/types/schedule"; import { Modal } from "@/components/organisms/Modal/Modal"; +import { useModalContext } from "@/components/organisms/Modal/ModalProvider"; interface TodayScheduleProps { attendanceUpdated: boolean; @@ -22,7 +23,7 @@ const TodaySchedule: React.FC = ({ const clubId = 1; const [selectedSchedule, setSelectedSchedule] = useState(null); - const [isModalOpen, setIsModalOpen] = useState(false); + const { isOpen, openModal, closeModal } = useModalContext(); const [startAttendance, setStartAttendance] = useState(false); const { @@ -46,7 +47,7 @@ const TodaySchedule: React.FC = ({ console.log("handleOpenModal called with schedule:", schedule); // 디버깅 로그 추가 if (schedule.attendanceStatus === "BEFORE") { setSelectedSchedule(schedule); - setIsModalOpen(true); + openModal(); console.log("Modal opened with schedule:", schedule); // 디버깅 로그 추가 } }; @@ -63,7 +64,7 @@ const TodaySchedule: React.FC = ({ refetchAttendance().then(() => { onAttendanceUpdate(); refetchTodaySchedule(); - setIsModalOpen(false); + closeModal(); setStartAttendance(false); console.log("Attendance started and modal closed"); // 디버깅 로그 추가 }); @@ -118,20 +119,18 @@ const TodaySchedule: React.FC = ({ /> ))} - {selectedSchedule && ( - - - - {ATTENDANCE_MODAL.start} - - - - - {ATTENDANCE_MODAL.yes} - - - - )} + + + + {ATTENDANCE_MODAL.start} + + + + + {ATTENDANCE_MODAL.yes} + + + ); }; diff --git a/src/hook/attendance/manager/useAttendanceStartQuery.ts b/src/hook/attendance/manager/useAttendanceStartQuery.ts index 9cec4ea..39f7202 100644 --- a/src/hook/attendance/manager/useAttendanceStartQuery.ts +++ b/src/hook/attendance/manager/useAttendanceStartQuery.ts @@ -15,6 +15,6 @@ export const useAttendanceStartQuery = ({ `/${clubId}/schedules/${scheduleId}/attendance-start`, { headers: { accept: "*/*" } } ), - enabled, // enabled 옵션 추가 + enabled, }); }; From 293f7b9b6722da6a262c61bfecb453950e91079f Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:45:29 +0900 Subject: [PATCH 03/33] =?UTF-8?q?Feat:=20=EC=9D=BC=EC=A0=95=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EB=94=94=EB=B0=94=EC=9A=B4=EC=8B=B1=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/components/atoms/search/Search.tsx | 27 +++++++++++++++++++++++++- src/hook/schedule/useDebounce.ts | 18 +++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/hook/schedule/useDebounce.ts diff --git a/src/components/atoms/search/Search.tsx b/src/components/atoms/search/Search.tsx index d6af7da..f9dfcba 100644 --- a/src/components/atoms/search/Search.tsx +++ b/src/components/atoms/search/Search.tsx @@ -1,8 +1,31 @@ import { ICONS } from "@/constants/images"; import Image from "next/image"; +import { useEffect, useState } from "react"; + +import { useDebounce } from "@/hook/schedule/useDebounce"; +import { ScheduleKeyword } from "@/types/schedule"; import "./Search.css"; -export const Search = () => { +export interface SearchProps { + refetchKeywordSchedule: ({ keyword }: ScheduleKeyword) => void; +} + +export const Search = ({ + refetchKeywordSchedule +}: SearchProps) => { + const [keyword, setKeyword] = useState(''); + const debounceKeyword = useDebounce({keyword}); + + const handleSearch = (event: React.ChangeEvent) => { + setKeyword(event.target.value); + }; + + useEffect(() => { + refetchKeywordSchedule({ + keyword + }) + }, [debounceKeyword]) + return(
{ alt="search" />
diff --git a/src/hook/schedule/useDebounce.ts b/src/hook/schedule/useDebounce.ts new file mode 100644 index 0000000..f673a39 --- /dev/null +++ b/src/hook/schedule/useDebounce.ts @@ -0,0 +1,18 @@ +import { useEffect, useState } from "react"; + +export const useDebounce = ({keyword, delay = 500}: { + keyword: string; + delay?: number; +}) => { + const [debouncedValue, setDebouncedValue] = useState(keyword); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(keyword); + }, delay); + + return () => clearTimeout(handler); + }, [keyword]); + + return debouncedValue; +} \ No newline at end of file From fc2031d81bd4faec6785dfbc015179096b840239 Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:46:12 +0900 Subject: [PATCH 04/33] =?UTF-8?q?Feat:=20query=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hook/schedule/useScheduleQuery.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hook/schedule/useScheduleQuery.ts b/src/hook/schedule/useScheduleQuery.ts index b4258c1..83cbd06 100644 --- a/src/hook/schedule/useScheduleQuery.ts +++ b/src/hook/schedule/useScheduleQuery.ts @@ -4,12 +4,12 @@ import { FetchScheduleParams, ScheduleContent } from "@/types/schedule"; import { useQuery } from "@tanstack/react-query"; // 일정 조회 (/clubs/{clubs}/schedules) -export const useScheduleQuery = ({ clubId, q, sDate, eDate }: FetchScheduleParams) => { +export const useScheduleQuery = ({ clubId, keyword, startDate, endDate }: FetchScheduleParams) => { return useQuery>({ - queryKey: ['schedule', clubId, q, sDate, eDate], + queryKey: ['schedule', clubId, keyword, startDate, endDate], queryFn: async () => { const response = await http.get>( - `/clubs/${clubId}/schedules?q=${q}&sDate=${sDate}&eDate=${eDate}` + `/clubs/${clubId}/schedules?keyword=${keyword}&startDate=${startDate}&endDate=${endDate}` ); return response; }, From c615b20f0cb0102f7ec333a1fa7a89174e05962d Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:47:28 +0900 Subject: [PATCH 05/33] =?UTF-8?q?Feat:=20query=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/home/SetHome.tsx | 6 ++--- src/hook/schedule/useSchedule.ts | 43 ++++++++++++++++++-------------- 2 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/features/home/SetHome.tsx b/src/features/home/SetHome.tsx index 51b586f..80cfbaa 100644 --- a/src/features/home/SetHome.tsx +++ b/src/features/home/SetHome.tsx @@ -19,9 +19,9 @@ export const ScheduleContext = createContext<{ const SetHome = () => { const { value, setValue, filteredData, isLoading, mark } = useSchedule({ clubId: 1, - q: "", - sDate: moment().startOf('month').format("YYYY-MM-DD"), - eDate: moment().endOf('month').format("YYYY-MM-DD") + keyword: "", + startDate: moment().startOf('month').format("YYYY-MM-DD"), + endDate: moment().endOf('month').format("YYYY-MM-DD") }); console.log(filteredData); diff --git a/src/hook/schedule/useSchedule.ts b/src/hook/schedule/useSchedule.ts index bbe9eeb..65f2f6f 100644 --- a/src/hook/schedule/useSchedule.ts +++ b/src/hook/schedule/useSchedule.ts @@ -1,38 +1,42 @@ import { changeMonth, filterDate } from "@/features/home/utils"; import { getScheduleExist } from "@/features/home/utils/util"; -import { FetchScheduleParams } from "@/types/schedule"; +import { FetchScheduleParams, ScheduleDate, ScheduleKeyword } from "@/types/schedule"; import moment from "moment"; import { useState } from "react"; import { useScheduleQuery } from "./useScheduleQuery"; const useSchedule = ( { - clubId, q, sDate, eDate + clubId, keyword, startDate, endDate }: FetchScheduleParams ) => { const [value, setValue] = useState(new Date()); const [params, setParams] = useState({ clubId: clubId, - q: q, - sDate: sDate, - eDate: eDate + keyword: keyword, + startDate: startDate, + endDate: endDate }) // params에 맞는 일정 fetch const { data, isLoading } = useScheduleQuery(params); // params 변경 - const refetchSchedule = ({ - clubId, - q, - sDate, - eDate - }: FetchScheduleParams) => setParams({ - clubId: clubId, - q: q, - sDate: sDate, - eDate: eDate - }) + const refetchPeriodSchedule = ({ + startDate, + endDate + }: ScheduleDate) => setParams((prev) => ({ + ...prev, + startDate: startDate, + endDate: endDate + })) + + const refetchKeywordSchedule = ({ + keyword + }: ScheduleKeyword) => setParams((prev) => ({ + ...prev, + keyword: keyword + })) // 일정 변경 시 실행 function const handleChange = (newValue: Date) => { @@ -46,8 +50,8 @@ const useSchedule = ( // 달 변경 시 해당 달 일정 새로 fetch isChn && setParams({ ...params, - sDate: moment(newValue).startOf('month').format("YYYY-MM-DD"), - eDate: moment(newValue).endOf('month').format("YYYY-MM-DD") + startDate: moment(newValue).startOf('month').format("YYYY-MM-DD"), + endDate: moment(newValue).endOf('month').format("YYYY-MM-DD") }) }; @@ -65,7 +69,8 @@ const useSchedule = ( return { value, setValue: handleChange, - refetchSchedule, + refetchPeriodSchedule, + refetchKeywordSchedule, filteredData, data, isLoading, From a5e429eb196367cfe358b395fd5c6e60584b9bda Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:48:15 +0900 Subject: [PATCH 06/33] =?UTF-8?q?Feat:=20=EC=9D=BC=EC=A0=95=20=ED=82=A4?= =?UTF-8?q?=EC=9B=8C=EB=93=9C=20=EA=B2=80=EC=83=89,=20=EC=9D=BC=EC=A0=95?= =?UTF-8?q?=20=EA=B8=B0=EA=B0=84=20=EA=B2=80=EC=83=89=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/home/calendar/SetCalendar.tsx | 35 +++++++++------- .../calendar/components/CalendarFilter.tsx | 12 ++++-- .../components/CalendarListHeader.tsx | 14 ++++--- .../calendar/components/CalendarPeriod.tsx | 40 ++++++++++++++----- src/types/schedule/types.ts | 15 +++++-- 5 files changed, 78 insertions(+), 38 deletions(-) diff --git a/src/features/home/calendar/SetCalendar.tsx b/src/features/home/calendar/SetCalendar.tsx index 55ad1b2..b1f2fc9 100644 --- a/src/features/home/calendar/SetCalendar.tsx +++ b/src/features/home/calendar/SetCalendar.tsx @@ -1,29 +1,34 @@ "use client"; import useSchedule from "@/hook/schedule/useSchedule"; -import moment from "moment"; -import { useSearchParams } from "next/navigation"; import CalendarList from "./components/CalendarList"; import { CalendarListHeader } from "./components/CalendarListHeader"; const SetCalendar = () => { - const params = useSearchParams(); - const { data: scheduleData, refetchSchedule, isLoading, mark } = useSchedule({ + const { data: scheduleData, refetchPeriodSchedule, refetchKeywordSchedule, isLoading, mark } = useSchedule({ clubId: 1, - q: "", - sDate: moment(params.get('month'), "YYYY-MM").startOf('month').format("YYYY-MM-DD"), - eDate: moment(params.get('month'), "YYYY-MM").endOf('month').format("YYYY-MM-DD") + keyword: "", + startDate: "", + endDate: "" }); return ( <> - {!scheduleData ? ( -
loading...
- ): - (
- - -
) - } +
+ + { + isLoading ? ( + <> + ) : ( + + ) + } +
) }; diff --git a/src/features/home/calendar/components/CalendarFilter.tsx b/src/features/home/calendar/components/CalendarFilter.tsx index 6a47339..be2ece4 100644 --- a/src/features/home/calendar/components/CalendarFilter.tsx +++ b/src/features/home/calendar/components/CalendarFilter.tsx @@ -2,15 +2,19 @@ import { Text } from "@/components/atoms/text"; import { BottomSheet } from "@/components/organisms/BottomSheet/BottomSheet"; import { ICONS } from "@/constants/images"; import { COLORS } from "@/styles"; +import { ScheduleDate } from "@/types/schedule"; import Image from "next/image"; import { CALENDAR_FILTER_BTN } from "../constants/const"; import { useCalendarFilter } from "./CalendarFilterProvider"; -import { CalendarListHeaderProps } from "./CalendarListHeader"; import { CalendarPeriod } from "./CalendarPeriod"; +export interface CalendarFilterProps { + refetchPeriodSchedule: ({ startDate, endDate }: ScheduleDate) => void; +} + export const CalendarFilter = ({ - refetchSchedule -}: CalendarListHeaderProps) => { + refetchPeriodSchedule +}: CalendarFilterProps) => { const {openFloating, setOpenFloating, isPeriod, period} = useCalendarFilter(); return( @@ -55,7 +59,7 @@ export const CalendarFilter = ({ setOpenFloating={setOpenFloating} > )} diff --git a/src/features/home/calendar/components/CalendarListHeader.tsx b/src/features/home/calendar/components/CalendarListHeader.tsx index 9eea510..ebd9120 100644 --- a/src/features/home/calendar/components/CalendarListHeader.tsx +++ b/src/features/home/calendar/components/CalendarListHeader.tsx @@ -1,21 +1,25 @@ import { Search } from "@/components/atoms/search"; -import { FetchScheduleParams } from "@/types/schedule"; +import { ScheduleDate, ScheduleKeyword } from "@/types/schedule"; import { CalendarFilter } from "./CalendarFilter"; import { CalendarFilterProvider } from "./CalendarFilterProvider"; export interface CalendarListHeaderProps { - refetchSchedule: (params: FetchScheduleParams) => void; + refetchPeriodSchedule: ({ startDate, endDate }: ScheduleDate) => void; + refetchKeywordSchedule: ({ keyword }: ScheduleKeyword) => void; } export const CalendarListHeader = ({ - refetchSchedule + refetchPeriodSchedule, + refetchKeywordSchedule }: CalendarListHeaderProps) => { return(
- +
diff --git a/src/features/home/calendar/components/CalendarPeriod.tsx b/src/features/home/calendar/components/CalendarPeriod.tsx index 26b1f9d..94baf35 100644 --- a/src/features/home/calendar/components/CalendarPeriod.tsx +++ b/src/features/home/calendar/components/CalendarPeriod.tsx @@ -4,13 +4,13 @@ import { Text } from "@/components/atoms/text"; import moment from "moment"; import { useState } from "react"; import { CALENDAR_PERIOD_BTN, CALENDAR_PERIOD_TXT, CALENDAR_PERIOD_TXT_LIST } from "../constants/const"; +import { CalendarFilterProps } from "./CalendarFilter"; import { useCalendarFilter } from "./CalendarFilterProvider"; -import { CalendarListHeaderProps } from "./CalendarListHeader"; export const CalendarPeriod = ({ - refetchSchedule -}: CalendarListHeaderProps) => { - const { setOpenFloating, selectedIdx, setSelectedIdx, setIsPeriod, period, setPeriod } = useCalendarFilter(); + refetchPeriodSchedule +}: CalendarFilterProps) => { + const { setOpenFloating, selectedIdx, setSelectedIdx, isPeriod, setIsPeriod, period, setPeriod } = useCalendarFilter(); const [tmpPeriod, setTmpPeriod] = useState({ startDate: period.startDate, endDate: period.endDate @@ -20,10 +20,23 @@ export const CalendarPeriod = ({ setSelectedIdx(0); }; + // 기간별 일정 refetch + const refetchNewSchedule = ({ newSDate, newEDate }: { + newSDate: string; + newEDate: string; + }) => { + refetchPeriodSchedule && refetchPeriodSchedule({ + startDate: newSDate, + endDate: newEDate + }); + } + const handlePeriod = () => { if(selectedIdx === 0){ + refetchNewSchedule({ newSDate: "", newEDate: "" }); setIsPeriod(false); } else { + setIsPeriod(true); // 기간 설정했는지 여부 let newSDate = period.startDate; let newEDate = period.endDate; switch(selectedIdx) { @@ -44,17 +57,22 @@ export const CalendarPeriod = ({ setPeriod(tmpPeriod); break; } - refetchSchedule({ - clubId: 1, - q: "", - sDate: newSDate, - eDate: newEDate - }); - setIsPeriod(true); + refetchNewSchedule({ newSDate: newSDate, newEDate: newEDate }); + setPeriod({ + startDate: newSDate, + endDate: newEDate + }); // 설정한 기간 + setIsPeriod(true); // 기간 설정했는지 여부 } setOpenFloating(false); // 바텀시트 닫기 }; + // useEffect(() => { + // if (isPeriod) { + // refetchNewSchedule({ newSDate: period.startDate, newEDate: period.endDate }); + // } + // }, [period]); + return(
diff --git a/src/types/schedule/types.ts b/src/types/schedule/types.ts index c288ccb..80644dc 100644 --- a/src/types/schedule/types.ts +++ b/src/types/schedule/types.ts @@ -13,11 +13,20 @@ export interface ScheduleContent { attendanceStatus: Attendance; } +export interface ScheduleDate { + startDate?: string; + endDate?: string; +} + +export interface ScheduleKeyword { + keyword?: string; +} + export interface FetchScheduleParams { clubId: number; - q?: string; - sDate?: string; - eDate?: string; + keyword?: string; + startDate?: string; + endDate?: string; } // 일정 박스 From 14430c717b9ffcf1b0181b663a4753b8bf80e0d8 Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:48:55 +0900 Subject: [PATCH 07/33] =?UTF-8?q?Feat:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0=20&=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../calendar/components/CalendarDetailContent.tsx | 1 - .../home/calendar/components/CalendarDetailHeader.tsx | 11 ----------- .../calendar/components/CalendarFilterProvider.tsx | 8 ++++---- 3 files changed, 4 insertions(+), 16 deletions(-) diff --git a/src/features/home/calendar/components/CalendarDetailContent.tsx b/src/features/home/calendar/components/CalendarDetailContent.tsx index 9ed0bb2..3e6e884 100644 --- a/src/features/home/calendar/components/CalendarDetailContent.tsx +++ b/src/features/home/calendar/components/CalendarDetailContent.tsx @@ -8,7 +8,6 @@ interface CalendarDetailContentProps { } const CalendarDetailContent = ({ detailData } : CalendarDetailContentProps) => { - console.log(detailData); const renderDetailBox = (label: string, value: string | undefined) => (
diff --git a/src/features/home/calendar/components/CalendarDetailHeader.tsx b/src/features/home/calendar/components/CalendarDetailHeader.tsx index df1bd99..ae2625f 100644 --- a/src/features/home/calendar/components/CalendarDetailHeader.tsx +++ b/src/features/home/calendar/components/CalendarDetailHeader.tsx @@ -10,17 +10,6 @@ interface CalendarDetailContentProps { } const CalendarDetailHeader = ({detailData}: CalendarDetailContentProps) => { - const dateDetail = - { - id: 1, - time: new Date(), - user: "문해빈", - title: "와이어 프레임 작성 회의", - location: "커피빈 홍대입구점", - content: "유저 플로우 기반으로 와이어프레임 작성하겠습니다. 테블릿 PC 지참해주세요 :) 출석은 정시에 가차없이 진행할 예정입니다. 지각 시에는 벌금 6000만원 있으니 참고하시어 늦지 마시길 ~ 모두 이따 봅시다", - attendance: 0, // 미출석 - } - return ( (detailData && (
diff --git a/src/features/home/calendar/components/CalendarFilterProvider.tsx b/src/features/home/calendar/components/CalendarFilterProvider.tsx index c483358..71a5d08 100644 --- a/src/features/home/calendar/components/CalendarFilterProvider.tsx +++ b/src/features/home/calendar/components/CalendarFilterProvider.tsx @@ -32,10 +32,10 @@ interface CalendarFilterProviderProps { } export const CalendarFilterProvider = ({ children }: CalendarFilterProviderProps) => { - const [openFloating, setOpenFloating] = useState(false); - const [selectedIdx, setSelectedIdx] = useState(0); - const [isPeriod, setIsPeriod] = useState(false); - const [period, setPeriod] = useState({ + const [openFloating, setOpenFloating] = useState(false); // 바텀시트 오픈 여부 + const [selectedIdx, setSelectedIdx] = useState(0); // 설정한 기간 idx + const [isPeriod, setIsPeriod] = useState(false); // 기간 설정 여부 + const [period, setPeriod] = useState({ // 설정한 기간 startDate: moment(new Date()).format('YYYY-MM-DD'), endDate: moment(new Date()).format('YYYY-MM-DD') }); From 18b58bcb3378330d198ac7c5d3bbeb027c36886f Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:49:35 +0900 Subject: [PATCH 08/33] =?UTF-8?q?Feat:=20=EC=9D=BC=EC=A0=95=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20query=20string=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/home/components/HomeDateWrapper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/features/home/components/HomeDateWrapper.tsx b/src/features/home/components/HomeDateWrapper.tsx index c06bda8..8d67343 100644 --- a/src/features/home/components/HomeDateWrapper.tsx +++ b/src/features/home/components/HomeDateWrapper.tsx @@ -1,5 +1,4 @@ "use client"; -import moment from "moment"; import React, { useContext } from "react"; import "./Home.css"; @@ -28,11 +27,12 @@ const HomeDateWrapper = ({ dateList, isLoading }: { fontWeight="700" >{formatDateKor(value)} 더보기
From ae78a6db1c3fdecac8e0904557f6361bae144efd Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 17:50:17 +0900 Subject: [PATCH 09/33] =?UTF-8?q?Fix:=20=EB=AA=A8=EC=9E=84=20=ED=99=88?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=EC=95=88?= =?UTF-8?q?=EB=88=8C=EB=A6=AC=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/home/components/Home.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/features/home/components/Home.css b/src/features/home/components/Home.css index 306929a..a9984c6 100644 --- a/src/features/home/components/Home.css +++ b/src/features/home/components/Home.css @@ -23,7 +23,12 @@ margin-bottom: 1rem; } -.homeDateWrapper__header span { +.homeDateWrapper__header::before { + width: 0px !important; + height: 0px !important; +} + +.homeDateWrapper__header-btn { cursor: pointer; } From ee9deac1e45893cea0f38cfd3ff4dd304b9a4179 Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 18:36:33 +0900 Subject: [PATCH 10/33] =?UTF-8?q?Design:=20=ED=99=88=ED=99=94=EB=A9=B4,=20?= =?UTF-8?q?=EC=B6=9C=EC=84=9D=20chip=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/search/Search.tsx | 8 +++++--- src/features/user/home/components/Home.css | 2 +- src/features/user/home/components/MeetingItem.css | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/atoms/search/Search.tsx b/src/components/atoms/search/Search.tsx index f9dfcba..0486cee 100644 --- a/src/components/atoms/search/Search.tsx +++ b/src/components/atoms/search/Search.tsx @@ -21,9 +21,11 @@ export const Search = ({ }; useEffect(() => { - refetchKeywordSchedule({ - keyword - }) + if(refetchKeywordSchedule){ + refetchKeywordSchedule({ + keyword + }) + } }, [debounceKeyword]) return( diff --git a/src/features/user/home/components/Home.css b/src/features/user/home/components/Home.css index e276951..6905dcf 100644 --- a/src/features/user/home/components/Home.css +++ b/src/features/user/home/components/Home.css @@ -1,5 +1,5 @@ .home { - height: calc(100vh - 5.5rem); + /* height: calc(100vh - 5.5rem); */ position: relative; display: flex; flex-direction: column; diff --git a/src/features/user/home/components/MeetingItem.css b/src/features/user/home/components/MeetingItem.css index 5680025..07dd8bd 100644 --- a/src/features/user/home/components/MeetingItem.css +++ b/src/features/user/home/components/MeetingItem.css @@ -1,7 +1,7 @@ .home__content__meeting__box { display: flex; padding: 0.94rem 1rem 0.94rem 1.06rem; - width: 100%; + width: 90%; border-radius: 0.625rem; background: #404040; From 4d156e17ca50dabaa408272d71f45b7e0dcf4b7e Mon Sep 17 00:00:00 2001 From: happppi <102276917+hhbb0081@users.noreply.github.com> Date: Sat, 22 Jun 2024 19:24:55 +0900 Subject: [PATCH 11/33] =?UTF-8?q?Fix:=20=EB=AA=A8=EB=8B=AC=20ContextAPI=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/scheduleBox/ScheduleBox.css | 2 +- src/components/organisms/Modal/Modal.tsx | 26 ++++-- .../organisms/Modal/ModalHeader.tsx | 6 +- .../organisms/Modal/components/ModalMain.tsx | 83 ------------------- src/features/user/home/components/Home.tsx | 1 - .../home/components/HomeRequestedModal.tsx | 2 +- .../home/components/RequestedMeetingItem.tsx | 9 +- 7 files changed, 31 insertions(+), 98 deletions(-) delete mode 100644 src/components/organisms/Modal/components/ModalMain.tsx diff --git a/src/components/molecules/scheduleBox/ScheduleBox.css b/src/components/molecules/scheduleBox/ScheduleBox.css index 3e3570f..a86edeb 100644 --- a/src/components/molecules/scheduleBox/ScheduleBox.css +++ b/src/components/molecules/scheduleBox/ScheduleBox.css @@ -17,7 +17,7 @@ .scheduleBox__content { display: flex; - width: 100%; + width: 60%; gap: 1rem; } diff --git a/src/components/organisms/Modal/Modal.tsx b/src/components/organisms/Modal/Modal.tsx index 220eb56..34116b6 100644 --- a/src/components/organisms/Modal/Modal.tsx +++ b/src/components/organisms/Modal/Modal.tsx @@ -11,6 +11,15 @@ import { ModalTitle } from "./ModalTitle"; import styles from "./Modal.module.css"; +// children 요소 중 Header filtering +const ModalDimmedType = ().type; +function getModalDimmed(children: ReactNode) { + const childrenArray = Children.toArray(children); + return childrenArray.filter( + (child) => isValidElement(child) && child.type === ModalDimmedType + ); +} + // children 요소 중 Header filtering const ModalHeaderType = ().type; function getModalHeader(children: ReactNode) { @@ -52,13 +61,16 @@ export const Modal = ({ children, isOpen }: ModalProps) => { const modalContents = getModalContents(children); const modalFooter = getModalFooter(children); return createPortal( -
- {modalHeader &&
{modalHeader}
} - {modalContents && ( -
{modalContents}
- )} - {modalFooter &&
{modalFooter}
} -
, + <> + {getModalDimmed(children)} +
+ {modalHeader &&
{modalHeader}
} + {modalContents && ( +
{modalContents}
+ )} + {modalFooter &&
{modalFooter}
} +
+ , document.body ); }; diff --git a/src/components/organisms/Modal/ModalHeader.tsx b/src/components/organisms/Modal/ModalHeader.tsx index a2ece2e..640b54f 100644 --- a/src/components/organisms/Modal/ModalHeader.tsx +++ b/src/components/organisms/Modal/ModalHeader.tsx @@ -2,16 +2,16 @@ import { IMAGES } from "@/constants/images"; import Image from "next/image"; import { ReactNode } from "react"; import styles from "./Modal.module.css"; -import { useModalContext } from "./ModalProvider"; interface ModalHeaderProps { children?: ReactNode; + closeModal?: () => void; } export const ModalHeader = ({ - children + children, + closeModal }: ModalHeaderProps) => { - const { closeModal } = useModalContext(); return (
).type; -function getModalDimmed(children: ReactNode) { - const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalDimmedType, - ) - .slice(0, 1)[0] || null; -} - -// children 요소 중 Header filtering -const ModalHeaderType= ().type; -function getModalHeader(children: ReactNode) { - const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalHeaderType, - ); -} - -// children 요소 중 Content filtering -const ModalContentType= ().type; -function getModalContents(children: ReactNode) { - const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalContentType, - ); -} - -// children 요소 중 Footer filtering -const ModalFooterType= ().type; -function getModalFooter(children: ReactNode) { - const childrenArray = Children.toArray(children); - return childrenArray - .filter( - child => isValidElement(child) && child.type === ModalFooterType, - ) -} - -interface ModalMainProps { - children?: ReactNode; - isOpen: boolean; -}; - -export const ModalMain = ({ children, isOpen }: ModalMainProps) => { - if(!isOpen){ - return null; - } - - const modalHeader = getModalHeader(children); - const modalContents = getModalContents(children); - const modalFooter = getModalFooter(children); - return createPortal( -
-
{getModalDimmed(children)}
- { - modalHeader && ( -
{modalHeader}
- ) - } - { - modalContents && ( -
{modalContents}
- ) - } - { - modalFooter && ( -
{modalFooter}
- ) - } -
- , document.body); -} diff --git a/src/features/user/home/components/Home.tsx b/src/features/user/home/components/Home.tsx index 0e5ec7b..2540af0 100644 --- a/src/features/user/home/components/Home.tsx +++ b/src/features/user/home/components/Home.tsx @@ -67,7 +67,6 @@ const Home = () => { ) : ( <> - {console.log("dkdk", requestedClubList.data)} {/* 모임 */} {requestedClubList?.data?.content && requestedClubList?.data?.content?.map((item, idx) => ( diff --git a/src/features/user/home/components/HomeRequestedModal.tsx b/src/features/user/home/components/HomeRequestedModal.tsx index 22c6307..ba67794 100644 --- a/src/features/user/home/components/HomeRequestedModal.tsx +++ b/src/features/user/home/components/HomeRequestedModal.tsx @@ -24,7 +24,7 @@ const HomeRequestedModal = ({ return ( - + {title} {date} diff --git a/src/features/user/home/components/RequestedMeetingItem.tsx b/src/features/user/home/components/RequestedMeetingItem.tsx index a2232ba..8fee242 100644 --- a/src/features/user/home/components/RequestedMeetingItem.tsx +++ b/src/features/user/home/components/RequestedMeetingItem.tsx @@ -1,9 +1,10 @@ import { Text } from "@/components/atoms/text"; -import { useModalContext } from "@/components/organisms/Modal/ModalProvider"; +// import { useModalContext } from "@/components/organisms/Modal/ModalProvider"; import { useJoinCancelMutation } from "@/hook/clubJoin/useJoinCancelMutation"; import { useJoinRejectedQuery } from "@/hook/clubJoin/useJoinRejectedQuery"; import useSwipeItemHandles from "@/hook/user/useSwipeItemHandles"; import { ApprovalStatus, RequestedJoinClubInfo } from "@/types/club"; +import { useState } from "react"; import HomeRequestedModal from "./HomeRequestedModal"; import "./RequestedMeetingItem.css"; @@ -15,7 +16,11 @@ const RequestedMeetingItem = ({ updatedAt, }: RequestedJoinClubInfo) => { const isSwipe = status == ApprovalStatus.Rejected; - const { isOpen, openModal, closeModal } = useModalContext(); + // const { isOpen, openModal, closeModal } = useModalContext(); + const [isOpen, setIsOpen] = useState(false); + const openModal = () => setIsOpen(true); + const closeModal = () => setIsOpen(false); + const { mutate: cancelMutate } = useJoinCancelMutation(clubJoinRequestId); const { data: rejectedData, isLoading } = useJoinRejectedQuery(clubJoinRequestId, status); From 98cb02adc0de2b93738f40c91451c4296490f174 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Sun, 23 Jun 2024 10:25:44 +0900 Subject: [PATCH 12/33] =?UTF-8?q?Feat:=20=EC=9C=A0=EC=A0=80=20=EA=B3=84?= =?UTF-8?q?=EC=A0=95=20=EC=A0=95=EB=B3=B4=20=EC=97=B0=EB=8F=99=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/profile/components/AccountInfo.tsx | 12 ++++++------ .../user/profile/components/EditProfile.tsx | 11 +++-------- src/hook/attendance/useAttendanceListQuery.ts | 8 +++----- src/hook/user/useGetInfoQuery.ts | 16 ++++++++++++++++ src/hook/user/useUserMutation.ts | 17 ++++++----------- src/types/user/types.ts | 10 ++++++++++ 6 files changed, 44 insertions(+), 30 deletions(-) create mode 100644 src/hook/user/useGetInfoQuery.ts create mode 100644 src/types/user/types.ts diff --git a/src/features/user/profile/components/AccountInfo.tsx b/src/features/user/profile/components/AccountInfo.tsx index 9cd43ed..a2118e4 100644 --- a/src/features/user/profile/components/AccountInfo.tsx +++ b/src/features/user/profile/components/AccountInfo.tsx @@ -5,12 +5,12 @@ import { ACCOUNT_INFO } from "../constants/const"; import { NAME } from "@/constants/const"; import { useRouter } from "next/navigation"; import React from "react"; +import { useGetInfoQuery } from "@/hook/user/useGetInfoQuery"; const AccountInfo: React.FC = () => { const router = useRouter(); - const name = "홍길동"; - const email = "whatshu@gamil.com"; - const phoneNum = "010-1234-5678"; + const { data } = useGetInfoQuery(); + const userInfo = data?.data; return (
@@ -31,9 +31,9 @@ const AccountInfo: React.FC = () => {

{ACCOUNT_INFO.phoneNum}

-

{name}

-

{email}

-

{phoneNum}

+

{userInfo?.userName}

+

{userInfo?.userEmail}

+

{userInfo?.userPhone}

diff --git a/src/features/user/profile/components/EditProfile.tsx b/src/features/user/profile/components/EditProfile.tsx index 20bb6bb..a863535 100644 --- a/src/features/user/profile/components/EditProfile.tsx +++ b/src/features/user/profile/components/EditProfile.tsx @@ -10,22 +10,17 @@ import { EDIT_ACCOUNT_INFO_BTN, EDIT_ACCOUNT_INFO_INPUT_ARR, } from "../constants/const"; - -interface FormData { - userName: string; - userEmail: string; - userMobile: string; -} +import { signUpInfo } from "@/types/user/types"; const EditProfile: React.FC = () => { const router = useRouter(); - const methods = useForm({ + const methods = useForm({ mode: "onChange", }); const { handleSubmit, control } = methods; - const submitOnboarding: SubmitHandler = (data) => { + const submitOnboarding: SubmitHandler = (data) => { console.log(data); }; diff --git a/src/hook/attendance/useAttendanceListQuery.ts b/src/hook/attendance/useAttendanceListQuery.ts index c777d19..cc6eabe 100644 --- a/src/hook/attendance/useAttendanceListQuery.ts +++ b/src/hook/attendance/useAttendanceListQuery.ts @@ -1,14 +1,12 @@ import { http } from "@/apis/http"; import { CommonNoPageRes } from "@/types"; import { GetAttendanceListResponse } from "@/types/attendance/types"; -import { ScheduleProp } from "@/types/schedule"; +import { ClubInfoParams } from "@/types/club"; import { useQuery } from "@tanstack/react-query"; -export const useAttendanceListQuery = ({ - clubId, -}: Omit) => { +export const useAttendanceListQuery = (clubId: number) => { return useQuery>({ - queryKey: [`attendanceList`, { clubId }], + queryKey: [`attendanceList`, clubId], queryFn: () => http.get>( `/${clubId}/attendance-list`, diff --git a/src/hook/user/useGetInfoQuery.ts b/src/hook/user/useGetInfoQuery.ts new file mode 100644 index 0000000..4a29f8e --- /dev/null +++ b/src/hook/user/useGetInfoQuery.ts @@ -0,0 +1,16 @@ +import { http } from "@/apis/http"; +import { CommonNoPageRes } from "@/types"; +import { userInfo } from "@/types/user/types"; +import { useQuery } from "@tanstack/react-query"; + +export const useGetInfoQuery = () => { + return useQuery>({ + queryKey: ["userInfo"], + queryFn: async () => { + const response = + await http.get>(`/user/getInfo`); + return response; + }, + staleTime: 1000, + }); +}; diff --git a/src/hook/user/useUserMutation.ts b/src/hook/user/useUserMutation.ts index 6491c6b..7663483 100644 --- a/src/hook/user/useUserMutation.ts +++ b/src/hook/user/useUserMutation.ts @@ -1,25 +1,20 @@ import { http } from "@/apis/http"; +import { signUpInfo } from "@/types/user/types"; import { useMutation } from "@tanstack/react-query"; import { useRouter } from "next/navigation"; -export interface CreateUserProps { - userName: string; - userPhone: string; - userEmail: string; -} - // 추가 회원가입 (/user/signUp) export const useUserMutation = () => { const router = useRouter(); return useMutation({ - mutationFn: (data: CreateUserProps) => http.post('/user/signUp', data), + mutationFn: (data: signUpInfo) => http.post("/user/signUp", data), onSuccess: (res) => { - alert('회원가입 성공!'); + alert("회원가입 성공!"); console.log(res); router.push("/user/signup/complete"); }, onError: (err) => { console.log(err); - } - }) -} \ No newline at end of file + }, + }); +}; diff --git a/src/types/user/types.ts b/src/types/user/types.ts new file mode 100644 index 0000000..ad93209 --- /dev/null +++ b/src/types/user/types.ts @@ -0,0 +1,10 @@ +export interface signUpInfo { + userName: string; + userPhone: string; + userEmail: string; +} + +export interface userInfo extends signUpInfo { + userId: number; + oauth2Id: string; +} From 5a21a3d78571acb434c713e63f5b2d94a01fc557 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Sun, 23 Jun 2024 11:08:49 +0900 Subject: [PATCH 13/33] =?UTF-8?q?Feat:=20=EC=9C=A0=EC=A0=80=20=EA=B3=84?= =?UTF-8?q?=EC=A0=95=20=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/profile/components/AccountInfo.tsx | 4 +- .../user/profile/components/EditProfile.tsx | 34 ++++++++++++---- src/features/user/profile/constants/const.ts | 40 +++++++++---------- ...GetInfoQuery.ts => useGetUserInfoQuery.ts} | 8 ++-- .../user/useModificationUserInfoMutation.ts | 12 ++++++ 5 files changed, 64 insertions(+), 34 deletions(-) rename src/hook/user/{useGetInfoQuery.ts => useGetUserInfoQuery.ts} (54%) create mode 100644 src/hook/user/useModificationUserInfoMutation.ts diff --git a/src/features/user/profile/components/AccountInfo.tsx b/src/features/user/profile/components/AccountInfo.tsx index a2118e4..2e8ada3 100644 --- a/src/features/user/profile/components/AccountInfo.tsx +++ b/src/features/user/profile/components/AccountInfo.tsx @@ -5,11 +5,11 @@ import { ACCOUNT_INFO } from "../constants/const"; import { NAME } from "@/constants/const"; import { useRouter } from "next/navigation"; import React from "react"; -import { useGetInfoQuery } from "@/hook/user/useGetInfoQuery"; +import { useGetUserInfoQuery } from "@/hook/user/useGetUserInfoQuery"; const AccountInfo: React.FC = () => { const router = useRouter(); - const { data } = useGetInfoQuery(); + const { data } = useGetUserInfoQuery(); const userInfo = data?.data; return ( diff --git a/src/features/user/profile/components/EditProfile.tsx b/src/features/user/profile/components/EditProfile.tsx index a863535..c2deea1 100644 --- a/src/features/user/profile/components/EditProfile.tsx +++ b/src/features/user/profile/components/EditProfile.tsx @@ -4,26 +4,46 @@ import { Button } from "@/components/atoms/button"; import { InputBox } from "@/components/molecules/inputBox"; import { Wrapper } from "@/components/organisms/Wrapper"; import { useRouter } from "next/navigation"; -import React from "react"; +import React, { useEffect } from "react"; import { useForm, SubmitHandler } from "react-hook-form"; import { EDIT_ACCOUNT_INFO_BTN, EDIT_ACCOUNT_INFO_INPUT_ARR, } from "../constants/const"; import { signUpInfo } from "@/types/user/types"; +import { useGetUserInfoQuery } from "@/hook/user/useGetUserInfoQuery"; +import { useModificationUserInfoMutation } from "@/hook/user/useModificationUserInfoMutation"; +import { useQueryClient } from "@tanstack/react-query"; const EditProfile: React.FC = () => { const router = useRouter(); const methods = useForm({ mode: "onChange", }); - - const { handleSubmit, control } = methods; - + const { handleSubmit, control, setValue } = methods; + const { data: userInfo } = useGetUserInfoQuery(); + const mutation = useModificationUserInfoMutation(); + const queryClient = useQueryClient(); const submitOnboarding: SubmitHandler = (data) => { - console.log(data); + mutation.mutate(data, { + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["userInfo"] }); + router.push("/user/profile"); + }, + onError: (error) => { + console.error("Error updating user info:", error); + }, + }); }; + useEffect(() => { + if (userInfo) { + setValue("userName", userInfo.data.userName); + setValue("userPhone", userInfo.data.userPhone); + setValue("userEmail", userInfo.data.userEmail); + } + }); + return (
@@ -40,9 +60,7 @@ const EditProfile: React.FC = () => { ))}
- + ); diff --git a/src/features/user/profile/constants/const.ts b/src/features/user/profile/constants/const.ts index 749016d..abfac5b 100644 --- a/src/features/user/profile/constants/const.ts +++ b/src/features/user/profile/constants/const.ts @@ -14,29 +14,29 @@ export const ACCOUNT_SETTING = { export const EDIT_ACCOUNT_INFO = "계정 정보 수정"; export const EDIT_ACCOUNT_INFO_INPUT_ARR = [ - { - title: "이름", - type: "input", - essential: true, - name: "userName" - }, - { - title: "이메일", - type: "input", - essential: true, - name: "userEmail" - }, - { - title: "휴대폰 번호", - type: "btnInput", - essential: true, - name: "userMobile" - } -] + { + title: "이름", + type: "input", + essential: true, + name: "userName", + }, + { + title: "이메일", + type: "input", + essential: true, + name: "userEmail", + }, + { + title: "휴대폰 번호", + type: "btnInput", + essential: true, + name: "userPhone", + }, +]; export const EDIT_ACCOUNT_INFO_BTN = { getNum: "인증번호 받기", checkNum: "인증번호 확인", retryNum: "재전송", - complete: "수정 완료" + complete: "수정 완료", }; diff --git a/src/hook/user/useGetInfoQuery.ts b/src/hook/user/useGetUserInfoQuery.ts similarity index 54% rename from src/hook/user/useGetInfoQuery.ts rename to src/hook/user/useGetUserInfoQuery.ts index 4a29f8e..7b74a7f 100644 --- a/src/hook/user/useGetInfoQuery.ts +++ b/src/hook/user/useGetUserInfoQuery.ts @@ -1,14 +1,14 @@ import { http } from "@/apis/http"; import { CommonNoPageRes } from "@/types"; -import { userInfo } from "@/types/user/types"; +import { signUpInfo, userInfo } from "@/types/user/types"; import { useQuery } from "@tanstack/react-query"; -export const useGetInfoQuery = () => { - return useQuery>({ +export const useGetUserInfoQuery = () => { + return useQuery>({ queryKey: ["userInfo"], queryFn: async () => { const response = - await http.get>(`/user/getInfo`); + await http.get>(`/user/getInfo`); return response; }, staleTime: 1000, diff --git a/src/hook/user/useModificationUserInfoMutation.ts b/src/hook/user/useModificationUserInfoMutation.ts new file mode 100644 index 0000000..f8ba8e5 --- /dev/null +++ b/src/hook/user/useModificationUserInfoMutation.ts @@ -0,0 +1,12 @@ +import { http } from "@/apis/http"; +import { signUpInfo } from "@/types/user/types"; +import { useMutation } from "@tanstack/react-query"; + +export const useModificationUserInfoMutation = () => { + return useMutation({ + mutationFn: (data: signUpInfo) => http.post(`/user/modification`, data), + onSuccess: (data) => { + console.log(data); + }, + }); +}; From 0d51fcd22407a0c136dd9758432b2c8759a0eb26 Mon Sep 17 00:00:00 2001 From: imi21123 Date: Sun, 23 Jun 2024 11:52:26 +0900 Subject: [PATCH 14/33] =?UTF-8?q?Feat:=20=EC=9D=BC=EC=A0=95=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20query=20parameter=20=EC=9D=B4=EB=A6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../attendance/components/CurrentAttendance.tsx | 5 ++--- .../manager/attendance/components/TodaySchedule.tsx | 4 ++-- .../attendance/manager/useTodayScheduleListQuery.ts | 13 ++++++++----- src/hook/attendance/useAttendanceListQuery.ts | 5 +---- src/types/attendance/types.ts | 6 +++--- 5 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/features/manager/attendance/components/CurrentAttendance.tsx b/src/features/manager/attendance/components/CurrentAttendance.tsx index 77ed270..a077625 100644 --- a/src/features/manager/attendance/components/CurrentAttendance.tsx +++ b/src/features/manager/attendance/components/CurrentAttendance.tsx @@ -18,9 +18,8 @@ const CurrentAttendance: React.FC = ({ attendanceUpdated, onAttendanceUpdate, }) => { - const { data, isError, refetch } = useAttendanceListQuery({ - clubId: 1, - }); + const clubId = 1; + const { data, isError, refetch } = useAttendanceListQuery(clubId); const [selectedAttendance, setSelectedAttendance] = useState(null); diff --git a/src/features/manager/attendance/components/TodaySchedule.tsx b/src/features/manager/attendance/components/TodaySchedule.tsx index e116142..56ee6f1 100644 --- a/src/features/manager/attendance/components/TodaySchedule.tsx +++ b/src/features/manager/attendance/components/TodaySchedule.tsx @@ -33,8 +33,8 @@ const TodaySchedule: React.FC = ({ refetch: refetchTodaySchedule, } = useTodayScheduleListQuery({ clubId: clubId, - sDate: "2024-05-28", - eDate: "2024-05-28", + startDate: "2024-05-28", + endDate: "2024-05-28", }); const { refetch: refetchAttendance } = useAttendanceStartQuery({ diff --git a/src/hook/attendance/manager/useTodayScheduleListQuery.ts b/src/hook/attendance/manager/useTodayScheduleListQuery.ts index 43d08cc..3a3c57e 100644 --- a/src/hook/attendance/manager/useTodayScheduleListQuery.ts +++ b/src/hook/attendance/manager/useTodayScheduleListQuery.ts @@ -1,18 +1,21 @@ import { http } from "@/apis/http"; import { CommonRes } from "@/types"; -import { AttendanceSchedule, TodayScheduleItem } from "@/types/attendance/types"; +import { + AttendanceSchedule, + TodayScheduleItem, +} from "@/types/attendance/types"; import { useQuery } from "@tanstack/react-query"; export const useTodayScheduleListQuery = ({ clubId, - sDate, - eDate, + startDate, + endDate, }: TodayScheduleItem) => { return useQuery>({ - queryKey: ["todayScheduleList", clubId, sDate, eDate], + queryKey: ["todayScheduleList", clubId, startDate, endDate], queryFn: async () => { const response = await http.get>( - `/clubs/${clubId}/schedules?sDate=${sDate}&eDate=${eDate}` + `/clubs/${clubId}/schedules?startDate=${startDate}&endDate=${endDate}` ); return response; }, diff --git a/src/hook/attendance/useAttendanceListQuery.ts b/src/hook/attendance/useAttendanceListQuery.ts index cc6eabe..d88aaa2 100644 --- a/src/hook/attendance/useAttendanceListQuery.ts +++ b/src/hook/attendance/useAttendanceListQuery.ts @@ -9,10 +9,7 @@ export const useAttendanceListQuery = (clubId: number) => { queryKey: [`attendanceList`, clubId], queryFn: () => http.get>( - `/${clubId}/attendance-list`, - { - headers: { accept: "*/*" }, - } + `/${clubId}/attendance-list` ), }); }; diff --git a/src/types/attendance/types.ts b/src/types/attendance/types.ts index 6e1efec..5f69db4 100644 --- a/src/types/attendance/types.ts +++ b/src/types/attendance/types.ts @@ -20,9 +20,9 @@ export type GetAttendanceListResponse = AttendanceListItem[]; // 오늘의 일정 export interface TodayScheduleItem - extends Omit { - sDate: string; - eDate: string; + extends Omit { + startDate: string; + endDate: string; } // 출석 아이템 From 5f613176004ad3f4506297b881fae20bd51dcf6a Mon Sep 17 00:00:00 2001 From: imi21123 Date: Sun, 23 Jun 2024 12:16:06 +0900 Subject: [PATCH 15/33] =?UTF-8?q?Feat:=20=EC=B6=9C=EC=84=9D=20=EC=97=B4?= =?UTF-8?q?=EA=B8=B0=20http=20method=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/member/attendance/AttendanceListPage.tsx | 2 +- .../member/attendance/components/AttendanceList.tsx | 11 +++++------ .../attendance/manager/useAttendanceStartQuery.ts | 3 ++- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/features/member/attendance/AttendanceListPage.tsx b/src/features/member/attendance/AttendanceListPage.tsx index 2cce08c..309fd49 100644 --- a/src/features/member/attendance/AttendanceListPage.tsx +++ b/src/features/member/attendance/AttendanceListPage.tsx @@ -7,7 +7,7 @@ const AttendanceListPage: React.FC = () => { <> {/* */} -