From cbcab712dd056baaaaeb7e6c787bb77a677fb94e Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:06:52 +0900 Subject: [PATCH 1/9] =?UTF-8?q?[#20]=20radix=20toggleGroup=20=ED=8C=A8?= =?UTF-8?q?=ED=82=A4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 129 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 130 insertions(+) diff --git a/package-lock.json b/package-lock.json index 6e220bf..b7230ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "hasInstallScript": true, "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", @@ -615,6 +616,32 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-collection": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", + "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -685,6 +712,23 @@ } } }, + "node_modules/@radix-ui/react-direction": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz", + "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-dismissable-layer": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", @@ -842,6 +886,37 @@ } } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz", + "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", @@ -860,6 +935,60 @@ } } }, + "node_modules/@radix-ui/react-toggle": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz", + "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toggle-group": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz", + "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-toggle": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", diff --git a/package.json b/package.json index 6e33be1..d6c0bbf 100644 --- a/package.json +++ b/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", From edb04106ad14bd97c16f22bc5f35e039378e021d Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:08:55 +0900 Subject: [PATCH 2/9] =?UTF-8?q?[#20]=20toggleGroup=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/ToggleGroup/Item.tsx | 15 +++++++++++++++ src/components/common/ToggleGroup/Root.tsx | 7 +++++++ src/components/common/ToggleGroup/index.ts | 4 ++++ 3 files changed, 26 insertions(+) create mode 100644 src/components/common/ToggleGroup/Item.tsx create mode 100644 src/components/common/ToggleGroup/Root.tsx create mode 100644 src/components/common/ToggleGroup/index.ts diff --git a/src/components/common/ToggleGroup/Item.tsx b/src/components/common/ToggleGroup/Item.tsx new file mode 100644 index 0000000..b2e0e7f --- /dev/null +++ b/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 ( + {children} + ) +} + +export default ToggleGroupItem diff --git a/src/components/common/ToggleGroup/Root.tsx b/src/components/common/ToggleGroup/Root.tsx new file mode 100644 index 0000000..7140690 --- /dev/null +++ b/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 diff --git a/src/components/common/ToggleGroup/index.ts b/src/components/common/ToggleGroup/index.ts new file mode 100644 index 0000000..2d8f6ee --- /dev/null +++ b/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 } From 4df8514bd1b003b1103d7e8744cb5da8fbd757f7 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:09:35 +0900 Subject: [PATCH 3/9] =?UTF-8?q?[#20]=20=EC=95=84=EC=9D=B4=EB=94=94?= =?UTF-8?q?=EC=96=B4=20=EC=9C=A0=ED=98=95=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/idea.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/constants/idea.ts diff --git a/src/constants/idea.ts b/src/constants/idea.ts new file mode 100644 index 0000000..06a2c5f --- /dev/null +++ b/src/constants/idea.ts @@ -0,0 +1,22 @@ +export const typeDatas = [ + '식품', + '헬스케어', + '과학', + '경제', + '교육', + 'AI', + '통신', + '제조', + '블록체인', + '데이터', + '비즈니스', + '딥테크', + '하드웨어', + 'STO', + '커머스', + '인사', + '법률', + '바이오', + '핀테크', + '커피', +] From 9a07f8ecac0739d0254ae404d4af980cb506b477 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:10:03 +0900 Subject: [PATCH 4/9] =?UTF-8?q?[#20]=20=EA=B8=B0=EB=B3=B8=20jotai=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=EA=B5=AC=EC=A1=B0=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/store/index.ts diff --git a/src/store/index.ts b/src/store/index.ts new file mode 100644 index 0000000..87ccca7 --- /dev/null +++ b/src/store/index.ts @@ -0,0 +1 @@ +export * from '@/store/atoms' From c9a4d02e35cb1feb1f9c18b05ab08c13452a5051 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:10:23 +0900 Subject: [PATCH 5/9] =?UTF-8?q?[#20]=20=EA=B8=B0=EB=B3=B8=20atom=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=EA=B5=AC=EC=A1=B0=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/atoms/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/store/atoms/index.ts diff --git a/src/store/atoms/index.ts b/src/store/atoms/index.ts new file mode 100644 index 0000000..54fd653 --- /dev/null +++ b/src/store/atoms/index.ts @@ -0,0 +1 @@ +export * from '@/store/atoms/idea' From 13fa87b926a6922edfe46cbfefc8afdf8aa676b5 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:10:51 +0900 Subject: [PATCH 6/9] =?UTF-8?q?[#20]=20=EC=95=84=EC=9D=B4=EB=94=94?= =?UTF-8?q?=EC=96=B4=20=EC=84=A0=ED=83=9D=20atom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/atoms/idea.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/store/atoms/idea.ts diff --git a/src/store/atoms/idea.ts b/src/store/atoms/idea.ts new file mode 100644 index 0000000..941c453 --- /dev/null +++ b/src/store/atoms/idea.ts @@ -0,0 +1,4 @@ +import { typeDatas } from '@/constants/idea' +import { atom } from 'jotai' + +export const selectedIdeaTypeAtom = atom(typeDatas[0]) From 1a516d65afd20007ca6369cda47ee350e4a12caa Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:11:03 +0900 Subject: [PATCH 7/9] =?UTF-8?q?[#20]=20gitkeep=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/store/.gitkeep diff --git a/src/store/.gitkeep b/src/store/.gitkeep deleted file mode 100644 index e69de29..0000000 From d836ddd6172fb77bdbf166c1b373eb69a06dd910 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:13:54 +0900 Subject: [PATCH 8/9] =?UTF-8?q?[#20]=20=EC=95=84=EC=9D=B4=EB=94=94?= =?UTF-8?q?=EC=96=B4=20=EC=9C=A0=ED=98=95=20=EC=84=A0=ED=83=9D=20=EA=B7=B8?= =?UTF-8?q?=EB=A3=B9=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IdeaTypeGroup.tsx | 66 ++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/components/IdeaTypeGroup.tsx diff --git a/src/components/IdeaTypeGroup.tsx b/src/components/IdeaTypeGroup.tsx new file mode 100644 index 0000000..ea3e416 --- /dev/null +++ b/src/components/IdeaTypeGroup.tsx @@ -0,0 +1,66 @@ +'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; + } +` + +/** + * + * @returns + */ +const IdeaTypeGroup = () => { + const [value, setValue] = useAtom(selectedIdeaTypeAtom) + + return ( + { + if (value) setValue(value) + }} + > + {typeDatas.map((content, idx) => ( + + {content} + + ))} + + ) +} + +export default IdeaTypeGroup From 3fa0ae2846ccda74dd761b91114b2116a836fb81 Mon Sep 17 00:00:00 2001 From: 03hoho03 Date: Mon, 13 May 2024 02:14:31 +0900 Subject: [PATCH 9/9] =?UTF-8?q?[#20]=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/IdeaTypeGroup.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/IdeaTypeGroup.tsx b/src/components/IdeaTypeGroup.tsx index ea3e416..0dec321 100644 --- a/src/components/IdeaTypeGroup.tsx +++ b/src/components/IdeaTypeGroup.tsx @@ -39,10 +39,6 @@ const StyledToggleGroupItem = styled(ToggleGroupItem)` } ` -/** - * - * @returns - */ const IdeaTypeGroup = () => { const [value, setValue] = useAtom(selectedIdeaTypeAtom)