FE-48 🔨 EmotionTypes 인터페이스 정의

emotion 관련 컴포넌트에서 해당 인터페이스를 import하여 사용하게 구현

src/components/Emotion/card/EmotionIconCard.tsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import cn from '@/lib/utils';
 import Image from 'next/image';
-
-// EmotionIconCardProps 인터페이스 정의
-export interface EmotionIconCardProps {
-  iconType: '감동' | '기쁨' | '고민' | '슬픔' | '분노'; // 아이콘 종류
-  state: 'Default' | 'Unclicked' | 'Clicked'; // 상태
-  size: 'sm' | 'md' | 'lg'; // 크기
-  onClick?: () => void; // 클릭 이벤트 핸들러
-}
+import { EmotionIconCardProps } from '@/types/EmotionTypes';
 
 // 아이콘 파일 경로 매핑
 const iconPaths = {
@@ -118,4 +111,4 @@ EmotionIconCard.defaultProps = {
   onClick: () => {},
 };
 
-export { EmotionIconCard };
+export default EmotionIconCard;

src/components/Emotion/card/EmotionSelector.tsx

@@ -1,35 +1,36 @@
 import React, { useState } from 'react';
 import InteractiveEmotionIconCard from '@/components/Emotion/card/InteractiveEmotionIconCard';
 import useMediaQuery from '@/hooks/useMediaQuery';
+import { EmotionType, EmotionState } from '@/types/EmotionTypes';
 
 // EmotionSelector 컴포넌트 함수 선언
 function EmotionSelector() {
   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
   const isMobile = useMediaQuery('(max-width: 767px)');
 
   // 감정 카드 상태 관리
-  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 [states, setStates] = useState<Record<EmotionType, EmotionState>>({
+    감동: 'Default',
+    기쁨: 'Default',
+    고민: 'Default',
+    슬픔: 'Default',
+    분노: 'Default',
   });
 
   // 감정 카드 클릭 핸들러
-  const handleCardClick = (iconType: '감동' | '기쁨' | '고민' | '슬픔' | '분노') => {
+  const handleCardClick = (iconType: EmotionType) => {
     setStates((prevStates) => {
       const newStates = { ...prevStates };
 
       if (prevStates[iconType] === 'Clicked') {
         // 현재 클릭된 카드가 다시 클릭되면 모두 Default로 설정
         Object.keys(newStates).forEach((key) => {
-          newStates[key as '감동' | '기쁨' | '고민' | '슬픔' | '분노'] = 'Default';
+          newStates[key as EmotionType] = 'Default';
         });
       } else {
         // 하나의 카드가 클릭되면 그 카드만 Clicked, 나머지는 Unclicked로 설정
         Object.keys(newStates).forEach((key) => {
-          newStates[key as '감동' | '기쁨' | '고민' | '슬픔' | '분노'] = key === iconType ? 'Clicked' : 'Unclicked';
+          newStates[key as EmotionType] = key === iconType ? 'Clicked' : 'Unclicked';
         });
       }
 

src/components/Emotion/card/InteractiveEmotionIconCard.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
-import { EmotionIconCard, EmotionIconCardProps } from '@/components/Emotion/card/EmotionIconCard';
-
-// InteractiveEmotionIconCardProps 인터페이스 정의
-interface InteractiveEmotionIconCardProps extends Omit<EmotionIconCardProps, 'state'> {
-  state: 'Default' | 'Unclicked' | 'Clicked';
-  onClick: () => void;
-}
+import EmotionIconCard from '@/components/Emotion/card/EmotionIconCard';
+import { InteractiveEmotionIconCardProps } from '@/types/EmotionTypes';
 
 // InteractiveEmotionIconCard 컴포넌트 함수 선언
 function InteractiveEmotionIconCard(props: InteractiveEmotionIconCardProps) {

src/types/EmotionTypes.ts

@@ -0,0 +1,14 @@
+export type EmotionType = '감동' | '기쁨' | '고민' | '슬픔' | '분노';
+export type EmotionState = 'Default' | 'Unclicked' | 'Clicked';
+
+export interface EmotionIconCardProps {
+  iconType: EmotionType; // 아이콘 종류
+  state: EmotionState; // 상태
+  size: 'sm' | 'md' | 'lg'; // 크기
+  onClick?: () => void; // 클릭 이벤트 핸들러
+}
+
+export interface InteractiveEmotionIconCardProps extends Omit<EmotionIconCardProps, 'state'> {
+  state: EmotionState;
+  onClick: () => void;
+}