Merge pull request #133 from Eagle2gle/dev

.eslintrc.json

@@ -64,6 +64,7 @@
           "caseInsensitive": true
         }
       }
-    ]
+    ],
+    "react/prop-types": "off"
   }
 }

package.json

@@ -10,6 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@lukemorales/query-key-factory": "^1.2.0",
+    "@ant-design/charts": "^1.4.2",
     "@next/eslint-plugin-next": "^13.1.2",
     "@next/font": "13.1.2",
     "@reduxjs/toolkit": "^1.9.1",

src/components/Thumbnail.tsx

@@ -5,7 +5,7 @@ const Thumbnail = () => {
     <div className="hero overflow-hidden pt-28 pb-24">
       <div className="hero-overlay absolute left-0 right-0 h-56">
         <Image
-          className="w-full object-cover"
+          className="w-full object-cover object-center-7/10"
           src="/images/thumbnail.jpeg"
           alt="썸네일 이미지"
           fill

src/components/cahoot/BuyButton.tsx

@@ -4,43 +4,33 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 
 import { useSuspendedQuery } from '@/hooks/useSuspendedQuery';
-import { api } from '@/libs/client/api';
-import { fetcher } from '@/libs/client/fetcher';
+import { queries } from '@/queries';
 import { useTypeSelector } from '@/store';
-import type { CahootDetailType } from '@/types/cahoot';
 import type { Response } from '@/types/response';
 import classNames from '@/utils/classnames';
 import { useMutation } from '@tanstack/react-query';
 
+import type { HTTPError } from 'ky-universal';
+
 import Modal from '../common/Modal';
 
 const BuyButton = () => {
-  const router = useRouter();
+  const {
+    query: { id },
+  } = useRouter();
+  const { queryFn, queryKey } = queries.cahoots.detail(String(id));
   const {
     data: {
       data: { images, title, stockPrice },
     },
-  } = useSuspendedQuery<Response<CahootDetailType>>(
-    ['cahoot/detail', router.query.id],
-    fetcher(`${process.env.NEXT_PUBLIC_HOST}/api/cahoots/${router.query.id}?info=detail`)
-  );
+  } = useSuspendedQuery(queryKey, queryFn);
   const quantity = useTypeSelector(({ cahootOrder }) => cahootOrder.quantity);
-  const token = useTypeSelector((state) => state.user.token);
+  const token = useTypeSelector((state) => state.user.token) ?? '';
   const {
     mutate,
     isLoading,
     data: response,
-  } = useMutation<Response, Error, { stocks: number }>({
-    mutationFn: (data) =>
-      api
-        .post(`auth/cahoots/${router.query.id}`, {
-          json: data,
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        })
-        .json(),
-  });
+  } = useMutation<Response, HTTPError, { stocks: number }>(queries.cahoots.buy(String(id), token));
   const modalOpenRef = useRef<HTMLLabelElement>(null);
 
   const onBuyClick: React.MouseEventHandler<HTMLButtonElement> = () => {