# 관련링크 - [재생목록](https://www.youtube.com/playlist?list=PLE0hRBClSk5KYZdNREywEAVI-iEvhJLXZ) - [몰입코딩 - Next.js 인증/인가 - slog.gg/p/13999](https://slog.gg/p/13999#f) - [재생목록 - 생활코딩 - OAuth 2.0](https://www.youtube.com/playlist?list=PLuHgQVnccGMA4guyznDlykFJh28_R08Q-) # 1강 - [25 01 20, p 14005, 1강, slog 13999 수업의 33강 소스코드를 복사해서 프로젝트에 적용](https://youtu.be/LPsrZXRriaY) - [몰입코딩 - 스프링부트, Next.js 연동 - slog.gg/p/13999#33강](https://slog.gg/p/13999#33강) ## 설명 - [재생목록 - 생활코딩 - OAuth 2.0](https://www.youtube.com/playlist?list=PLuHgQVnccGMA4guyznDlykFJh28_R08Q-) - OAuth 2.0의 개념이 부족하시다면 위 영상을 보시기 바랍니다. - 굉장히 쉽고 재미있게 되어 있습니다. ## 프로젝트 폴더 복사 - 기존 프로젝트 폴더 : ~/IdeaProjects/spring-next-js-auth-2025-01-17 - 새 프로젝트 폴더 : ~/IdeaProjects/spring-next-oauth2-2025-01-20 ```bash cd ~/IdeaProjects cp -r spring-next-js-auth-2025-01-17 spring-next-oauth2-2025-01-20 du -sh spring-next-oauth2-2025-01-20 # 용량확인 ``` # 2강 - [25 01 20, p 14005, 2강, 백, 어플리케이션의 이름과 일부 패키지를 새 프로젝트명에 맞게 변경](https://youtu.be/XcwRBb8WG-M) # 3강 - [25 01 20, p 13999, 3강, 백, GIT PUSH](https://youtu.be/mkhvShtKd-M) - [GITHUB - 저장소 생성 - https://github.com/new](https://github.com/new) - [GITHUB - 저장소 - https://github.com/jhs512/next-oauth2-2025-01-20](https://github.com/jhs512/next-oauth2-2025-01-20) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/141ecc2) # 4강 - [25 01 20, p 14005, 4강, 프, Next.js 15 프로젝트 생성, 터보팩 사용](https://youtu.be/VVdUfPc8Gzs) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/a4bb355) - ![img](https://i.postimg.cc/L6BTxjSc/image.png) # 5강 - [25 01 20, p 14005, 5강, 프, 프리텐다드 폰트를 local 폰트로 설치](https://youtu.be/Ju5Vx4fDc9c) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/8471e21) ## 설명 - 프리텐다드 폰트란?(제품 퀄리티를 2배이상 올려주는 마법의 폰트) - 한글과 영문을 모두 지원하는 오픈소스 글꼴 - 깔끔하고 현대적인 디자인으로 웹사이트에서 많이 사용됨 - 가독성이 좋고 다양한 굵기(weight)를 제공 - 라이선스가 자유로워 상업적 이용도 가능 - 네이버, 카카오 등 국내 주요 IT 기업들도 사용하는 인기 폰트 ## pretendard 폰트 설치 ```bash npm install pretendard ``` # 6강 - [25 01 20, p 14005, 6강, 프, 폰트어썸 설치](https://youtu.be/hT6oREK_ASY) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/414c8ae) ## 설명 - 폰트어썸 이란? - 웹에서 사용할 수 있는 벡터 아이콘 및 소셜 로고 툴킷 - 무료와 유료 버전이 있으며, 무료 버전도 충분히 많은 아이콘 제공 - 주요 특징 - 확장성이 좋은 벡터 기반 아이콘 - CSS로 크기, 색상 등을 쉽게 커스터마이징 가능 - 웹폰트 방식으로 빠른 로딩 - 반응형 디자인 지원 - 브라우저 호환성이 좋음 - 개발자와 디자이너들 사이에서 가장 인기있는 아이콘 라이브러리 중 하나 ## pretendard 폰트 설치 ```bash npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/react-fontawesome@latest ``` ## 폰트어썸 무료 아이콘 목록 - [https://fontawesome.com/search?ic=free](https://fontawesome.com/search?ic=free) # 7강 - [25 01 20, p 14005, 7강, 프, 샤드CN 설치](https://youtu.be/mmXTPUKgPUo) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/646587d) - [샤드CN](https://ui.shadcn.com) - [샤드CN - 문서](https://ui.shadcn.com/docs) - [샤드CN - 문서 - 컴포넌트](https://ui.shadcn.com/docs/components) - [샤드CN - 문서 - 컴포넌트 - 버튼](https://ui.shadcn.com/docs/components/button) ## 설명 - 샤드CN 이란? - Shadcn/ui는 React 컴포넌트 라이브러리 - 재사용 가능한 컴포넌트들을 제공하는 오픈소스 프로젝트 - 주요 특징 - 접근성이 뛰어난 컴포넌트 제공 - Radix UI를 기반으로 구축 - Tailwind CSS로 스타일링 - 커스터마이징이 자유로움 - 복사-붙여넣기 방식으로 필요한 컴포넌트만 사용 가능 - Next.js, React 프로젝트에서 널리 사용되는 UI 컴포넌트 시스템 ## 샤드CN 설치 ```bash npx shadcn@latest init -d # Use --legacy-peer-deps 선택, 이후에도 계속 이걸로 선택 ``` ## 샤드CN 버튼 설치 ```bash npx shadcn@latest add button ``` # 8강 - [25 01 22, p 14005, 8강, 프, Next.js 에서 샤드CN 다크모드 적용, 홈에 카카오 로그인 버튼 추가](https://youtu.be/-YRzpwYeK_8) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/9337c26) - [샤드CN - 다크모드 - Next.js - https://ui.shadcn.com/docs/dark-mode/next](https://ui.shadcn.com/docs/dark-mode/next) - [샤드CN - 문서 - 컴포넌트 - 드롭다운메뉴](https://ui.shadcn.com/docs/components/dropdown-menu) - [lucide 아이콘 - 아이콘 목록](https://lucide.dev/icons/) - 샤드CN을 설치하면 같이 설치되는 아이콘 라이브러리 - 꼭 샤드CN에서 lucide를 써야하는 건 아니다. - 다른 아이콘 라이브러리도 사용 가능하다.(예를들면 폰트어썸) ## next-themes 설치 ```bash npm install next-themes ``` ## 샤드CN 드롭다운메뉴 설치 ```bash npx shadcn@latest add dropdown-menu ``` ## 설명 - 소셜 로그인을 처리하는 여러가지 방법이 있다. - Next.js 에서 처리하는 방법 - 백엔드에서 처리하는 방법 - 백엔드쪽에서 모든 처리를 하는 방식으로 진행할 예정이다. # 9강 - [25 01 22, p 14005, 9강, 프, 테일윈드에 특수 기능, on, group-on, peer-on 추가구현](https://youtu.be/u5HYloSKY6Q) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/806060d) - [영상 - 테일윈드 특수 기능(on, group-on, peer-on) - https://www.slog.gg/p/13752#3강](https://www.slog.gg/p/13752#3강) # 10강 - [25 01 22, p 14005, 10강, 프, 이왕이면 클라이언트 컴포넌트가 좋다, 백엔드 실행하여 lib/backend/apiV1/schema.d.ts 생성](https://youtu.be/Ut0XggckStQ) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/ee71bd4) ## 설명 - 백엔드 실행하여 frontend/src/lib/backend/apiV1/schema.d.ts 생성 - 레이아웃의 경우 layout.tsx, ClientLayout.tsx 와 같이 2개의 파일을 만드는게 좋다. - 페이지의 경우 page.tsx, ClientPage.tsx 와 같이 2개의 파일을 만드는게 좋다. - 서버 컴포넌트는 페이지 이동마다 서버 렌더링이 발생한다. - 그래서 이왕이면 클라이언트 컴포넌트가 좋다. - layout.tsx 와 page.tsx 가 딱히 서버 컴포넌트일 필요가 없다면 클라이언트 컴포넌트로 만드는게 좋다. - 추후 layout.tsx 와 page.tsx 에서 fetch 를 해야한다면 그때 서버 컴포넌트로 변경하면 된다. # 11강 - [25 01 22, p 14005, 11강, 프, 관리자 로그인 기능 구현, 참고로 일반 사용자는 소셜로그인만 사용가능](https://youtu.be/cw5_fvOl9cY) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/c9f0b17) ## frontend/src/app/ClientLayout.tsx ```tsx "use client"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import * as React from "react"; import { Home, LogIn, LogOut, Moon, Settings, Sun, User } from "lucide-react"; import { useTheme } from "next-themes"; // 로그인 한 회원의 정보는 전역상태로 관리하는 것이 좋다. // LoginMemberContext : 이 컴포넌트의 하위 클라이언트 컴포넌트는 Context의 value 값을 `use` 함수로 얻을 수 있다. // useLoginMember : 현재 로그인한 회원의 정보(상태), 그리고 해당 정보와 관련된 함수들을 리턴해준다. import { LoginMemberContext, useLoginMember } from "@/stores/auth/loginMember"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; function ModeToggle() { const { setTheme } = useTheme(); return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ); } export function ClientLayout({ children, }: React.ComponentProps) { // 로그아웃 후 홈으로 이동하기 위해서 로드 const router = useRouter(); // 훅을 통해서 로그인 한 회원의 정보(state)와 관련된 함수들을 얻는다. const { setLoginMember, isLogin, loginMember, removeLoginMember, isLoginMemberPending, isAdmin, setNoLoginMember, } = useLoginMember(); // Context를 통해서 전역적으로 공유할 값을 만든다. const loginMemberContextValue = { loginMember, setLoginMember, removeLoginMember, isLogin, isLoginMemberPending, isAdmin, setNoLoginMember, }; useEffect(() => { // 추후 이 부분은 fetch(GET http://localhost:8080/api/v1/members/me) 로 대체될 예정이다. // 현재는 일단은 임시로 관리자 회원으로 로그인 했다고 가정하기 위해서 아래와 같이 선언 // 실제로 나중에 fetch로 변경될 때도 fetch가 완료되는데 걸리는 시간이 걸린다. // 그 상황을 실감나게 흉내내기 위해서 setTimeout을 사용하였다. const timeout = setTimeout(() => { // 로그인에 성공한 경우 setLoginMember({ id: 2, createDate: "", modifyDate: "", nickname: "admin", }); // 로그인에 실패한 경우 // setNoLoginMember(); }, 1000); return () => clearTimeout(timeout); }, []); // isLoginMemberPending 의 시작상태는 true 이다. // 해당값이 true 라는 것은 아직 로그인 상태인지 아닌지 판별되기 전이라는 의미이다. // setLoginMember, setNoLoginMember, removeLoginMember 함수가 호출되면 해당값이 false 로 변경된다. if (isLoginMemberPending) { return (

