[test-deploy] 테스트 배포

components/Layout/Footer.tsx

@@ -11,7 +11,7 @@ export default function Footer() {
         <div
           onClick={() =>
             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'
+              'https://www.notion.so/bfbe7ad164d4450295e4978ce3121398?pvs=4'
             )
           }
         >

components/modal/ModalProvider.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useQueryClient } from 'react-query';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { reloadMatchState } from 'utils/recoil/match';
 import { modalState, modalTypeState } from 'utils/recoil/modal';
@@ -11,6 +12,7 @@ export default function ModalProvider() {
   const [{ modalName, isAttended }, setModal] = useRecoilState(modalState);
   const setReloadMatch = useSetRecoilState(reloadMatchState);
   const modalType = useRecoilValue(modalTypeState);
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     setModalOutsideScroll();
@@ -22,9 +24,13 @@ export default function ModalProvider() {
   const closeModalHandler = (e: React.MouseEvent) => {
     if (modalName?.split('-')[0] === 'FIXED') return;
     if (e.target instanceof HTMLDivElement && e.target.id === 'modalOutside') {
-      if (modalName === 'MATCH-CANCEL') setReloadMatch(true);
-      else if (modalName === 'EVENT-ANNOUNCEMENT' && isAttended === false) {
+      if (modalName === 'MATCH-CANCEL') {
+        setReloadMatch(true);
+      } else if (modalName === 'EVENT-ANNOUNCEMENT' && isAttended === false) {
         setModal({ modalName: 'EVENT-WELCOME' });
+      } else if (modalName === 'COIN-ANIMATION') {
+        queryClient.invalidateQueries('user');
+        setModal({ modalName: null });
       } else {
         setModal({ modalName: null });
       }

components/modal/admin/AdminFeedbackCheckModal.tsx

@@ -2,6 +2,7 @@ import { useSetRecoilState } from 'recoil';
 import { IoSend } from 'react-icons/io5';
 import { instanceInManage } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
+import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/admin/modal/AdminFeedbackCheck.module.scss';
 
 interface IfeedbackProps {
@@ -16,6 +17,7 @@ export default function AdminFeedbackCheck({
   isSolved,
 }: IfeedbackProps) {
   const setModal = useSetRecoilState(modalState);
+  const setSnackBar = useSetRecoilState(toastState);
 
   const sendNotificationHandler = async (isSend: boolean) => {
     try {
@@ -29,6 +31,12 @@ export default function AdminFeedbackCheck({
           : '피드백이 반영되었습니다.',
         // sendMail: isSend, todo: 슬랙으로 보내는 것으로 변경
       });
+      setSnackBar({
+        toastName: 'noti user',
+        severity: 'success',
+        message: `알림이 성공적으로 전송되었습니다!`,
+        clicked: true,
+      });
       setModal({ modalName: null });
     } catch (e) {
       console.error('SW03');

components/modal/admin/AdminUserCoinModal.tsx

@@ -7,6 +7,7 @@ import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/admin/modal/AdminUserCoin.module.scss';
 
 export default function AdminUserCoinModal(props: { intraId: string }) {
+  const MAX_LENGTH = 30;
   const [currentCoin, setCurrentCoin] = useState<number>(0);
   const [userCoinInfo, setUserCoinInfo] = useState<IUserCoin>({
     intraId: props.intraId,
@@ -131,7 +132,8 @@ export default function AdminUserCoinModal(props: { intraId: string }) {
             <input
               className={styles.contentBlank}
               name='content'
-              placeholder={'내용을 입력하세요'}
+              placeholder={'내용을 입력하세요(30자)'}
+              maxLength={MAX_LENGTH}
               onChange={inputHandler}
             />
           </div>
@@ -150,8 +152,6 @@ export default function AdminUserCoinModal(props: { intraId: string }) {
               className={styles.coinBlank}
               name='change'
               type='number'
-              inputMode='numeric'
-              pattern='[0-9]*'
               placeholder={'코인 지급(차감)액을 입력하세요'}
               onChange={inputHandler}
             />

components/modal/afterGame/InputScore.tsx

@@ -26,6 +26,8 @@ export default function InputScore({
           id='myTeamScore'
           name='myTeamScore'
           type='number'
+          inputMode='numeric'
+          pattern='[0-9]*'
           value={result.myTeamScore}
           min={0}
           max={2}

components/modal/event/WelcomeModal.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { Modal } from 'types/modalTypes';
 import { instance } from 'utils/axios';
@@ -16,7 +15,6 @@ export default function WelcomeModal() {
   const setModal = useSetRecoilState<Modal>(modalState);
   const setError = useSetRecoilState(errorState);
   const [buttonState, setButtonState] = useState(false);
-  const queryClient = useQueryClient();
   const [isLoading, setIsLoading] = useState(false);
   const content = {
     title: 'Welcome!',
@@ -28,7 +26,6 @@ export default function WelcomeModal() {
     try {
       setIsLoading(true);
       const res = await instance.post(`/pingpong/users/attendance`);
-      queryClient.invalidateQueries('user');
       return res.data;
     } catch (e: any) {
       if (e.response.status === 409) {
@@ -43,16 +40,14 @@ export default function WelcomeModal() {
   };
 
   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'
-    );
+    window.open('https://www.notion.so/bfbe7ad164d4450295e4978ce3121398?pvs=4');
   };
 
   const openAttendanceCoin = async () => {
     try {
       setButtonState(true);
       const updatedcoin = await postCoinHandler();
-      if (updatedcoin == null) return;
+      if (updatedcoin === null) return;
       setModal({
         modalName: 'COIN-ANIMATION',
         CoinResult: {
@@ -92,7 +87,7 @@ export default function WelcomeModal() {
             value='출석하기'
             isLoading={isLoading}
           />
-          {buttonState && <CoinPopcon amount={8} coin={1} />}
+          {buttonState && <CoinPopcon amount={5} coin={0} />}
         </ModalButtonContainer>
       </div>
     </div>

components/modal/statChange/CoinChangeModal.tsx

@@ -1,4 +1,6 @@
 import Image from 'next/image';
+import { useEffect } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { CoinResult } from 'types/coinTypes';
 import { modalState } from 'utils/recoil/modal';
@@ -9,6 +11,13 @@ import styles from 'styles/modal/CoinChangeModal.module.scss';
 
 export default function CoinChangeModal(coin: CoinResult) {
   const setModal = useSetRecoilState(modalState);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    return () => {
+      queryClient.invalidateQueries('user');
+    };
+  }, []);
 
   const closeModal = () => {
     setModal({ modalName: null });

components/modal/statChange/StatChangeModal.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { CoinResult } from 'types/coinTypes';
 import { GameResult } from 'types/gameTypes';
@@ -9,15 +8,14 @@ import { reloadMatchState } from 'utils/recoil/match';
 import { modalState } from 'utils/recoil/modal';
 import ExpStat from 'components/modal/statChange/ExpStat';
 import PppStat from 'components/modal/statChange/PppStat';
-import useAxiosGet, { useMockAxiosGet } from 'hooks/useAxiosGet';
+import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/modal/afterGame/StatChangeModal.module.scss';
 
 export default function StatChangeModal({ gameId, mode }: Exp) {
   const setModal = useSetRecoilState(modalState);
   const setReloadMatch = useSetRecoilState(reloadMatchState);
   const setError = useSetRecoilState(errorState);
   const [stat, setStat] = useState<GameResult | undefined>();
-  const queryClient = useQueryClient();
 
   const getExpHandler = useAxiosGet({
     url: `/pingpong/games/${gameId}/result/${mode?.toLowerCase()}`,
@@ -28,9 +26,6 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
 
   useEffect(() => {
     getExpHandler();
-    return () => {
-      queryClient.invalidateQueries('user');
-    };
   }, []);
 
   const closeModal = () => {

styles/modal/store/CoinHistoryDetails.module.scss

@@ -2,6 +2,7 @@
 
 .data {
   display: flex;
+  width: 100%;
   padding: 0.5rem;
   margin-bottom: 0.2rem;
   font-size: 1rem;
@@ -16,15 +17,19 @@
   .section1 {
     display: flex;
     align-items: center;
+    width: 85%;
     .icon {
       display: flex;
-      align-items: center;
+      width: 10%;
       margin-right: 0.5rem;
+      align-items: center;
     }
     .content {
+      width: 90%;
       .history {
         color: black;
         word-break: keep-all;
+        word-wrap: break-word;
       }
       .date {
         font-size: 0.8rem;