02 2 oauthnext설치

1-Next 설치

npx create-next-app@latest .

2-shadcn 설치

공식홈

shadcn(샤드씨엔) 이란? ShadCN은 미리 제작된 UI컴포넌트를 제공하는 라이브러리이다. Next와 연동이 간편하고 Tailwind CSS와의 통합을 지원하여 스타일링을 쉽게 할 수 있다.

https://ui.shadcn.com/docs https://ui.shadcn.com/docs/installation/next npx shadcn@latest init

3-다크모드 테마 설치

https://ui.shadcn.com/docs/dark-mode/next npm install next-themes

2단계의 파일생성후 코드를 복사붙여넣기

1
"use client"
2

3
import * as React from "react"
4
import { ThemeProvider as NextThemesProvider } from "next-themes"
5

6
export function ThemeProvider({
7
  children,
8
  ...props
9
}: React.ComponentProps<typeof NextThemesProvider>) {
10
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
11
}

3단계의 소스코드를 복사 붙여넣기 app/layout.tsx

1
import {ThemeProvider} from '@/components/theme-provider';
2
import type {Metadata} from 'next';
3
import {Geist, Geist_Mono} from 'next/font/google';
4
import './globals.css';
5

6
const geistSans = Geist({
7
  variable: '--font-geist-sans',
8
  subsets: ['latin'],
9
});
10

11
const geistMono = Geist_Mono({
12
  variable: '--font-geist-mono',
13
  subsets: ['latin'],
14
});
15

16
export const metadata: Metadata = {
17
  title: 'Create Next App',
18
  description: 'Generated by create next app',
19
};
20

21
export default function RootLayout({
22
  children,
23
}: Readonly<{
24
  children: React.ReactNode;
25
}>) {
26
  return (
27
    <html lang="ko"  suppressHydrationWarning>
28
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
29
        <ThemeProvider attribute="class" defaultTheme="**dark**" enableSystem disableTransitionOnChange>
30
          {children}
31
        </ThemeProvider>
32
      </body>
33
    </html>
34
  );
35
}

다크모드로 렌더링된다

4-색상 테마 세팅

shadcn 메인화면에서 색상 테마를 선택하고 변수를 생성한다

우리의 프로젝트에 생성한 변수를 복사하여 덮어씌운다

1
**/*app/global.css*/**
2
...
3
@layer base {
4
  :root {
5
    --background: 0 0% 100%;
6
    --foreground: 222.2 84% 4.9%;
7
    --card: 0 0% 100%;
8
    --card-foreground: 222.2 84% 4.9%;
9
    --popover: 0 0% 100%;
10
    --popover-foreground: 222.2 84% 4.9%;
11
    --primary: 221.2 83.2% 53.3%;
12
    --primary-foreground: 210 40% 98%;
13
    --secondary: 210 40% 96.1%;
14
    --secondary-foreground: 222.2 47.4% 11.2%;
15
    --muted: 210 40% 96.1%;
16
    --muted-foreground: 215.4 16.3% 46.9%;
17
    --accent: 210 40% 96.1%;
18
    --accent-foreground: 222.2 47.4% 11.2%;
19
    --destructive: 0 84.2% 60.2%;
20
    --destructive-foreground: 210 40% 98%;
21
    --border: 214.3 31.8% 91.4%;
22
    --input: 214.3 31.8% 91.4%;
23
    --ring: 221.2 83.2% 53.3%;
24
    --radius: 1rem;
25
    --chart-1: 12 76% 61%;
26
    --chart-2: 173 58% 39%;
27
    --chart-3: 197 37% 24%;
28
    --chart-4: 43 74% 66%;
29
    --chart-5: 27 87% 67%;
30
  }
31

32
  .dark {
33
    --background: 222.2 84% 4.9%;
34
    --foreground: 210 40% 98%;
35
    --card: 222.2 84% 4.9%;
36
    --card-foreground: 210 40% 98%;
37
    --popover: 222.2 84% 4.9%;
38
    --popover-foreground: 210 40% 98%;
39
    --primary: 217.2 91.2% 59.8%;
40
    --primary-foreground: 222.2 47.4% 11.2%;
41
    --secondary: 217.2 32.6% 17.5%;
42
    --secondary-foreground: 210 40% 98%;
43
    --muted: 217.2 32.6% 17.5%;
44
    --muted-foreground: 215 20.2% 65.1%;
45
    --accent: 217.2 32.6% 17.5%;
46
    --accent-foreground: 210 40% 98%;
47
    --destructive: 0 62.8% 30.6%;
48
    --destructive-foreground: 210 40% 98%;
49
    --border: 217.2 32.6% 17.5%;
50
    --input: 217.2 32.6% 17.5%;
51
    --ring: 224.3 76.3% 48%;
52
    --chart-1: 220 70% 50%;
53
    --chart-2: 160 60% 45%;
54
    --chart-3: 30 80% 55%;
55
    --chart-4: 280 65% 60%;
56
    --chart-5: 340 75% 55%;
57
  }
58
}

