FE-48 ✨ 감정 이모티콘 상태 변화 동기화 구

감정 카드를 클릭할 때 상태가 올바르게 전환되고, 다른 카드의 상태도 동기화되는 기능 구현

src/components/Emotion/card/EmotionIconCard.tsx

@@ -54,7 +54,7 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm',
   }
 
   // 상태에 따른 아이콘 경로 설정
-  const iconPath = state === 'Unclicked' ? iconPaths.BW[iconType] : iconPaths.Color[iconType];
+  const iconPath = state === 'Clicked' || state === 'Default' ? iconPaths.Color[iconType] : iconPaths.BW[iconType];
 
   // 상태에 따른 클래스 설정
   let borderClass = '';

src/components/Emotion/card/EmotionSelector.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import InteractiveEmotionIconCard from '@/components/Emotion/card/InteractiveEmotionIconCard';
+
+// EmotionSelector 컴포넌트 함수 선언
+function EmotionSelector() {
+  // 감정 카드 상태 관리
+  const [states, setStates] = useState({
+    감동: 'Default' as 'Default' | 'Unclicked' | 'Clicked',
+    기쁨: 'Default' as 'Default' | 'Unclicked' | 'Clicked',
+    고민: 'Default' as 'Default' | 'Unclicked' | 'Clicked',
+    슬픔: 'Default' as 'Default' | 'Unclicked' | 'Clicked',
+    분노: 'Default' as 'Default' | 'Unclicked' | 'Clicked',
+  });
+
+  // 감정 카드 클릭 핸들러
+  const handleCardClick = (iconType: '감동' | '기쁨' | '고민' | '슬픔' | '분노') => {
+    setStates((prevStates) => {
+      const newStates = { ...prevStates };
+
+      if (prevStates[iconType] === 'Clicked') {
+        // 현재 클릭된 카드가 다시 클릭되면 모두 Default로 설정
+        Object.keys(newStates).forEach((key) => {
+          newStates[key as '감동' | '기쁨' | '고민' | '슬픔' | '분노'] = 'Default';
+        });
+      } else {
+        // 하나의 카드가 클릭되면 그 카드만 Clicked, 나머지는 Unclicked로 설정
+        Object.keys(newStates).forEach((key) => {
+          newStates[key as '감동' | '기쁨' | '고민' | '슬픔' | '분노'] = key === iconType ? 'Clicked' : 'Unclicked';
+        });
+      }
+
+      return newStates;
+    });
+  };
+
+  return (
+    <div className='w-[544px] h-[136px] justify-start items-start gap-4 inline-flex'>
+      {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => (
+        <InteractiveEmotionIconCard key={iconType} iconType={iconType} size='lg' state={states[iconType]} onClick={() => handleCardClick(iconType)} />
+      ))}
+    </div>
+  );
+}
+
+export default EmotionSelector;

src/components/Emotion/card/InteractiveEmotionIconCard.tsx

@@ -1,18 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { EmotionIconCard, EmotionIconCardProps } from '@/components/Emotion/card/EmotionIconCard';
 
 // InteractiveEmotionIconCardProps 인터페이스 정의
-interface InteractiveEmotionIconCardProps extends Omit<EmotionIconCardProps, 'state'> {}
+interface InteractiveEmotionIconCardProps extends Omit<EmotionIconCardProps, 'state'> {
+  state: 'Default' | 'Unclicked' | 'Clicked';
+  onClick: () => void;
+}
 
 // InteractiveEmotionIconCard 컴포넌트 함수 선언
 function InteractiveEmotionIconCard(props: InteractiveEmotionIconCardProps) {
-  const [state, setState] = useState<'Default' | 'Unclicked' | 'Clicked'>('Unclicked');
-
-  const handleClick = () => {
-    setState((prevState) => (prevState === 'Unclicked' ? 'Clicked' : 'Unclicked'));
-  };
-
-  return <EmotionIconCard {...props} state={state} onClick={handleClick} />;
+  return <EmotionIconCard {...props} />;
 }
 
 InteractiveEmotionIconCard.displayName = 'InteractiveEmotionIconCard';

src/components/Emotion/card/TestComponent.tsx

@@ -1,21 +1,10 @@
 import React from 'react';
-import EmotionIconCardContainer from '@/components/Emotion/card/InteractiveEmotionIconCard';
+import EmotionSelector from '@/components/Emotion/card/EmotionSelector';
 
 function ExampleComponent() {
   return (
     <div>
-      {/* 기본 상태 (Default), 감동 아이콘, 작은 크기 (sm) */}
-      <EmotionIconCardContainer iconType='고민' size='sm' />
-
-      {/* 클릭되지 않은 상태 (Unclicked), 기쁨 아이콘, 중간 크기 (md) */}
-      <EmotionIconCardContainer iconType='기쁨' size='md' />
-
-      {/* 클릭된 상태 (Clicked), 슬픔 아이콘, 큰 크기 (lg) */}
-      <EmotionIconCardContainer iconType='감동' size='lg' />
-      <EmotionIconCardContainer iconType='기쁨' size='lg' />
-      <EmotionIconCardContainer iconType='고민' size='lg' />
-      <EmotionIconCardContainer iconType='슬픔' size='lg' />
-      <EmotionIconCardContainer iconType='분노' size='lg' />
+      <EmotionSelector />
     </div>
   );
 }