From 28ed47f539a090be1b9a2b2c4e3a61823a414551 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 12:03:54 +0900 Subject: [PATCH 01/11] =?UTF-8?q?FE-48=20=F0=9F=93=B0=20=EA=B3=B5=EC=9A=A9?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20face=20emoji=20svg=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Emotion/AngryFaceBWIcon.svg | 19 +++++++++++++++++++ src/components/Emotion/AngryFaceColorIcon.svg | 19 +++++++++++++++++++ src/components/Emotion/HeartFacedBWIcon.svg | 13 +++++++++++++ .../Emotion/HeartFacedColorIcon.svg | 13 +++++++++++++ src/components/Emotion/SadFaceBWIcon.svg | 14 ++++++++++++++ src/components/Emotion/SadFaceColorIcon.svg | 14 ++++++++++++++ src/components/Emotion/SmileFaceBWIcon.svg | 13 +++++++++++++ src/components/Emotion/SmileFaceColorIcon.svg | 13 +++++++++++++ src/components/Emotion/ThinkFaceBWIcon.svg | 11 +++++++++++ src/components/Emotion/ThinkFaceColorIcon.svg | 11 +++++++++++ 10 files changed, 140 insertions(+) create mode 100644 src/components/Emotion/AngryFaceBWIcon.svg create mode 100644 src/components/Emotion/AngryFaceColorIcon.svg create mode 100644 src/components/Emotion/HeartFacedBWIcon.svg create mode 100644 src/components/Emotion/HeartFacedColorIcon.svg create mode 100644 src/components/Emotion/SadFaceBWIcon.svg create mode 100644 src/components/Emotion/SadFaceColorIcon.svg create mode 100644 src/components/Emotion/SmileFaceBWIcon.svg create mode 100644 src/components/Emotion/SmileFaceColorIcon.svg create mode 100644 src/components/Emotion/ThinkFaceBWIcon.svg create mode 100644 src/components/Emotion/ThinkFaceColorIcon.svg diff --git a/src/components/Emotion/AngryFaceBWIcon.svg b/src/components/Emotion/AngryFaceBWIcon.svg new file mode 100644 index 00000000..c499add3 --- /dev/null +++ b/src/components/Emotion/AngryFaceBWIcon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Emotion/AngryFaceColorIcon.svg b/src/components/Emotion/AngryFaceColorIcon.svg new file mode 100644 index 00000000..ca6e754a --- /dev/null +++ b/src/components/Emotion/AngryFaceColorIcon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Emotion/HeartFacedBWIcon.svg b/src/components/Emotion/HeartFacedBWIcon.svg new file mode 100644 index 00000000..5702c0f9 --- /dev/null +++ b/src/components/Emotion/HeartFacedBWIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Emotion/HeartFacedColorIcon.svg b/src/components/Emotion/HeartFacedColorIcon.svg new file mode 100644 index 00000000..9ef30c50 --- /dev/null +++ b/src/components/Emotion/HeartFacedColorIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Emotion/SadFaceBWIcon.svg b/src/components/Emotion/SadFaceBWIcon.svg new file mode 100644 index 00000000..90df96bd --- /dev/null +++ b/src/components/Emotion/SadFaceBWIcon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/Emotion/SadFaceColorIcon.svg b/src/components/Emotion/SadFaceColorIcon.svg new file mode 100644 index 00000000..58e96e31 --- /dev/null +++ b/src/components/Emotion/SadFaceColorIcon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/Emotion/SmileFaceBWIcon.svg b/src/components/Emotion/SmileFaceBWIcon.svg new file mode 100644 index 00000000..58be6715 --- /dev/null +++ b/src/components/Emotion/SmileFaceBWIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Emotion/SmileFaceColorIcon.svg b/src/components/Emotion/SmileFaceColorIcon.svg new file mode 100644 index 00000000..3e66c738 --- /dev/null +++ b/src/components/Emotion/SmileFaceColorIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Emotion/ThinkFaceBWIcon.svg b/src/components/Emotion/ThinkFaceBWIcon.svg new file mode 100644 index 00000000..2ac21adc --- /dev/null +++ b/src/components/Emotion/ThinkFaceBWIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Emotion/ThinkFaceColorIcon.svg b/src/components/Emotion/ThinkFaceColorIcon.svg new file mode 100644 index 00000000..0e2bab7d --- /dev/null +++ b/src/components/Emotion/ThinkFaceColorIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 676bdae32d9ed858fd09cf733baff7249ca27e1a Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 12:42:05 +0900 Subject: [PATCH 02/11] =?UTF-8?q?FE-48=20:art:=20=EA=B0=90=EC=A0=95=20?= =?UTF-8?q?=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/favicon.ico | Bin 25931 -> 0 bytes .../icon/BW}/AngryFaceBWIcon.svg | 0 .../icon/BW}/HeartFacedBWIcon.svg | 0 .../icon/BW}/SadFaceBWIcon.svg | 0 .../icon/BW}/SmileFaceBWIcon.svg | 0 .../icon/BW}/ThinkFaceBWIcon.svg | 0 .../icon/Color}/AngryFaceColorIcon.svg | 0 .../icon/Color}/HeartFacedColorIcon.svg | 0 .../icon/Color}/SadFaceColorIcon.svg | 0 .../icon/Color}/SmileFaceColorIcon.svg | 0 .../icon/Color}/ThinkFaceColorIcon.svg | 0 public/next.svg | 1 - public/vercel.svg | 1 - 13 files changed, 2 deletions(-) delete mode 100644 public/favicon.ico rename {src/components/Emotion => public/icon/BW}/AngryFaceBWIcon.svg (100%) rename {src/components/Emotion => public/icon/BW}/HeartFacedBWIcon.svg (100%) rename {src/components/Emotion => public/icon/BW}/SadFaceBWIcon.svg (100%) rename {src/components/Emotion => public/icon/BW}/SmileFaceBWIcon.svg (100%) rename {src/components/Emotion => public/icon/BW}/ThinkFaceBWIcon.svg (100%) rename {src/components/Emotion => public/icon/Color}/AngryFaceColorIcon.svg (100%) rename {src/components/Emotion => public/icon/Color}/HeartFacedColorIcon.svg (100%) rename {src/components/Emotion => public/icon/Color}/SadFaceColorIcon.svg (100%) rename {src/components/Emotion => public/icon/Color}/SmileFaceColorIcon.svg (100%) rename {src/components/Emotion => public/icon/Color}/ThinkFaceColorIcon.svg (100%) delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/src/components/Emotion/AngryFaceBWIcon.svg b/public/icon/BW/AngryFaceBWIcon.svg similarity index 100% rename from src/components/Emotion/AngryFaceBWIcon.svg rename to public/icon/BW/AngryFaceBWIcon.svg diff --git a/src/components/Emotion/HeartFacedBWIcon.svg b/public/icon/BW/HeartFacedBWIcon.svg similarity index 100% rename from src/components/Emotion/HeartFacedBWIcon.svg rename to public/icon/BW/HeartFacedBWIcon.svg diff --git a/src/components/Emotion/SadFaceBWIcon.svg b/public/icon/BW/SadFaceBWIcon.svg similarity index 100% rename from src/components/Emotion/SadFaceBWIcon.svg rename to public/icon/BW/SadFaceBWIcon.svg diff --git a/src/components/Emotion/SmileFaceBWIcon.svg b/public/icon/BW/SmileFaceBWIcon.svg similarity index 100% rename from src/components/Emotion/SmileFaceBWIcon.svg rename to public/icon/BW/SmileFaceBWIcon.svg diff --git a/src/components/Emotion/ThinkFaceBWIcon.svg b/public/icon/BW/ThinkFaceBWIcon.svg similarity index 100% rename from src/components/Emotion/ThinkFaceBWIcon.svg rename to public/icon/BW/ThinkFaceBWIcon.svg diff --git a/src/components/Emotion/AngryFaceColorIcon.svg b/public/icon/Color/AngryFaceColorIcon.svg similarity index 100% rename from src/components/Emotion/AngryFaceColorIcon.svg rename to public/icon/Color/AngryFaceColorIcon.svg diff --git a/src/components/Emotion/HeartFacedColorIcon.svg b/public/icon/Color/HeartFacedColorIcon.svg similarity index 100% rename from src/components/Emotion/HeartFacedColorIcon.svg rename to public/icon/Color/HeartFacedColorIcon.svg diff --git a/src/components/Emotion/SadFaceColorIcon.svg b/public/icon/Color/SadFaceColorIcon.svg similarity index 100% rename from src/components/Emotion/SadFaceColorIcon.svg rename to public/icon/Color/SadFaceColorIcon.svg diff --git a/src/components/Emotion/SmileFaceColorIcon.svg b/public/icon/Color/SmileFaceColorIcon.svg similarity index 100% rename from src/components/Emotion/SmileFaceColorIcon.svg rename to public/icon/Color/SmileFaceColorIcon.svg diff --git a/src/components/Emotion/ThinkFaceColorIcon.svg b/public/icon/Color/ThinkFaceColorIcon.svg similarity index 100% rename from src/components/Emotion/ThinkFaceColorIcon.svg rename to public/icon/Color/ThinkFaceColorIcon.svg diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28c..00000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f84222..00000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 90925ccc655e339dbfbea8fb01c4293e0fad885d Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 12:48:50 +0900 Subject: [PATCH 03/11] =?UTF-8?q?FE-48=20:sparkles:=20=EA=B0=90=EC=A0=95?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20ui=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Emotion/card/EmotionIconCard.tsx | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/components/Emotion/card/EmotionIconCard.tsx diff --git a/src/components/Emotion/card/EmotionIconCard.tsx b/src/components/Emotion/card/EmotionIconCard.tsx new file mode 100644 index 00000000..27342525 --- /dev/null +++ b/src/components/Emotion/card/EmotionIconCard.tsx @@ -0,0 +1,66 @@ +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'; // 크기 +} + +// 아이콘 파일 경로 매핑 +const iconPaths = { + Color: { + 감동: '/icon/Color/HeartFaceColorIcon.svg', + 기쁨: '/icon/Color/SmileFaceColorIcon.svg', + 고민: '/icon/Color/ThinkFaceColorIcon.svg', + 슬픔: '/icon/Color/SadFaceColorIcon.svg', + 분노: '/icon/Color/AngryFaceColorIcon.svg', + }, + BW: { + 감동: '/icon/BW/HeartFaceBWIcon.svg', + 기쁨: '/icon/BW/SmileFaceBWIcon.svg', + 고민: '/icon/BW/ThinkFaceBWIcon.svg', + 슬픔: '/icon/BW/SadFaceBWIcon.svg', + 분노: '/icon/BW/AngryFaceBWIcon.svg', + }, +}; + +// EmotionIconCard 컴포넌트 함수 선언 +function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' }: EmotionIconCardProps) { + // 크기에 따른 클래스 설정 + let sizeClass = ''; + let iconSizeClass = ''; + switch (size) { + case 'lg': + sizeClass = 'w-20 h-28'; + iconSizeClass = 'w-12 h-12 p-6'; + break; + case 'md': + sizeClass = 'w-16 h-24'; + iconSizeClass = 'w-10 h-10 p-5'; + break; + case 'sm': + default: + sizeClass = 'w-14 h-[84px]'; + iconSizeClass = 'w-8 h-8 p-4'; + break; + } + + // 상태에 따른 아이콘 경로 설정 + const iconPath = state === 'Default' ? iconPaths.BW[iconType] : iconPaths.Color[iconType]; + + return ( +
+
+ {iconType} +
+
{iconType}
+
+ ); +} + +EmotionIconCard.displayName = 'EmotionIconCard'; + +export { EmotionIconCard }; From fbeab3c15fcda383419721411a72ab2abab1a73e Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 14:11:59 +0900 Subject: [PATCH 04/11] =?UTF-8?q?FE-48=20:sparkles:=20=EA=B0=90=EC=A0=95?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=81=B4=EB=9E=98=EC=8A=A4=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Emotion/card/EmotionIconCard.tsx | 65 ++++++++++++++----- src/components/Emotion/card/TestComponent.tsx | 18 +++++ src/pages/index.tsx | 2 + 3 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 src/components/Emotion/card/TestComponent.tsx diff --git a/src/components/Emotion/card/EmotionIconCard.tsx b/src/components/Emotion/card/EmotionIconCard.tsx index 27342525..4fbb0ddc 100644 --- a/src/components/Emotion/card/EmotionIconCard.tsx +++ b/src/components/Emotion/card/EmotionIconCard.tsx @@ -12,18 +12,18 @@ export interface EmotionIconCardProps { // 아이콘 파일 경로 매핑 const iconPaths = { Color: { - 감동: '/icon/Color/HeartFaceColorIcon.svg', - 기쁨: '/icon/Color/SmileFaceColorIcon.svg', - 고민: '/icon/Color/ThinkFaceColorIcon.svg', - 슬픔: '/icon/Color/SadFaceColorIcon.svg', - 분노: '/icon/Color/AngryFaceColorIcon.svg', + 감동: 'icon/Color/HeartFaceColorIcon.svg', + 기쁨: 'icon/Color/SmileFaceColorIcon.svg', + 고민: 'icon/Color/ThinkFaceColorIcon.svg', + 슬픔: 'icon/Color/SadFaceColorIcon.svg', + 분노: 'icon/Color/AngryFaceColorIcon.svg', }, BW: { - 감동: '/icon/BW/HeartFaceBWIcon.svg', - 기쁨: '/icon/BW/SmileFaceBWIcon.svg', - 고민: '/icon/BW/ThinkFaceBWIcon.svg', - 슬픔: '/icon/BW/SadFaceBWIcon.svg', - 분노: '/icon/BW/AngryFaceBWIcon.svg', + 감동: 'icon/BW/HeartFaceBWIcon.svg', + 기쁨: 'icon/BW/SmileFaceBWIcon.svg', + 고민: 'icon/BW/ThinkFaceBWIcon.svg', + 슬픔: 'icon/BW/SadFaceBWIcon.svg', + 분노: 'icon/BW/AngryFaceBWIcon.svg', }, }; @@ -32,14 +32,17 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' } // 크기에 따른 클래스 설정 let sizeClass = ''; let iconSizeClass = ''; + let textSizeClass = ''; switch (size) { case 'lg': sizeClass = 'w-20 h-28'; - iconSizeClass = 'w-12 h-12 p-6'; + iconSizeClass = 'w-12 h-12'; + textSizeClass = 'text-base leading-relaxed'; break; case 'md': sizeClass = 'w-16 h-24'; - iconSizeClass = 'w-10 h-10 p-5'; + iconSizeClass = 'w-10 h-10'; + textSizeClass = 'text-sm leading-normal'; break; case 'sm': default: @@ -49,14 +52,44 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' } } // 상태에 따른 아이콘 경로 설정 - const iconPath = state === 'Default' ? iconPaths.BW[iconType] : iconPaths.Color[iconType]; + const iconPath = state === 'Unclicked' ? iconPaths.BW[iconType] : iconPaths.Color[iconType]; + + // 상태에 따른 클래스 설정 + let borderClass = ''; + let textColorClass = 'text-neutral-400'; + + if (state === 'Clicked') { + textColorClass = 'text-neutral-700'; + + // iconType에 따라 다른 border 색상을 설정 + switch (iconType) { + case '감동': + borderClass = 'border-2 border-amber-300'; + break; + case '기쁨': + borderClass = 'border-2 border-emerald-400'; + break; + case '고민': + borderClass = 'border-2 border-indigo-400'; + break; + case '슬픔': + borderClass = 'border-2 border-blue-400'; + break; + case '분노': + borderClass = 'border-2 border-rose-400'; + break; + default: + borderClass = 'border-2 border-neutral-400'; + break; + } + } return (
-
- {iconType} +
+ {iconType}
-
{iconType}
+
{iconType}
); } diff --git a/src/components/Emotion/card/TestComponent.tsx b/src/components/Emotion/card/TestComponent.tsx new file mode 100644 index 00000000..37f3ad33 --- /dev/null +++ b/src/components/Emotion/card/TestComponent.tsx @@ -0,0 +1,18 @@ +import { EmotionIconCard } from '@/components/Emotion/card/EmotionIconCard'; + +function ExampleComponent() { + return ( +
+ {/* 기본 상태 (Default), 감동 아이콘, 작은 크기 (sm) */} + + + {/* 클릭되지 않은 상태 (Unclicked), 기쁨 아이콘, 중간 크기 (md) */} + + + {/* 클릭된 상태 (Clicked), 슬픔 아이콘, 큰 크기 (lg) */} + +
+ ); +} + +export default ExampleComponent; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6a3a652a..29cd325b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,5 +1,6 @@ import Head from 'next/head'; import { useEffect, useState } from 'react'; +import ExampleComponent from '@/components/Emotion/card/TestComponent'; export default function Home() { // NOTE: 테스트를 위해서 typescript-eslint/no-unused-vars도 잠시 끔! @@ -32,6 +33,7 @@ export default function Home() {

Pretendard

Iropke Batang

+ ); From 400cfb56868b2e7c20df6e65771848abd96f991c Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 14:27:12 +0900 Subject: [PATCH 05/11] =?UTF-8?q?FE-48=20:lipstick:=20=EA=B0=90=EC=A0=95?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20ui=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icon/Color/HeartFacedColorIcon.svg | 4 ++-- .../Emotion/card/EmotionIconCard.tsx | 19 ++++++++++--------- src/components/Emotion/card/TestComponent.tsx | 4 ++++ 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/public/icon/Color/HeartFacedColorIcon.svg b/public/icon/Color/HeartFacedColorIcon.svg index 9ef30c50..9db0bbd0 100644 --- a/public/icon/Color/HeartFacedColorIcon.svg +++ b/public/icon/Color/HeartFacedColorIcon.svg @@ -1,12 +1,12 @@ - + - + diff --git a/src/components/Emotion/card/EmotionIconCard.tsx b/src/components/Emotion/card/EmotionIconCard.tsx index 4fbb0ddc..bbfaadcc 100644 --- a/src/components/Emotion/card/EmotionIconCard.tsx +++ b/src/components/Emotion/card/EmotionIconCard.tsx @@ -46,8 +46,9 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' } break; case 'sm': default: - sizeClass = 'w-14 h-[84px]'; - iconSizeClass = 'w-8 h-8 p-4'; + sizeClass = 'w-14 h-21'; + iconSizeClass = 'w-8 h-8'; + textSizeClass = 'text-xs leading-tight'; break; } @@ -59,27 +60,27 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' } let textColorClass = 'text-neutral-400'; if (state === 'Clicked') { - textColorClass = 'text-neutral-700'; + textColorClass = 'hidden'; // iconType에 따라 다른 border 색상을 설정 switch (iconType) { case '감동': - borderClass = 'border-2 border-amber-300'; + borderClass = 'border-4 border-illust-yellow'; break; case '기쁨': - borderClass = 'border-2 border-emerald-400'; + borderClass = 'border-4 border-illust-green'; break; case '고민': - borderClass = 'border-2 border-indigo-400'; + borderClass = 'border-4 border-illust-purple'; break; case '슬픔': - borderClass = 'border-2 border-blue-400'; + borderClass = 'border-4 border-illust-blue'; break; case '분노': - borderClass = 'border-2 border-rose-400'; + borderClass = 'border-4 border-illust-red'; break; default: - borderClass = 'border-2 border-neutral-400'; + borderClass = 'border-4 border-sub_blue_1'; break; } } diff --git a/src/components/Emotion/card/TestComponent.tsx b/src/components/Emotion/card/TestComponent.tsx index 37f3ad33..2a7758ac 100644 --- a/src/components/Emotion/card/TestComponent.tsx +++ b/src/components/Emotion/card/TestComponent.tsx @@ -10,7 +10,11 @@ function ExampleComponent() { {/* 클릭된 상태 (Clicked), 슬픔 아이콘, 큰 크기 (lg) */} + + + +
); } From 830601e03f666019ee405cd03c53010c9d2b0baf Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 14:57:45 +0900 Subject: [PATCH 06/11] =?UTF-8?q?FE-48=20:sparkles:=20=EA=B0=90=EC=A0=95?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - EmotionIconCardContainer를 사용해 상태관리와 이벤트 처리 (Clicked<->UnClicked) --- .../Emotion/card/EmotionIconCard.tsx | 53 +++++++++++++------ .../Emotion/card/EmotionIconCardContainer.tsx | 20 +++++++ src/components/Emotion/card/TestComponent.tsx | 17 +++--- 3 files changed, 66 insertions(+), 24 deletions(-) create mode 100644 src/components/Emotion/card/EmotionIconCardContainer.tsx diff --git a/src/components/Emotion/card/EmotionIconCard.tsx b/src/components/Emotion/card/EmotionIconCard.tsx index bbfaadcc..3bc25735 100644 --- a/src/components/Emotion/card/EmotionIconCard.tsx +++ b/src/components/Emotion/card/EmotionIconCard.tsx @@ -7,28 +7,29 @@ export interface EmotionIconCardProps { iconType: '감동' | '기쁨' | '고민' | '슬픔' | '분노'; // 아이콘 종류 state: 'Default' | 'Unclicked' | 'Clicked'; // 상태 size: 'sm' | 'md' | 'lg'; // 크기 + onClick?: () => void; // 클릭 이벤트 핸들러 } // 아이콘 파일 경로 매핑 const iconPaths = { Color: { - 감동: 'icon/Color/HeartFaceColorIcon.svg', - 기쁨: 'icon/Color/SmileFaceColorIcon.svg', - 고민: 'icon/Color/ThinkFaceColorIcon.svg', - 슬픔: 'icon/Color/SadFaceColorIcon.svg', - 분노: 'icon/Color/AngryFaceColorIcon.svg', + 감동: '/icon/Color/HeartFaceColorIcon.svg', + 기쁨: '/icon/Color/SmileFaceColorIcon.svg', + 고민: '/icon/Color/ThinkFaceColorIcon.svg', + 슬픔: '/icon/Color/SadFaceColorIcon.svg', + 분노: '/icon/Color/AngryFaceColorIcon.svg', }, BW: { - 감동: 'icon/BW/HeartFaceBWIcon.svg', - 기쁨: 'icon/BW/SmileFaceBWIcon.svg', - 고민: 'icon/BW/ThinkFaceBWIcon.svg', - 슬픔: 'icon/BW/SadFaceBWIcon.svg', - 분노: 'icon/BW/AngryFaceBWIcon.svg', + 감동: '/icon/BW/HeartFaceBWIcon.svg', + 기쁨: '/icon/BW/SmileFaceBWIcon.svg', + 고민: '/icon/BW/ThinkFaceBWIcon.svg', + 슬픔: '/icon/BW/SadFaceBWIcon.svg', + 분노: '/icon/BW/AngryFaceBWIcon.svg', }, }; // EmotionIconCard 컴포넌트 함수 선언 -function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' }: EmotionIconCardProps) { +function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm', onClick }: EmotionIconCardProps) { // 크기에 따른 클래스 설정 let sizeClass = ''; let iconSizeClass = ''; @@ -57,10 +58,13 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' } // 상태에 따른 클래스 설정 let borderClass = ''; - let textColorClass = 'text-neutral-400'; + const textColorClass = 'text-neutral-400'; + let backgroundClass = 'bg-slate-400/20'; + let textVisibilityClass = ''; if (state === 'Clicked') { - textColorClass = 'hidden'; + textVisibilityClass = 'hidden'; + backgroundClass = 'bg-transparent'; // iconType에 따라 다른 border 색상을 설정 switch (iconType) { @@ -86,15 +90,32 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm' } } return ( -
-
+
{ + if (e.key === 'Enter' || e.key === ' ') { + if (onClick) { + onClick(); + } + } + }} + > +
{iconType}
-
{iconType}
+
{iconType}
); } EmotionIconCard.displayName = 'EmotionIconCard'; +// 기본 props 설정 +EmotionIconCard.defaultProps = { + onClick: () => {}, +}; + export { EmotionIconCard }; diff --git a/src/components/Emotion/card/EmotionIconCardContainer.tsx b/src/components/Emotion/card/EmotionIconCardContainer.tsx new file mode 100644 index 00000000..8fcfa080 --- /dev/null +++ b/src/components/Emotion/card/EmotionIconCardContainer.tsx @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; +import { EmotionIconCard, EmotionIconCardProps } from '@/components/Emotion/card/EmotionIconCard'; + +// EmotionIconCardContainerProps 인터페이스 정의 +interface EmotionIconCardContainerProps extends Omit {} + +// EmotionIconCardContainer 컴포넌트 함수 선언 +function EmotionIconCardContainer(props: EmotionIconCardContainerProps) { + const [state, setState] = useState<'Default' | 'Unclicked' | 'Clicked'>('Unclicked'); + + const handleClick = () => { + setState((prevState) => (prevState === 'Unclicked' ? 'Clicked' : 'Unclicked')); + }; + + return ; +} + +EmotionIconCardContainer.displayName = 'EmotionIconCardContainer'; + +export default EmotionIconCardContainer; diff --git a/src/components/Emotion/card/TestComponent.tsx b/src/components/Emotion/card/TestComponent.tsx index 2a7758ac..b720b503 100644 --- a/src/components/Emotion/card/TestComponent.tsx +++ b/src/components/Emotion/card/TestComponent.tsx @@ -1,20 +1,21 @@ -import { EmotionIconCard } from '@/components/Emotion/card/EmotionIconCard'; +import React from 'react'; +import EmotionIconCardContainer from '@/components/Emotion/card/EmotionIconCardContainer'; function ExampleComponent() { return (
{/* 기본 상태 (Default), 감동 아이콘, 작은 크기 (sm) */} - + {/* 클릭되지 않은 상태 (Unclicked), 기쁨 아이콘, 중간 크기 (md) */} - + {/* 클릭된 상태 (Clicked), 슬픔 아이콘, 큰 크기 (lg) */} - - - - - + + + + +
); } From 991b355907a4d5ea3ca5788cd58d616e1fc4b14f Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 15:01:59 +0900 Subject: [PATCH 07/11] =?UTF-8?q?FE-48=20=F0=9F=93=9D=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 명확한 의미 전달을 위해 컴포넌트 이름 변경 --- ...dContainer.tsx => InteractiveEmotionIconCard.tsx} | 12 ++++++------ src/components/Emotion/card/TestComponent.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) rename src/components/Emotion/card/{EmotionIconCardContainer.tsx => InteractiveEmotionIconCard.tsx} (52%) diff --git a/src/components/Emotion/card/EmotionIconCardContainer.tsx b/src/components/Emotion/card/InteractiveEmotionIconCard.tsx similarity index 52% rename from src/components/Emotion/card/EmotionIconCardContainer.tsx rename to src/components/Emotion/card/InteractiveEmotionIconCard.tsx index 8fcfa080..1584b204 100644 --- a/src/components/Emotion/card/EmotionIconCardContainer.tsx +++ b/src/components/Emotion/card/InteractiveEmotionIconCard.tsx @@ -1,11 +1,11 @@ import React, { useState } from 'react'; import { EmotionIconCard, EmotionIconCardProps } from '@/components/Emotion/card/EmotionIconCard'; -// EmotionIconCardContainerProps 인터페이스 정의 -interface EmotionIconCardContainerProps extends Omit {} +// InteractiveEmotionIconCardProps 인터페이스 정의 +interface InteractiveEmotionIconCardProps extends Omit {} -// EmotionIconCardContainer 컴포넌트 함수 선언 -function EmotionIconCardContainer(props: EmotionIconCardContainerProps) { +// InteractiveEmotionIconCard 컴포넌트 함수 선언 +function InteractiveEmotionIconCard(props: InteractiveEmotionIconCardProps) { const [state, setState] = useState<'Default' | 'Unclicked' | 'Clicked'>('Unclicked'); const handleClick = () => { @@ -15,6 +15,6 @@ function EmotionIconCardContainer(props: EmotionIconCardContainerProps) { return ; } -EmotionIconCardContainer.displayName = 'EmotionIconCardContainer'; +InteractiveEmotionIconCard.displayName = 'InteractiveEmotionIconCard'; -export default EmotionIconCardContainer; +export default InteractiveEmotionIconCard; diff --git a/src/components/Emotion/card/TestComponent.tsx b/src/components/Emotion/card/TestComponent.tsx index b720b503..5ae19ce2 100644 --- a/src/components/Emotion/card/TestComponent.tsx +++ b/src/components/Emotion/card/TestComponent.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import EmotionIconCardContainer from '@/components/Emotion/card/EmotionIconCardContainer'; +import EmotionIconCardContainer from '@/components/Emotion/card/InteractiveEmotionIconCard'; function ExampleComponent() { return ( From 9819c6da96f18714fa27e979696215bf7d3074a8 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 16:04:09 +0900 Subject: [PATCH 08/11] =?UTF-8?q?FE-48=20:sparkles:=20=EA=B0=90=EC=A0=95?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=ED=8B=B0=EC=BD=98=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EB=B3=80=ED=99=94=20=EB=8F=99=EA=B8=B0=ED=99=94=20=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 감정 카드를 클릭할 때 상태가 올바르게 전환되고, 다른 카드의 상태도 동기화되는 기능 구현 --- .../Emotion/card/EmotionIconCard.tsx | 2 +- .../Emotion/card/EmotionSelector.tsx | 45 +++++++++++++++++++ .../card/InteractiveEmotionIconCard.tsx | 15 +++---- src/components/Emotion/card/TestComponent.tsx | 15 +------ 4 files changed, 54 insertions(+), 23 deletions(-) create mode 100644 src/components/Emotion/card/EmotionSelector.tsx diff --git a/src/components/Emotion/card/EmotionIconCard.tsx b/src/components/Emotion/card/EmotionIconCard.tsx index 3bc25735..a5b6d887 100644 --- a/src/components/Emotion/card/EmotionIconCard.tsx +++ b/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 = ''; diff --git a/src/components/Emotion/card/EmotionSelector.tsx b/src/components/Emotion/card/EmotionSelector.tsx new file mode 100644 index 00000000..50447987 --- /dev/null +++ b/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 ( +
+ {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => ( + handleCardClick(iconType)} /> + ))} +
+ ); +} + +export default EmotionSelector; diff --git a/src/components/Emotion/card/InteractiveEmotionIconCard.tsx b/src/components/Emotion/card/InteractiveEmotionIconCard.tsx index 1584b204..8993e1ec 100644 --- a/src/components/Emotion/card/InteractiveEmotionIconCard.tsx +++ b/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 {} +interface InteractiveEmotionIconCardProps extends Omit { + 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 ; + return ; } InteractiveEmotionIconCard.displayName = 'InteractiveEmotionIconCard'; diff --git a/src/components/Emotion/card/TestComponent.tsx b/src/components/Emotion/card/TestComponent.tsx index 5ae19ce2..d97a4031 100644 --- a/src/components/Emotion/card/TestComponent.tsx +++ b/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 (
- {/* 기본 상태 (Default), 감동 아이콘, 작은 크기 (sm) */} - - - {/* 클릭되지 않은 상태 (Unclicked), 기쁨 아이콘, 중간 크기 (md) */} - - - {/* 클릭된 상태 (Clicked), 슬픔 아이콘, 큰 크기 (lg) */} - - - - - +
); } From 9986486e987d6eabfb87068736d55db8cd122f40 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 16:13:01 +0900 Subject: [PATCH 09/11] =?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 ( -
+
{(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => ( - handleCardClick(iconType)} /> + handleCardClick(iconType)} /> ))}
); 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; From 14063df54ae9679e1d6e70b56d5aa1cf6bece329 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 16:16:08 +0900 Subject: [PATCH 10/11] =?UTF-8?q?FE-48=20:fire:=20=EC=B6=9C=EB=A0=A5=20?= =?UTF-8?q?=ED=99=95=EC=9D=B8=EC=9D=84=20=EC=9C=84=ED=95=9C=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Emotion/card/TestComponent.tsx | 12 ------------ src/pages/index.tsx | 2 -- 2 files changed, 14 deletions(-) delete mode 100644 src/components/Emotion/card/TestComponent.tsx diff --git a/src/components/Emotion/card/TestComponent.tsx b/src/components/Emotion/card/TestComponent.tsx deleted file mode 100644 index d97a4031..00000000 --- a/src/components/Emotion/card/TestComponent.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import EmotionSelector from '@/components/Emotion/card/EmotionSelector'; - -function ExampleComponent() { - return ( -
- -
- ); -} - -export default ExampleComponent; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 29cd325b..6a3a652a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,5 @@ import Head from 'next/head'; import { useEffect, useState } from 'react'; -import ExampleComponent from '@/components/Emotion/card/TestComponent'; export default function Home() { // NOTE: 테스트를 위해서 typescript-eslint/no-unused-vars도 잠시 끔! @@ -33,7 +32,6 @@ export default function Home() {

Pretendard

Iropke Batang

- ); From cc00d3c2f9b7cf65a2cf97075bbb47fe3e4bd784 Mon Sep 17 00:00:00 2001 From: NEWJIN Date: Wed, 10 Jul 2024 16:52:03 +0900 Subject: [PATCH 11/11] =?UTF-8?q?FE-48=20:hammer:=20EmotionTypes=20?= =?UTF-8?q?=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit emotion 관련 컴포넌트에서 해당 인터페이스를 import하여 사용하게 구현 --- ...artFacedBWIcon.svg => HeartFaceBWIcon.svg} | 0 ...edColorIcon.svg => HeartFaceColorIcon.svg} | 0 .../Emotion/card/EmotionIconCard.tsx | 11 ++--------- .../Emotion/card/EmotionSelector.tsx | 19 ++++++++++--------- .../card/InteractiveEmotionIconCard.tsx | 9 ++------- src/types/EmotionTypes.ts | 14 ++++++++++++++ 6 files changed, 28 insertions(+), 25 deletions(-) rename public/icon/BW/{HeartFacedBWIcon.svg => HeartFaceBWIcon.svg} (100%) rename public/icon/Color/{HeartFacedColorIcon.svg => HeartFaceColorIcon.svg} (100%) create mode 100644 src/types/EmotionTypes.ts diff --git a/public/icon/BW/HeartFacedBWIcon.svg b/public/icon/BW/HeartFaceBWIcon.svg similarity index 100% rename from public/icon/BW/HeartFacedBWIcon.svg rename to public/icon/BW/HeartFaceBWIcon.svg diff --git a/public/icon/Color/HeartFacedColorIcon.svg b/public/icon/Color/HeartFaceColorIcon.svg similarity index 100% rename from public/icon/Color/HeartFacedColorIcon.svg rename to public/icon/Color/HeartFaceColorIcon.svg diff --git a/src/components/Emotion/card/EmotionIconCard.tsx b/src/components/Emotion/card/EmotionIconCard.tsx index a5b6d887..a230deec 100644 --- a/src/components/Emotion/card/EmotionIconCard.tsx +++ b/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; diff --git a/src/components/Emotion/card/EmotionSelector.tsx b/src/components/Emotion/card/EmotionSelector.tsx index 1726c11e..29b3f104 100644 --- a/src/components/Emotion/card/EmotionSelector.tsx +++ b/src/components/Emotion/card/EmotionSelector.tsx @@ -1,6 +1,7 @@ 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() { @@ -8,28 +9,28 @@ function EmotionSelector() { 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>({ + 감동: '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'; }); } diff --git a/src/components/Emotion/card/InteractiveEmotionIconCard.tsx b/src/components/Emotion/card/InteractiveEmotionIconCard.tsx index 8993e1ec..f8448315 100644 --- a/src/components/Emotion/card/InteractiveEmotionIconCard.tsx +++ b/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 { - state: 'Default' | 'Unclicked' | 'Clicked'; - onClick: () => void; -} +import EmotionIconCard from '@/components/Emotion/card/EmotionIconCard'; +import { InteractiveEmotionIconCardProps } from '@/types/EmotionTypes'; // InteractiveEmotionIconCard 컴포넌트 함수 선언 function InteractiveEmotionIconCard(props: InteractiveEmotionIconCardProps) { diff --git a/src/types/EmotionTypes.ts b/src/types/EmotionTypes.ts new file mode 100644 index 00000000..e64f3d3f --- /dev/null +++ b/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 { + state: EmotionState; + onClick: () => void; +}