[GGFE-217] Ranklist-api

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 ? (

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>

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>

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>

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));
     }
   };

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(() => {

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({

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}
                 />

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({

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}>

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>({

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);

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(() => {

hooks/users/useBasicProfile.ts

@@ -3,7 +3,6 @@ import { useSetRecoilState, useRecoilState } from 'recoil';
 import { instance } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { profileState } from 'utils/recoil/user';
-import { useMockAxiosGet } from 'hooks/useAxiosGet';
 
 interface UseBasicProfileProps {
   profileId: string;
@@ -34,23 +33,14 @@ const useBasicProfile = ({ profileId }: UseBasicProfileProps) => {
     getBasicProfileHandler();
   }, []);
 
-  /*   const getBasicProfileHandler = async () => {
+  const getBasicProfileHandler = async () => {
     try {
       const res = await instance.get(`/pingpong/users/${profileId}`);
       setProfile(res?.data);
     } catch (e) {
       setError('SJ03');
     }
-  }; */
-
-  const getBasicProfileHandler = useMockAxiosGet<any>({
-    url: '/users/intraId',
-    setState: (data) => {
-      setProfile(data);
-    },
-    err: 'DK01',
-    type: 'setError',
-  });
+  };
 
   return {
     intraId,

styles/PlayerImage.module.scss

@@ -100,7 +100,18 @@
 .ranktier {
   @include imageWrap;
   div {
-    @include userRankImage(1.5rem);
+    position: relative;
+    width: 1.4rem;
+    height: 1.5rem;
+  }
+}
+
+.profiletier {
+  @include imageWrap;
+  div {
+    position: relative;
+    width: 1.7rem;
+    height: 2rem;
   }
 }