From 633d38165fcffe3d3644a052865910b9274f1a25 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:39:52 +0900 Subject: [PATCH 1/5] =?UTF-8?q?chore:=20js-cookie=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 클라이언트에서 사용하던 token 쿠키를 서버에서 관리하도록 변경 --- package.json | 1 - pnpm-lock.yaml | 9 --------- src/libs/index.ts | 6 ------ 3 files changed, 16 deletions(-) diff --git a/package.json b/package.json index c980d70..b331650 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "eslint-plugin-simple-import-sort": "^12.1.0", - "js-cookie": "^3.0.5", "lucide-react": "^0.390.0", "next": "14.2.3", "next-auth": "5.0.0-beta.20", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f270b65..8ddfcf4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,9 +35,6 @@ importers: eslint-plugin-simple-import-sort: specifier: ^12.1.0 version: 12.1.0(eslint@8.57.0) - js-cookie: - specifier: ^3.0.5 - version: 3.0.5 lucide-react: specifier: ^0.390.0 version: 0.390.0(react@18.3.1) @@ -2330,10 +2327,6 @@ packages: jquery@3.7.1: resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==} - js-cookie@3.0.5: - resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==} - engines: {node: '>=14'} - js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -6131,8 +6124,6 @@ snapshots: jquery@3.7.1: {} - js-cookie@3.0.5: {} - js-tokens@4.0.0: {} js-yaml@4.1.0: diff --git a/src/libs/index.ts b/src/libs/index.ts index 995470f..3d45787 100644 --- a/src/libs/index.ts +++ b/src/libs/index.ts @@ -1,9 +1,3 @@ -import Cookies from "js-cookie" - -import { ACCESS_TOKEN_KEY } from "@/constants" - -export const getAccessToken = () => Cookies.get(ACCESS_TOKEN_KEY) - // 하루 필름인 경우는 지점별 도메인이 가변적 // HARUFILM: "http://haru{숫자}.mx{숫자}.co.kr", From a0bdb1975ad4f08612738c8adb7a2faba42d1bd4 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:42:09 +0900 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=ED=8C=8C=EC=9D=BC=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 6 +++--- src/common/AuthProvider.tsx | 18 ------------------ src/common/NextAuthProvider.tsx | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 21 deletions(-) delete mode 100644 src/common/AuthProvider.tsx create mode 100644 src/common/NextAuthProvider.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b224372..b33de47 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,8 +2,8 @@ import "@/styles/main.css" import type { Metadata } from "next" -import AuthProvider from "@/common/AuthProvider" import ErrorHandlingWrapper from "@/common/ErrorHandlingWrapper" +import NextAuthProvider from "@/common/NextAuthProvider" import { QueryProviders } from "@/common/QueryProviders" import { pretendard } from "@/font" import AlertContainer from "@/store/AlertContext" @@ -44,14 +44,14 @@ export default function RootLayout({ return ( - + {children} - + ) diff --git a/src/common/AuthProvider.tsx b/src/common/AuthProvider.tsx deleted file mode 100644 index ba872d8..0000000 --- a/src/common/AuthProvider.tsx +++ /dev/null @@ -1,18 +0,0 @@ -"use client" - -import { SessionProvider } from "next-auth/react" -import React from "react" - -interface Props { - children: React.ReactNode -} - -const AuthProvider = ({ children }: Props) => { - return ( - - {children} - - ) -} - -export default AuthProvider diff --git a/src/common/NextAuthProvider.tsx b/src/common/NextAuthProvider.tsx new file mode 100644 index 0000000..aab0adb --- /dev/null +++ b/src/common/NextAuthProvider.tsx @@ -0,0 +1,14 @@ +"use client" + +import { SessionProvider } from "next-auth/react" +import React from "react" + +interface Props { + children: React.ReactNode +} + +const NextAuthProvider = ({ children }: Props) => { + return {children} +} + +export default NextAuthProvider From b7cb075b3e6e2bca7b139c7bce30c96ef6152f74 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:43:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20alert=20zustand=EC=83=81=ED=83=9C?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/album/create/hooks/useAlbum.ts | 4 +-- src/app/profile/_components/ListItem.tsx | 4 +-- src/app/scanner/hooks/usePhoto.ts | 4 +-- src/store/AlertContext.tsx | 37 ------------------------ src/store/alert/AlertProvider.tsx | 14 +++++++++ src/store/alert/index.ts | 2 ++ src/store/alert/useAlertStore.ts | 20 +++++++++++++ 7 files changed, 42 insertions(+), 43 deletions(-) delete mode 100644 src/store/AlertContext.tsx create mode 100644 src/store/alert/AlertProvider.tsx create mode 100644 src/store/alert/index.ts create mode 100644 src/store/alert/useAlertStore.ts diff --git a/src/app/album/create/hooks/useAlbum.ts b/src/app/album/create/hooks/useAlbum.ts index a2fec44..ff6155b 100644 --- a/src/app/album/create/hooks/useAlbum.ts +++ b/src/app/album/create/hooks/useAlbum.ts @@ -3,13 +3,13 @@ import { useRouter } from "next/navigation" import { postAlbum } from "@/app/api/photo" import { getQueryClient } from "@/common/QueryProviders" -import { useAlert } from "@/store/AlertContext" +import { useAlertStore } from "@/store/alert" import { usePatchPhotoAlbum } from "../../../scanner/hooks/usePhoto" import type { AlbumType } from "../../types" export const usePostAlbum = () => { - const { showAlert } = useAlert() + const { showAlert } = useAlertStore() const router = useRouter() const { patchPhotoAlbum } = usePatchPhotoAlbum() diff --git a/src/app/profile/_components/ListItem.tsx b/src/app/profile/_components/ListItem.tsx index 0629b70..fcecc2b 100644 --- a/src/app/profile/_components/ListItem.tsx +++ b/src/app/profile/_components/ListItem.tsx @@ -6,7 +6,7 @@ import Button from "@/common/Button" import Icon from "@/common/Icon" import { LIST_ITEM_INFO } from "@/constants" import { isExternalLink, isInternalLink } from "@/libs" -import { useAlert } from "@/store/AlertContext" +import { useAlertStore } from "@/store/alert" interface ItemButtonType { label: string @@ -21,7 +21,7 @@ export interface ListItemProps { const ListItem = () => { const router = useRouter() - const { showAlert } = useAlert() + const { showAlert } = useAlertStore() const handleClick = async (item: ItemButtonType) => { if (item.action) { diff --git a/src/app/scanner/hooks/usePhoto.ts b/src/app/scanner/hooks/usePhoto.ts index c1c2316..4beb6a4 100644 --- a/src/app/scanner/hooks/usePhoto.ts +++ b/src/app/scanner/hooks/usePhoto.ts @@ -1,10 +1,10 @@ import { useMutation, useQuery } from "@tanstack/react-query" import { getAlbums, patchPhotoAlbum, postQrCode } from "@/app/api/photo" -import { useAlert } from "@/store/AlertContext" +import { useAlertStore } from "@/store/alert" export const usePostQrCode = () => { - const { showAlert } = useAlert() + const { showAlert } = useAlertStore() const { data, mutate, isPending } = useMutation({ mutationFn: (code: string) => postQrCode(code), diff --git a/src/store/AlertContext.tsx b/src/store/AlertContext.tsx deleted file mode 100644 index 3230f01..0000000 --- a/src/store/AlertContext.tsx +++ /dev/null @@ -1,37 +0,0 @@ -"use client" - -import { create } from "zustand" - -import Alert from "../common/Alert" - -interface AlertState { - title: string - description: string - visible: boolean - showAlert: (title: string, description: string) => void - hideAlert: () => void -} - -const useAlertStore = create((set) => ({ - title: "", - description: "", - visible: false, - showAlert: (title: string, description: string) => - set({ title, description, visible: true }), - hideAlert: () => set({ visible: false }), -})) - -export const useAlert = () => { - const { showAlert, hideAlert, title, description, visible } = useAlertStore() - return { showAlert, hideAlert, title, description, visible } -} - -const AlertContainer = () => { - const { title, description, visible, hideAlert } = useAlert() - - if (!visible) return null - - return -} - -export default AlertContainer diff --git a/src/store/alert/AlertProvider.tsx b/src/store/alert/AlertProvider.tsx new file mode 100644 index 0000000..32dcd92 --- /dev/null +++ b/src/store/alert/AlertProvider.tsx @@ -0,0 +1,14 @@ +"use client" + +import Alert from "../../common/Alert" +import useAlertStore from "./useAlertStore" + +const AlertProvider = () => { + const { title, description, visible, hideAlert } = useAlertStore() + + if (!visible) return null + + return +} + +export default AlertProvider diff --git a/src/store/alert/index.ts b/src/store/alert/index.ts new file mode 100644 index 0000000..b01f7c5 --- /dev/null +++ b/src/store/alert/index.ts @@ -0,0 +1,2 @@ +export { default as AlertProvider } from "./AlertProvider" +export { default as useAlertStore } from "./useAlertStore" diff --git a/src/store/alert/useAlertStore.ts b/src/store/alert/useAlertStore.ts new file mode 100644 index 0000000..d992f5e --- /dev/null +++ b/src/store/alert/useAlertStore.ts @@ -0,0 +1,20 @@ +import { create } from "zustand" + +interface AlertState { + title: string + description: string + visible: boolean + showAlert: (title: string, description: string) => void + hideAlert: () => void +} + +const useAlertStore = create((set) => ({ + title: "", + description: "", + visible: false, + showAlert: (title: string, description: string) => + set({ title, description, visible: true }), + hideAlert: () => set({ visible: false }), +})) + +export default useAlertStore From 84b74cb3b6ce403400871879ce8e042e3e9ba835 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:44:36 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20accessToken=20=EC=A0=84=EC=97=AD=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EA=B4=80=EB=A6=AC=20zustand=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/auth/AuthProvider.tsx | 19 +++++++++++++++++++ src/store/auth/index.ts | 2 ++ src/store/auth/useAuthStore.ts | 15 +++++++++++++++ 3 files changed, 36 insertions(+) create mode 100644 src/store/auth/AuthProvider.tsx create mode 100644 src/store/auth/index.ts create mode 100644 src/store/auth/useAuthStore.ts diff --git a/src/store/auth/AuthProvider.tsx b/src/store/auth/AuthProvider.tsx new file mode 100644 index 0000000..4f6030f --- /dev/null +++ b/src/store/auth/AuthProvider.tsx @@ -0,0 +1,19 @@ +"use client" + +import useAuthStore from "./useAuthStore" + +interface AuthContextProps { + accessToken: string | null +} + +const AuthProvider = ({ accessToken }: AuthContextProps) => { + const setAccessToken = useAuthStore((state) => state.setAccessToken) + + if (accessToken) { + setAccessToken(accessToken) + } + + return null +} + +export default AuthProvider diff --git a/src/store/auth/index.ts b/src/store/auth/index.ts new file mode 100644 index 0000000..f7b6780 --- /dev/null +++ b/src/store/auth/index.ts @@ -0,0 +1,2 @@ +export { default as AuthProvider } from "./AuthProvider" +export { default as useAuthStore } from "./useAuthStore" diff --git a/src/store/auth/useAuthStore.ts b/src/store/auth/useAuthStore.ts new file mode 100644 index 0000000..3540729 --- /dev/null +++ b/src/store/auth/useAuthStore.ts @@ -0,0 +1,15 @@ +import { create } from "zustand" + +interface AuthState { + accessToken: string | null + setAccessToken: (token: string | null) => void + clearAuth: () => void +} + +const useAuthStore = create((set) => ({ + accessToken: null, + setAccessToken: (token) => set({ accessToken: token }), + clearAuth: () => set({ accessToken: null }), +})) + +export default useAuthStore From 4e16e1b0f5faaa7fc01f615889e3cafed9905541 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:45:43 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20authToken=20=ED=81=B4=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EC=96=B8=ED=8A=B8=20=EC=BF=A0=ED=82=A4=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=84=9C=EB=B2=84=20=EC=BF=A0=ED=82=A4=EB=A1=9C=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 서버 컴포넌트에서 관리함으로서 클라이언트 환경에서 접근 못하게하기 위함 --- src/app/api/myfetch/index.ts | 10 ++++++---- src/app/layout.tsx | 10 ++++++++-- src/auth.ts | 10 +++++++++- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/app/api/myfetch/index.ts b/src/app/api/myfetch/index.ts index 7e5552d..dd2f0cc 100644 --- a/src/app/api/myfetch/index.ts +++ b/src/app/api/myfetch/index.ts @@ -1,4 +1,4 @@ -import { getAccessToken } from "@/libs" +import { useAuthStore } from "@/store/auth" import customFetch from "./customFetch" @@ -13,10 +13,12 @@ export const myFetch = customFetch({ request: async ([url, options], fetch) => { // 요청 인터셉터 로직 추가 (예: 로깅, 인증 토큰 추가) // console.log("Request Interceptor:", url, options) - const token = getAccessToken() - if (token && options) { + + const { accessToken } = useAuthStore.getState() + + if (accessToken && options) { const headers = new Headers(options.headers || {}) - headers.set("Authorization", `Bearer ${token}`) + headers.set("Authorization", `Bearer ${accessToken}`) options.headers = headers } return [url, options] diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b33de47..28cd6e5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,15 @@ import "@/styles/main.css" import type { Metadata } from "next" +import { cookies } from "next/headers" import ErrorHandlingWrapper from "@/common/ErrorHandlingWrapper" import NextAuthProvider from "@/common/NextAuthProvider" import { QueryProviders } from "@/common/QueryProviders" +import { ACCESS_TOKEN_KEY } from "@/constants" import { pretendard } from "@/font" -import AlertContainer from "@/store/AlertContext" +import { AlertProvider } from "@/store/alert" +import { AuthProvider } from "@/store/auth" export const metadata: Metadata = { title: "마푸-네컷사진 전용 앨범", @@ -41,13 +44,16 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode }>) { + const accessToken = cookies().get(ACCESS_TOKEN_KEY)?.value || null + return ( - + + {children} diff --git a/src/auth.ts b/src/auth.ts index 420e977..4668915 100644 --- a/src/auth.ts +++ b/src/auth.ts @@ -5,6 +5,8 @@ import KakaoProvider from "next-auth/providers/kakao" import { authLogin } from "@/app/api/signIn" import { ACCESS_TOKEN_KEY } from "@/constants" +import { useAuthStore } from "./store/auth" + export const { handlers: { GET, POST }, auth, @@ -26,7 +28,12 @@ export const { if (account?.access_token) { const authResponse = await authLogin(account.access_token) - cookies().set(ACCESS_TOKEN_KEY, authResponse.accessToken) + cookies().set(ACCESS_TOKEN_KEY, authResponse.accessToken, { + httpOnly: true, + sameSite: "lax", + path: "/", + maxAge: 30 * 24 * 60 * 60, // 30일 + }) const updatedAccount = { ...account, @@ -58,6 +65,7 @@ export const { events: { signOut() { cookies().delete(ACCESS_TOKEN_KEY) + useAuthStore.getState().clearAuth() return }, },