feat : KeywordButton 컴포넌트 (#67)

src/entities/KeywordButton/index.ts

@@ -0,0 +1 @@
+export { KeywordButton } from './ui/KeywordButton';

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;
+}

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
+    }
+};

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);
+    }
+`;

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>
+    );
+};