feat: SelectWeek 컴포넌트 구현 (#28)

* feat : storybook 모바일 뷰 세팅

* feat: selectWeek 컴포넌트 생성

* feat: border 색 추가 및 Jsdoc 추가

* chore: 내보내기 코드 작성

.eslintrc.cjs

@@ -117,6 +117,7 @@ module.exports = {
           pascalCase: true
         }
       }
-    ]
+    ],
+    'unicorn/prevent-abbreviations': ['off']
   }
 }

.storybook/preview.tsx

@@ -0,0 +1,51 @@
+import type { Preview } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+import '../src/styles/index.css'
+import React from 'react'
+
+const customViewports = {
+  iPhone13: {
+    name: 'iPhone 13',
+    styles: {
+      width: '390px',
+      height: '844px'
+    },
+    type: 'mobile'
+  },
+  tablet: {
+    name: 'iPad Pro 11',
+    styles: {
+      width: '834px',
+      height: '1194px'
+    },
+    type: 'tablet'
+  }
+}
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    viewport: {
+      viewports: customViewports,
+      defaultViewport: 'iPhone13'
+    }
+  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <div>
+          <Story />
+        </div>
+      </BrowserRouter>
+    )
+  ]
+}
+
+export default preview

package.json

@@ -19,6 +19,8 @@
   "dependencies": {
     "@types/node": "^20.8.7",
     "axios": "^1.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
@@ -28,7 +30,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.17.0",
+    "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.5.1",
@@ -51,9 +54,9 @@
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unicorn": "^48.0.1",
-    "postcss": "^8.4.31",
     "husky": "^8.0.3",
     "lint-staged": "^15.0.2",
+    "postcss": "^8.4.31",
     "storybook": "^7.5.1",
     "tailwindcss": "^3.3.4",
     "typescript": "^5.0.2",

src/components/common/index.tsx

@@ -0,0 +1 @@
+export * from './selectweek/SelectWeek'

src/components/common/selectweek/Select.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useEffect, useState } from 'react'
+import SelectWeek from './SelectWeek'
+
+const meta: Meta<typeof SelectWeek> = {
+  component: SelectWeek,
+  title: 'Atom/SelectWeek',
+  tags: ['autodocs'],
+  argTypes: {
+    fixedDate: {
+      control: 'multi-select',
+      options: [0, 1, 2, 3, 4, 5, 6]
+    },
+    selectedDate: {
+      control: 'multi-select',
+      options: [0, 1, 2, 3, 4, 5, 6]
+    },
+    setSelectedDate: {
+      control: { type: 'function' }
+    }
+  },
+  render: function Render(args) {
+    const [selectedDate, setSelectedDate] = useState<number[]>([])
+    useEffect(() => {
+      setSelectedDate([...args.selectedDate])
+    }, [args.selectedDate])
+    return (
+      <SelectWeek
+        setSelectedDate={setSelectedDate}
+        selectedDate={selectedDate}
+        fixedDate={args.fixedDate}
+      />
+    )
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof SelectWeek>
+
+export const Default: Story = {
+  ...meta,
+  args: {
+    fixedDate: [0],
+    selectedDate: [1]
+  }
+}

src/components/common/selectweek/SelectWeek.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable prettier/prettier */
+import { cva } from 'class-variance-authority'
+import cn from '../../../libs/utils/cn'
+
+export const SelectWeekVariant = cva(
+  `flex justify-center items-center w-[39px] h-[39px]`,
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-white-100 rounded-full body-16 text-black-900 border border-blue-500',
+        selected: 'bg-blue-500 rounded-full body-16 text-white-100',
+        fixed: 'cursor-default bg-gray-400 rounded-full body-16 text-white-100'
+      },
+      defaultVariants: {
+        variant: 'default'
+      }
+    }
+  }
+)
+
+/**
+ * @param selectedDate selectedDate값을 가지고 있는 state
+ * @param setSelectedDate selectedDate 값을 변경할 수 있는 setState 함수
+ * @param fixedDate 고정된 주 선택 (이미 선택하여 수정하지 않아도 되는 것 / 다수 선택에 사용)
+ */
+
+interface SelectWeekProperties {
+  selectedDate: number[]
+  setSelectedDate: React.Dispatch<React.SetStateAction<number[]>>
+  fixedDate?: number[]
+}
+
+const SelectWeek = ({
+  fixedDate,
+  setSelectedDate,
+  selectedDate
+}: SelectWeekProperties) => {
+  const week = ['일', '월', '화', '수', '목', '금', '토']
+  return (
+    <div className={'flex flex-row gap-2.5 w-full justify-center items-center'}>
+      {week.map((day, index) => (
+        <button
+          key={index}
+          className={cn(
+            SelectWeekVariant({
+              variant:
+                fixedDate?.includes(index)
+                  ? 'fixed'
+                  : selectedDate.includes(index)
+                    ? 'selected'
+                    : 'default'
+            })
+          )}
+          onClick={() => {
+            if (selectedDate.includes(index)) {
+              const filteredDate = selectedDate.filter((data) => data !== index)
+              setSelectedDate([...filteredDate])
+            } else {
+              setSelectedDate([...selectedDate, index])
+            }
+          }}
+        >
+          {day}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default SelectWeek

src/libs/utils/cn.ts

@@ -0,0 +1,8 @@
+import { ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+const cn = (...classes: ClassValue[]) => {
+  return twMerge(clsx(classes))
+}
+
+export default cn