[#20] 아이디어 유형 선택 컴포넌트

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@tanstack/react-query": "^5.34.1",
     "axios": "^1.6.8",
     "dayjs": "^1.11.11",

src/components/IdeaTypeGroup.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react'
+import { ToggleGroupItem, ToggleGroupRoot } from './common/ToggleGroup'
+import { typeDatas } from '@/constants/idea'
+import styled from 'styled-components'
+import { theme } from '@/styles/theme'
+import { useAtom } from 'jotai'
+import { selectedIdeaTypeAtom } from '@/store/atoms/idea'
+
+const StyledToggleGroupRoot = styled(ToggleGroupRoot)`
+  display: grid;
+  grid-template-columns: repeat(5, 60px);
+  row-gap: 4px;
+  column-gap: 4px;
+  justify-content: center;
+`
+const StyledToggleGroupItem = styled(ToggleGroupItem)`
+  /* 기본 스타일 */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 24px;
+  font-size: 0.8125rem;
+  font-weight: ${theme.fontWeight.bold};
+  color: #767676;
+  background-color: ${theme.color.white};
+  border: 1px solid ${theme.color.grey500};
+  border-radius: 12px;
+  cursor: pointer;
+
+  /* 선택 시 스타일 */
+  &[data-state='on'] {
+    background-color: ${theme.color.purple700};
+    color: ${theme.color.white};
+    border: none;
+  }
+`
+
+const IdeaTypeGroup = () => {
+  const [value, setValue] = useAtom(selectedIdeaTypeAtom)
+
+  return (
+    <StyledToggleGroupRoot
+      type="single"
+      value={value}
+      onValueChange={(value) => {
+        if (value) setValue(value)
+      }}
+    >
+      {typeDatas.map((content, idx) => (
+        <StyledToggleGroupItem key={`${content}-${idx}`} value={content}>
+          {content}
+        </StyledToggleGroupItem>
+      ))}
+    </StyledToggleGroupRoot>
+  )
+}
+
+export default IdeaTypeGroup

src/components/common/ToggleGroup/Item.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import React from 'react'
+
+export interface ToggleGroupItemProps
+  extends ToggleGroupPrimitive.ToggleGroupItemProps {}
+
+const ToggleGroupItem = ({ children, ...props }: ToggleGroupItemProps) => {
+  return (
+    <ToggleGroupPrimitive.Item {...props}>{children}</ToggleGroupPrimitive.Item>
+  )
+}
+
+export default ToggleGroupItem

src/components/common/ToggleGroup/Root.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+
+const ToggleGroupRoot = ToggleGroupPrimitive.Root
+
+export default ToggleGroupRoot

src/components/common/ToggleGroup/index.ts

@@ -0,0 +1,4 @@
+import ToggleGroupRoot from '@/components/common/ToggleGroup/Root'
+import ToggleGroupItem from '@/components/common/ToggleGroup/Item'
+
+export { ToggleGroupItem, ToggleGroupRoot }

src/constants/idea.ts

@@ -0,0 +1,22 @@
+export const typeDatas = [
+  '식품',
+  '헬스케어',
+  '과학',
+  '경제',
+  '교육',
+  'AI',
+  '통신',
+  '제조',
+  '블록체인',
+  '데이터',
+  '비즈니스',
+  '딥테크',
+  '하드웨어',
+  'STO',
+  '커머스',
+  '인사',
+  '법률',
+  '바이오',
+  '핀테크',
+  '커피',
+]

src/store/atoms/idea.ts

@@ -0,0 +1,4 @@
+import { typeDatas } from '@/constants/idea'
+import { atom } from 'jotai'
+
+export const selectedIdeaTypeAtom = atom(typeDatas[0])

src/store/atoms/index.ts

@@ -0,0 +1 @@
+export * from '@/store/atoms/idea'

src/store/index.ts

@@ -0,0 +1 @@
+export * from '@/store/atoms'