From 87cba152b5ab08705f08cc0c5cde9a3ba21e2233 Mon Sep 17 00:00:00 2001
From: kangminguu <131148077+kangminguu@users.noreply.github.com>
Date: Wed, 30 Oct 2024 12:32:12 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20KeywordButton=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20(#67)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/KeywordButton/index.ts           |  1 +
 src/entities/KeywordButton/model/type.ts      |  7 ++++
 .../KeywordButton/ui/KeywordButton.stories.ts | 33 +++++++++++++++++++
 .../KeywordButton/ui/KeywordButton.styled.ts  | 24 ++++++++++++++
 .../KeywordButton/ui/KeywordButton.tsx        | 28 ++++++++++++++++
 5 files changed, 93 insertions(+)
 create mode 100644 src/entities/KeywordButton/index.ts
 create mode 100644 src/entities/KeywordButton/model/type.ts
 create mode 100644 src/entities/KeywordButton/ui/KeywordButton.stories.ts
 create mode 100644 src/entities/KeywordButton/ui/KeywordButton.styled.ts
 create mode 100644 src/entities/KeywordButton/ui/KeywordButton.tsx

diff --git a/src/entities/KeywordButton/index.ts b/src/entities/KeywordButton/index.ts
new file mode 100644
index 0000000..65ae8fe
--- /dev/null
+++ b/src/entities/KeywordButton/index.ts
@@ -0,0 +1 @@
+export { KeywordButton } from './ui/KeywordButton';
diff --git a/src/entities/KeywordButton/model/type.ts b/src/entities/KeywordButton/model/type.ts
new file mode 100644
index 0000000..2cef949
--- /dev/null
+++ b/src/entities/KeywordButton/model/type.ts
@@ -0,0 +1,7 @@
+import { Emotions } from '../../../shared/model/EmotionEnum';
+
+export interface KeywordButtonProps {
+    isActive: boolean;
+    selectedEmotion?: Emotions | null;
+    onClick: () => void;
+}
diff --git a/src/entities/KeywordButton/ui/KeywordButton.stories.ts b/src/entities/KeywordButton/ui/KeywordButton.stories.ts
new file mode 100644
index 0000000..e078f86
--- /dev/null
+++ b/src/entities/KeywordButton/ui/KeywordButton.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { KeywordButton } from './KeywordButton';
+import { Emotions } from '../../../shared/model/EmotionEnum';
+
+const meta: Meta<typeof KeywordButton> = {
+    title: 'Entities/Keyword/KeywordButton',
+    component: KeywordButton,
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof KeywordButton>;
+
+export const Active: Story = {
+    args: {
+        isActive: true,
+        selectedEmotion: Emotions.Happy
+    }
+};
+
+export const DeActive: Story = {
+    args: {
+        isActive: false,
+        selectedEmotion: Emotions.Happy
+    }
+};
+
+export const NothingSelected: Story = {
+    args: {
+        isActive: false,
+        selectedEmotion: null
+    }
+};
diff --git a/src/entities/KeywordButton/ui/KeywordButton.styled.ts b/src/entities/KeywordButton/ui/KeywordButton.styled.ts
new file mode 100644
index 0000000..56dd26b
--- /dev/null
+++ b/src/entities/KeywordButton/ui/KeywordButton.styled.ts
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const StyledButton = styled.button<{ isActive: boolean }>`
+    width: 192px;
+    height: 134px;
+    border: 1px solid
+        ${(props) =>
+            props.isActive ? 'rgba(0, 0, 0, 0.4)' : 'rgba(0, 0, 0, 0.1)'};
+    border-radius: 10px;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: 14px;
+    font-family: 'Pretendard', sans-serif;
+    transition: all 0.2s ease;
+
+    &:hover {
+        cursor: pointer;
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+`;
diff --git a/src/entities/KeywordButton/ui/KeywordButton.tsx b/src/entities/KeywordButton/ui/KeywordButton.tsx
new file mode 100644
index 0000000..4df9316
--- /dev/null
+++ b/src/entities/KeywordButton/ui/KeywordButton.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { KeywordButtonProps } from '../model/type';
+import { StyledButton } from './KeywordButton.styled';
+import { getEmotionInfo } from '../../../shared/model/EmotionEnum';
+import EmotionIcon from '../../../shared/EmotionIcon/ui/EmotionIcon';
+
+export const KeywordButton = ({
+    isActive = false,
+    selectedEmotion = null,
+    onClick
+}: KeywordButtonProps) => {
+    const description = selectedEmotion
+        ? getEmotionInfo(selectedEmotion).description
+        : '';
+
+    return (
+        <StyledButton isActive={isActive} onClick={onClick}>
+            {selectedEmotion !== null ? (
+                <EmotionIcon
+                    emotion={selectedEmotion}
+                    width="70px"
+                    height="70px"
+                />
+            ) : null}
+            {description}
+        </StyledButton>
+    );
+};