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

Week10 1차

.eslintrc.cjs

@@ -60,5 +60,6 @@ module.exports = {
       'error',
       { variables: false, functions: false, classes: false },
     ],
+    'react/jsx-props-no-spreading': 'off',
   },
 }

.github/workflows/main.yml

@@ -28,6 +28,9 @@ jobs:
       - name: install npm dependencies
         run: npm install
       - name: react build
+        env:
+          VITE_BASE_URL: ${{ secrets.VITE_BASE_URL }}
+          VITE_LOGIN_URL: ${{ secretes.VITE_LOGIN_URL }}
         run: npm run build
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v2

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -14,16 +14,19 @@
     "@emotion/css": "^11.13.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@hookform/resolvers": "^3.9.1",
     "@tanstack/react-query": "^5.56.2",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.5.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.1",
+    "react-hook-form": "^7.53.1",
     "react-icons": "^5.3.0",
     "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
+    "zod": "^3.23.8",
     "zustand": "^4.5.5"
   },
   "devDependencies": {

src/api/services/answer/hint.api.ts

@@ -0,0 +1,39 @@
+import { queryOptions } from '@tanstack/react-query'
+
+import { authorizationInstance } from '@/api/instance'
+import { Hint } from '@/types'
+
+type HintRequestParams = {
+  answerId: number
+}
+
+type HintResponse = {
+  hints: Hint[]
+}
+
+const getHint = async ({ answerId }: HintRequestParams) => {
+  const response = await authorizationInstance.get<HintResponse>(
+    `/api/answer/hint/${answerId}`
+  )
+
+  return response.data.hints
+}
+
+type BuyHintRequestBody = {
+  answerId: number
+}
+
+export const buyHint = async ({ answerId }: BuyHintRequestBody) => {
+  await authorizationInstance.post('/api/answer/hint', {
+    answerId,
+  })
+}
+
+export const hintQuries = {
+  all: () => ['hints'],
+  hints: (answerId: number) =>
+    queryOptions({
+      queryKey: [...hintQuries.all(), answerId],
+      queryFn: () => getHint({ answerId }),
+    }),
+}

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

@@ -0,0 +1,30 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { authorizationInstance } from '@/api/instance'
+
+type AnswerQuestionParam = {
+  questionId: number
+  pickedId: number
+}
+
+type AnswerQuestionResponse = {
+  message: string
+}
+
+const answerRandomQuestion = async ({
+  questionId,
+  pickedId,
+}: AnswerQuestionParam): Promise<AnswerQuestionResponse> => {
+  const response = await authorizationInstance.post('/api/answer/common', {
+    questionId,
+    pickedId,
+  })
+
+  return response.data
+}
+
+export const useAnswerRandomQuestion = () => {
+  return useMutation({
+    mutationFn: (params: AnswerQuestionParam) => answerRandomQuestion(params),
+  })
+}

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

@@ -0,0 +1,45 @@
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
+
+import { authorizationInstance } from '@/api/instance'
+import { appendParamsToUrl } from '@/api/utils/common/appendParamsToUrl'
+import { AnswerRecord, PagingRequestParams, PagingResponse } from '@/types'
+
+type AnswerRecordPagingResponse = PagingResponse<AnswerRecord[]>
+
+type AnswerRecordRequsetParams = {
+  date?: string
+} & PagingRequestParams
+
+const getAnswerRecordPaging = async (params: AnswerRecordRequsetParams) => {
+  const response = await authorizationInstance.get<AnswerRecordPagingResponse>(
+    appendParamsToUrl('/api/answer/record', params)
+  )
+
+  const { data } = response
+
+  return {
+    records: data.content,
+    nextPageToken:
+      data.page !== data.totalPages ? (data.page + 1).toString() : undefined,
+  }
+}
+
+interface AnswerRecordPagingProps extends PagingRequestParams {
+  initPageToken?: string
+  date?: string
+}
+
+export const useAnswerRecordPaging = ({
+  size = 10,
+  sort,
+  initPageToken,
+  date,
+}: AnswerRecordPagingProps) => {
+  return useSuspenseInfiniteQuery({
+    queryKey: ['answer', 'record', initPageToken],
+    queryFn: ({ pageParam = initPageToken }) =>
+      getAnswerRecordPaging({ page: pageParam, size, sort, date }),
+    initialPageParam: initPageToken,
+    getNextPageParam: (lastPage) => lastPage.nextPageToken,
+  })
+}

src/api/services/friend/index.ts → src/api/services/friend/friend.api.ts

@@ -13,24 +13,14 @@ export const getFriends = async () => {
   return response.data
 }
 
-type FriendId = {
-  id: number
-}
-
 type AddFriendRequestBody = {
-  friends: FriendId[]
+  friends: { id: number }[]
 }
 
-export const addFriends = async (friends: AddFriendRequestBody) => {
-  if (!friends.friends.length) {
+export const addFriends = async ({ friends }: AddFriendRequestBody) => {
+  if (!friends.length) {
     throw new Error(DATA_ERROR_MESSAGES.FRIEND_CANNOT_BE_EMPTY)
   }
 
-  await authorizationInstance.post('/api/friend', friends)
-}
-
-export const fetchKakaoFriends = async () => {
-  const response = await authorizationInstance.get('/api/friend')
-
-  return response.data.friends
+  await authorizationInstance.post('/api/friend', { friends })
 }

src/api/services/friend/useFriends.ts → src/api/services/friend/queries.ts

@@ -1,6 +1,6 @@
 import { queryOptions, useSuspenseQueries } from '@tanstack/react-query'
 
-import { getFriends } from './index'
+import { getFriends } from './friend.api'
 
 export const friendsQueries = {
   all: () => ['friends'],