From f54b0d3e543fdd97275a51a0d1573becaa330519 Mon Sep 17 00:00:00 2001
From: NEWJIN <109906670+newjinlee@users.noreply.github.com>
Date: Fri, 2 Aug 2024 01:14:01 +0900
Subject: [PATCH] =?UTF-8?q?FE-16=20:bug:=20=EC=98=A4=EB=8A=98=EC=9D=98=20?=
 =?UTF-8?q?=EA=B0=90=EC=A0=95=20=EC=A0=80=EC=9E=A5=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(#155)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* FE-16 :bug: 오늘의 감정 저장 후 컴포넌트 삭제

* FE-16 :lipstick: 토스트 배경색 수정
---
 src/components/Emotion/EmotionSelector.tsx | 23 +++++++++++++++++++---
 src/components/main/TodayEmotion.tsx       | 12 +++++++++--
 src/components/ui/toast.tsx                |  2 +-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx
index 4375c3ca..57bae69a 100644
--- a/src/components/Emotion/EmotionSelector.tsx
+++ b/src/components/Emotion/EmotionSelector.tsx
@@ -10,7 +10,12 @@ import EmotionSaveToast from './EmotionSaveToast';
  * EmotionSelector 컴포넌트는 여러 개의 EmotionIconCard를 관리하고
  * 사용자의 오늘의 감정을 선택하고 저장하고 출력합니다.
  */
-function EmotionSelector() {
+
+interface EmotionSelectorProps {
+  onEmotionSaved: () => void; // Callback for when the emotion is saved
+}
+
+function EmotionSelector({ onEmotionSaved }: EmotionSelectorProps) {
   // 반응형 디자인을 위한 미디어 쿼리 훅
   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
   const isMobile = useMediaQuery('(max-width: 767px)');
@@ -26,6 +31,8 @@ function EmotionSelector() {
 
   // 현재 선택된 감정을 관리하는 useState 훅
   const [selectedEmotion, setSelectedEmotion] = useState<EmotionType | null>(null);
+  const [showToast, setShowToast] = useState<boolean>(false); // State for controlling the toast
+
   // 오늘의 감정을 조회하기 위한 훅
   const { data: emotion, error: getError, isLoading: isGetLoading } = useGetEmotion();
   // 감정을 저장하기 위한 훅
@@ -49,7 +56,9 @@ function EmotionSelector() {
    * 감정을 서버에 저장합니다.
    * @param iconType - 클릭된 감정의 타입
    */
+
   const handleCardClick = async (iconType: EmotionType) => {
+    let emotionChanged = false;
     setStates((prevStates) => {
       const newStates = { ...prevStates };
 
@@ -63,6 +72,7 @@ function EmotionSelector() {
         Object.keys(newStates).forEach((key) => {
           newStates[key as EmotionType] = key === iconType ? 'Clicked' : 'Unclicked';
         });
+        emotionChanged = true;
       }
 
       return newStates;
@@ -71,7 +81,14 @@ function EmotionSelector() {
     // 오늘의 감정 저장
     postEmotionMutation.mutate(iconType, {
       onSuccess: (_, clickedIconType) => {
-        setSelectedEmotion(clickedIconType);
+        if (emotionChanged) {
+          setSelectedEmotion(clickedIconType);
+          setShowToast(true);
+          setTimeout(() => {
+            setShowToast(false);
+            onEmotionSaved();
+          }, 1000);
+        }
       },
       onError: (error: unknown) => {
         // eslint-disable-next-line
@@ -103,7 +120,7 @@ function EmotionSelector() {
         ))}
       </div>
       {/* 감정이 선택되었을 때 토스트 메시지 표시 */}
-      {selectedEmotion && <EmotionSaveToast iconType={selectedEmotion} />}
+      {showToast && selectedEmotion && <EmotionSaveToast iconType={selectedEmotion} />}
     </>
   );
 }
diff --git a/src/components/main/TodayEmotion.tsx b/src/components/main/TodayEmotion.tsx
index 3b716b2f..ca9725c4 100644
--- a/src/components/main/TodayEmotion.tsx
+++ b/src/components/main/TodayEmotion.tsx
@@ -1,12 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import EmotionSelector from '../Emotion/EmotionSelector';
 
 function TodayEmotion() {
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+
+  const handleEmotionSaved = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
   return (
     <div className='w-[312px] md:w-[384px] lg:w-[640px]'>
       <h1 className='text-black-600 font-semibold font-pretendard leading-loose text-[16px] lg:text-[24px]'>오늘의 감정</h1>
       <div className='mt-[24px] lg:mt-[40px] flex justify-end'>
-        <EmotionSelector />
+        <EmotionSelector onEmotionSaved={handleEmotionSaved} />
       </div>
     </div>
   );
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 01e6c912..f1dee4bb 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -21,7 +21,7 @@ const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border bg-background text-foreground',
+        default: 'border bg-white text-foreground',
         destructive: 'destructive group border-destructive bg-destructive text-destructive-foreground',
       },
     },