Merge branch 'main' into GGFE-241-관리자-공지사항-버튼-에러

components/Layout/Layout.tsx

@@ -52,9 +52,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
     <div className={styles.appContainer}>
       <div
         className={`${styles.background} ${
-          colorMode !== undefined
-            ? styles[colorMode.toLowerCase()]
-            : styles.basic
+          colorMode ? styles[colorMode.toLowerCase()] : styles.basic
         } `}
       >
         <div>

components/modal/CoinPopcon.tsx

@@ -24,7 +24,7 @@ export default function CoinPopcon({ amount, coin }: amountProps) {
   const handleClickMouse = (e: MouseEvent) => {
     const numElement = document.createElement('span');
     numElement.className = styles.appear;
-    numElement.textContent = `+${coin}`;
+    if (coin != 0) numElement.textContent = `+${coin}`;
     numElement.style.position = 'fixed';
     numElement.style.top = e.clientY + 'px';
     numElement.style.left = e.clientX - 20 + 'px';

components/modal/event/WelcomeModal.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useSetRecoilState } from 'recoil';
-import { CoinResult } from 'types/coinTypes';
 import { Modal } from 'types/modalTypes';
 import { instance } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
@@ -14,11 +13,9 @@ import styles from 'styles/modal/event/WelcomeModal.module.scss';
 
 export default function WelcomeModal() {
   const setModal = useSetRecoilState<Modal>(modalState);
-  const [coin, setCoin] = useState<CoinResult>();
   const setError = useSetRecoilState(errorState);
   const [buttonState, setButtonState] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-
   const content = {
     title: 'Welcome!',
     message:
@@ -29,9 +26,12 @@ export default function WelcomeModal() {
     try {
       setIsLoading(true);
       const res = await instance.post(`/pingpong/users/attendance`);
-      setCoin(res.data);
       return res.data;
-    } catch (error) {
+    } catch (e: any) {
+      if (e.response.status === 400) {
+        alert('출석은 하루에 한 번만 가능합니다.');
+        return;
+      }
       setError('SM01');
     } finally {
       setIsLoading(false);
@@ -47,21 +47,20 @@ export default function WelcomeModal() {
   const openAttendanceCoin = async () => {
     try {
       setButtonState(true);
-      const updatedCoin = await postCoinHandler();
-
-      if (!updatedCoin) return null;
-
+      const updatedcoin = await postCoinHandler();
+      if (updatedcoin == null) return;
       setModal({
         modalName: 'COIN-ANIMATION',
         CoinResult: {
           isAttended: true,
-          afterCoin: updatedCoin.afterCoin,
-          beforeCoin: updatedCoin.beforeCoin,
-          coinIncrement: updatedCoin.coinIncrement,
+          afterCoin: updatedcoin.afterCoin,
+          beforeCoin: updatedcoin.beforeCoin,
+          coinIncrement: updatedcoin.coinIncrement,
         },
       });
     } catch (error) {
       setError('SM02');
+      return;
     }
   };
 

components/modal/statChange/CoinChangeModal.tsx

@@ -34,6 +34,9 @@ export default function CoinChangeModal(coin: CoinResult) {
         </div>
         <div className={styles.coinStat}>
           <CoinStat before={coin?.beforeCoin} after={coin?.afterCoin} />
+          {coin.coinIncrement === 0 && (
+            <div className={`${styles.appear}`}>획득한 코인이 없습니다. 😢</div>
+          )}
         </div>
         <CoinAnimation amount={coin?.coinIncrement} />
         <div className={styles.guide}>화면을 클릭해주세요!</div>

components/modal/statChange/StatChangeModal.tsx

@@ -47,7 +47,7 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
         },
       });
     } catch (error) {
-      setError('SM02');
+      setError('SM03');
     }
   };
 

styles/common.scss

@@ -387,10 +387,11 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
   }
 }
 
-@mixin txtColor() {
+@mixin txtColor($color: black) {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  -webkit-text-stroke: 0.2px $color;
 }
 
 @mixin tierNumber() {
@@ -400,19 +401,19 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
   @include txtColor();
   &.red {
     background-image: linear-gradient(to right, #f77062 0%, #fe5196 100%);
-    @include txtColor();
+    @include txtColor(#fe5196);
   }
   &.yellow {
     background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
-    @include txtColor();
+    @include txtColor(#f6d365);
   }
   &.green {
     background-image: linear-gradient(135deg, #81fbb8 10%, #28c76f 100%);
-    @include txtColor();
+    @include txtColor(#28c76f);
   }
   &.blue {
     background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-    @include txtColor();
+    @include txtColor(#4facfe);
   }
   &.black {
     background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
@@ -428,6 +429,6 @@ $text-shadow-blue: 2px 2px 0px $pp-blue;
       rgba(4, 4, 235, 0.568) 80.66%,
       rgb(123, 97, 224) 100%
     );
-    @include txtColor();
+    @include txtColor(rgb(123, 97, 224));
   }
 }

styles/modal/CoinChangeModal.module.scss

@@ -26,6 +26,16 @@ $ppp-font: 2.8rem;
   align-items: stretch;
 }
 
+.appear {
+  height: 1rem;
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
+  opacity: 0;
+  animation: appear #{0.65}s ease-in forwards 1;
+}
+
 .coinImage {
   display: flex;
   margin-bottom: 1.5rem;
@@ -47,6 +57,18 @@ $ppp-font: 2.8rem;
   @include modalButton;
 }
 
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @media (max-width: 440px) {
   .coinStat {
     margin-bottom: 2.5rem;