로그인・회원가입

사용 방법 (Next.js)

내 프로젝트에서 이 화면을 띄우기까지의 3단계입니다

1. 1

   터미널에서 사용할 컴포넌트와 라이브러리를 설치 (한 번만)

   복사

   npx shadcn@latest add button input label tabs

   복사

   npm i react-hook-form zod

   복사

   npm i @hookform/resolvers

   아직 shadcn/ui를 설치하지 않은 프로젝트라면 먼저 npx shadcn@latest init 을 한 번 실행합니다

2. 2

   파일을 이 위치에 붙여넣기

   my-app/
   ├─ components/
   │   └─ login/
   │       ├─ LoginTabs.tsx   ← 위의 창에서 복사한 것
   │       └─ auth.tsx   ← 위의 창에서 복사한 것
   └─ app/
       └─ login/
           └─ page.tsx   ← 3단계에서 만든다

   폴더가 없으면 만듭니다. 파일은 모두 같은 폴더에 넣습니다.

3. 3

   페이지 파일에서 불러오기

   복사

   import LoginTabs from "@/components/login/LoginTabs"
   
   export default function Page() {
     return <LoginTabs />
   }

   app/login/page.tsx 에 씁니다. npm run dev 로 실행하고 /login 로 가면 보입니다