Co-authored-by: Seungmi Woo <wSeungMi@users.noreply.github.com>

package.json

@@ -6,11 +6,13 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "mock": "npx tsx watch ./src/mocks/http.ts"
+    "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/themes": "^3.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -21,7 +23,8 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.4"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

src/app/delay/page.tsx

@@ -0,0 +1,13 @@
+type ResponseValue = {
+  message: string;
+  time: string; // ISO 8601
+};
+
+export default async function AsyncPage() {
+  const res = await fetch('https://api.heropy.dev/v0/delay?t=1000', {
+    cache: 'no-store',
+  });
+  const data: ResponseValue = await res.json();
+  return <h1>{data.time}</h1>;
+  // 2024-04-02T17:47:09.678Z
+}

src/app/figma/page.tsx

@@ -0,0 +1,68 @@
+import { Button } from '@/components/ui/button';
+
+export default function Page() {
+  return (
+    <>
+      <nav className="px-[36px] h-[80px] flex-row flex justify-between items-center">
+        <div>
+          <ul className="flex flex-row gap-[40px]">
+            <li>UX / UI</li>
+            <li> publising</li>
+            <li>Branding</li>
+            <li>Motiongraphic</li>
+          </ul>
+        </div>
+        <div>Logo</div>
+        <div className="flex flex-row items-center gap-[30px]">
+          <label className="input input-bordered flex items-center gap-2 rounded-full">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="21"
+              viewBox="0 0 20 21"
+              fill="none">
+              <path
+                d="M9.16667 16.3333C12.8486 16.3333 15.8333 13.3486 15.8333 9.66667C15.8333 5.98477 12.8486 3 9.16667 3C5.48477 3 2.5 5.98477 2.5 9.66667C2.5 13.3486 5.48477 16.3333 9.16667 16.3333Z"
+                stroke="#9E9E9E"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M17.5 18L13.875 14.375"
+                stroke="#9E9E9E"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <input
+              type="text"
+              className="grow w-60 "
+              placeholder="Search"
+            />
+          </label>
+
+          <div>
+            <p>Log in</p>
+          </div>
+          <div>
+            <Button className="rounded-full">Sign up</Button>
+          </div>
+        </div>
+      </nav>
+      <div className="h-[66px] w-full"></div>
+      <div>
+        <div>
+          <h3>디자인팀 테스트중</h3>
+          <h3>Responsive Design</h3>
+        </div>
+
+        <p>
+          Let&apos;s create responsive UI designs that adapt to various screen
+          sizes using Figma.
+        </p>
+      </div>
+    </>
+  );
+}

src/app/globals.css

@@ -1,76 +1,88 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 224 71.4% 4.1%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
 
-      --card: 0 0% 100%;
-      --card-foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
 
-      --popover: 0 0% 100%;
-      --popover-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
 
-      --primary: 220.9 39.3% 11%;
-      --primary-foreground: 210 20% 98%;
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
 
-      --secondary: 220 14.3% 95.9%;
-      --secondary-foreground: 220.9 39.3% 11%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
 
-      --muted: 220 14.3% 95.9%;
-      --muted-foreground: 220 8.9% 46.1%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
 
-      --accent: 220 14.3% 95.9%;
-      --accent-foreground: 220.9 39.3% 11%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
 
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 20% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
 
-      --border: 220 13% 91%;
-      --input: 220 13% 91%;
-      --ring: 224 71.4% 4.1%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
 
-      --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
 
-    .dark {
-      --background: 224 71.4% 4.1%;
-      --foreground: 210 20% 98%;
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
 
-      --card: 224 71.4% 4.1%;
-      --card-foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
 
-      --popover: 224 71.4% 4.1%;
-      --popover-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
 
-      --primary: 210 20% 98%;
-      --primary-foreground: 220.9 39.3% 11%;
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
 
-      --secondary: 215 27.9% 16.9%;
-      --secondary-foreground: 210 20% 98%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
 
-      --muted: 215 27.9% 16.9%;
-      --muted-foreground: 217.9 10.6% 64.9%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
 
-      --accent: 215 27.9% 16.9%;
-      --accent-foreground: 210 20% 98%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
 
-      --border: 215 27.9% 16.9%;
-      --input: 215 27.9% 16.9%;
-      --ring: 216 12.2% 83.9%;
-    }
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
   }
+}
 
-  @layer base {
-    * {
-      @apply border-border;
-    }
-    body {
-      @apply bg-background text-foreground;
-    }
-  }
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}

src/app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import { MswComponent } from '@/mocks/MswProvider';
+import { MSWComponent } from '@/mocks/MswProvider';
+import { Theme } from '@radix-ui/themes';
 import './globals.css';
-
+import '@radix-ui/themes/styles.css';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
@@ -17,8 +18,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <MswComponent />
-      <body className={inter.className}>{children}</body>
+      <MSWComponent />
+      <body className={inter.className}>
+        <Theme>{children}</Theme>
+      </body>
     </html>
   );
 }

src/app/msw/page.tsx

@@ -1,7 +1,13 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { wait } from '@/serverActions';
 
 export default function Page() {
+  async function waitf() {
+    const { message } = await wait(2000);
+    console.log(message);
+  }
+
   const fetchData = async () => {
     try {
       const response = await fetch('https://example.com/user');

src/app/server/loading.tsx

@@ -0,0 +1,3 @@
+export default function ServerLoading() {
+  return <h1>Loading...</h1>;
+}

src/app/server/page.tsx

@@ -0,0 +1,6 @@
+import { wait } from '@/serverActions';
+
+export default async function ServerPage() {
+  const { message } = await wait(2000);
+  return <h1>{message}</h1>;
+}

src/app/shadcn/page.tsx

@@ -2,6 +2,12 @@
 import { Button } from '@/components/ui/button';
 import React, { useRef } from 'react';
 import { Calendar } from '@/components/ui/calendar';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 function Page() {
   const buttonRef = useRef(null);
@@ -39,6 +45,17 @@ function Page() {
           </div>
         </div>
       </dialog>
+
+      <TooltipProvider
+        delayDuration={700}
+        skipDelayDuration={100}>
+        <Tooltip>
+          <TooltipTrigger>Hover</TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Add to library</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </>
   );
 }