인증 정보 로딩중...

); } const logout = () => { // 나중에는 fetch(DELETE http://localhost:8080/api/v1/members/logout) 가 선행된 후 removeLoginMember(); 가 실행되는 구조로 변경될 예정이다. removeLoginMember(); router.replace("/"); }; return ( {/* 이 안의 모든 곳에서 `loginMemberContextValue` 변수를 `use` 함수를 통해서 접근할 수 있다. */} {/* 하지만 여기서는 어짜피 useLoginMember 함수의 실행결과가 바로 있기 때문에 딱히 `use` 를 사용할 필요가 없다. */}

{isAdmin && ( )} {isLogin && ( )} {isLogin && ( )} {!isLogin && ( )}

{children}

); } ``` ## frontend/src/app/ClientPage.tsx ```tsx "use client"; import { Button } from "@/components/ui/button"; import { LoginMemberContext } from "@/stores/auth/loginMember"; // LoginMemberContext(by React Context API) 를 통해서 공유되는 전역객체를 가져오기 위해 import { MessageCircle } from "lucide-react"; import { use } from "react"; // React Context API을 통해서 공유되는 전역객체를 가져오기 위해 사용하는 함수 `use` 로드 export default function ClientPage() { // frontend/src/app/ClientLayout.tsx 의 `` 를 통해서 공유된 value 에서 필요한 특정 값들만 가져온다. const { isLogin, loginMember } = use(LoginMemberContext); const socialLoginForKakaoUrl = `http://localhost:8080/oauth2/authorization/kakao`; const redirectUrlAfterSocialLogin = "http://localhost:3000"; return (

