[GGFE-229] 상점 모달 로딩 처리

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

components/modal/LoadingButton.tsx

@@ -0,0 +1,13 @@
+import styles from 'styles/modal/LoadingButton.module.scss';
+
+export default function LoadingButton() {
+  return (
+    <div className={styles.loadingButton}>
+      <div className={styles.loading}>
+        <span className={styles.span1}>o</span>
+        <span className={styles.span2}>o</span>
+        <span className={styles.span3}>o</span>
+      </div>
+    </div>
+  );
+}

components/modal/ModalButton.tsx

@@ -1,9 +1,11 @@
+import LoadingButton from 'components/modal/LoadingButton';
 import styles from 'styles/modal/Modal.module.scss';
 
 type ButtonProps = {
   style: 'positive' | 'negative';
   value: string;
   form?: string;
+  isLoading?: boolean;
   onClick: () => void;
 };
 
@@ -15,10 +17,20 @@ export function ModalButtonContainer({
   return <div className={styles.modalButtonContainer}>{children}</div>;
 }
 
-export function ModalButton({ style, value, onClick, form }: ButtonProps) {
+export function ModalButton({
+  style,
+  value,
+  onClick,
+  form,
+  isLoading,
+}: ButtonProps) {
   return (
     <div className={styles[style]}>
-      <input onClick={onClick} type='button' value={value} form={form} />
+      {isLoading ? (
+        <LoadingButton />
+      ) : (
+        <input onClick={onClick} type='button' value={value} form={form} />
+      )}
     </div>
   );
 }

components/modal/store/CoinHistoryContainer.tsx

@@ -1,5 +1,6 @@
 import { ICoinHistory } from 'types/userTypes';
 import CoinHistoryDetails from 'components/modal/store/CoinHistoryDetails';
+import ErrorEmoji from 'public/image/noti_empty.svg';
 import styles from 'styles/modal/store/CoinHistoryContainer.module.scss';
 
 type CoinHistoryProps = {
@@ -12,14 +13,20 @@ export default function CoinHistoryContainer({
   return (
     <div className={styles.container}>
       {useCoinList.length === 0 ? (
-        <div className={styles.empty}>GG코인 내역이 존재하지 않습니다.</div>
+        <div className={styles.empty}>
+          <div>GG코인 내역이 존재하지 않습니다.</div>
+          <ErrorEmoji />
+        </div>
       ) : (
-        useCoinList.map((coinHistory) => (
-          <CoinHistoryDetails
-            key={coinHistory.createdAt.toString()}
-            details={coinHistory}
-          />
-        ))
+        useCoinList.map(
+          (coinHistory) =>
+            coinHistory.amount !== 0 && (
+              <CoinHistoryDetails
+                key={coinHistory.createdAt.toString()}
+                details={coinHistory}
+              />
+            )
+        )
       )}
     </div>
   );

components/modal/store/UserCoinHistoryModal.tsx

@@ -15,6 +15,7 @@ import styles from 'styles/modal/store/UserCoinHistoryModal.module.scss';
 
 export default function UserCoinHistoryModal({ coin }: ICoin) {
   const setModal = useSetRecoilState(modalState);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [coinHistoryList, setCoinHistoryList] = useState<ICoinHistoryTable>({
     useCoinList: [],
@@ -33,8 +34,8 @@ export default function UserCoinHistoryModal({ coin }: ICoin) {
     getCoinHistoryList();
   }, [currentPage]);
 
-  // 현재는 출석만 되는 상태
   const getCoinHistoryList = async () => {
+    setIsLoading(true);
     try {
       const res = await instance.get(
         `pingpong/users/coinhistory/?page=${currentPage}&size=5`
@@ -46,7 +47,9 @@ export default function UserCoinHistoryModal({ coin }: ICoin) {
       });
     } catch (e) {
       setError('HB06');
+      closeModal();
     }
+    setIsLoading(false);
   };
 
   return (
@@ -56,7 +59,15 @@ export default function UserCoinHistoryModal({ coin }: ICoin) {
         <div>현재 코인</div>
         <CoinImage amount={coin} size={25} />
       </div>
-      <CoinHistoryContainer useCoinList={coinHistoryList.useCoinList} />
+      {isLoading ? (
+        <div className={styles.loading}>
+          <span className={styles.span1}>*</span>
+          <span className={styles.span2}>*</span>
+          <span className={styles.span3}>*</span>
+        </div>
+      ) : (
+        <CoinHistoryContainer useCoinList={coinHistoryList.useCoinList} />
+      )}
       <div>
         <PageNation
           curPage={currentPage}

components/modal/store/inventory/ChangeProfileBackgroundModal.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 import { UseItemRequest } from 'types/inventoryTypes';
 import { Modal } from 'types/modalTypes';
@@ -23,11 +24,13 @@ const caution = [
 export default function ChangeProfileBackgroundModal({
   receiptId,
 }: ChangeProfileBackgroundModalProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const resetModal = useResetRecoilState(modalState);
   const setModal = useSetRecoilState<Modal>(modalState);
   const setError = useSetRecoilState<string>(errorState);
 
   const gachaAction = async () => {
+    setIsLoading(true);
     const data: UseItemRequest = {
       receiptId: receiptId,
     };
@@ -43,6 +46,7 @@ export default function ChangeProfileBackgroundModal({
     } catch (error) {
       setError('HB05');
     }
+    setIsLoading(false);
   };
 
   return (
@@ -55,15 +59,12 @@ export default function ChangeProfileBackgroundModal({
         </div>
         <ItemCautionContainer caution={caution} />
         <ModalButtonContainer>
-          <ModalButton
-            style='negative'
-            value='취소'
-            onClick={() => resetModal()}
-          />
+          <ModalButton style='negative' value='취소' onClick={resetModal} />
           <ModalButton
             style='positive'
             value='뽑기'
-            onClick={() => gachaAction()}
+            isLoading={isLoading}
+            onClick={gachaAction}
           />
         </ModalButtonContainer>
       </div>

components/modal/store/inventory/ChangeProfileEdgeModal.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 import { UseItemRequest } from 'types/inventoryTypes';
 import { Modal } from 'types/modalTypes';
@@ -23,11 +24,13 @@ const caution = [
 export default function ChangeProfileEdgeModal({
   receiptId,
 }: ChangeProfileEdgeModalProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const resetModal = useResetRecoilState(modalState);
   const setModal = useSetRecoilState<Modal>(modalState);
   const setError = useSetRecoilState<string>(errorState);
 
   const gachaAction = async () => {
+    setIsLoading(true);
     const data: UseItemRequest = {
       receiptId: receiptId,
     };
@@ -43,6 +46,7 @@ export default function ChangeProfileEdgeModal({
     } catch (error) {
       setError('HB04');
     }
+    setIsLoading(false);
   };
 
   return (
@@ -55,15 +59,12 @@ export default function ChangeProfileEdgeModal({
         </div>
         <ItemCautionContainer caution={caution} />
         <ModalButtonContainer>
-          <ModalButton
-            style='negative'
-            value='취소'
-            onClick={() => resetModal()}
-          />
+          <ModalButton style='negative' value='취소' onClick={resetModal} />
           <ModalButton
             style='positive'
             value='뽑기'
-            onClick={() => gachaAction()}
+            isLoading={isLoading}
+            onClick={gachaAction}
           />
         </ModalButtonContainer>
       </div>

components/modal/store/purchase/BuyModal.tsx

@@ -1,22 +1,32 @@
-import { useEffect, useState } from 'react';
-import { Purchase } from 'types/itemTypes';
+import { useState } from 'react';
+import { useSetRecoilState, useResetRecoilState } from 'recoil';
 import { PriceTag } from 'types/modalTypes';
+import { instance } from 'utils/axios';
+import { errorState } from 'utils/recoil/error';
+import { modalState } from 'utils/recoil/modal';
 import {
   ModalButtonContainer,
   ModalButton,
 } from 'components/modal/ModalButton';
-import useBuyModal from 'hooks/modal/store/purchase/useBuyModal';
 import styles from 'styles/modal/store/BuyModal.module.scss';
 
 export default function BuyModal({ itemId, product, price }: PriceTag) {
-  const [purchaseItem, setPurchaseItem] = useState<Purchase>({ itemId: -1 });
-  const { onPurchase, onCancel } = useBuyModal(purchaseItem);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const resetModal = useResetRecoilState(modalState);
+  const setError = useSetRecoilState<string>(errorState);
 
-  useEffect(() => {
-    setPurchaseItem({
-      itemId: itemId,
-    });
-  }, [itemId]);
+  // TODO: 에러 처리
+  const onPurchase = async () => {
+    setIsLoading(true);
+    try {
+      await instance.post(`/pingpong/items/purchases/${itemId}`, null);
+      alert(`구매 성공!`);
+    } catch (error) {
+      setError('HB03');
+    }
+    setIsLoading(false);
+    resetModal();
+  };
 
   return (
     <div className={styles.container}>
@@ -38,8 +48,13 @@ export default function BuyModal({ itemId, product, price }: PriceTag) {
         </div>
       </div>
       <ModalButtonContainer>
-        <ModalButton style='negative' value='아니오' onClick={onCancel} />
-        <ModalButton style='positive' value='예' onClick={onPurchase} />
+        <ModalButton style='negative' value='아니오' onClick={resetModal} />
+        <ModalButton
+          style='positive'
+          value='예'
+          isLoading={isLoading}
+          onClick={onPurchase}
+        />
       </ModalButtonContainer>
     </div>
   );

components/modal/store/purchase/GiftModal.tsx

@@ -1,28 +1,46 @@
-import { useEffect, useState } from 'react';
-import { Gift } from 'types/itemTypes';
+import { useState } from 'react';
+import { useSetRecoilState, useResetRecoilState } from 'recoil';
+import { GiftRequest } from 'types/itemTypes';
 import { PriceTag } from 'types/modalTypes';
+import { instance } from 'utils/axios';
+import { errorState } from 'utils/recoil/error';
+import { modalState } from 'utils/recoil/modal';
 import {
   ModalButtonContainer,
   ModalButton,
 } from 'components/modal/ModalButton';
 import GiftSearchBar from 'components/store/purchase/GiftSearchBar';
-import useGiftModal from 'hooks/modal/store/purchase/useGiftModal';
 import styles from 'styles/modal/store/GiftModal.module.scss';
 
 export default function GiftModal({ itemId, product, price }: PriceTag) {
-  const [recipient, setRecipient] = useState<string>('');
-  const [gift, setGift] = useState<Gift>({
-    itemId: -1,
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const resetModal = useResetRecoilState(modalState);
+  const setError = useSetRecoilState<string>(errorState);
+  const [giftReqData, setGiftReqData] = useState<GiftRequest>({
     ownerId: '',
   });
-  const { onPurchase, onCancel } = useGiftModal(gift);
 
-  useEffect(() => {
-    setGift({
-      itemId: itemId,
-      ownerId: recipient,
-    });
-  }, [itemId, recipient]);
+  // TODO: 에러 처리
+  const onPurchase = async () => {
+    if (giftReqData.ownerId === '') {
+      alert('선물할 유저를 선택해주세요.');
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const res = await instance.post(
+        `/pingpong/items/gift/${itemId}`,
+        giftReqData
+      );
+      if (res.status === 201) {
+        alert(`${giftReqData.ownerId}님께 선물이 전달되었습니다.`);
+      }
+    } catch (error) {
+      setError('HB02');
+    }
+    setIsLoading(false);
+    resetModal();
+  };
 
   return (
     <div className={styles.container}>
@@ -39,19 +57,24 @@ export default function GiftModal({ itemId, product, price }: PriceTag) {
             <div>{price} 코인</div>
           </div>
         </div>
-        <GiftSearchBar setRecipient={setRecipient} />
-        {recipient !== '' && (
+        <GiftSearchBar setGiftReqData={setGiftReqData} />
+        {giftReqData.ownerId !== '' && (
           <div className={styles.recipient}>
-            <span>{recipient}</span>님에게 선물하시겠습니까?
+            <span>{giftReqData.ownerId}</span>님에게 선물하시겠습니까?
           </div>
         )}
         <div className={styles.warning}>
           <p>⚠ 선물한 아이템은 환불 및 취소가 불가합니다 ⚠</p>
         </div>
       </div>
       <ModalButtonContainer>
-        <ModalButton style='negative' value='취소' onClick={onCancel} />
-        <ModalButton style='positive' value='보내기' onClick={onPurchase} />
+        <ModalButton style='negative' value='취소' onClick={resetModal} />
+        <ModalButton
+          style='positive'
+          value='보내기'
+          isLoading={isLoading}
+          onClick={onPurchase}
+        />
       </ModalButtonContainer>
     </div>
   );