[Client] shopAPI

packages/api/client/index.ts

@@ -0,0 +1 @@
+export * from './src';

packages/api/client/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './item';
+export * from './order';
+export * from './student';

packages/api/client/src/hooks/item/index.ts

@@ -0,0 +1 @@
+export * from './useGetItemList';

packages/api/client/src/hooks/item/useGetItemList.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { itemQueryKeys, itemUrl, get } from 'api/common';
+
+import type { ShopItemType } from 'types';
+
+import type { UseQueryOptions } from '@tanstack/react-query';
+
+export const useGetItemList = (options?: UseQueryOptions<ShopItemType[]>) =>
+  useQuery<ShopItemType[]>(
+    itemQueryKeys.getItemList(),
+    () => get(itemUrl.itemList()),
+    options
+  );

packages/api/client/src/hooks/order/index.ts

@@ -0,0 +1 @@
+export * from './usePostItemOrder';

packages/api/client/src/hooks/order/usePostItemOrder.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { post, orderQueryKeys, orderUrl } from 'api/common';
+
+import { AxiosError } from 'axios';
+
+interface ItemOrderRequestType {
+  itemId: string;
+  count: number;
+}
+
+export const usePostItemOrder = () =>
+  useMutation<void, AxiosError, ItemOrderRequestType[]>(
+    orderQueryKeys.postItem(),
+    (orderList) => post(orderUrl.orderItem(), orderList)
+  );

packages/api/client/src/hooks/student/index.ts

@@ -0,0 +1 @@
+export * from './useGetStudentInfo';

packages/api/client/src/hooks/student/useGetStudentInfo.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { studentQueryKeys, studentUrl, get } from 'api/common';
+
+import type { StudentType } from 'types';
+
+import type { UseQueryOptions } from '@tanstack/react-query';
+
+export const useGetStudentInfo = (options?: UseQueryOptions<StudentType>) =>
+  useQuery<StudentType>(
+    studentQueryKeys.getStudentInfo(),
+    () => get(studentUrl.studentInfo()),
+    options
+  );

packages/api/client/src/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

packages/api/common/src/hooks/auth/usePostLoginCode.ts

@@ -10,8 +10,10 @@ export const usePostLoginCode = () =>
     (loginCode) => post(authUrl.auth(), loginCode),
     {
       onSuccess: (data) => {
-        localStorage.setItem('refresh_token', data.refreshToken);
-        localStorage.setItem('access_token', data.accessToken);
+        if (data.refreshToken)
+          localStorage.setItem('refresh_token', data.refreshToken);
+        if (data.accessToken)
+          localStorage.setItem('access_token', data.accessToken);
       },
     }
   );

packages/api/common/src/libs/api/instance.ts