원래 작성되어 있던 코드를 삭제하고 새로운 색상 변수를 덮어 씌운다

5-shadnc ui 적용확인

https://ui.shadcn.com/docs/components/button
공식문서를 참조하여 버튼을 설치한다.

1
npx shadcn@latest add button

아래 이미지와 같은 파일이 생성 되었는지 확인한다.

next-with-supabase\app\page.tsx 를 수정한다.

1
import { Button } from '@/components/ui/button';
2
import React from 'react';
3

4
const page = () => {
5
  return (
6
    <>
7
      <Button>오잉</Button>
8
    </>
9
  );
10
};
11
export default page;

실행화면

6-auth 만들기

6-1-page.tsx

next-with-supabase\app\auth\page.tsx 파일생성

코드작성

1
import React from 'react';
2

3
const Page = () => {
4
  return (
5
    <>
6
      <div>Page</div>
7
    </>
8
  );
9
};
10
export default Page;

브라우저에서 확인

이어서 코드 작성

1
import React from 'react';
2

3
const Page = () => {
4
  return (
5
    <div className="flex items-center justify-center w-full h-screen">
6
      <div className="w-96  rounded-md border p-5">
7
        <h1 className="text-2xl font-bold">next+supabase</h1>
8
        <p>Register/SiginIn Today 👇</p>
9
      </div>
10
    </div>
11
  );
12
};
13
export default Page;

https://emojidb.org/

여기까지 실행화면

6-2-루시드

lucide에서 아이콘 적용하기 https://lucide.dev/
인스톨 https://lucide.dev/guide/packages/lucide-react

1
npm install lucide-react

아이콘 고르기 https://lucide.dev/icons/

아이콘 컴포넌트 적용 next-with-supabase\app\auth\page.tsx

1
import React from 'react';
2
**import {KeyRound} from 'lucide-react';**
3

4
const Page = () => {
5
  return (
6
    <div className="flex items-center justify-center w-full h-screen">
7
      <div className="w-96 rounded-md border p-5 space-y-5">
8
**        <div className="flex items-center gap-2">
9
          <KeyRound color="#dedede" />
10
**          <h1 className="text-2xl font-bold">next+supabase</h1>
11
**        </div>**
12
        <p className='text-sm text-gray-300'>Register/SiginIn Today 👇</p>
13
      </div>
14
    </div>
15
  );
16
};
17
export default Page;

7-버튼추가

React-icons 사용

https://react-icons.github.io/react-icons/

설치

1
npm install react-icons --save

아이콘 검색

코드작성

1
import {FaGithub} from 'react-icons/fa';
2
import {AiFillGoogleCircle} from 'react-icons/ai';
3
...
4
    <p className='text-sm text-gray-300'>Register/SiginIn Today 👇</p>
5
        <div className="flex flex-col gap-5">
6
          <Button className="w-full" variant="outline">
7
            <FaGithub />
8
            Github
9
          </Button>
10
          <Button className="w-full" variant="outline">
11
            <AiFillGoogleCircle />
12
            Google
13
          </Button>
14
        </div>
15

16
...

화면

7-glowBox 추가

css 복사

1
.glowBox{
2
  position: absolute;
3
  top: calc(50% - 20px);
4
  left: calc(50% - 20px);
5
  width: 40px;
6
  height: 40px;
7
  border-radius: 50%;
8
  background-color: #fff;
9
  box-shadow:
10
    0 0 60px 30px #fff,
11
    0 0 100px 60px #f0f,
12
    0 0 140px 90px #0ff;
13
}

global.css 붙여넣기 next-with-supabase\app\globals.css

1
.glowBox {
2
  position: absolute;
3
  top: calc(50% - 20px);
4
  left: calc(50% - 20px);
5
  width: 40px;
6
  height: 40px;
7
  border-radius: 50%;
8
  background-color: #fff;
9
  box-shadow:
10
    0 0 60px 30px #fff,
11
    0 0 100px 60px #f0f,
12
    0 0 140px 90px #0ff;
13
}

class 추가 next-with-supabase\app\auth\page.tsx

1
...
2
    <div className="flex items-center justify-center w-full h-screen">
3
      <div className="w-96 rounded-md border p-5 space-y-5** relative  bg-slate-900"**">
4
        <div className="flex items-center gap-2">
5
          <KeyRound color="#dedede" />
6
          <h1 className="text-2xl font-bold">next+supabase</h1>
7
        </div>
8
        <p className="text-sm text-gray-300">Register/SiginIn Today 👇</p>
9

10
        <div className="flex flex-col gap-5">
11
          <Button className="w-full" variant="outline">
12
            <FaGithub />
13
            Github
14
          </Button>
15
          <Button className="w-full" variant="outline">
16
            <AiFillGoogleCircle />
17
            Google
18
          </Button>
19
        </div>
20
**        <div className="glowBox  -z-10"></div>**
21
      </div>
22
    </div>
23
    ...

실행화면