issue # date time picker 구현 예제 작성

src/ui/page/signup/SignUpPage.tsx

@@ -0,0 +1,58 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useState } from 'react';
+import { format } from 'date-fns';
+import { Label } from '@/components/ui/label';
+import { Calendar } from '@/components/ui/calendar';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+export default function SignUpPage() {
+  const [open, setOpen] = useState<boolean>(false);
+  const [date, setDate] = useState<Date>(new Date());
+
+  return (
+    <div className="w-full h-full flex flex-row justify-center items-center">
+      <div className="flex flex-col gap-4 justify-center items-center">
+        <Label>Date Picker</Label>
+        <Popover
+          open={open}
+          onOpenChange={setOpen}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              id="date"
+              className="w-fit justify-between font-normal"
+            >
+              {date ? format(date, "yyyy/MM/dd") : "Select Date"}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <Calendar
+              mode="single"
+              timeZone="Asia/Seoul"
+              formatters={{
+                formatCaption: (month) =>
+                  format(month, "yyyy년 MM월")
+              }}
+              onSelect={(date) => {
+                if (date) {
+                  setDate(date);
+                  setOpen(false);
+                }
+              }}
+              selected={date}
+              defaultMonth={date}
+              captionLayout="dropdown"
+            />
+          </PopoverContent>
+        </Popover>
+        <Input
+          type="time"
+          id="time"
+          defaultValue={format(date, "HH:mm")}
+        />
+      </div>
+    </div>
+  );
+}