feat : 감정 키워드 선택 구현 (#85)

* feat : emotion select

* fix : 선택한 감정을 담는 배열 수정

src/features/diary-write/emotion/model/type.ts

@@ -0,0 +1,6 @@
+import { Emotions } from '@/shared/model/EmotionEnum';
+
+export interface EmotionButtonGroupProps {
+    initialKeywords?: (Emotions | null)[];
+    onKeywordsChange?: (keywords: (Emotions | null)[]) => void;
+}

src/features/diary-write/emotion/ui/EmotionButtonGroup.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EmotionButtonGroup } from './EmotionButtonGroup';
+import { Emotions } from '@/shared/model/EmotionEnum'; // Emotions 타입을 임포트
+
+const meta: Meta<typeof EmotionButtonGroup> = {
+    title: 'Features/DiaryWrite/EmotionButtonGroup',
+    component: EmotionButtonGroup,
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof EmotionButtonGroup>;
+
+export const Default: Story = {
+    args: {
+        initialKeywords: [null, null, null, null, null],
+        onKeywordsChange: (e) => {
+            console.log(e);
+        }
+    }
+};

src/features/diary-write/emotion/ui/EmotionButtonGroup.styled.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const EmotionButtonContainer = styled.div`
+    max-width: 960px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+`;
+
+export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 30px;
+`;
+
+export const MainKeywordContainer = styled.div`
+    font-size: 14px;
+    font-family: 'Pretendard', sans-serif;
+    color: #8c8c8c;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 0.5rem;
+`;
+
+export const SubKeywordContainer = styled.div`
+    font-size: 14px;
+    font-family: 'Pretendard', sans-serif;
+    color: #8c8c8c;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    gap: 0.5rem;
+`;
+
+export const SubContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: start;
+    gap: 0.5rem;
+`;

src/features/diary-write/emotion/ui/EmotionButtonGroup.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { EmotionButtonGroupProps } from '../model/type';
+import {
+    Container,
+    EmotionButtonContainer,
+    MainKeywordContainer,
+    SubKeywordContainer,
+    SubContainer
+} from './EmotionButtonGroup.styled';
+import EmotionButtonList from '@/shared/EmotionButtonList/ui/EmotionButtonList';
+import { KeywordButton } from '@/entities/KeywordButton/ui/KeywordButton';
+import { Emotions } from '@/shared/model/EmotionEnum';
+
+export const EmotionButtonGroup: React.FC<EmotionButtonGroupProps> = ({
+    initialKeywords = [null, null, null, null, null],
+    onKeywordsChange
+}) => {
+    const [keywords, setKeywords] =
+        useState<(Emotions | null)[]>(initialKeywords);
+    const [activeButton, setActiveButton] = useState(0);
+
+    const handleClickKeyword = (index: number) => {
+        setActiveButton(index);
+        setKeywords((prevKeywords) => {
+            const newKeywords = [...prevKeywords];
+            newKeywords[index] = null;
+            if (onKeywordsChange) {
+                onKeywordsChange(newKeywords); // 키워드 변화 이벤트 호출
+            }
+            return newKeywords;
+        });
+    };
+
+    const handleClickEmotion = (selectedEmotions: Emotions[]) => {
+        const newEmotion = selectedEmotions[0];
+
+        if (keywords[activeButton] !== newEmotion) {
+            setKeywords((prevKeywords) => {
+                const newKeywords = [...prevKeywords];
+                newKeywords[activeButton] = newEmotion;
+                if (onKeywordsChange) {
+                    onKeywordsChange(newKeywords); // 키워드 변화 이벤트 호출
+                }
+                return newKeywords;
+            });
+
+            setActiveButton(activeButton !== 4 ? activeButton + 1 : 0);
+        }
+    };
+
+    return (
+        <EmotionButtonContainer>
+            <Container>
+                <MainKeywordContainer>
+                    대표 키워드
+                    <KeywordButton
+                        selectedEmotion={keywords[0]}
+                        isActive={activeButton === 0}
+                        onClick={() => handleClickKeyword(0)}
+                    />
+                </MainKeywordContainer>
+                <SubKeywordContainer>
+                    서브 키워드
+                    <SubContainer>
+                        {[1, 2, 3, 4].map((index) => (
+                            <KeywordButton
+                                key={index}
+                                selectedEmotion={keywords[index]}
+                                isActive={activeButton === index}
+                                onClick={() => handleClickKeyword(index)}
+                            />
+                        ))}
+                    </SubContainer>
+                </SubKeywordContainer>
+            </Container>
+            <EmotionButtonList
+                onSelectionChange={handleClickEmotion}
+                maxSelections={1}
+                isPrimary
+                initialSelectedEmotions={[keywords[activeButton]]}
+            />
+        </EmotionButtonContainer>
+    );
+};