From 9986486e987d6eabfb87068736d55db8cd122f40 Mon Sep 17 00:00:00 2001
From: NEWJIN <winniepooh00@naver.com>
Date: Wed, 10 Jul 2024 16:13:01 +0900
Subject: [PATCH] =?UTF-8?q?FE-48=20:sparkles:=20EmotionSelector=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=8F=99=EC=A0=81=20?=
 =?UTF-8?q?=ED=81=AC=EA=B8=B0=20=EB=B3=80=EA=B2=BD=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useMediaQuery 훅 생성: 화면의 크기가 변경될 때마다 리스너 추가 및 제거
---
 .../Emotion/card/EmotionSelector.tsx          | 19 +++++++++++++++++--
 src/hooks/useMediaQuery.ts                    | 19 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useMediaQuery.ts

diff --git a/src/components/Emotion/card/EmotionSelector.tsx b/src/components/Emotion/card/EmotionSelector.tsx
index 50447987..1726c11e 100644
--- a/src/components/Emotion/card/EmotionSelector.tsx
+++ b/src/components/Emotion/card/EmotionSelector.tsx
@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import InteractiveEmotionIconCard from '@/components/Emotion/card/InteractiveEmotionIconCard';
+import useMediaQuery from '@/hooks/useMediaQuery';
 
 // 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',
@@ -33,10 +37,21 @@ function EmotionSelector() {
     });
   };
 
+  let containerClass = 'w-[544px] h-[136px] gap-4';
+  let cardSize: 'lg' | 'md' | 'sm' = 'lg';
+
+  if (isTablet) {
+    containerClass = 'w-[352px] h-[96px] gap-2';
+    cardSize = 'md';
+  } else if (isMobile) {
+    containerClass = 'w-[312px] h-[84px] gap-2';
+    cardSize = 'sm';
+  }
+
   return (
-    <div className='w-[544px] h-[136px] justify-start items-start gap-4 inline-flex'>
+    <div className={`justify-start items-start inline-flex ${containerClass}`}>
       {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => (
-        <InteractiveEmotionIconCard key={iconType} iconType={iconType} size='lg' state={states[iconType]} onClick={() => handleCardClick(iconType)} />
+        <InteractiveEmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
       ))}
     </div>
   );
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..899c0fce
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}
+
+export default useMediaQuery;