Merge pull request #195 from kakao-tech-campus-2nd-step3/Week10

Week10 6

src/api/services/answer/question.api.ts

@@ -1,30 +1,32 @@
-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<AnswerQuestionResponse> => {
-  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),
+export type AnswerGroupQuestionParams = {
+  groupId: number
+} & AnswerQuestionParam
+
+export const answerGroupQuestion = async ({
+  groupId,
+  questionId,
+  pickedId,
+}: AnswerGroupQuestionParams) => {
+  await authorizationInstance.post('/api/answer/group', {
+    groupId,
+    questionId,
+    pickedId,
   })
 }

src/api/services/answer/record.api.ts

@@ -8,6 +8,7 @@ type AnswerRecordPagingResponse = PagingResponse<AnswerRecord[]>
 
 type AnswerRecordRequsetParams = {
   date?: string
+  direction?: 'ASC' | 'DESC'
 } & PagingRequestParams
 
 const getAnswerRecordPaging = async (params: AnswerRecordRequsetParams) => {
@@ -29,18 +30,20 @@ const getAnswerRecordPaging = async (params: AnswerRecordRequsetParams) => {
 interface AnswerRecordPagingProps extends PagingRequestParams {
   initPageToken?: string
   date?: string
+  direction?: 'ASC' | 'DESC'
 }
 
 export const useAnswerRecordPaging = ({
   size = 10,
   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,
   })

src/api/services/group/group.api.ts

@@ -68,10 +68,12 @@ export const createGroup = async ({
   groupName,
   groupDescription,
 }: CreateGroupRequestBody) => {
-  await authorizationInstance.post('/api/group', {
+  const response = await authorizationInstance.post<Group>('/api/group', {
     groupName,
     groupDescription,
   })
+
+  return response.data
 }
 
 type GroupInviteCodeRequestParams = {

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 (
+      <HStack gap={1.5} onClick={() => navigate(linkTo)}>
+        <Avatar width={7} height={7} src={avatarSrc} />
+        <Text>{label}</Text>
+      </HStack>
+    )
+  }
+
+  return (
+    <HStack gap={1.5}>
+      <Avatar width={7} height={7} src={avatarSrc} />
+      <Text>{label}</Text>
+    </HStack>
+  )
+}

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 (
+    <Flex gap={1} {...props}>
+      {Array.from({ length: 4 }, (_, index) => (
+        <Box
+          key={index}
+          width={width}
+          height={width}
+          animation={`${pulseAnimation} 2s infinite ease-in-out ${index * -0.8}s`}
+        >
+          <Image src={CookieList[index]} />
+        </Box>
+      ))}
+    </Flex>
+  )
+}
+
+const pulseAnimation = keyframes`
+  0%, 100% {
+    transform: scale(0.98);
+  }
+  50% {
+    transform: scale(1);
+  }
+`

src/hooks/useProfileRandom.ts

@@ -25,7 +25,7 @@ export function useProfileRandom<T>(profiles: T[]) {
     const randomProfiles = pickRandomProfiles(combined)
     setPicked(randomProfiles)
 
-    const remainProfiles = remain.filter(
+    const remainProfiles = combined.filter(
       (profile) => !randomProfiles.includes(profile)
     )
     setRemain(remainProfiles)

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 <CalendarSkeleton />
+
+  const cookieDays =
+    days?.map((day) => {
+      const monthYear = activeMonth.slice(0, 7)
+      return `${monthYear}-${String(day).padStart(2, '0')}`
+    }) ?? []
+
+  return (
+    <Calendar
+      value={activeMonth}
+      formatDay={(_, date) => 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 <p />
+
+  const formattedDate = format(date, 'yyyy-MM-dd')
+
+  const cookieDaysSet = new Set(
+    cookieDays.map((day) => format(day, 'yyyy-MM-dd'))
+  )
+
+  if (cookieDaysSet.has(formattedDate)) {
+    return (
+      <Flex height="fit-content" justifyContent="center" color="primary">
+        <BiSolidCircle size={10} />
+      </Flex>
+    )
+  }
+
+  return <p />
+}
+
+export const CalendarSkeleton = () => {
+  return (
+    <Box
+      width="350px"
+      height="324px"
+      background="white"
+      borderRadius="0.5rem"
+    />
+  )
+}