@@ -30,7 +30,7 @@ apiInstance.interceptors.response.use(
     return Promise.reject(response.data);
   },
   async (error) => {
-    if (error.config.url === authUrl.auth()) {
+    if (error.config.url === authUrl.auth() && error.response.status === 404) {
       location.replace('/auth/login');
 
       return Promise.reject(error);

packages/api/common/src/libs/queryKeys.ts

@@ -6,6 +6,7 @@ export const missionQueryKeys = {
 
 export const studentQueryKeys = {
   getRankingList: () => ['student', 'rankingList'],
+  getStudentInfo: () => ['student', 'info'],
 };
 
 export const authQueryKeys = {
@@ -17,3 +18,11 @@ export const userQueryKeys = {
   getScoringList: () => ['user', 'scoring'],
   postScoringResult: (solveId: string) => ['user', 'scoring', solveId],
 };
+
+export const itemQueryKeys = {
+  getItemList: () => ['item', 'list'],
+};
+
+export const orderQueryKeys = {
+  postItem: () => ['order'],
+};

packages/api/common/src/libs/urlController.ts

@@ -5,6 +5,7 @@ export const missionUrl = {
 
 export const studentUrl = {
   rankingList: () => `/student/ranking`,
+  studentInfo: () => `/student/my`,
 };
 
 export const authUrl = {
@@ -15,3 +16,11 @@ export const userUrl = {
   scoring: (pageNumber: number) => `/user/scoring/${pageNumber}`,
   scoringResult: (solveId: string) => `/user/scoring/${solveId}`,
 };
+
+export const itemUrl = {
+  itemList: () => `/item`,
+};
+
+export const orderUrl = {
+  orderItem: () => `/order`,
+};

packages/types/src/index.ts

@@ -6,3 +6,4 @@ export * from './tokenResponseType';
 export * from './mission';
 export * from './scoringListType';
 export * from './solveStatusType';
+export * from './studentType';

packages/types/src/studentType.ts

@@ -0,0 +1,10 @@
+export interface StudentType {
+  id: string;
+  cumulatePoint: number;
+  user: {
+    id: string;
+    email: string;
+    name: string;
+    profileImage: string | '';
+  };
+}

projects/client/src/PageContainer/ShopPage/index.tsx

@@ -7,44 +7,14 @@ import { slicePoint } from 'common';
 
 import { useEffect, useRef, useState } from 'react';
 
-const list = [
-  {
-    itemId: 'id',
-    name: '자장면1',
-    text: '자장면',
-    price: 5000,
-    image:
-      'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800',
-  },
-  {
-    itemId: 'id',
-    name: '자장면2',
-    text: '자장면',
-    price: 5000,
-    image:
-      'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800',
-  },
-  {
-    itemId: 'id',
-    name: '자장면3',
-    text: '자장면',
-    price: 5000,
-    image:
-      'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800',
-  },
-  {
-    itemId: 'id',
-    name: '자장면4',
-    text: '자장면',
-    price: 5000,
-    image:
-      'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800',
-  },
-];
+import { useGetItemList, useGetStudentInfo } from 'api/client';
 
 const ShopPage = () => {
   const dialog = useRef<HTMLDialogElement>(null);
 
+  const { data } = useGetItemList();
+  const { data: student } = useGetStudentInfo();
+
   const [itemStatus, setItemStatus] = useState<boolean[]>([]);
 
   const onItemClick = (index: number) => {
@@ -54,38 +24,44 @@ const ShopPage = () => {
   };
 
   useEffect(() => {
-    setItemStatus(new Array(list.length).fill(false));
+    setItemStatus(new Array(data?.length).fill(false));
   }, []);
 
   return (
     <S.PageWrapper>
       <S.MiledgeTitle>현재 마일리지</S.MiledgeTitle>
       <S.FlexWrapper>
-        <S.MilidgePoint>{slicePoint(1000)}</S.MilidgePoint>
+        <S.MilidgePoint>
+          {slicePoint(student?.cumulatePoint ?? 0)}
+        </S.MilidgePoint>
         <S.MilidgeUnit>M</S.MilidgeUnit>
       </S.FlexWrapper>
       <S.ListWrapper>
         <S.ItemText>상품</S.ItemText>
-        <S.ItemList>
-          {list.map((item, index) => (
-            <ShopItem
-              index={index}
-              onItemClick={onItemClick}
-              key={item.itemId + index}
-              data={item}
-              itemStatus={itemStatus[index]}
-            />
-          ))}
-        </S.ItemList>
+        {data && (
+          <S.ItemList>
+            {data.map((item, index) => (
+              <ShopItem
+                index={index}
+                onItemClick={onItemClick}
+                key={item.itemId}
+                data={item}
+                itemStatus={itemStatus[index]}
+              />
+            ))}
+          </S.ItemList>
+        )}
       </S.ListWrapper>
       <S.SelectButton onClick={() => dialog.current?.showModal()}>
         선택하기
       </S.SelectButton>
-      <S.ModalWrapper ref={dialog}>
-        <ShopModal
-          selectedList={list.filter((_, index) => itemStatus[index])}
-        />
-      </S.ModalWrapper>
+      {data && (
+        <S.ModalWrapper ref={dialog}>
+          <ShopModal
+            selectedList={data.filter((_, index) => itemStatus[index])}
+          />
+        </S.ModalWrapper>
+      )}
     </S.PageWrapper>
   );
 };

projects/client/src/components/MissionCarousel/index.tsx

@@ -57,7 +57,7 @@ const MissionCarousel = () => {
             {missionList[pageIndex]?.map((item, index) => (
               <TaskCard
                 onClick={() => onCardClick(item.id)}
-                key={item.id + index}
+                key={item.id}
                 userName={item.user.name}
                 taskTitle={item.title}
                 miledge={item.point}

projects/client/src/components/ShopModal/index.tsx

@@ -3,29 +3,57 @@
 import * as S from './style';
 import { XIcon } from 'client/assets';
 import { ShopModalItem } from 'client/components';
+
 import { useEffect, useState } from 'react';
 
+import { usePostItemOrder } from 'api/client';
+
 import { ShopItemType } from 'types';
 
+import { useRouter } from 'next/navigation';
+
 interface ShopModalProps {
   selectedList: ShopItemType[] | [];
 }
 
 const ShopModal: React.FC<ShopModalProps> = ({ selectedList }) => {
   const [countList, setCountList] = useState<number[]>([]);
 
+  const { push } = useRouter();
+
+  const { mutate, isSuccess, isError, error } = usePostItemOrder();
+
   useEffect(() => {
-    setCountList(new Array(selectedList.length).fill(0));
+    setCountList(new Array(selectedList.length).fill(1));
   }, [selectedList]);
 
   const calculateCount = (index: number, isPlus: boolean) => {
     const newCountList = [...countList];
     isPlus
       ? newCountList[index]++
-      : newCountList[index] !== 0 && newCountList[index]--;
+      : newCountList[index] !== 1 && newCountList[index]--;
     setCountList(newCountList);
   };
 
+  const handleSubmit = () => {
+    const orderList = countList.map((item, i) => {
+      return { itemId: selectedList[i].itemId, count: item };
+    });
+    mutate(orderList);
+  };
+
+  if (isSuccess) {
+    push('/');
+    alert('상품이 구매되었습니다!');
+  }
+
+  if (isError) {
+    if (error && error.response?.status === 400) {
+      alert('마일리지가 부족합니다');
+      location.reload();
+    }
+  }
+
   return (
     <S.ModalWrapper>
       <form method='dialog'>
@@ -37,7 +65,7 @@ const ShopModal: React.FC<ShopModalProps> = ({ selectedList }) => {
       <S.ItemList>
         {selectedList?.map((selectedItem, index) => (
           <ShopModalItem
-            key={selectedItem.itemId + index}
+            key={selectedItem.itemId}
             data={selectedItem}
             count={countList[index]}
             calculateCount={calculateCount}
@@ -46,7 +74,7 @@ const ShopModal: React.FC<ShopModalProps> = ({ selectedList }) => {
         ))}
       </S.ItemList>
       <form method='dialog'>
-        <S.PurchusButton>구매하기</S.PurchusButton>
+        <S.PurchusButton onClick={handleSubmit}>구매하기</S.PurchusButton>
       </form>
     </S.ModalWrapper>
   );