feat: temp UI page

app/(tmp)/_components/Section.tsx

@@ -0,0 +1,14 @@
+interface SectionProps extends React.PropsWithChildren {
+  title: string;
+}
+
+const Section = ({ title, children }: SectionProps) => {
+  return (
+    <div className="p-4">
+      <h2 className="font-bold text-2xl mb-4">{title}</h2>
+      {children}
+    </div>
+  );
+};
+
+export default Section;

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 (
+    <Section title="Accordion">
+      <Accordion type="single" collapsible>
+        {FAQS.map((faq, index) => (
+          <AccordionItem key={index} value={`item-${index}`}>
+            <AccordionTrigger>{faq.question}</AccordionTrigger>
+            <AccordionContent>{faq.answer}</AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Section>
+  );
+};
+
+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;

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 (
+    <Section title="Button">
+      <div className="flex flex-wrap gap-2">
+        <div className="bg-black">
+          <Button variant="link" className="text-white">
+            About us
+          </Button>
+          <Button variant="link" className="text-white">
+            Contact
+          </Button>
+        </div>
+        <Button>Sign In</Button>
+        <div className="bg-black">
+          <Button variant="link" className="text-white text-xs">
+            Terms of Service
+          </Button>
+          <Button variant="link" className="text-white text-xs">
+            Privacy Policy
+          </Button>
+        </div>
+        <Button>Send a Message</Button>
+        <Button>Take a Practice Test</Button>
+        <Button variant="secondary">Save without Practice Test</Button>
+        <Button variant="destructive">Skip the Practice Test</Button>
+        <Button>Cancel</Button>
+        <Button>Go to main page</Button>
+        <Button>Save</Button>
+        <Button variant="destructive">Close Account</Button>
+        <div className="w-80">
+          <Button className="w-full">Submit an Inquiry</Button>
+        </div>
+        <div className="w-80">
+          <Button className="w-full">See a Detail</Button>
+        </div>
+        <div className="bg-green-300">
+          <Button variant="link">See the explanation →</Button>
+        </div>
+        <div className="bg-red-300">
+          <Button variant="link">See the explanation →</Button>
+        </div>
+        <Button variant="link">Back to overall result →</Button>
+        <Button>Take a Practice Test</Button>
+        <div className="w-80">
+          <Button className="w-full">Take a Test</Button>
+        </div>
+        <Button>Create a Test</Button>
+        <Button>Start a Test</Button>
+        <Button variant="secondary">Back to previous question</Button>
+        <Button variant="secondary">Go to next question</Button>
+        <Button variant="secondary">Submit and finish test</Button>
+        <Button>Submit and finish test</Button>
+        <Button variant="destructive">Submit and finish test</Button>
+        <Button>Cancel</Button>
+        <Button variant="ghost">Cancel</Button>
+        <Button>Submit and finish test</Button>
+        <Button>Continue to solve the problem</Button>
+        <Button>Submit the answer sheet below</Button>
+      </div>
+    </Section>
+  );
+};
+
+export default ButtonSection;

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 (
+    <Section title="Card">
+      <Card className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Create project</CardTitle>
+          <CardDescription>
+            Deploy your new project in one-click.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="grid w-full items-center gap-4">
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" placeholder="Name of your project" />
+              </div>
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="framework">Framework</Label>
+                <Select>
+                  <SelectTrigger id="framework">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent position="popper">
+                    <SelectItem value="next">Next.js</SelectItem>
+                    <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                    <SelectItem value="astro">Astro</SelectItem>
+                    <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button variant="outline">Cancel</Button>
+          <Button>Deploy</Button>
+        </CardFooter>
+      </Card>
+    </Section>
+  );
+};
+
+export default CardSection;

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 (
+    <Section title="Dialog">
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline">Show Dialog</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your
+              account and remove your data from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Section>
+  );
+};
+
+export default DialogSection;

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<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    // 초기값 정의
+    defaultValues: {
+      name: '',
+      email: '',
+      age: 0,
+    },
+  });
+
+  const router = useRouter();
+
+  const isLoading = form.formState.isSubmitting; // 로딩 상태
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    console.log(data);
+
+    form.reset(); // 폼 초기화
+
+    // 토스트 메세지 있다면,
+    // toast.success('폼 제출 완료');
+
+    // 캐싱된 데이터 refresh
+    router.refresh();
+  };
+
+  // Form -> form -> FormField -> FormIten -> FormLabel -> FormControl -> FormMessage
+  return (
+    <>
+      <Section title="Form">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              control={form.control}
+              name="name" // zod 에서 정의한 데이터 이름
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel htmlFor={field.name}>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isLoading} // 제출 중일 때 비활성화
+                      placeholder="Please enter your name"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage /> {/* 에러 메세지 */}
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel htmlFor={field.name}>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isLoading}
+                      placeholder="Please enter your email"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="age"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel htmlFor={field.name}>Age</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isLoading}
+                      placeholder="Please enter your age"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button type="submit">Submit</Button>
+          </form>
+        </Form>
+      </Section>
+    </>
+  );
+};
+
+export default FormSection;