Merge branch 'main' into GGFE-207-확성기-등록-삭제-조회-api-연결

42organization · Sep 6, 2023 · ce5ec6c · ce5ec6c
2 parents ebea282 + 1bc6acc
commit ce5ec6c
Show file tree

Hide file tree

Showing 48 changed files with 232 additions and 223 deletions.
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/MegaPhone.tsx b/components/Layout/MegaPhone.tsx
@@ -16,17 +16,49 @@ type MegaphoneContainerProps = {
   count: number;
 };
 
+const adminContent: IMegaphoneContent = {
+  megaphoneId: 1,
+  content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
+  intraId: '관리자',
+};
+
+const megaphoneContent: IMegaphoneContent = {
+  megaphoneId: 2,
+  content: '확성기 : 오늘 하루 42GG는 내가 접수한다 📢😎',
+  intraId: '절찬 판매 중!',
+};
+
+const profileContent: IMegaphoneContent = {
+  megaphoneId: 3,
+  content: '이미지 변경권 : 잘 지내? 프사 바꿨네...',
+  intraId: '절찬 판매 중!',
+};
+
+const edgeContent: IMegaphoneContent = {
+  megaphoneId: 4,
+  content: 'Edge 뽑기 : 난 "Edge"로 말해',
+  intraId: '절찬 판매 중!',
+};
+
+const backgroundContent: IMegaphoneContent = {
+  megaphoneId: 5,
+  content: '배경 뽑기 : 난 "Background"부터가 달라',
+  intraId: '절찬 판매 중!',
+};
+
+const idContent: IMegaphoneContent = {
+  megaphoneId: 6,
+  content: 'ID 색깔 변경권 : 남들과는 다르게! ID 색깔을 바꿔보세요!',
+  intraId: '절찬 판매 중!',
+};
+
 const defaultContents: MegaphoneList = [
-  {
-    megaphoneId: 1,
-    content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
-    intraId: '관리자',
-  },
-  {
-    megaphoneId: 2,
-    content: '상점에서 아이템을 구매해서 확성기를 등록해보세요!(30자 제한)',
-    intraId: '관리자',
-  },
+  adminContent,
+  megaphoneContent,
+  profileContent,
+  edgeContent,
+  backgroundContent,
+  idContent,
 ];
 
 export const MegaphoneContainer = ({
@@ -35,17 +67,22 @@ export const MegaphoneContainer = ({
 }: MegaphoneContainerProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
-  const [wrapperStyle, setWrapperStyle] = useState<string>('slideNext0');
 
   useInterval(() => {
     const nextIndex = (selectedIndex + 1) % count;
-    setWrapperStyle('slideNext' + nextIndex.toString());
     setSelectedIndex(nextIndex);
-  }, 4500);
+  }, 4000);
 
   return (
     <div className={styles.rollingBanner}>
-      <div className={`${styles.wrapper} ${styles[wrapperStyle]}`} ref={ref}>
+      <div
+        className={styles.wrapper}
+        style={{
+          transition: 'all 1s ease-in-out',
+          transform: `translateY(${selectedIndex * -100}%)`,
+        }}
+        ref={ref}
+      >
         {children}
       </div>
     </div>

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/Layout/NotiBar/NotiItem.tsx b/components/Layout/NotiBar/NotiItem.tsx
@@ -35,7 +35,6 @@ export default function NotiItem({ data }: NotiItemProps) {
       style: styles.canceldByMan,
       content: message,
     },
-    // TODO: 고치기
     GIFT: {
       style: styles.gift,
       content: message,
@@ -50,6 +49,8 @@ export default function NotiItem({ data }: NotiItemProps) {
       ? styles.matched
       : type === 'CANCELEDBYMAN'
       ? styles.canceledByMan
+      : type === 'GIFT'
+      ? styles.gift
       : styles.announcement;
 
   return (

diff --git a/components/error/Error.tsx b/components/error/Error.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import ErrorEmoji from 'public/image/noti_empty.svg';
 import useErrorPage from 'hooks/error/useErrorPage';
 import styles from 'styles/Error.module.scss';
+import ErrorEmoji from '/public/image/error_face.svg';
 
 export default function ErrorPage() {
   const { error, goHome } = useErrorPage();

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/modal/store/CoinHistoryDetails.tsx b/components/modal/store/CoinHistoryDetails.tsx
@@ -1,6 +1,6 @@
 import { FaPlus, FaMinus } from 'react-icons/fa';
 import { ICoinHistory } from 'types/userTypes';
-import { getFormattedDateToString } from 'utils/handleTime';
+import { dateToStringShort } from 'utils/handleTime';
 import styles from 'styles/modal/store/CoinHistoryDetails.module.scss';
 
 export default function CoinHistoryDetails({
@@ -9,11 +9,6 @@ export default function CoinHistoryDetails({
   details: ICoinHistory;
 }) {
   const { createdAt, history, amount } = details;
-  const { year, month, date, hour, min } = getFormattedDateToString(
-    new Date(createdAt)
-  );
-  const DATE = `${year.slice(2)}-${month}-${date}`;
-  const TIME = `${hour}:${min}`;
 
   return (
     <div className={styles.data}>
@@ -27,7 +22,9 @@ export default function CoinHistoryDetails({
         </div>
         <div className={styles.content}>
           <div className={styles.history}>{history}</div>
-          <div className={styles.date}>{`${DATE} ${TIME}`}</div>
+          <div className={styles.date}>
+            {dateToStringShort(new Date(createdAt))}
+          </div>
         </div>
       </div>
       <div className={styles.section2}>

diff --git a/components/modal/store/UserCoinHistoryModal.tsx b/components/modal/store/UserCoinHistoryModal.tsx
@@ -53,7 +53,7 @@ export default function UserCoinHistoryModal({ coin }: ICoin) {
     <div className={styles.container}>
       <div className={styles.title}>GG코인 내역</div>
       <div className={styles.balance}>
-        <div>현재 코인</div>
+        <div className={styles.current}>현재 코인</div>
         <CoinImage amount={coin} size={25} />
       </div>
       <CoinHistoryContainer useCoinList={coinHistoryList.useCoinList} />

diff --git a/components/modal/store/inventory/BackgroundPreview.tsx b/components/modal/store/inventory/BackgroundPreview.tsx
@@ -2,9 +2,9 @@ import { RandomColors, BackgroundColors } from 'types/colorModeTypes';
 import styles from 'styles/modal/store/BackgroundPreview.module.scss';
 
 export default function BackgroundPreview({
-  backgroundType,
+  background,
 }: {
-  backgroundType: string;
+  background: string;
 }) {
   const colorList = new Map<RandomColors, BackgroundColors>([
     ['BASIC', 'BASIC'],
@@ -30,10 +30,10 @@ export default function BackgroundPreview({
     <div className={styles.container}>
       <div
         className={`${styles['player']}
-      ${styles[backgroundType.toLowerCase()]}`}
+      ${styles[background.toLowerCase()]}`}
       ></div>
       <div className={styles.colorName}>
-        {colorList.get(backgroundType as RandomColors)}
+        {colorList.get(background as RandomColors)}
       </div>
     </div>
   );

diff --git a/components/modal/store/inventory/ChangeProfileBackgroundModal.tsx b/components/modal/store/inventory/ChangeProfileBackgroundModal.tsx
@@ -1,7 +1,7 @@
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 import { UseItemRequest } from 'types/inventoryTypes';
 import { Modal } from 'types/modalTypes';
-import { mockInstance } from 'utils/mockAxios';
+import { instance } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
 import {
@@ -32,16 +32,19 @@ export default function ChangeProfileBackgroundModal({
       receiptId: receiptId,
     };
     try {
-      const res = await mockInstance.patch('/users/background', data);
+      const res = await instance.patch('/pingpong/users/background', data);
       setModal({
         modalName: 'USE-ITEM-GACHA',
         randomItem: {
-          item: 'background',
+          item: 'BACKGROUND',
           color: res.data,
         },
       });
     } catch (error) {
+      // TODO: 에러 코드 확인 후 수정
+      alert('뽑기에 실패했습니다(˃̣̣̥ᴖ˂̣̣̥) 관리자에게 문의해주세요');
       setError('HB05');
+      resetModal();
     }
   };