From 6e98eb840078c8ad10a54f938bed9609949d3bd2 Mon Sep 17 00:00:00 2001 From: cham0287 Date: Mon, 6 May 2024 09:51:58 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B2=98=EB=A6=AC=EB=B0=A9=EB=B2=95=20?= =?UTF-8?q?accordion=20shadcn=20ui=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 86 ++++++++++++++++++++ package.json | 1 + src/components/ui/AccordionBase.tsx | 39 +++++++++ src/components/ui/icons/Down.tsx | 6 +- src/components/ui/shadcn-ui/accordion.tsx | 59 ++++++++++++++ src/components/ui/sidebars/DiscardMethod.tsx | 60 ++++++-------- 6 files changed, 214 insertions(+), 37 deletions(-) create mode 100644 src/components/ui/AccordionBase.tsx create mode 100644 src/components/ui/shadcn-ui/accordion.tsx diff --git a/package-lock.json b/package-lock.json index 84d26fb..7a04f4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.1.0", "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-select": "^2.0.0", "@tanstack/react-query": "^5.29.2", "@typescript-eslint/eslint-plugin": "6.0", @@ -2784,6 +2785,37 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@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-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-arrow": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", @@ -2807,6 +2839,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "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-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -3026,6 +3088,30 @@ } } }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "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-primitive": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", diff --git a/package.json b/package.json index c32157a..57a088d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-select": "^2.0.0", "@tanstack/react-query": "^5.29.2", "@typescript-eslint/eslint-plugin": "6.0", diff --git a/src/components/ui/AccordionBase.tsx b/src/components/ui/AccordionBase.tsx new file mode 100644 index 0000000..a4b1dd4 --- /dev/null +++ b/src/components/ui/AccordionBase.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from './shadcn-ui/accordion'; +import { methodTypes } from '@/utils/methodTypes'; + +const AccordionBase = ({ tag }: { tag: string }) => { + const DM = methodTypes.filter((item) => item.tag === tag)[0].methods; + return ( + + {DM.map((method, index) => ( + + + {method.title} + + + {method.descriptions.map((content, index) => ( +

+ {content} +

+ ))} + + + ))} + + ); +}; + +export default AccordionBase; diff --git a/src/components/ui/icons/Down.tsx b/src/components/ui/icons/Down.tsx index 55cdc39..f107347 100644 --- a/src/components/ui/icons/Down.tsx +++ b/src/components/ui/icons/Down.tsx @@ -1,12 +1,12 @@ interface Props { w?: number; h?: number; - color?: string; } -const Down = ({ w, h, color }: Props) => { +const Down = ({ w, h }: Props) => { return ( { fill-rule="evenodd" clip-rule="evenodd" d="M3.50173 6.93944C3.81132 6.66425 4.28538 6.69214 4.56056 7.00173L12 15.3711L19.4395 7.00173C19.7146 6.69214 20.1887 6.66425 20.4983 6.93944C20.8079 7.21463 20.8358 7.68868 20.5606 7.99827L12.5606 16.9983C12.4182 17.1584 12.2142 17.25 12 17.25C11.7858 17.25 11.5818 17.1584 11.4395 16.9983L3.43945 7.99827C3.16426 7.68869 3.19215 7.21463 3.50173 6.93944Z" - fill={color ? color : '#625F5D'} + fill="currentColor" /> ); diff --git a/src/components/ui/shadcn-ui/accordion.tsx b/src/components/ui/shadcn-ui/accordion.tsx new file mode 100644 index 0000000..af24cc6 --- /dev/null +++ b/src/components/ui/shadcn-ui/accordion.tsx @@ -0,0 +1,59 @@ +'use client'; + +import * as React from 'react'; +import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import { ChevronDown } from 'lucide-react'; + +import { cn } from '@/lib/utils'; +import Down from '../icons/Down'; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AccordionItem.displayName = 'AccordionItem'; + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180', + className, + )} + {...props} + > + {children} + + + +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)); + +AccordionContent.displayName = AccordionPrimitive.Content.displayName; + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/src/components/ui/sidebars/DiscardMethod.tsx b/src/components/ui/sidebars/DiscardMethod.tsx index bcf0fdb..bf2c60d 100644 --- a/src/components/ui/sidebars/DiscardMethod.tsx +++ b/src/components/ui/sidebars/DiscardMethod.tsx @@ -1,7 +1,10 @@ -import { useState } from 'react'; -import Down from '../icons/Down'; -import Up from '../icons/Up'; import { methodTypes } from '@/utils/methodTypes'; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from '../shadcn-ui/accordion'; interface Props { tag: string; @@ -9,43 +12,32 @@ interface Props { export default function DiscardMethod({ tag }: Props) { const DM = methodTypes.filter((item) => item.tag === tag)[0].methods; - const [openIndex, SetOpenIndex] = useState(-1); return (
배출 방법
-
+ {DM.map((method, index) => ( -
-
-

{method.title}

- {openIndex !== index ? ( - SetOpenIndex(index)}> - - - ) : ( - SetOpenIndex(-1)}> - - - )} -
- {openIndex === index && ( -
- {method.descriptions.map((content, index) => ( -

- {content} -

- ))} -
- )} -
+ + {method.title} + + + {method.descriptions.map((content, index) => ( +

+ {content} +

+ ))} + + ))} -
+
); }