diff --git a/.eslintcache b/.eslintcache deleted file mode 100644 index 62cf951..0000000 --- a/.eslintcache +++ /dev/null @@ -1 +0,0 @@ -[{"C:\\Users\\cwkim\\Desktop\\front\\123.ts":"1"},{"size":7,"mtime":1712162347118,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","suppressedMessages":"6","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"tv8480","C:\\Users\\cwkim\\Desktop\\front\\123.ts",[],[]] \ No newline at end of file diff --git a/app/(tmp)/_components/Section.tsx b/app/(tmp)/_components/Section.tsx new file mode 100644 index 0000000..53baf32 --- /dev/null +++ b/app/(tmp)/_components/Section.tsx @@ -0,0 +1,14 @@ +interface SectionProps extends React.PropsWithChildren { + title: string; +} + +const Section = ({ title, children }: SectionProps) => { + return ( +
+

{title}

+ {children} +
+ ); +}; + +export default Section; diff --git a/app/(tmp)/_components/sections/AccordionSection.tsx b/app/(tmp)/_components/sections/AccordionSection.tsx new file mode 100644 index 0000000..4130277 --- /dev/null +++ b/app/(tmp)/_components/sections/AccordionSection.tsx @@ -0,0 +1,54 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from '@/components/ui/accordion'; + +import Section from '@/app/(tmp)/_components/Section'; + +const AccordionSection = () => { + return ( +
+ + {FAQS.map((faq, index) => ( + + {faq.question} + {faq.answer} + + ))} + +
+ ); +}; + +const FAQS = [ + { + question: 'What exactly is PlusAlpha?', + answer: + 'PlusAlpha is a specialized online platform designed to cater to the needs of students studying AP Calculus in the USA. It provides a comprehensive array of math problems, resources, and tools specifically tailored to enhance learning and preparation for the AP Calculus exam.', + }, + { + question: 'How can PlusAlpha benefit me as an AP Calculus student?', + answer: + 'PlusAlpha offers a dynamic learning environment where students can access a wide range of practice problems, quizzes, and instructional materials aligned with the AP Calculus curriculum. By utilizing our platform, students can strengthen their understanding of calculus concepts, improve problem-solving skills, and ultimately boost their performance on the AP exam.', + }, + { + question: + 'Is PlusAlpha suitable for all levels of AP Calculus proficiency?', + answer: + 'Yes, PlusAlpha caters to students at various skill levels, from beginners to advanced learners. Our platform features content ranging from fundamental calculus principles to challenging problem sets, ensuring that students of all abilities can find resources suited to their needs and level of mastery.', + }, + { + question: 'How does PlusAlpha differ from other math problem websites?', + answer: + 'Unlike generic math problem websites, PlusAlpha focuses specifically on the AP Calculus curriculum, providing targeted resources and practice materials that directly align with the content and format of the AP exam. Additionally, PlusAlpha offers features such as progress tracking, personalized recommendations, and interactive tools designed to optimize the learning experience for AP Calculus students.', + }, + { + question: 'Is PlusAlpha accessible on different devices and platforms?', + answer: + 'Yes, PlusAlpha is designed to be accessible across various devices and platforms, including desktop computers, laptops, tablets, and smartphones. Whether you prefer to study at home or on the go, you can access our platform conveniently through any internet-connected device, allowing for flexible and convenient learning opportunities.', + }, +]; + +export default AccordionSection; diff --git a/app/(tmp)/_components/sections/ButtonSection.tsx b/app/(tmp)/_components/sections/ButtonSection.tsx new file mode 100644 index 0000000..fd18fb4 --- /dev/null +++ b/app/(tmp)/_components/sections/ButtonSection.tsx @@ -0,0 +1,68 @@ +import { Button } from '@/components/ui/button'; + +import Section from '@/app/(tmp)/_components/Section'; + +const ButtonSection = () => { + return ( +
+
+
+ + +
+ +
+ + +
+ + + + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ +
+ + + + + + + + + + + + +
+
+ ); +}; + +export default ButtonSection; diff --git a/app/(tmp)/_components/sections/CardSection.tsx b/app/(tmp)/_components/sections/CardSection.tsx new file mode 100644 index 0000000..2882154 --- /dev/null +++ b/app/(tmp)/_components/sections/CardSection.tsx @@ -0,0 +1,65 @@ +import { Button } from '@/components/ui/button'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; + +import Section from '@/app/(tmp)/_components/Section'; + +const CardSection = () => { + return ( +
+ + + Create project + + Deploy your new project in one-click. + + + +
+
+
+ + +
+
+ + +
+
+
+ + + + + + +
+ ); +}; + +export default CardSection; diff --git a/app/(tmp)/_components/sections/DialogSection.tsx b/app/(tmp)/_components/sections/DialogSection.tsx new file mode 100644 index 0000000..900e091 --- /dev/null +++ b/app/(tmp)/_components/sections/DialogSection.tsx @@ -0,0 +1,41 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from '@/components/ui/alert-dialog'; +import { Button } from '@/components/ui/button'; + +import Section from '@/app/(tmp)/_components/Section'; + +const DialogSection = () => { + return ( +
+ + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + Cancel + Continue + + + +
+ ); +}; + +export default DialogSection; diff --git a/app/(tmp)/_components/sections/FormSection.tsx b/app/(tmp)/_components/sections/FormSection.tsx new file mode 100644 index 0000000..6a1bfa2 --- /dev/null +++ b/app/(tmp)/_components/sections/FormSection.tsx @@ -0,0 +1,130 @@ +'use client'; + +import { zodResolver } from '@hookform/resolvers/zod'; +import { useForm } from 'react-hook-form'; +import z from 'zod'; +import { useRouter } from 'next/navigation'; + +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +// 폼 형식을 정의해야함 +const formSchema = z.object({ + name: z.string().min(1, { + message: '이름을 입력해주세요', // error 메세지 정의 최소 1글자 + }), + email: z.string().email({ + message: '이메일 형식이 올바르지 않습니다', // error 메세지 정의 + }), + age: z.number().int().min(1, { + message: '나이를 입력해주세요', // error 메세지 정의 + }), +}); + +import Section from '@/app/(tmp)/_components/Section'; + +const FormSection = () => { + // 정의한 폼 형식을 useForm에 적용 + const form = useForm>({ + resolver: zodResolver(formSchema), + // 초기값 정의 + defaultValues: { + name: '', + email: '', + age: 0, + }, + }); + + const router = useRouter(); + + const isLoading = form.formState.isSubmitting; // 로딩 상태 + + const onSubmit = async (data: z.infer) => { + console.log(data); + + form.reset(); // 폼 초기화 + + // 토스트 메세지 있다면, + // toast.success('폼 제출 완료'); + + // 캐싱된 데이터 refresh + router.refresh(); + }; + + // Form -> form -> FormField -> FormIten -> FormLabel -> FormControl -> FormMessage + return ( + <> +
+
+ + ( + + Name + + + + {/* 에러 메세지 */} + + )} + /> + + ( + + Email + + + + + + )} + /> + + ( + + Age + + + + + + )} + /> + + + + +
+ + ); +}; + +export default FormSection; diff --git a/app/(tmp)/_components/sections/InputSection.tsx b/app/(tmp)/_components/sections/InputSection.tsx new file mode 100644 index 0000000..e766aea --- /dev/null +++ b/app/(tmp)/_components/sections/InputSection.tsx @@ -0,0 +1,23 @@ +import { Input } from '@/components/ui/input'; + +import Section from '@/app/(tmp)/_components/Section'; + +const InputSection = () => { + return ( +
+
+ + + + + + + + + +
+
+ ); +}; + +export default InputSection; diff --git a/app/(tmp)/_components/sections/LabelSection.tsx b/app/(tmp)/_components/sections/LabelSection.tsx new file mode 100644 index 0000000..3a5cf80 --- /dev/null +++ b/app/(tmp)/_components/sections/LabelSection.tsx @@ -0,0 +1,15 @@ +import { Label } from '@/components/ui/label'; +import { Input } from '@/components/ui/input'; + +import Section from '@/app/(tmp)/_components/Section'; + +const LabelSection = () => { + return ( +
+ + +
+ ); +}; + +export default LabelSection; diff --git a/app/(tmp)/_components/sections/RadioGroupSection.tsx b/app/(tmp)/_components/sections/RadioGroupSection.tsx new file mode 100644 index 0000000..1138780 --- /dev/null +++ b/app/(tmp)/_components/sections/RadioGroupSection.tsx @@ -0,0 +1,27 @@ +import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; +import { Label } from '@/components/ui/label'; + +import Section from '@/app/(tmp)/_components/Section'; + +const RadioGroupSection = () => { + return ( +
+ +
+ + +
+
+ + +
+
+ + +
+ +
+ ); +}; + +export default RadioGroupSection; diff --git a/app/(tmp)/_components/sections/SkeletonSection.tsx b/app/(tmp)/_components/sections/SkeletonSection.tsx new file mode 100644 index 0000000..1eb9f6c --- /dev/null +++ b/app/(tmp)/_components/sections/SkeletonSection.tsx @@ -0,0 +1,19 @@ +import { Skeleton } from '@/components/ui/skeleton'; + +import Section from '@/app/(tmp)/_components/Section'; + +const SkeletonSection = () => { + return ( +
+
+ +
+ + +
+
+
+ ); +}; + +export default SkeletonSection; diff --git a/app/(tmp)/_components/sections/ToastButtonSection.tsx b/app/(tmp)/_components/sections/ToastButtonSection.tsx new file mode 100644 index 0000000..4628c86 --- /dev/null +++ b/app/(tmp)/_components/sections/ToastButtonSection.tsx @@ -0,0 +1,33 @@ +'use client'; + +import { toast } from 'sonner'; + +import { Button } from '@/components/ui/button'; + +import Section from '@/app/(tmp)/_components/Section'; + +const ToastButtonSection = () => { + const onClickDefault = () => { + toast('토스트 !'); + }; + + const onClickSuccess = () => { + toast.success('토스트 성공 !'); + }; + + const onClickError = () => { + toast.error('토스트 에러 !'); + }; + + return ( +
+
+ + + +
+
+ ); +}; + +export default ToastButtonSection; diff --git a/app/(tmp)/ui/page.tsx b/app/(tmp)/ui/page.tsx new file mode 100644 index 0000000..c73c9ba --- /dev/null +++ b/app/(tmp)/ui/page.tsx @@ -0,0 +1,32 @@ +import { Toaster } from '@/components/ui/sonner'; // temporary import 나중에 Root 에 옮겨야함 + +import AccordionSection from '@/app/(tmp)/_components/sections/AccordionSection'; +import ButtonSection from '@/app/(tmp)/_components/sections/ButtonSection'; +import CardSection from '@/app/(tmp)/_components/sections/CardSection'; +import InputSection from '@/app/(tmp)/_components/sections/InputSection'; +import LabelSection from '@/app/(tmp)/_components/sections/LabelSection'; +import RadioGroupSection from '@/app/(tmp)/_components/sections/RadioGroupSection'; +import DialogSection from '@/app/(tmp)/_components/sections/DialogSection'; +import FormSection from '@/app/(tmp)/_components/sections/FormSection'; +import ToastButtonSection from '@/app/(tmp)/_components/sections/ToastButtonSection'; +import SkeletonSection from '@/app/(tmp)/_components/sections/SkeletonSection'; + +const UIPage = () => { + return ( +
+ + + + + + + + + + + +
+ ); +}; + +export default UIPage; diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx new file mode 100644 index 0000000..84bf2eb --- /dev/null +++ b/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +'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'; + +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/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..5cba559 --- /dev/null +++ b/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +'use client'; + +import * as React from 'react'; +import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; + +import { cn } from '@/lib/utils'; +import { buttonVariants } from '@/components/ui/button'; + +const AlertDialog = AlertDialogPrimitive.Root; + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogHeader.displayName = 'AlertDialogHeader'; + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogFooter.displayName = 'AlertDialogFooter'; + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName; + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +}; diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..81e2e6e --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, type VariantProps } from 'class-variance-authority'; + +import { cn } from '@/lib/utils'; + +const buttonVariants = cva( + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + { + variants: { + variant: { + default: 'bg-primary text-primary-foreground hover:bg-primary/90', + destructive: + 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + outline: + 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + secondary: + 'bg-secondary text-secondary-foreground hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', + }, + size: { + default: 'h-10 px-4 py-2', + sm: 'h-9 rounded-md px-3', + lg: 'h-11 rounded-md px-8', + icon: 'h-10 w-10', + }, + }, + defaultVariants: { + variant: 'default', + size: 'default', + }, + } +); + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean; +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; + return ( + + ); + } +); +Button.displayName = 'Button'; + +export { Button, buttonVariants }; diff --git a/components/ui/card.tsx b/components/ui/card.tsx new file mode 100644 index 0000000..fca7be4 --- /dev/null +++ b/components/ui/card.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +Card.displayName = 'Card'; + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardHeader.displayName = 'CardHeader'; + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardTitle.displayName = 'CardTitle'; + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardDescription.displayName = 'CardDescription'; + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +

+)); +CardContent.displayName = 'CardContent'; + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)); +CardFooter.displayName = 'CardFooter'; + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +}; diff --git a/components/ui/form.tsx b/components/ui/form.tsx new file mode 100644 index 0000000..b948a8f --- /dev/null +++ b/components/ui/form.tsx @@ -0,0 +1,177 @@ +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { Slot } from '@radix-ui/react-slot'; +import { + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext, +} from 'react-hook-form'; + +import { cn } from '@/lib/utils'; +import { Label } from '@/components/ui/label'; + +const Form = FormProvider; + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +> = { + name: TName; +}; + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +); + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + ...props +}: ControllerProps) => { + return ( + + + + ); +}; + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState, formState } = useFormContext(); + + const fieldState = getFieldState(fieldContext.name, formState); + + if (!fieldContext) { + throw new Error('useFormField should be used within '); + } + + const { id } = itemContext; + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + }; +}; + +type FormItemContextValue = { + id: string; +}; + +const FormItemContext = React.createContext( + {} as FormItemContextValue +); + +const FormItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const id = React.useId(); + + return ( + +
+ + ); +}); +FormItem.displayName = 'FormItem'; + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + const { error, formItemId } = useFormField(); + + return ( +