From 4eb96c2d8bc94c78fb901e9a73e8f88e79169fa4 Mon Sep 17 00:00:00 2001 From: ajin Date: Sat, 9 Nov 2024 20:44:17 +0900 Subject: [PATCH 01/16] =?UTF-8?q?Feat:=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=BF=A0=ED=82=A4=20=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyPage/OvenMenu/index.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/pages/MyPage/OvenMenu/index.tsx b/src/pages/MyPage/OvenMenu/index.tsx index dd6fa5fc..142b8542 100644 --- a/src/pages/MyPage/OvenMenu/index.tsx +++ b/src/pages/MyPage/OvenMenu/index.tsx @@ -1,5 +1,5 @@ import { BiListUl, BiSolidMessageRounded } from 'react-icons/bi' -import { useNavigate } from 'react-router-dom' +import { Link, useNavigate } from 'react-router-dom' import { Box, Flex, Text } from '@chakra-ui/react' @@ -53,13 +53,15 @@ export default function OvenMenu({ userId, isMyPage }: OvenMenuProps) { /> )} {isMyPage && ( - + + + )} From 2b1961efce277680dfea31f8ef118bfabacb7428 Mon Sep 17 00:00:00 2001 From: ajin Date: Sat, 9 Nov 2024 21:09:27 +0900 Subject: [PATCH 02/16] =?UTF-8?q?Fix:=20=ED=9E=8C=ED=8A=B8=20drawer=20?= =?UTF-8?q?=EC=99=B8=EB=B6=80=20=ED=81=B4=EB=A6=AD=20=ED=95=B8=EB=93=A4?= =?UTF-8?q?=EB=9F=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=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/hooks/useClickOutsideElement.ts | 20 -------------------- src/pages/CookieRecordPage/index.tsx | 27 ++++++++++++++++++++------- 2 files changed, 20 insertions(+), 27 deletions(-) delete mode 100644 src/hooks/useClickOutsideElement.ts diff --git a/src/hooks/useClickOutsideElement.ts b/src/hooks/useClickOutsideElement.ts deleted file mode 100644 index b449c8d7..00000000 --- a/src/hooks/useClickOutsideElement.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useEffect } from 'react' - -export function useClickOutSideElement( - element: HTMLElement | null, - handler: () => void, - condition?: boolean -) { - useEffect(() => { - const listener = (event: MouseEvent) => { - if (!condition && element && !element.contains(event.target as Node)) { - handler() - } - } - document.addEventListener('mousedown', listener) - - return () => { - document.removeEventListener('mousedown', listener) - } - }, [element, handler, condition]) -} diff --git a/src/pages/CookieRecordPage/index.tsx b/src/pages/CookieRecordPage/index.tsx index e5cd5038..4e52ef63 100644 --- a/src/pages/CookieRecordPage/index.tsx +++ b/src/pages/CookieRecordPage/index.tsx @@ -13,7 +13,6 @@ import { } from '@chakra-ui/react' import { Loading } from '@/components/Loading' -import { useClickOutSideElement } from '@/hooks/useClickOutsideElement' import { CalendarSection } from './CalendarSection' import { CookieRecordErrorFallback } from './CookieRecordErrorFallback' @@ -38,16 +37,30 @@ export default function CookieRecordPage() { const hintDrawer = useDisclosure() const hintModal = useDisclosure() - useClickOutSideElement( - document.getElementById('hint-drawer'), - hintDrawer.onClose, - hintModal.isOpen - ) - useEffect(() => { setPortalNode(document.getElementById('page-layout')) }, []) + useEffect(() => { + const element = document.getElementById('hint-drawer') + + const listener = (event: MouseEvent) => { + if ( + !hintModal.isOpen && + element && + !element.contains(event.target as Node) + ) { + hintDrawer.onClose() + } + } + + document.addEventListener('mousedown', listener) + + return () => { + document.removeEventListener('mousedown', listener) + } + }, [hintDrawer, hintModal]) + return ( From 4ce7a53a4373aae853474f9a718fed9d38157a23 Mon Sep 17 00:00:00 2001 From: ajin Date: Sat, 9 Nov 2024 22:51:03 +0900 Subject: [PATCH 03/16] =?UTF-8?q?Refactor:=20=EC=BF=A0=ED=82=A4=20?= =?UTF-8?q?=EC=BA=98=EB=A6=B0=EB=8D=94=20activeMonth=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CalendarSection/CookieCalendar/index.tsx | 79 +++++++++++++++++++ .../CalendarSection/index.tsx | 58 ++------------ src/pages/CookieRecordPage/index.tsx | 9 ++- 3 files changed, 95 insertions(+), 51 deletions(-) create mode 100644 src/pages/CookieRecordPage/CalendarSection/CookieCalendar/index.tsx diff --git a/src/pages/CookieRecordPage/CalendarSection/CookieCalendar/index.tsx b/src/pages/CookieRecordPage/CalendarSection/CookieCalendar/index.tsx new file mode 100644 index 00000000..7c6c6639 --- /dev/null +++ b/src/pages/CookieRecordPage/CalendarSection/CookieCalendar/index.tsx @@ -0,0 +1,79 @@ +import Calendar from 'react-calendar' +import 'react-calendar/dist/Calendar.css' +import { BiSolidCircle } from 'react-icons/bi' + +import { Box, Flex } from '@chakra-ui/react' +import { format, formatDate } from 'date-fns' + +import { useAnswerDays } from '@/api/services/answer/record.api' + +interface CookieCalendarProps { + activeMonth: string + setActiveMonth: (activeStartDate: Date) => void +} + +export const CookieCalendar = ({ + activeMonth, + setActiveMonth, +}: CookieCalendarProps) => { + const { data: days, status } = useAnswerDays({ date: activeMonth }) + + if (status === 'pending') return + + const cookieDays = + days?.map((day) => { + const monthYear = activeMonth.slice(0, 7) + return `${monthYear}-${String(day).padStart(2, '0')}` + }) ?? [] + + return ( + formatDate(date, 'dd')} + next2Label={null} + prev2Label={null} + showNeighboringMonth={false} + tileContent={({ date }) => MarkedCircle({ cookieDays, date })} + onActiveStartDateChange={({ activeStartDate }) => { + if (activeStartDate) setActiveMonth(activeStartDate) + }} + /> + ) +} + +const MarkedCircle = ({ + cookieDays, + date, +}: { + cookieDays: string[] + date: Date +}) => { + if (!cookieDays.length) return

+ + const formattedDate = format(date, 'yyyy-MM-dd') + + const cookieDaysSet = new Set( + cookieDays.map((day) => format(day, 'yyyy-MM-dd')) + ) + + if (cookieDaysSet.has(formattedDate)) { + return ( + + + + ) + } + + return

+} + +export const CalendarSkeleton = () => { + return ( + + ) +} diff --git a/src/pages/CookieRecordPage/CalendarSection/index.tsx b/src/pages/CookieRecordPage/CalendarSection/index.tsx index 90fed2bf..bbb42ca6 100644 --- a/src/pages/CookieRecordPage/CalendarSection/index.tsx +++ b/src/pages/CookieRecordPage/CalendarSection/index.tsx @@ -1,15 +1,12 @@ import { useState } from 'react' -import Calendar from 'react-calendar' import 'react-calendar/dist/Calendar.css' -import { BiSolidCircle } from 'react-icons/bi' import { Flex } from '@chakra-ui/react' -import { format, formatDate } from 'date-fns' +import { format } from 'date-fns' -import { useAnswerDays } from '@/api/services/answer/record.api' -import { Loading } from '@/components/Loading' import { Modal } from '@/types' +import { CookieCalendar } from './CookieCalendar' import { MonthlyCookieLogList } from './MonthlyCookieLogList' import { calendarStyles } from './styles' @@ -21,60 +18,21 @@ export const CalendarSection = ({ hintDrawer }: CalendarSectionProps) => { const [activeMonth, setActiveMonth] = useState( format(new Date(), 'yyyy-MM-01') ) - const { data: days, status } = useAnswerDays({ date: activeMonth }) - - if (status === 'pending') return - - const cookieDays = - days?.map((day) => { - const monthYear = activeMonth.slice(0, 7) - return `${monthYear}-${String(day).padStart(2, '0')}` - }) ?? [] const getActiveMonth = (activeStartDate: Date) => { const newActiveMonth = format(activeStartDate, 'yyyy-MM-01') - setActiveMonth(newActiveMonth) + if (newActiveMonth !== activeMonth) { + setActiveMonth(newActiveMonth) + } } return ( - formatDate(date, 'dd')} - next2Label={null} - prev2Label={null} - showNeighboringMonth={false} - tileContent={({ date }) => MarkedCircle({ cookieDays, date })} - onActiveStartDateChange={({ activeStartDate }) => { - if (activeStartDate) getActiveMonth(activeStartDate) - }} + ) } - -const MarkedCircle = ({ - cookieDays, - date, -}: { - cookieDays: string[] - date: Date -}) => { - if (!cookieDays.length) return

- - const formattedDate = format(date, 'yyyy-MM-dd') - - const cookieDaysSet = new Set( - cookieDays.map((day) => format(day, 'yyyy-MM-dd')) - ) - - if (cookieDaysSet.has(formattedDate)) { - return ( - - - - ) - } - - return

-} diff --git a/src/pages/CookieRecordPage/index.tsx b/src/pages/CookieRecordPage/index.tsx index 4e52ef63..32ab61ae 100644 --- a/src/pages/CookieRecordPage/index.tsx +++ b/src/pages/CookieRecordPage/index.tsx @@ -15,6 +15,7 @@ import { import { Loading } from '@/components/Loading' import { CalendarSection } from './CalendarSection' +import { CalendarSkeleton } from './CalendarSection/CookieCalendar' import { CookieRecordErrorFallback } from './CookieRecordErrorFallback' import { CookieRecordHeader } from './CookieRecordHeader' import { HintDrawer } from './HintDrawer' @@ -98,7 +99,13 @@ export default function CookieRecordPage() { - }> + + + + } + > From e3dea108496f968fd308f092a1aef5d587f669eb Mon Sep 17 00:00:00 2001 From: ajin Date: Sun, 10 Nov 2024 14:29:40 +0900 Subject: [PATCH 04/16] =?UTF-8?q?Refactor:=20=EC=BF=A0=ED=82=A4=20?= =?UTF-8?q?=EA=B8=B0=EB=A1=9D=20=EB=82=B4=EB=A6=BC=EC=B0=A8=EC=88=9C?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/services/answer/record.api.ts | 5 ++++- src/pages/CookieRecordPage/LogSection/index.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/api/services/answer/record.api.ts b/src/api/services/answer/record.api.ts index 56e06c75..6b97aca9 100644 --- a/src/api/services/answer/record.api.ts +++ b/src/api/services/answer/record.api.ts @@ -8,6 +8,7 @@ type AnswerRecordPagingResponse = PagingResponse type AnswerRecordRequsetParams = { date?: string + direction?: 'ASC' | 'DESC' } & PagingRequestParams const getAnswerRecordPaging = async (params: AnswerRecordRequsetParams) => { @@ -29,6 +30,7 @@ const getAnswerRecordPaging = async (params: AnswerRecordRequsetParams) => { interface AnswerRecordPagingProps extends PagingRequestParams { initPageToken?: string date?: string + direction?: 'ASC' | 'DESC' } export const useAnswerRecordPaging = ({ @@ -36,11 +38,12 @@ export const useAnswerRecordPaging = ({ sort, initPageToken, date, + direction = 'ASC', }: AnswerRecordPagingProps) => { return useSuspenseInfiniteQuery({ queryKey: ['answer', 'record', initPageToken, date], queryFn: ({ pageParam = initPageToken }) => - getAnswerRecordPaging({ page: pageParam, size, sort, date }), + getAnswerRecordPaging({ page: pageParam, size, sort, date, direction }), initialPageParam: initPageToken, getNextPageParam: (lastPage) => lastPage.nextPageToken, }) diff --git a/src/pages/CookieRecordPage/LogSection/index.tsx b/src/pages/CookieRecordPage/LogSection/index.tsx index db91f1ee..39f12ccc 100644 --- a/src/pages/CookieRecordPage/LogSection/index.tsx +++ b/src/pages/CookieRecordPage/LogSection/index.tsx @@ -18,7 +18,7 @@ interface LogSectionProps { export const LogSection = ({ hintDrawer }: LogSectionProps) => { const { data, hasNextPage, isFetchingNextPage, fetchNextPage } = - useAnswerRecordPaging({}) + useAnswerRecordPaging({ direction: 'DESC' }) const answerRecords = data?.pages.flatMap((page) => page.records) if (!answerRecords.length) { From ca88d5cac872c9ecbe7e8409b14232f188da7861 Mon Sep 17 00:00:00 2001 From: ajin Date: Sun, 10 Nov 2024 14:43:56 +0900 Subject: [PATCH 05/16] =?UTF-8?q?Fix:=20=EC=BF=A0=ED=82=A4=20=EC=A3=BC?= =?UTF-8?q?=EA=B8=B0=20=EC=84=B1=EA=B3=B5=20=EC=8B=9C=20=ED=8F=AC=EC=9D=B8?= =?UTF-8?q?=ED=8A=B8=20query=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/services/answer/question.api.ts | 23 ++++--------------- .../CommonGame/MainSection/index.tsx | 15 ++++++++++-- .../GroupGame/GroupMainSection/index.tsx | 15 ++++++++++-- 3 files changed, 30 insertions(+), 23 deletions(-) diff --git a/src/api/services/answer/question.api.ts b/src/api/services/answer/question.api.ts index 2697320a..6ff5c605 100644 --- a/src/api/services/answer/question.api.ts +++ b/src/api/services/answer/question.api.ts @@ -1,30 +1,15 @@ -import { useMutation } from '@tanstack/react-query' - import { authorizationInstance } from '@/api/instance' -type AnswerQuestionParam = { +export type AnswerQuestionParam = { questionId: number pickedId: number } - -type AnswerQuestionResponse = { - message: string -} - -const answerRandomQuestion = async ({ +export const answerRandomQuestion = async ({ questionId, pickedId, -}: AnswerQuestionParam): Promise => { - const response = await authorizationInstance.post('/api/answer/common', { +}: AnswerQuestionParam) => { + await authorizationInstance.post('/api/answer/common', { questionId, pickedId, }) - - return response.data -} - -export const useAnswerRandomQuestion = () => { - return useMutation({ - mutationFn: (params: AnswerQuestionParam) => answerRandomQuestion(params), - }) } diff --git a/src/pages/MainPage/GameSection/CommonGame/MainSection/index.tsx b/src/pages/MainPage/GameSection/CommonGame/MainSection/index.tsx index a147e9fb..90190d9b 100644 --- a/src/pages/MainPage/GameSection/CommonGame/MainSection/index.tsx +++ b/src/pages/MainPage/GameSection/CommonGame/MainSection/index.tsx @@ -2,9 +2,15 @@ import { useEffect, useState } from 'react' import { BiChevronsRight, BiGroup } from 'react-icons/bi' import { Button, Flex, Heading, Text } from '@chakra-ui/react' +import { useMutation } from '@tanstack/react-query' -import { useAnswerRandomQuestion } from '@/api/services/answer/question.api' +import { queryClient } from '@/api/instance' +import { + AnswerQuestionParam, + answerRandomQuestion, +} from '@/api/services/answer/question.api' import { useRandomQuestion } from '@/api/services/question/random.api' +import { pointQuries } from '@/api/services/user/point.api' import { Loading } from '@/components/Loading' import { useProfileRandom } from '@/hooks/useProfileRandom' import { Friend } from '@/types' @@ -31,7 +37,12 @@ export const MainSection = ({ } = useRandomQuestion({ size: QUESTION_SIZE, }) - const { mutate: answerQuestion } = useAnswerRandomQuestion() + const { mutate: answerQuestion } = useMutation({ + mutationFn: (params: AnswerQuestionParam) => answerRandomQuestion(params), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: pointQuries.all() }) + }, + }) const { pickedProfiles, reloadRandomProfiles } = useProfileRandom(friends) const [questionIndex, setQuestionIndex] = useState(0) diff --git a/src/pages/MainPage/GameSection/GroupGame/GroupMainSection/index.tsx b/src/pages/MainPage/GameSection/GroupGame/GroupMainSection/index.tsx index 9508bb13..a5ad586d 100644 --- a/src/pages/MainPage/GameSection/GroupGame/GroupMainSection/index.tsx +++ b/src/pages/MainPage/GameSection/GroupGame/GroupMainSection/index.tsx @@ -3,9 +3,15 @@ import { BiChevronsRight, BiGroup } from 'react-icons/bi' import { Link } from 'react-router-dom' import { Button, Flex, Heading, Text } from '@chakra-ui/react' +import { useMutation } from '@tanstack/react-query' -import { useAnswerRandomQuestion } from '@/api/services/answer/question.api' +import { queryClient } from '@/api/instance' +import { + AnswerQuestionParam, + answerRandomQuestion, +} from '@/api/services/answer/question.api' import { useGroupRandomQuestion } from '@/api/services/question/random.api' +import { pointQuries } from '@/api/services/user/point.api' import { Loading } from '@/components/Loading' import { useProfileRandom } from '@/hooks/useProfileRandom' import { Member } from '@/types' @@ -32,7 +38,12 @@ export const GroupMainSection = ({ status, refetch, } = useGroupRandomQuestion({ groupId }) - const { mutate: answerQuestion } = useAnswerRandomQuestion() + const { mutate: answerQuestion } = useMutation({ + mutationFn: (params: AnswerQuestionParam) => answerRandomQuestion(params), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: pointQuries.all() }) + }, + }) const { pickedProfiles, reloadRandomProfiles } = useProfileRandom(members) const [questionSize, setQuestionSize] = useState(QUESTION_SIZE) From 68d2ccf2dfd4bf9943156bf2c6e8383d79ba3a93 Mon Sep 17 00:00:00 2001 From: ajin Date: Sun, 10 Nov 2024 14:46:15 +0900 Subject: [PATCH 06/16] =?UTF-8?q?Fix:=20=ED=8F=AC=EC=9D=B8=ED=8A=B8=200?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=ED=9E=8C=ED=8A=B8=20=EC=95=88=EB=B3=B4?= =?UTF-8?q?=EC=9E=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/CookieRecordPage/HintDrawer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/CookieRecordPage/HintDrawer/index.tsx b/src/pages/CookieRecordPage/HintDrawer/index.tsx index f33ce9f7..684f4ebb 100644 --- a/src/pages/CookieRecordPage/HintDrawer/index.tsx +++ b/src/pages/CookieRecordPage/HintDrawer/index.tsx @@ -20,7 +20,7 @@ export const HintDrawer = ({ isOpen, modal }: HintDrawerProps) => { const { data: point } = useQuery(pointQuries.point()) if (!selectedAnswer) return null - if (!point) return null + if (point === undefined) return null return ( Date: Sun, 10 Nov 2024 16:00:07 +0900 Subject: [PATCH 07/16] =?UTF-8?q?refactor:=20AvatarLabel=20=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AvatarLabel/index.tsx | 65 ------------------- .../AvatarLabelWithNavigate/index.tsx | 33 ++++++++++ .../GroupSection/GroupList/index.tsx | 8 +-- .../MemberSection/FriendSection/index.tsx | 12 ++-- .../GroupMemberSection/index.tsx | 12 ++-- .../SelectFriendSection/MemberList/index.tsx | 3 +- 6 files changed, 51 insertions(+), 82 deletions(-) delete mode 100644 src/components/AvatarLabel/index.tsx create mode 100644 src/components/AvatarLabelWithNavigate/index.tsx diff --git a/src/components/AvatarLabel/index.tsx b/src/components/AvatarLabel/index.tsx deleted file mode 100644 index 784d653d..00000000 --- a/src/components/AvatarLabel/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Link } from 'react-router-dom' - -import { - Avatar, - Box, - Flex, - HStack, - StackProps, - Text, - Tooltip, -} from '@chakra-ui/react' - -interface AvatarLabelProps extends StackProps { - avatarSrc?: string - label: string - isNavigate: false - tooltipLabel?: never - linkTo?: never -} - -interface AvatarLabelWithNavigateProps extends StackProps { - avatarSrc?: string - label: string - isNavigate: true - tooltipLabel: string - linkTo: string - onClick?: () => void -} - -export const AvatarLabelWithNavigate = ({ - avatarSrc, - label, - isNavigate, - tooltipLabel, - linkTo, - onClick, -}: AvatarLabelProps | AvatarLabelWithNavigateProps) => { - return ( - - {isNavigate ? ( - - - - - - - - ) : ( - - )} - - {label} - - - ) -} diff --git a/src/components/AvatarLabelWithNavigate/index.tsx b/src/components/AvatarLabelWithNavigate/index.tsx new file mode 100644 index 00000000..43892501 --- /dev/null +++ b/src/components/AvatarLabelWithNavigate/index.tsx @@ -0,0 +1,33 @@ +import { useNavigate } from 'react-router-dom' + +import { Avatar, HStack, StackProps, Text } from '@chakra-ui/react' + +interface AvatarLabelWithNavigateProps extends StackProps { + avatarSrc?: string + label: string + linkTo?: string +} + +export const AvatarLabelWithNavigate = ({ + avatarSrc, + label, + linkTo, +}: AvatarLabelWithNavigateProps) => { + const navigate = useNavigate() + + if (linkTo) { + return ( + navigate(linkTo)}> + + {label} + + ) + } + + return ( + + + {label} + + ) +} diff --git a/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx b/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx index eecd2958..ec26b91b 100644 --- a/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx +++ b/src/pages/Layout/MainLayout/GroupSection/GroupList/index.tsx @@ -1,17 +1,14 @@ -import { useNavigate } from 'react-router-dom' - import { Flex } from '@chakra-ui/react' import { useGroupPaging } from '@/api/services/group/group.api' import { ActiveBrownBox } from '@/components/ActiveBrownBox' -import { AvatarLabelWithNavigate } from '@/components/AvatarLabel' +import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate' import { IntersectionObserverLoader } from '@/components/IntersectionObserverLoader' import { DATA_ERROR_MESSAGES } from '@/constants/error-message' import { useMemberTypeStore } from '@/stores/member-type' import { useSelectedGroupStore } from '@/stores/selected-group' export const GroupList = () => { - const navigate = useNavigate() const { data, hasNextPage, isFetchingNextPage, fetchNextPage } = useGroupPaging({ size: 8 }) @@ -39,12 +36,9 @@ export const GroupList = () => { }} > navigate('/')} /> ))} diff --git a/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx b/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx index 60b7dd17..1eda9dc3 100644 --- a/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx +++ b/src/pages/Layout/MainLayout/MemberSection/FriendSection/index.tsx @@ -2,7 +2,7 @@ import { Box, Center, Flex, Text } from '@chakra-ui/react' import { useSuspenseQuery } from '@tanstack/react-query' import { friendsQueries } from '@/api/services/friend/queries' -import { AvatarLabelWithNavigate } from '@/components/AvatarLabel' +import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate' import { PageLayout } from '@/components/PageLayout' import { FriendHeader, FriendHeaderSkeleton } from './FriendHeader' @@ -17,13 +17,17 @@ export const FriendSection = () => { {friends.map((friend) => ( - + ))} diff --git a/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx b/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx index 004415e9..7c3d0e1c 100644 --- a/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx +++ b/src/pages/Layout/MainLayout/MemberSection/GroupMemberSection/index.tsx @@ -3,7 +3,7 @@ import { BiSolidGroup } from 'react-icons/bi' import { Box, Flex } from '@chakra-ui/react' import { useGrupMemberPagingSuspense } from '@/api/services/group/member.api' -import { AvatarLabelWithNavigate } from '@/components/AvatarLabel' +import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate' import { PageLayout } from '@/components/PageLayout' import { DATA_ERROR_MESSAGES } from '@/constants/error-message' @@ -21,13 +21,17 @@ export const GroupMemberSection = ({ groupId }: GroupMemberSectionProps) => { }> {members.map((member) => ( - + ))} diff --git a/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx b/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx index 3c9d38c3..57fcc273 100644 --- a/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx +++ b/src/pages/Layout/MainLayout/MemberSection/SelectFriendSection/MemberList/index.tsx @@ -2,7 +2,7 @@ import { BiCircle, BiSolidCheckCircle } from 'react-icons/bi' import { Box, Flex } from '@chakra-ui/react' -import { AvatarLabelWithNavigate } from '@/components/AvatarLabel' +import { AvatarLabelWithNavigate } from '@/components/AvatarLabelWithNavigate' import { useFriendStore } from '@/stores/friends' import { Friend } from '@/types' @@ -24,7 +24,6 @@ export const MemberList = ({ members, isFriend }: MemberListProps) => { paddingY={1.5} > From 6f1a3321f9eddbac5703f9a62e26efbe6a1a6783 Mon Sep 17 00:00:00 2001 From: ajin Date: Sun, 10 Nov 2024 16:48:58 +0900 Subject: [PATCH 08/16] =?UTF-8?q?Feat:=20=EC=BF=A0=ED=82=A4=20=EC=95=A0?= =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cookies/index.tsx | 38 ++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/components/Cookies/index.tsx diff --git a/src/components/Cookies/index.tsx b/src/components/Cookies/index.tsx new file mode 100644 index 00000000..c0b3bb67 --- /dev/null +++ b/src/components/Cookies/index.tsx @@ -0,0 +1,38 @@ +import { Box, Flex, FlexProps, Image, keyframes } from '@chakra-ui/react' + +import Cookie1 from '@/assets/cookie1.svg' +import Cookie2 from '@/assets/cookie2.svg' +import Cookie3 from '@/assets/cookie3.svg' +import Cookie4 from '@/assets/cookie4.svg' + +const CookieList = [Cookie4, Cookie2, Cookie3, Cookie1] + +interface CookiesProps extends FlexProps { + width?: number +} + +export const Cookies = ({ width = 20, ...props }: CookiesProps) => { + return ( + + {Array.from({ length: 4 }, (_, index) => ( + + + + ))} + + ) +} + +const pulseAnimation = keyframes` + 0%, 100% { + transform: scale(0.98); + } + 50% { + transform: scale(1); + } +` From 0579652d9ca1a6d4e856ba327954634a9052c08f Mon Sep 17 00:00:00 2001 From: ajin Date: Sun, 10 Nov 2024 17:40:06 +0900 Subject: [PATCH 09/16] =?UTF-8?q?Refactor:=20=EA=B7=B8=EB=A3=B9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EA=B7=B8?= =?UTF-8?q?=EB=A3=B9=20=EC=BF=A0=ED=82=A4=20=EC=A3=BC=EA=B8=B0=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EA=B8=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/GroupPage/index.tsx | 39 ++++++++++++++++++++-- src/pages/MainPage/ReadySection/index.tsx | 40 ++--------------------- 2 files changed, 39 insertions(+), 40 deletions(-) diff --git a/src/pages/GroupPage/index.tsx b/src/pages/GroupPage/index.tsx index 03477f55..58ef2383 100644 --- a/src/pages/GroupPage/index.tsx +++ b/src/pages/GroupPage/index.tsx @@ -1,14 +1,16 @@ import { Suspense } from 'react' -import { useParams } from 'react-router-dom' +import { Link, useParams } from 'react-router-dom' -import { Box, Flex, Image, Text } from '@chakra-ui/react' +import { Box, Button, Card, Flex, Heading, Image, Text } from '@chakra-ui/react' import { useGroupInfo, useGroupRanking } from '@/api/services/group/group.api' import { useGroupRole } from '@/api/services/group/member.api' import sadCookie from '@/assets/sadCookie.svg' +import { Cookies } from '@/components/Cookies' import { Loading } from '@/components/Loading' import { RankingGraph } from '@/components/RankingGraph' import ErrorPage from '@/pages/ErrorPage' +import { colors } from '@/styles/colors' import { ExitGroupButton } from './ExitGroupButton' import Management from './Management' @@ -51,6 +53,37 @@ const GroupSection = ({ groupId }: GroupSectionProps) => { return ( + + + + + + + + + + + + + 👑 쿠키 랭킹 + + + 가장 많이 쿠키를 주고 받은 사람 Top3 + + {rankLength ? ( @@ -68,7 +101,7 @@ const GroupSection = ({ groupId }: GroupSectionProps) => { ) : ( - + )} diff --git a/src/pages/MainPage/ReadySection/index.tsx b/src/pages/MainPage/ReadySection/index.tsx index 78748f32..8f410752 100644 --- a/src/pages/MainPage/ReadySection/index.tsx +++ b/src/pages/MainPage/ReadySection/index.tsx @@ -1,20 +1,6 @@ -import { - Box, - Button, - Center, - Flex, - Heading, - Image, - Text, -} from '@chakra-ui/react' -import { keyframes } from '@emotion/react' +import { Button, Center, Flex, Heading, Text } from '@chakra-ui/react' -import Cookie1 from '@/assets/cookie1.svg' -import Cookie2 from '@/assets/cookie2.svg' -import Cookie3 from '@/assets/cookie3.svg' -import Cookie4 from '@/assets/cookie4.svg' - -const Cookies = [Cookie4, Cookie2, Cookie3, Cookie1] +import { Cookies } from '@/components/Cookies' interface ReadySectionProps { groupName?: string @@ -36,18 +22,7 @@ export const ReadySection = ({ groupName, onClickPlay }: ReadySectionProps) => { {groupName ? `${groupName} 멤버에게` : '모든 친구에게'} 칭찬 쿠키 주기 - - {Array.from({ length: 4 }, (_, index) => ( - - - - ))} - +