{!isLogin && ( )} {isLogin &&

{loginMember.nickname}님 환영합니다.

}

); } ``` ## frontend/src/app/adm/page.tsx ```tsx "use client"; import RequireAdmin from "@/lib/auth/components/RequireAdmin"; // /adm 경로로 접속하기 위해서는 관리자 로그인이 필요하도록 세팅하기 위해서 import ClientPage from "./ClientPage"; export default function Page() { return ( ); } ``` ## frontend/src/lib/auth/components/RequireAdmin.tsx - 관리자 로그인 상태에서만 접근 가능한 페이지로 만들기 위해서 사용된다. - frontend/src/lib/auth/components/RequireAnonymous.tsx 도 있다. - 로그아웃 상태에서만 접근 가능한 페이지로 만들기 위해서 사용된다. - frontend/src/lib/auth/components/RequireLogin.tsx 도 있다. - 로그인 상태에서만 접근 가능한 페이지로 만들기 위해서 사용된다. ```tsx import { Button } from "@/components/ui/button"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import Link from "next/link"; import { use } from "react"; export default function RequireAdmin({ children, }: { children: React.ReactNode; }) { const { isAdmin } = use(LoginMemberContext); if (!isAdmin) return (

해당 페이지는 관리자만 이용할 수 있습니다.

); return <>{children}; } ``` ## frontend/tailwind.config.ts ```ts import type { Config } from "tailwindcss"; export default { darkMode: ["class"], content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/components/**/*.{js,ts,jsx,tsx,mdx}", // 이 부분을 추가해야 src/lib/auth/components 에서 작성한 컴포넌트들까지 테일윈드가 인식하게 된다.(그래야 JIT이 올바르게 작동한다.) ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [ require("tailwindcss-animate"), function ({ addVariant }: { addVariant: any }) { const groupVariantPrefixes = ["p1", "p2", "p3"]; function escapeClassName(className: string) { return className.replace(/[\[\]\+\*\#\/\%]/g, "\\$&"); } // group-on 변형 추가 함수 const addGroupOnVariant = (name = "") => { const selector = name ? `group\\/${name}` : "group"; const variantName = name ? `group-on/${name}` : "group-on"; addVariant( variantName, ({ modifySelectors }: { modifySelectors: any }) => { modifySelectors(({ className }: { className: any }) => { return `.${selector}.on .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); } ); }; // peer-on 변형 추가 함수 const addPeerOnVariant = (name = "") => { const selector = name ? `peer\\/${name}` : "peer"; const variantName = name ? `peer-on/${name}` : "peer-on"; addVariant( variantName, ({ modifySelectors }: { modifySelectors: any }) => { modifySelectors(({ className }: { className: any }) => { return `.${selector}.on ~ .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); } ); }; // 기본 group-on, peer-on 변형 추가 addGroupOnVariant(); addPeerOnVariant(); // 특정 그룹과 피어에 대한 변형 추가 groupVariantPrefixes.forEach((name) => { addGroupOnVariant(name); addPeerOnVariant(name); }); // on 클래스에 대한 변형 추가 addVariant("on", ({ modifySelectors }: { modifySelectors: any }) => { modifySelectors(({ className }: { className: any }) => { return `.on.on\\:${escapeClassName(className)}`; }); }); }, ], } satisfies Config; ``` # 12강 - [25 01 22, p 14005, 12강, 프, 관리자 로그인 기능 구현](https://youtu.be/bpDochGtEW4) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/a758fb4) ### openapi-fetch 라이브러리 - [openapi-fetch - https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch) ## openapi-fetch 라이브러리 설치 ```bash npm i openapi-fetch npm i -D openapi-typescript ``` ## 샤드CN 토스트 설치 ```bash npx shadcn@latest add toast ``` ## frontend/src/lib/backend/client.ts ```tsx import type { paths } from "@/lib/backend/apiV1/schema"; import createClient from "openapi-fetch"; const client = createClient({ baseUrl: "http://localhost:8080", credentials: "include", }); export default client; ``` ## frontend/src/app/layout.tsx ```tsx import type { Metadata } from "next"; import localFont from "next/font/local"; import "./globals.css"; import { config } from "@fortawesome/fontawesome-svg-core"; import "@fortawesome/fontawesome-svg-core/styles.css"; import { ClientLayout } from "./ClientLayout"; import { Toaster } from "@/components/ui/toaster"; config.autoAddCss = false; const pretendard = localFont({ src: "./../../node_modules/pretendard/dist/web/variable/woff2/PretendardVariable.woff2", display: "swap", weight: "45 920", variable: "--font-pretendard", }); export const metadata: Metadata = { title: "글로그", description: "글로그는 당신을 위한 기술 블로그 입니다.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} {/* 샤드CN 토스트 컴포넌트, 이게 있어야 토스트 컴포넌트가 정상적으로 작동함 */} ); } ``` ## frontend/src/app/ClientLayout.tsx ```tsx "use client"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import * as React from "react"; import { Home, LogIn, LogOut, Moon, Settings, Sun, User } from "lucide-react"; import { useTheme } from "next-themes"; import { LoginMemberContext, useLoginMember } from "@/stores/auth/loginMember"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; import client from "@/lib/backend/client"; function ModeToggle() { const { setTheme } = useTheme(); return ( setTheme("light")}> Light setTheme("dark")}> Dark setTheme("system")}> System ); } export function ClientLayout({ children, }: React.ComponentProps) { const router = useRouter(); const { setLoginMember, isLogin, loginMember, removeLoginMember, isLoginMemberPending, isAdmin, setNoLoginMember, } = useLoginMember(); const loginMemberContextValue = { loginMember, setLoginMember, removeLoginMember, isLogin, isLoginMemberPending, isAdmin, setNoLoginMember, }; useEffect(() => { // useEffect 의 인자는 async 함수를 넣을 수 없다. // 그래서 아래에서 프로미스 문법사용 // 참고로 현재 브라우저에 쿠키가 있어도 http only 이기 때문에 로그인한 회원의 정보는 이렇게 확인해야 한다. client.GET("/api/v1/members/me").then((res) => { if (res.error) { // accessToken 쿠키와 apiKey 쿠키 중 둘다 없거나 둘다 만료된 경우 여기가 실행된다. setNoLoginMember(); } else { // accessToken 쿠키 or apiKey 쿠키 중 하나가 유효하다면 여기가 실행된다. setLoginMember(res.data); } }); }, []); if (isLoginMemberPending) { return (

인증 정보 로딩중...

); } const logout = () => { // 이제 로그아웃도 쿠키를 지운 후 로컬 상태를 갱신한다. // 참고로 토큰 쿠키들을 http only 이기 때문에 이렇게 삭제해야 한다. client.DELETE("/api/v1/members/logout").then((res) => { removeLoginMember(); router.replace("/"); }); }; return (

{isAdmin && ( )} {isLogin && ( )} {isLogin && ( )} {!isLogin && ( )}

{children}

); } ``` ## frontend/src/app/adm/member/login/ClientPage.tsx ```tsx "use client"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; import client from "@/lib/backend/client"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import { useRouter } from "next/navigation"; import { use } from "react"; export default function ClientPage() { const router = useRouter(); const { setLoginMember } = use(LoginMemberContext); const { toast } = useToast(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const form = e.target as HTMLFormElement; if (form.username.value.length === 0) { toast({ title: "아이디를 입력해주세요.", variant: "destructive", }); form.username.focus(); return; } if (form.password.value.length === 0) { toast({ title: "비밀번호를 입력해주세요.", variant: "destructive", }); form.password.focus(); return; } const response = await client.POST("/api/v1/members/login", { body: { username: form.username.value, password: form.password.value, }, }); if (response.error) { toast({ title: response.error.msg, variant: "destructive", }); return; } toast({ title: response.data.msg, }); setLoginMember(response.data.data.item); router.replace("/"); }; return (

관리자 로그인

); } ``` # 13강 - [25 01 23, p 14005, 13강, 프, 샤드CN은 부트스트랩보다 훨씬 좋습니다. 안쓰면 손해입니다.](https://youtu.be/1n-u8VMq1MA) ## 설명 - 샤드CN은 부트스트랩보다 훨씬 좋습니다. 안쓰면 손해입니다. - 샤드CN의 컴포넌트는 원하는 것만 골라서 가져올 수 있습니다. - 그리고 부트스트랩과 달리 해당 컴포넌트를 커스텀할 수 있습니다. - 컴포넌트 자체를 수정하는 것도 가능하고 - 컴포넌트를 사용할 때 옵션을 줄 수 있습니다. - 그리고 샤드CN은 다크테마를 지원하고 Next.js의 테마와도 잘 연동이 됩니다. - 그리고 샤드CN의 디자인 퀄리티가 굉장히 좋습니다. # 14강 - [25 01 23, p 14005, 14강, 프, openapi-fetch는 서버와의 통신 로직을 자동으로 만들어주는 라이브러리 입니다. 안쓰면 손해입니다.](https://youtu.be/zziAEEIIp5Q) ## 설명 - openapi-fetch는 서버와의 통신 로직을 자동으로 만들어주는 라이브러리 입니다. 안쓰면 손해입니다. - 보통 `src/lib/backend/client.ts` 파일을 만들어서 사용합니다. - openapi-fetch가 자동으로 만들어지지 않는 기능들은 `src/lib/backend/client.ts` 파일에 직접 추가하면 됩니다. # 15강 - [25 01 23, p 14005, 15강, 프, 비지니스 로직이 포함되어 있는 UI 컴포넌트는 비지니스 컴포넌트이다. LoginForm](https://youtu.be/nKkTMMtTzJU) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/392a8f4) ## frontend/src/app/adm/member/login/ClientPage.tsx ```tsx "use client"; import LoginForm from "@/lib/business/components/LoginForm"; export default function ClientPage() { return (

관리자 로그인

); } ``` ## frontend/src/lib/business/components/LoginForm.tsx ```tsx "use client"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; import client from "@/lib/backend/client"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import { useRouter } from "next/navigation"; import { use } from "react"; export default function LoginForm() { const router = useRouter(); const { setLoginMember } = use(LoginMemberContext); const { toast } = useToast(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const form = e.target as HTMLFormElement; if (form.username.value.length === 0) { toast({ title: "아이디를 입력해주세요.", variant: "destructive", }); form.username.focus(); return; } if (form.password.value.length === 0) { toast({ title: "비밀번호를 입력해주세요.", variant: "destructive", }); form.password.focus(); return; } const response = await client.POST("/api/v1/members/login", { body: { username: form.username.value, password: form.password.value, }, }); if (response.error) { toast({ title: response.error.msg, variant: "destructive", }); return; } toast({ title: response.data.msg, }); setLoginMember(response.data.data.item); router.replace("/"); }; return ( ); } ``` # 16강 - [25 01 23, p 14005, 16강, 프, 정해진 폴더 이외에 구현한 컴포넌트에서 기본적으로는 테일윈드가 작동하지 않는다.](https://youtu.be/y13BB5kdfr0) ## tailwind.config.ts ```ts import type { Config } from "tailwindcss"; export default { darkMode: ["class"], content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./src/**/components/**/*.{js,ts,jsx,tsx,mdx}", // 이 부분 덕분에 비지니스 컴포넌트에서 테일윈드가 작동합니다. ], // 생략 } ``` # 17강 - [25 01 23, p 14005, 17강, 백, 카카오 로그인을 위해서 카카오 개발자에서 앱 생성, 카카오 로그인을 위한 설정, application-secret.yml 도입](https://youtu.be/Uvm2K8cuizs) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/52ded5f) - [카카오 개발자](https://developers.kakao.com) - [카카오 개발자 - 콘솔](https://developers.kakao.com/console) - [카카오 개발자 - 콘솔 - 앱](https://developers.kakao.com/console/app) ## 카카오 개발자에서 앱 생성 및 세팅 - ![img](https://i.postimg.cc/x8MhZHFh/image.png) - redirectUrl : `http://localhost:8080/login/oauth2/code/kakao` - 해당 URL은 Spring OAuth2 Client 라이브러리가 정한 URL 입니다. ## 설명 - 카카오 로그인을 위해서 카카오 개발자에서 앱 생성 - 프로젝트 마다 하나씩 생성해야 합니다. - 작업 : 로그인 활성화, 동의항목 지정, REDIRECT URL 설정, 앱키 확인 - application-secret.yml 도입 - 카카오 앱 키를 노출하지 않기 위해서 도입합니다. - 해당 파일은 비밀번호로 보호해야 합니다. # 18강 - [25 01 23, p 14005, 18강, 백, SpringSecurity 에서 oauth2Login 활성화](https://youtu.be/b6Fb1r89lOU) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/9ff9862) ## 카카오 로그인 시작 URL - [http://localhost:8080/oauth2/authorization/kakao](http://localhost:8080/oauth2/authorization/kakao) # 19강 - [25 01 23, p 14005, 19강, 백, Spring OAuth2 Client을 통한 카카오 로그인 과정 설명](https://youtu.be/JPDXv54tg4U) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/ee189f4) ## 설명 - Next.js 는 카카오 로그인에 대해서는 전혀 모른다.(이게 아름다운 구조 입니다.) - 카카오 로그인에 대해서는 스프링부트가 전담한다. - [세션 확인 - http://localhost:8080/session](http://localhost:8080/session) ## 스프링부트 OAuth2 Client 와 카카오와의 로그인 과정을 시퀀스 다이어그램을 설명(브라우저, 스프링부트, 카카오) $$uml @startuml participant "브라우저" as Browser participant "스프링부트" as SpringBoot participant "카카오" as Kakao Browser -> SpringBoot: 1. GET /oauth2/authorization/kakao SpringBoot -> Browser: 2. 302 Found Location: {카카오 로그인 페이지 URL} Browser -> Kakao: 3. GET {카카오 로그인 페이지 URL} Kakao -> Browser: 4. 200 OK {로그인 페이지 HTML} Browser -> Kakao: 5. POST /login {로그인 정보} Kakao -> Browser: 6. 302 Found Location: /login/oauth2/code/kakao?code=xxx Browser -> SpringBoot: 7. GET /login/oauth2/code/kakao?code=xxx SpringBoot -> Kakao: 8. POST /oauth/token {인증 코드} Kakao -> SpringBoot: 9. 200 OK {액세스 토큰} SpringBoot -> Kakao: 10. GET /v2/user/me Authorization: Bearer {액세스 토큰} Kakao -> SpringBoot: 11. 200 OK {사용자 정보 JSON} SpringBoot -> Browser: 12. 302 Found Set-Cookie: JSESSIONID=xxx @enduml $$ # 20강 - [25 01 23, p 14005, 20강, 백, DefaultOAuth2UserService 의 구현체를 추가하여 SecurityUser가 생성되도록](https://youtu.be/L1IyryxGgog) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/6991c8a) # 21강 - [25 01 23, p 14005, 21강, 백, 최초 로그인이면 가입, 그렇지 않으면 회원정보 수정으로 처리](https://youtu.be/Q0zjuNrzoKU) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/5855b81) # 22강 - [25 01 23, p 14005, 22강, 백, 회원이 프로필 이미지 URL도 가지도록, MemberDto에도 반영](https://youtu.be/Ykv8MOrnPhk) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/1abd25a) ## 설명 - 회원이 프로필 이미지 URL도 가지도록, MemberDto에도 반영 - 이제는 더 이상 GET localhost:8080/api/v1/members/me 가 accessToken 안의 데이터 만으로 처리되지 않습니다. - modifyDate, createDate, profileImageUrl 등의 데이터도 필요합니다. - 그래서 아쉽지만 내 정보 조회 시 마다 memberService.findById 를 호출해야 합니다. # 23강 - [25 01 23, p 14005, 23강, 백, 로그인 후 생성되는 SecurityUser 정보 제대로 입력, 프론트로 돌아오도록 처리](https://youtu.be/lgkjFUPfQqE) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/2f074f5) ## 설명 - 회원이 프로필 이미지 URL도 가지도록, MemberDto에도 반영 - 이제는 더 이상 GET localhost:8080/api/v1/members/me 가 accessToken 안의 데이터 만으로 처리되지 않습니다. - modifyDate, createDate, profileImageUrl 등의 데이터도 필요합니다. - 그래서 아쉽지만 내 정보 조회 시 마다 memberService.findById 를 호출해야 합니다. # 24강 - [25 01 23, p 14005, 24강, 백, OAuth 로그인의 표준 파라미터인 state를 이용해서 최종적으로 돌아갈 프론트엔드 주소 설정](https://youtu.be/bJ2iNGestUY) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/8e31321) # 25강 - [25 01 23, p 14005, 25강, 백, 로그아웃을 해도 계속 로그인이 유지되는 이유는 세션 때문, 세션끄기](https://youtu.be/Q28YWbriLdo) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/e326b28) # 26강 - [25 01 23, p 14005, 26강, 프, 로그인한 회원의 프로필 이미지 노출](https://youtu.be/kme1uG8j_KA) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/509cd72) # 27강 - [25 01 23, p 14005, 27강, 백, 테스트케이스에서 getProfileImgUrl 대신 getProfileImgUrlOrDefault 사용하여 통과](https://youtu.be/o_lP5slMDmM) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/0981a77) # 28강 - [25 01 23, p 14005, 28강, 프, react-hook-form 도입하여 유효성 체크결과를 조금 더 우아하게 표현](https://youtu.be/hecoBHkIUxQ) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/d3acd72) ## 설명 - react-hook-form 도입 - react-hook-form 의 역할 - 폼 유효성 검사를 더 효율적이고 우아하게 처리할 수 있게 해주는 라이브러리입니다. - 주요 기능: - 폼 상태 관리 - 유효성 검사 규칙 정의 및 적용 - 에러 메시지 처리 - 폼 제출 핸들링 - 필드 값 추적 및 업데이트 - 비제어 컴포넌트 방식으로 성능 최적화 - 장점: - 코드가 더 깔끔하고 유지보수가 쉬워짐 - 불필요한 리렌더링 감소로 성능 향상 - 복잡한 폼 로직을 쉽게 구현 가능 - TypeScript와 잘 통합됨 ## react-hook-form 설치 ```bash npm install react-hook-form ``` ## frontend/src/lib/business/components/LoginForm.tsx ### react-hook-form 도입 전 ```tsx "use client"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; import client from "@/lib/backend/client"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import { useRouter } from "next/navigation"; import { use } from "react"; export default function LoginForm() { const router = useRouter(); const { setLoginMember } = use(LoginMemberContext); const { toast } = useToast(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const form = e.target as HTMLFormElement; if (form.username.value.length === 0) { toast({ title: "아이디를 입력해주세요.", variant: "destructive", }); form.username.focus(); return; } if (form.password.value.length === 0) { toast({ title: "비밀번호를 입력해주세요.", variant: "destructive", }); form.password.focus(); return; } const response = await client.POST("/api/v1/members/login", { body: { username: form.username.value, password: form.password.value, }, }); if (response.error) { toast({ title: response.error.msg, variant: "destructive", }); return; } toast({ title: response.data.msg, }); setLoginMember(response.data.data.item); router.replace("/"); }; return ( ); } ``` ### react-hook-form 도입 후 ```tsx "use client"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; import client from "@/lib/backend/client"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import { useRouter } from "next/navigation"; import { use } from "react"; import { useForm } from "react-hook-form"; interface LoginFormInputs { username: string; password: string; } export default function LoginForm() { const router = useRouter(); const { setLoginMember } = use(LoginMemberContext); const { toast } = useToast(); const { register, handleSubmit, formState: { errors }, } = useForm(); const onSubmit = async (data: LoginFormInputs) => { const response = await client.POST("/api/v1/members/login", { body: { username: data.username, password: data.password, }, }); if (response.error) { toast({ title: response.error.msg, variant: "destructive", }); return; } toast({ title: response.data.msg, }); setLoginMember(response.data.data.item); router.replace("/"); }; return ( ); } ``` # 29강 - [25 01 23, p 14005, 29강, 프, react-hook-form에 zod 적용하여 선언적인 유효성 체크 도입](https://youtu.be/mi7z-0_X8RE) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/826b123) ## 설명 - zod 도입 - zod는 TypeScript 기반의 스키마 검증 라이브러리입니다. - 주요 기능: - 타입 안전성 보장 - 런타임 데이터 유효성 검사 - 복잡한 데이터 구조 검증 - 자동 타입 추론 - 에러 메시지 커스터마이징 - 장점: - TypeScript와 완벽한 통합 - 선언적이고 직관적인 API - 재사용 가능한 스키마 정의 - 복잡한 유효성 검사 규칙을 쉽게 구현 - 런타임 타입 안전성 보장 - react-hook-form과 함께 사용하면: - 폼 데이터의 타입 안전성 확보 - 선언적인 유효성 검사 규칙 정의 - 자동 에러 메시지 처리 - 타입스크립트 지원 강화 ## zod 설치 ```bash npm install zod @hookform/resolvers ``` ## frontend/src/lib/business/components/LoginForm.tsx ### zod 도입 후 ```tsx "use client"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; import client from "@/lib/backend/client"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import { useRouter } from "next/navigation"; import { use } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; const loginFormSchema = z.object({ username: z .string() .min(1, "아이디를 입력해주세요.") .min(4, "아이디는 4자 이상이여야 합니다.") .max(20, "아이디는 20자 이하여야 합니다."), password: z .string() .min(1, "비밀번호를 입력해주세요.") .min(4, "비밀번호는 4자 이상이어야 합니다.") .max(20, "비밀번호는 20자 이하여야 합니다."), }); type LoginFormInputs = z.infer; export default function LoginForm() { const router = useRouter(); const { setLoginMember } = use(LoginMemberContext); const { toast } = useToast(); const { register, handleSubmit, formState: { errors, isSubmitting }, } = useForm({ resolver: zodResolver(loginFormSchema), }); const onSubmit = async (data: LoginFormInputs) => { try { const response = await client.POST("/api/v1/members/login", { body: { username: data.username, password: data.password, }, }); if (response.error) { toast({ title: response.error.msg, variant: "destructive", }); return; } toast({ title: response.data.msg, }); setLoginMember(response.data.data.item); router.replace("/"); } catch (error) { toast({ title: "로그인 중 오류가 발생했습니다", variant: "destructive", }); } }; return ( ); } ``` # 30강 - [25 01 23, p 14005, 30강, 프, Form 도입하여 유효성과련 코드량을 더 줄임](https://youtu.be/XC3v2JH2PjA) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/1ca47b8) ## 설명 - 샤드CN 폼 도입 - 샤드CN 폼은 react-hook-form과 함께 사용하여 폼 관련 코드를 더욱 간소화하고 일관성 있게 만들어주는 컴포넌트 모음입니다. - 주요 기능: - Form 컴포넌트로 폼 상태 관리 통합 - FormField로 필드별 상태와 유효성 검사 처리 - FormItem으로 레이블, 입력, 에러메시지를 그룹화 - FormControl로 입력 요소 스타일링 통일 - FormMessage로 에러 메시지 표시 일관성 유지 - 장점: - 반복되는 폼 관련 마크업 감소 - 일관된 디자인 시스템 적용 용이 - 접근성(a11y) 자동 처리 - react-hook-form과의 완벽한 통합 ## 샤드CN 폼 설치 ```bash npx shadcn@latest add form input label ``` ## frontend/src/lib/business/components/LoginForm.tsx ### 샤드CN 폼 도입 후 ```tsx "use client"; import { Button } from "@/components/ui/button"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form"; import { Input } from "@/components/ui/input"; import { useToast } from "@/hooks/use-toast"; import client from "@/lib/backend/client"; import { LoginMemberContext } from "@/stores/auth/loginMember"; import { zodResolver } from "@hookform/resolvers/zod"; import { useRouter } from "next/navigation"; import { use } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; const loginFormSchema = z.object({ username: z .string() .min(1, "아이디를 입력해주세요.") .min(4, "아이디는 4자 이상이여야 합니다.") .max(20, "아이디는 20자 이하여야 합니다."), password: z .string() .min(1, "비밀번호를 입력해주세요.") .min(4, "비밀번호는 4자 이상이어야 합니다.") .max(20, "비밀번호는 20자 이하여야 합니다."), }); type LoginFormInputs = z.infer; export default function LoginForm() { const router = useRouter(); const { setLoginMember } = use(LoginMemberContext); const { toast } = useToast(); const form = useForm({ resolver: zodResolver(loginFormSchema), defaultValues: { username: "", password: "", }, }); const onSubmit = async (data: LoginFormInputs) => { try { const response = await client.POST("/api/v1/members/login", { body: { username: data.username, password: data.password, }, }); if (response.error) { toast({ title: response.error.msg, variant: "destructive", }); return; } toast({ title: response.data.msg, }); setLoginMember(response.data.data.item); router.replace("/"); } catch (error) { toast({ title: "로그인 중 오류가 발생했습니다", variant: "destructive", }); } }; return (

( 아이디 )} /> ( 비밀번호 )} /> ); } ``` # 31강 - [25 01 24, p 14005, 31강, 프, PC 모니터의 해상도와 모바일 디스플레이의 해상도가 다르기 때문에 똑같은 사이즈의 이미지의 크기가 다르게 나온다.](https://youtu.be/q_Glya_pCIE) - [CODEPEN](https://codepen.io/jangka44/pen/KwPrKpj) - [CODEPEN - debug](https://cdpn.io/pen/debug/KwPrKpj) # 32강 - [25 01 24, p 14005, 32강, 프, viewport 설정(width=device-width)을 통해서 이미지가 모든 기기에서 똑같은 사이즈로 나오도록, 반응형에서는 필수](https://youtu.be/Mjj9QN2XoUY) - [CODEPEN](https://codepen.io/jangka44/pen/QwLJWjP) - [CODEPEN - debug](https://cdpn.io/pen/debug/QwLJWjP) ## 설명 - `` 의 의미 - viewport는 웹페이지가 표시되는 영역을 의미 - width=device-width: 뷰포트의 너비를 기기의 실제 너비로 설정 - 여기서 중요한게 기기의 실제 너비 - 이제 더 이상 각 기기의 디스플레이 성능에 따라서 사람의 눈에 html 요소(텍스트, 이미지, 비디오 등)의 크기가 달라지지 않음 - initial-scale=1: 초기 화면 배율을 1로 설정(100% 크기) - 이 메타 태그가 없으면 모바일에서 PC 버전 사이트를 축소해서 보여주게 됨 - 반응형 웹 디자인을 위해 필수적인 설정 # 33강 - [25 01 24, p 14005, 33강, 프, 웹 이미지를 3배수로 만들면 모든 디바이스에서 이미지가 깨지지 않는다.](https://youtu.be/Y_N53gbC3kA) - [CODEPEN](https://codepen.io/jangka44/pen/wBwQveO) - 원본 이미지 크기 : 900x1500 - 노출 이미지 크기 : 300x500 - CSS width를 이용해서 강제로 너비를 300px로 설정 - [CODEPEN - debug](https://cdpn.io/pen/debug/wBwQveO) ## 설명 - 웹 이미지를 3배수로 만들면 모든 디바이스에서 이미지가 깨지지 않는다. - 이미지 크기를 3배수로 만드는 이유: - 레티나 디스플레이와 같은 고해상도 화면 지원 - 디바이스별 픽셀 밀도 차이 대응 - 이미지 품질 저하 방지 - 확대했을 때도 선명도 유지 - 예시: - 100x100 픽셀 이미지 -> 300x300 픽셀로 제작 - CSS에서는 원래 크기인 100x100으로 표시 - 고해상도 디스플레이에서 자동으로 적절한 크기로 표시됨 # 34강 - [25 01 24, p 14005, 34강, 프, NextImage 도입하여 프로필 이미지가 어떤 디스플레이에서도 품질저하가 없도록](https://youtu.be/Am6IhMPF5_c) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/5656014) ## frontend/next.config.ts ```ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { dangerouslyAllowSVG: true, // svg 이미지도 허용하도록 설정 domains: ["img1.kakaocdn.net", "placehold.co"], contentSecurityPolicy: "default-src 'self'; img-src 'self' data: https:;", // 보안설정 }, }; export default nextConfig; ``` # 35강 - [25 01 24, p 14005, 35강, 프, nextConfig 에서 domains(deprecated) 대신 remotePatterns 사용](https://youtu.be/sUuXqjOhHpg) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/2818bef) ## frontend/next.config.ts ```ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { dangerouslyAllowSVG: true, remotePatterns: [ { protocol: "http", hostname: "img1.kakaocdn.net", }, { protocol: "https", hostname: "img1.kakaocdn.net", }, { protocol: "https", hostname: "placehold.co", }, ], contentSecurityPolicy: "default-src 'self'; img-src 'self' data: https:;", }, }; export default nextConfig; ``` # 36강 - [25 01 24, p 14005, 36강, 프, 테마토글버튼을 비지니스 컴포넌트로 만들어서 ClientLayout.tsx 으로 부터 분리](https://youtu.be/VenWmAbdHlc) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/c619c4f) # 37강 - [25 01 24, p 14005, 37강, 프, MeMenuButton을 비지니스 컴포넌트로 만들어서 ClientLayout.tsx 으로 부터 분리](https://youtu.be/AUDCosio2fA) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/3b349ef) # 38강 - [25 01 24, p 14005, 38강, 프, 테마토글버튼의 드롭다운메뉴아이템에 아이콘 추가, 꾸미기](https://youtu.be/rmd5py-4FRE) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/542c7f7) # 39강 - [25 01 24, p 14005, 39강, 프, 일반 사용자에게 필요없는 관리자 로그인 버튼을 하단바로 이동](https://youtu.be/pfX_X5jGLPw) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/e3e548c) # 40강 - [25 01 24, p 14005, 40강, 프, lg를 기준으로 NarrowHeaderContent 와 WideHeaderContent 가 교체되도록](https://youtu.be/yRWBHtjmd6w) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/785ca55) # 41강 - [25 01 24, p 14005, 41강, 프, Logo 컴포넌트 만들어서 Wide 와 Narrow 에 적용](https://youtu.be/LwFE2B-PShQ) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/c5a3fae) # 42강 - [25 01 24, p 14005, 42강, 프, Wide 와 달리 Narrow 에는 공간이 부족하다.](https://youtu.be/eTwlUjWN090) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/e694755) # 43강 - [25 01 24, p 14005, 43강, 프, 샤드CN 드로어 도입](https://youtu.be/gp889pblq_w) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/b18e8bd) ## 샤드CN 드로어 설치 ```bash npx shadcn@latest add drawer ``` # 44강 - [25 01 24, p 14005, 44강, 프, 드로어 입체 효과, 드로어에 전체 메뉴 구성](https://youtu.be/gEh05u4db-Q) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/5db71ef) # 45강 - [25 01 24, p 14005, 45강, 프, 드로어의 버튼을 클릭하면 드로어가 닫히도록, 드로어 내용을 hr 로 구분](https://youtu.be/sx9y-jJ5cHI) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/30b3055) # 46강 - [25 01 24, p 14005, 46강, 프, useGlobalLoginMember 훅 도입, logout 함수 중복 제거](https://youtu.be/WzgSj4s4VmA) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/f746c31) ## 작업 1 : useGlobalLoginMember 훅 도입 - 기존 코드 : `const { isLogin, loginMember } = use(LoginMemberContext);` - 신규 코드 : `const { isLogin, loginMember } = useGlobalLoginMember();` - 작업이유 - 기존 코드는 `use`와 `LoginMemberContext`를 import 해야했었음 - 신규 코드는 `useGlobalLoginMember`를 import 해야함 ## 작업 2 : 로그인 이 필요한 페이지의 버튼은 로그인 시에만 노출 - 작성, 내 정보, 로그아웃 페이지 링크버튼 중 미처 로그인 상태에 따른 노출처리를 안한 부분이 있었는데 해결 ## 작업 3 : 로그아웃 함수를 각 컴포넌트에서 만들지 않고 `frontend/src/stores/auth/loginMember.tsx` 에서 작성 - 각 컴포넌트에서 중복된 로그아웃 함수를 작성하는 것을 방지하기 위해서 # 47강 - [25 01 24, p 14005, 47강, 프, `npm run typecheck` 명령으로 소스코드 전체대상으로 타입스크립트 문법오류 체크](https://youtu.be/tMxFDiJuA4g) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/a6f8395) ## 타입스크립트 문법오류 체크 명령어 ```bash npm run typecheck ``` # 48강 - [25 01 24, p 14005, 48강, 프, eslint 가 샤드CN 컴포넌트를 무시하도록 설정, eslint 경고 제거작업](https://youtu.be/AILoc3X5rq0) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/f1a0b07) ## 작업 1 : eslint 가 샤드CN 컴포넌트를 검사하지 않도록 설정 - 샤드CN 컴포넌트들은 이미 검증된 컴포넌트이고 - 개발자가 수정하지 않을 것이기 때문에 경고를 발생시키지 않도록 설정 ## 작업 2 : 사용하지 않는 변수제거, eslint-disable-next-line react-hooks/exhaustive-deps 추가 등으로 eslint 경고 제거작업 - 사용하지 않는 변수제거 - eslint-disable-next-line react-hooks/exhaustive-deps 추가 # 49강 - [25 01 24, p 14005, 49강, 프, VS CODE 에서 소스코드 저장시 자동으로 import 부분을 정렬해주는 라이브러리 적용](https://youtu.be/KlzDJ8oOGxA) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/e646d51) ## 작업 1 : 소스코드에서 import 부분을 자동으로 정렬해주는 라이브러리 추가 - @trivago/prettier-plugin-sort-imports - frontend/prettier.rc 의 importOrder 부분에 정렬룰 세팅 - 이제 VS CODE에서 소스코드를 저장할 때 자동으로 import 부분이 정렬됨 - 여전히 사용하지 않은 import 는 optimize imports 기능을 사용해서 제거해야함 ## 작업 2 : npm run format 과 npm run check 명령어 추가 - npm run format : 전체 소스코드 대상으로 포메팅 - npm run check : 전체 소스코드에 대하여 포메팅 성공 후, 타입스크립트 문법오류체크 통과 후, 린트 체크 - 앞으로 이 명령어를 자주 사용할 예정 ## prettier, @trivago/prettier-plugin-sort-imports 설치 ```bash npm install --save-dev prettier @trivago/prettier-plugin-sort-imports ``` ## frontend/prettier.rc ```json { "plugins": ["@trivago/prettier-plugin-sort-imports"], "importOrder": [ "^next-(.*)$", "^next/(.*)$", "^@/lib/backend/client", "^@/lib/(.*)$", "^@/stores/(.*)$", "^@/components/ui/(.*)$", "^@/hooks/(.*)$", "^lucide-react$", "^[./]" ], "importOrderSeparation": true, "importOrderSortSpecifiers": true } ``` ## frontend/.prettierrcignore ``` # .next .next # shadcn src/components/** src/hooks/** # 빌드 결과물 dist build coverage tsconfig.tsbuildinfo # 의존성 디렉토리 node_modules # 로그 파일 *.log log/** # 환경 설정 파일 .git .env .env.* # 캐시 디렉토리 .cache # 기타 무시할 파일 package-lock.json yarn.lock ``` ## frontend/package.json ```json { "name": "frontend", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint", "typecheck": "tsc --noEmit", "format": "prettier --write . --ignore-path .prettierrcignore", // 추가 : 전체 소스코드를 포메팅 "check": "npm run format && npm run typecheck && npm run lint" // 추가 : 전체 소스코드에 대하여 포메팅 성공 후, 타입스크립트 문법오류체크 통과 후, 린트 체크 }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-brands-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/react-fontawesome": "^0.2.2", "@hookform/resolvers": "^3.10.0", "@radix-ui/react-dialog": "^1.1.5", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-toast": "^1.2.4", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.473.0", "next": "15.1.5", "next-themes": "^0.4.4", "openapi-fetch": "^0.13.4", "pretendard": "^1.3.9", "react": "^19.0.0", "react-dom": "^19.0.0", "react-hook-form": "^7.54.2", "tailwind-merge": "^2.6.0", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "^3.24.1" }, "devDependencies": { "@eslint/eslintrc": "^3", "@trivago/prettier-plugin-sort-imports": "^5.2.1", // 추가 "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.1.5", "openapi-typescript": "^7.5.2", "postcss": "^8", "prettier": "^3.4.2", // 추가 "tailwindcss": "^3.4.1", "typescript": "^5" } } ``` # 50강 - [25 01 24, p 14005, 50강, 프, logout 후 홈으로 이동하는 logoutAndHome 이라는 함수를 loginMember.ts 에서 작성 후 공유](https://youtu.be/oNIpAWJF118) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/db9b3e6) # 51강 - [25 01 24, p 14005, 51강, 프, PC 모드로의 진입점을 lg가 아니라 sm 으로, 너무 넓어지지 않도록 container 적용](https://youtu.be/FZvSk0gEHXw) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/5fb3602) ## 작업 1 : 상단바의 교체시기를 lg가 아니라 sm으로 변경 ### 기존 코드 ```tsx ``` ### 신규 코드 ```tsx ``` ## 작업 2 : 상단바에 컨테이너 적용 ### 기존 코드 ```tsx

``` ### 신규 코드 ```tsx

``` # 52강 - [25 01 24, p 14005, 52강, 프, src/lib/backend/apiV1/schema.d.ts 도 린트와 포메팅 대상에서 제외](https://youtu.be/_uaCnYyPQC8) - [커밋](https://github.com/jhs512/next-oauth2-2025-01-20/commit/4db16a8)

스프링부트, Next.js, OAuth 2.0 소셜 로그인, 다크테마, shadcn/ui 레이아웃