Merge branch 'main' into GGFE-225-확성기-개수-제한-로직-변경

42organization · Sep 5, 2023 · 50e4d67 · 50e4d67
2 parents 075b586 + 97098d2
commit 50e4d67
Show file tree

Hide file tree

Showing 22 changed files with 124 additions and 130 deletions.
diff --git a/components/EmptyImage.tsx b/components/EmptyImage.tsx
@@ -0,0 +1,17 @@
+import NotiEmptyEmoji from 'public/image/noti_empty.svg';
+import styles from 'styles/EmptyImage.module.scss';
+
+function EmptyImage() {
+  return (
+    <div className={styles.emptyWrapper}>
+      <div className={styles.threeDots}>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+        <div className={styles.dot}></div>
+      </div>
+      <NotiEmptyEmoji />
+    </div>
+  );
+}
+
+export default EmptyImage;
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -51,7 +51,11 @@ export default function AppLayout({ children }: AppLayoutProps) {
   ) : (
     <div className={styles.appContainer}>
       <div
-        className={`${styles.background} ${styles[colorMode.toLowerCase()]}`}
+        className={`${styles.background} ${
+          colorMode !== undefined
+            ? styles[colorMode.toLowerCase()]
+            : styles.basic
+        } `}
       >
         <div>
           {presentPath === '/statistics' && user.isAdmin ? (

diff --git a/components/Layout/MainPageProfile.tsx b/components/Layout/MainPageProfile.tsx
@@ -6,7 +6,6 @@ import styles from 'styles/Layout/MainPageProfile.module.scss';
 
 const MainPageProfile = () => {
   const user = useRecoilValue(userState);
-
   return (
     <div className={styles.mainPageProfile}>
       <div className={styles.gridContainer}>
@@ -16,7 +15,9 @@ const MainPageProfile = () => {
         >
           <PlayerImage
             src={user.userImageUri}
-            styleName={`mainPageProfile ${user.edge.toLowerCase()}`}
+            styleName={`mainPageProfile ${
+              user.edge ? user.edge.toLowerCase() : 'basic'
+            }`}
             size={18}
           />
         </Link>

diff --git a/components/Layout/MenuBar/MenuBar.tsx b/components/Layout/MenuBar/MenuBar.tsx
@@ -34,7 +34,6 @@ const MenuProfile = () => {
     검: 'black',
     무: 'rainbow',
   };
-
   return (
     <div className={styles.menuProfileWrapper}>
       <Link
@@ -44,7 +43,9 @@ const MenuProfile = () => {
       >
         <PlayerImage
           src={user.userImageUri}
-          styleName={`menuProfile ${user.edge.toLowerCase()}`}
+          styleName={`menuProfile ${
+            user.edge ? user.edge.toLowerCase() : 'basic'
+          }`}
           size={18}
         />
       </Link>

diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx
@@ -1,13 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { CoinResult } from 'types/coinTypes';
 import { Modal } from 'types/modalTypes';
 import { instance } from 'utils/axios';
-import { mockInstance } from 'utils/mockAxios';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
 import CoinPopcon from 'components/modal/CoinPopcon';
-import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/modal/event/WelcomeModal.module.scss';
 
 export default function WelcomeModal() {
@@ -22,35 +20,16 @@ export default function WelcomeModal() {
       '42GG에 오신걸 환영합니다.\n당신의 행복한 탁구 생활을\n응원합니다! 총총총...',
   };
 
-  /*   const postCoinHandler = async() => {
+  const postCoinHandler = async () => {
     try {
-      const res = await instance.post(
-        `/pingpong/users/attendance`
-      );
+      const res = await instance.post(`/pingpong/users/attendance`);
       setCoin(res.data);
       return res.data;
     } catch (error) {
       setError('SM01');
     }
   };
 
-  useEffect(() => {
-    postCoinHandler();
-	}, []); */
-
-  const getCoinHandler = async () => {
-    try {
-      const res = await mockInstance.get(`/users/attendance`);
-      if (res && res.data) {
-        setCoin(res.data);
-        return res.data;
-      }
-    } catch (error) {
-      setError('SM01');
-      return null;
-    }
-  };
-
   const openPageManual = () => {
     window.open(
       'https://github.com/42organization/42arcade.gg.client/wiki/42gg.kr--%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B0%80%EC%9D%B4%EB%93%9C'
@@ -60,8 +39,7 @@ export default function WelcomeModal() {
   const openAttendanceCoin = async () => {
     try {
       setButtonState(true);
-      const updatedCoin = await getCoinHandler();
-      //const updatedCoin = await postCoinHandler();
+      const updatedCoin = await postCoinHandler();
 
       if (!updatedCoin) return null;
 
@@ -79,16 +57,6 @@ export default function WelcomeModal() {
     }
   };
 
-  const openStatChangeModal = () => {
-    setModal({
-      modalName: 'FIXED-STAT',
-      exp: {
-        gameId: 0,
-        mode: 'RANK',
-      },
-    });
-  };
-
   return (
     <div>
       <div className={styles.container}>
@@ -108,11 +76,10 @@ export default function WelcomeModal() {
           <div className={styles.positive}>
             <input
               onClick={openAttendanceCoin}
-              // onClick={openStatChangeModal}
               type='button'
               value='출석하기'
             />
-            {buttonState && <CoinPopcon amount={10} coin={1} />}
+            {buttonState && <CoinPopcon amount={8} coin={1} />}
           </div>
         </div>
       </div>

diff --git a/components/modal/statChange/CoinStatChange.tsx b/components/modal/statChange/CoinStatChange.tsx
@@ -16,7 +16,7 @@ export default function CoinStatChange({ after, before }: CoinChangeProps) {
 
   const CoinChangeAnimation = () => {
     const toAdd = 1;
-    for (let i = before; i < after; i++) {
+    for (let i = 0; i < after - before; i++) {
       sleep(i * 500).then(() => setCoin((thisCoin) => thisCoin + toAdd));
     }
   };

diff --git a/components/modal/statChange/StatChangeModal.tsx b/components/modal/statChange/StatChangeModal.tsx
@@ -17,17 +17,11 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
   const setError = useSetRecoilState(errorState);
   const [stat, setStat] = useState<GameResult | undefined>();
 
-  /*     const getExpHandler = useAxiosGet({
+  const getExpHandler = useAxiosGet({
     url: `/pingpong/games/${gameId}/result/${mode?.toLowerCase()}`,
     setState: setStat,
     err: 'KP03',
     type: 'setError',
-  }); */
-  const getExpHandler = useMockAxiosGet({
-    url: `/games/normal`,
-    setState: setStat,
-    err: 'KP03',
-    type: 'setError',
   });
 
   useEffect(() => {

diff --git a/components/rank/RankList.tsx b/components/rank/RankList.tsx
@@ -25,7 +25,7 @@ export default function RankList({ season }: RankListProps) {
   const makePath = (): string => {
     const modeQuery = Mode === 'RANK' ? 'ranks/single' : 'exp';
     const seasonQuery = Mode === 'RANK' ? `&season=${season}` : '';
-    return `/${modeQuery}?page=${page}&size=20${seasonQuery}`;
+    return `pingpong/${modeQuery}?page=${page}&size=20${seasonQuery}`;
   };
 
   useRankList({

diff --git a/components/rank/topRank/RankListItemMain.tsx b/components/rank/topRank/RankListItemMain.tsx
@@ -43,8 +43,8 @@ export default function RankListItemMain({
                   src={userImageUri}
                   styleName={
                     rank === 1
-                      ? `ranktropybig ${edge.toLowerCase()}`
-                      : `ranktropy ${edge.toLowerCase()}`
+                      ? `ranktropybig ${edge ? edge.toLowerCase() : 'basic'}`
+                      : `ranktropy ${edge ? edge.toLowerCase() : 'basic'}`
                   }
                   size={50}
                 />

diff --git a/components/rank/topRank/RankListMain.tsx b/components/rank/topRank/RankListMain.tsx
@@ -17,7 +17,9 @@ export default function RankListMain({ isMain, season }: RankListMainProps) {
   const [page] = useState<number>(1);
 
   const makePathRanker = useMemo(() => {
-    return `rank/${Mode}`;
+    if (isMain === true)
+      return `/pingpong/users/images?seasonId=${season}&mode=${'RANK'}`;
+    return `/pingpong/users/images?seasonId=${season}&mode=${Mode}`;
   }, [season, Mode, isMain]);
 
   useRankListMain({

diff --git a/components/store/InventoryItem.tsx b/components/store/InventoryItem.tsx
@@ -82,7 +82,12 @@ export function InvetoryItem({ item }: inventoryItemProps) {
       </div>
       <div onTouchStart={handleTouch}>
         <div className={styles.imgContainer}>
-          <Image className={styles.img} src={imageUri} alt={itemName} fill />
+          <Image
+            className={styles.img}
+            src={imageUri === null ? '/image/fallBackSrc.jpeg' : imageUri}
+            alt={itemName}
+            fill
+          />
         </div>
         <div className={styles.itemName}>{itemName}</div>
       </div>

diff --git a/components/store/InventoryList.tsx b/components/store/InventoryList.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
+import { instance } from 'utils/axios';
 import { InfinityScroll } from 'utils/infinityScroll';
-import { mockInstance } from 'utils/mockAxios';
+import EmptyImage from 'components/EmptyImage';
 import { InfiniteScrollComponent } from 'components/store/InfiniteScrollComponent';
 import { InvetoryItem } from 'components/store/InventoryItem';
 import styles from 'styles/store/Inventory.module.scss';
 
 function fetchInventoryData(page: number) {
-  return mockInstance.get(`items?page=${page}&size=${8}`).then((res) => {
+  return instance.get(`/pingpong/items?page=${page}&size=${8}`).then((res) => {
     return res.data;
   });
 }
@@ -23,20 +24,27 @@ export function InventoryList() {
   if (error) return <div>{error.message}</div>;
   if (!data) return <div>No data</div>;
 
+  if (data.pages[0].storageItemList.length === 0) {
+    return (
+      <div className={styles.emptyMessage}>
+        <p>
+          보유한 아이템이 없습니다.
+          <br /> 상점 탭에서 아이템을 구입해 보세요!
+        </p>
+        <EmptyImage />
+      </div>
+    );
+  }
+
   return (
     <div className={styles.inventoryList}>
       {data.pages.map((page, pageIndex) => (
         <React.Fragment key={pageIndex}>
-          {page.storageItemList.length === 0 ? (
-            <div className={styles.emptyMessage}>
-              보유한 아이템이 없습니다.
-              <br /> 상점 탭에서 아이템을 구입해 보세요!
-            </div>
-          ) : (
-            page.storageItemList.map((item) => (
-              <InvetoryItem key={item.receiptId} item={item} />
-            ))
-          )}
+          {page.storageItemList.length === 0
+            ? null
+            : page.storageItemList.map((item) => (
+                <InvetoryItem key={item.receiptId} item={item} />
+              ))}
         </React.Fragment>
       ))}
       <InfiniteScrollComponent

diff --git a/components/user/BasicProfile.tsx b/components/user/BasicProfile.tsx
@@ -48,13 +48,13 @@ export default function BasicProfile({ profileId }: ProfileProps) {
       {intraId && (
         <PlayerImage
           src={userImageUri}
-          styleName={`mainProfile ${edge.toLowerCase()}`}
+          styleName={`mainProfile ${edge ? edge.toLowerCase() : 'basic'}`}
           size={30}
         />
       )}
       <div className={styles.idContainer}>
         <div className={styles.ranktier}>
-          <PlayerImage src={tierImageUri} styleName={'ranktier'} size={50} />
+          <PlayerImage src={tierImageUri} styleName={'profiletier'} size={50} />
         </div>
         <div className={styles.intraId}>{intraId}</div>
         <div className={styles.buttons}>

diff --git a/hooks/Layout/useGetUserSeason.ts b/hooks/Layout/useGetUserSeason.ts
@@ -5,25 +5,18 @@ import { SeasonList } from 'types/seasonTypes';
 import { userState } from 'utils/recoil/layout';
 import { loginState } from 'utils/recoil/login';
 import { seasonListState } from 'utils/recoil/seasons';
-import useAxiosGet, { useMockAxiosGet } from 'hooks/useAxiosGet';
+import useAxiosGet from 'hooks/useAxiosGet';
 
 const useGetUserSeason = (presentPath: string) => {
   const [user, setUser] = useRecoilState<User>(userState);
   const setSeasonList = useSetRecoilState<SeasonList>(seasonListState);
   const isLogIn = useRecoilValue(loginState);
 
-  /*   const getUserHandler = useAxiosGet({
+  const getUserHandler = useAxiosGet({
     url: '/pingpong/users',
     setState: setUser,
     err: 'JB02',
     type: 'setError',
-  }); */
-
-  const getUserHandler = useMockAxiosGet({
-    url: '/users/user',
-    setState: setUser,
-    err: 'JB02',
-    type: 'setError',
   });
 
   const getSeasonListHandler = useAxiosGet<any>({

diff --git a/hooks/rank/useRankList.ts b/hooks/rank/useRankList.ts
@@ -29,16 +29,7 @@ const useRankList = ({
   const [myRank, setMyRank] = useRecoilState<MyRank>(myRankState);
   const [isScroll, setIsScroll] = useRecoilState<boolean>(scrollState);
 
-  /*   const getRankDataHandler = useAxiosGet<any>({
-    url: makePath,
-    setState: (data) => {
-      setRank(data);
-      setMyRank((prev) => ({ ...prev, [toggleMode]: data.myRank }));
-    },
-    err: 'DK01',
-    type: 'setError',
-  }); */
-  const getRankDataHandler = useMockAxiosGet<any>({
+  const getRankDataHandler = useAxiosGet<any>({
     url: makePath,
     setState: (data) => {
       setRank(data);

diff --git a/hooks/rank/useRankListMain.ts b/hooks/rank/useRankListMain.ts
@@ -1,6 +1,6 @@
 import { useEffect, Dispatch, SetStateAction } from 'react';
 import { userImages, ToggleMode } from 'types/rankTypes';
-import useAxiosGet, { useMockAxiosGet } from 'hooks/useAxiosGet';
+import useAxiosGet from 'hooks/useAxiosGet';
 
 interface useRankListProps {
   makePathRanker: string;
@@ -19,7 +19,7 @@ const useRankListMain = ({
   page,
   isMain,
 }: useRankListProps): void => {
-  /*   const getRankerDataHandler = useAxiosGet<any>({
+  const getRankerDataHandler = useAxiosGet<any>({
     url: makePathRanker,
     setState: (data) => {
       [data.userImages[0], data.userImages[1]] = [
@@ -30,18 +30,6 @@ const useRankListMain = ({
     },
     err: 'DK01',
     type: 'setError',
-  }); */
-  const getRankerDataHandler = useMockAxiosGet<any>({
-    url: makePathRanker,
-    setState: (data) => {
-      [data.rankList[0], data.rankList[1]] = [
-        data.rankList[1],
-        data.rankList[0],
-      ];
-      setRanker(data.rankList);
-    },
-    err: 'DK01',
-    type: 'setError',
   });
 
   useEffect(() => {