feat : 키워드 토글버튼 컴포넌트 개발 및 적용 (#130)

prgrms-web-devcourse-final-project · Nov 29, 2024 · 599e521 · 599e521
1 parent b3e4aab
commit 599e521
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 10 deletions.
diff --git a/src/components/Common/KeywordToggleButton/KeywordToggleButton.stories.tsx b/src/components/Common/KeywordToggleButton/KeywordToggleButton.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { KeywordToggleButton } from './KeywordToggleButton';
+
+const meta: Meta<typeof KeywordToggleButton> = {
+    component: KeywordToggleButton,
+    title: 'atoms/KeywordToggleButton',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+
+type Story = StoryObj<typeof KeywordToggleButton>;
+
+export const Default: Story = {
+    args: {
+        keyword: '키워드'
+    }
+};
+
+export const Active: Story = {
+    args: {
+        keyword: '키워드',
+        isActive: true
+    }
+};
diff --git a/src/components/Common/KeywordToggleButton/KeywordToggleButton.tsx b/src/components/Common/KeywordToggleButton/KeywordToggleButton.tsx
@@ -0,0 +1,20 @@
+type KeywordToggleButtonProps = {
+    keyword: string;
+    isActive?: boolean;
+    onClick: () => void;
+};
+
+export const KeywordToggleButton = ({
+    keyword,
+    isActive = false,
+    onClick
+}: KeywordToggleButtonProps) => {
+    return (
+        <button
+            onClick={onClick}
+            className={`border border-gray-600 border-solid rounded-full px-3 py-1 ${isActive ? 'bg-slate-500' : 'bg-white'} ${isActive ? 'text-white' : 'text-black'}`}
+        >
+            {keyword}
+        </button>
+    );
+};
diff --git a/src/components/HomePage/BottomSheetContent/BottomSheetContent.tsx b/src/components/HomePage/BottomSheetContent/BottomSheetContent.tsx
@@ -1,14 +1,15 @@
 import { UserType } from '@/types/user';
-import { useHomeSheetStore } from '@/stores/index';
+import { useHomeSheetStore, useSelectedKeywordStore } from '@/stores/index';
+import { KeywordToggleButton } from '@/components/Common/KeywordToggleButton/KeywordToggleButton';
 
 type BottomSheetContentProps = {
     user: UserType;
 };
 
 export const BottomSheetContent = ({ user }: BottomSheetContentProps) => {
     const { setOpen } = useHomeSheetStore();
+    const { selectedKeywords, setSelectedKeywords } = useSelectedKeywordStore();
 
-    const selectedKeywords = ['키워드4', '키워드5', '키워드6', '키워드7'];
     const allKeywords = [
         '키워드1',
         '키워드2',
@@ -26,21 +27,57 @@ export const BottomSheetContent = ({ user }: BottomSheetContentProps) => {
         '키워드14'
     ];
 
+    const toggleKeywordButton = (keyword: string) => {
+        if (selectedKeywords.includes(keyword)) {
+            const keywords = [...selectedKeywords].filter(
+                (item) => item !== keyword
+            );
+
+            setSelectedKeywords(keywords);
+        } else {
+            const keywords = [...selectedKeywords, keyword];
+
+            setSelectedKeywords(keywords);
+        }
+    };
+
     return (
-        <div className="p-5">
+        <div className="flex flex-col gap-5 p-5">
             <div>
                 <p className="">{user.nickname}님이 선택하신 키워드 입니다.</p>
                 <p className="">설정하신 키워드로 편지를 추천해드릴게요.</p>
-                {selectedKeywords.map((keyword, i) => {
-                    return <span key={i}>{keyword}</span>;
-                })}
+                <div className="mt-3 flex flex-wrap gap-1">
+                    {selectedKeywords.map((keyword, i) => {
+                        return (
+                            <KeywordToggleButton
+                                key={i}
+                                keyword={keyword}
+                                isActive
+                                onClick={() => {
+                                    toggleKeywordButton(keyword);
+                                }}
+                            ></KeywordToggleButton>
+                        );
+                    })}
+                </div>
             </div>
             <div>
                 <p className="">누구와 마음을 나누고 싶나요?</p>
                 <p className="">설정하신 키워드로 편지를 추천해드릴게요.</p>
-                {allKeywords.map((keyword, i) => {
-                    return <span key={i}>{keyword}</span>;
-                })}
+                <div className="mt-3 flex flex-wrap gap-1">
+                    {allKeywords.map((keyword, i) => {
+                        return (
+                            <KeywordToggleButton
+                                key={i}
+                                keyword={keyword}
+                                isActive={selectedKeywords.includes(keyword)}
+                                onClick={() => {
+                                    toggleKeywordButton(keyword);
+                                }}
+                            ></KeywordToggleButton>
+                        );
+                    })}
+                </div>
             </div>
             <button
                 onClick={() => {

diff --git a/src/stores/index.ts b/src/stores/index.ts
@@ -1,4 +1,5 @@
 import { useUserStore } from './useUserStore';
 import { useHomeSheetStore } from './useHomeSheetStore';
+import { useSelectedKeywordStore } from './useSelectedKeywordStore';
 
-export { useUserStore, useHomeSheetStore };
+export { useUserStore, useHomeSheetStore, useSelectedKeywordStore };
diff --git a/src/stores/useSelectedKeywordStore.ts b/src/stores/useSelectedKeywordStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface selectedKeywordState {
+    selectedKeywords: string[];
+    setSelectedKeywords: (selectedKeywords: string[]) => void;
+}
+
+export const useSelectedKeywordStore = create<selectedKeywordState>((set) => ({
+    selectedKeywords: [],
+    setSelectedKeywords: (selectedKeywords) => set({ selectedKeywords })
+}));