From 8875172c71bfaec4de019cf164c5963ebeed1d04 Mon Sep 17 00:00:00 2001 From: jgjgill <79239852+jgjgill@users.noreply.github.com> Date: Fri, 22 Dec 2023 02:23:50 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98=20(#25)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: shadcn-ui 라이브러리 설치 * feat: 아코디언 컴포넌트 추가 lint 에러로 react/prop-types 설정 변경 영어로 인한 텍스트 넘침으로 break-all 스타일 추가 * chore: 스타일 에러 수정 --- .eslintrc.json | 2 +- app/globals.css | 67 + app/quizzes/[id]/quiz.tsx | 4 +- components.json | 16 + components/common/buttons/button.tsx | 4 +- components/ui/accordion.tsx | 57 + libs/utils.ts | 6 + package-lock.json | 5148 ++------------------------ package.json | 4 + tailwind.config.js | 68 +- 10 files changed, 520 insertions(+), 4856 deletions(-) create mode 100644 components.json create mode 100644 components/ui/accordion.tsx create mode 100644 libs/utils.ts diff --git a/.eslintrc.json b/.eslintrc.json index 66a8aa2..ba08c79 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -19,5 +19,5 @@ "sourceType": "module" }, "plugins": ["@typescript-eslint", "react", "@tanstack/query"], - "rules": { "react/react-in-jsx-scope": "off" } + "rules": { "react/react-in-jsx-scope": "off", "react/prop-types": "off" } } diff --git a/app/globals.css b/app/globals.css index 64d16fa..4e0f055 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,6 +3,73 @@ @tailwind utilities; @layer base { + :root { + --background: 0 0% 100%; + --foreground: 222.2 84% 4.9%; + + --card: 0 0% 100%; + --card-foreground: 222.2 84% 4.9%; + + --popover: 0 0% 100%; + --popover-foreground: 222.2 84% 4.9%; + + --primary: 222.2 47.4% 11.2%; + --primary-foreground: 210 40% 98%; + + --secondary: 210 40% 96.1%; + --secondary-foreground: 222.2 47.4% 11.2%; + + --muted: 210 40% 96.1%; + --muted-foreground: 215.4 16.3% 46.9%; + + --accent: 210 40% 96.1%; + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 210 40% 98%; + + --border: 214.3 31.8% 91.4%; + --input: 214.3 31.8% 91.4%; + --ring: 222.2 84% 4.9%; + + --radius: 0.5rem; + } + + .dark { + --background: 222.2 84% 4.9%; + --foreground: 210 40% 98%; + + --card: 222.2 84% 4.9%; + --card-foreground: 210 40% 98%; + + --popover: 222.2 84% 4.9%; + --popover-foreground: 210 40% 98%; + + --primary: 210 40% 98%; + --primary-foreground: 222.2 47.4% 11.2%; + + --secondary: 217.2 32.6% 17.5%; + --secondary-foreground: 210 40% 98%; + + --muted: 217.2 32.6% 17.5%; + --muted-foreground: 215 20.2% 65.1%; + + --accent: 217.2 32.6% 17.5%; + --accent-foreground: 210 40% 98%; + + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 210 40% 98%; + + --border: 217.2 32.6% 17.5%; + --input: 217.2 32.6% 17.5%; + --ring: 212.7 26.8% 83.9%; + } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } input, textarea { @apply focus:outline-none; diff --git a/app/quizzes/[id]/quiz.tsx b/app/quizzes/[id]/quiz.tsx index df990ab..76d2d1d 100644 --- a/app/quizzes/[id]/quiz.tsx +++ b/app/quizzes/[id]/quiz.tsx @@ -10,8 +10,8 @@ export function Quiz({ id }: { id: number }) { }; return ( -
- {/*
나는 클라이언트 컴포넌트에서 불러온 값!
*/} +
+
나는 클라이언트 컴포넌트에서 불러온 값!
{JSON.stringify(quiz)}
diff --git a/components.json b/components.json new file mode 100644 index 0000000..48c34e4 --- /dev/null +++ b/components.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "app/globals.css", + "baseColor": "slate", + "cssVariables": true + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/components/common/buttons/button.tsx b/components/common/buttons/button.tsx index b4e5e42..b67514d 100644 --- a/components/common/buttons/button.tsx +++ b/components/common/buttons/button.tsx @@ -1,6 +1,6 @@ +import { cn } from '@/libs/utils'; import { cva, type VariantProps } from 'class-variance-authority'; import { forwardRef, type Ref } from 'react'; -import { twMerge } from 'tailwind-merge'; type ButtonProps = React.ButtonHTMLAttributes & VariantProps; @@ -24,7 +24,7 @@ export default forwardRef(function Button( return (