From f17d89e9a5cecbd561b83d73b9ea2412f8a1fafa Mon Sep 17 00:00:00 2001 From: MayOwall Date: Tue, 6 Aug 2024 11:05:33 +0900 Subject: [PATCH 01/10] =?UTF-8?q?modify:=20Button=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=EC=9D=84=20SquareButton?= =?UTF-8?q?=EC=9C=BC=EB=A1=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/_component/LoginButton.tsx | 6 +- src/app/album/[id]/_component/Dialog.tsx | 10 +-- src/app/album/[id]/_component/ImageDetail.tsx | 6 +- .../create/_components/AlbumEditSection.tsx | 6 +- src/app/scanner/_component/PhotoModal.tsx | 10 +-- src/app/scanner/select-album/page.tsx | 10 +-- src/common/Alert.tsx | 4 +- src/common/Button.tsx | 21 +++++- src/common/Fallback.tsx | 8 +-- src/common/FloatingButton.tsx | 6 +- src/common/SquareButton.tsx | 64 +++++++++++++++++++ 11 files changed, 116 insertions(+), 35 deletions(-) create mode 100644 src/common/SquareButton.tsx diff --git a/src/app/_component/LoginButton.tsx b/src/app/_component/LoginButton.tsx index af101a8..8aad52f 100644 --- a/src/app/_component/LoginButton.tsx +++ b/src/app/_component/LoginButton.tsx @@ -2,8 +2,8 @@ import { signIn } from "next-auth/react" -import Button from "@/common/Button" import Icon from "@/common/Icon" +import SquareButton from "@/common/SquareButton" const LoginButton = () => { const handleSignIn = async () => { @@ -11,12 +11,12 @@ const LoginButton = () => { } return ( - + ) } diff --git a/src/app/album/[id]/_component/Dialog.tsx b/src/app/album/[id]/_component/Dialog.tsx index fc16725..7bccf21 100644 --- a/src/app/album/[id]/_component/Dialog.tsx +++ b/src/app/album/[id]/_component/Dialog.tsx @@ -1,4 +1,4 @@ -import Button from "@/common/Button" +import SquareButton from "@/common/SquareButton" interface DeleteDialogProps { title: string @@ -23,22 +23,22 @@ export const Dialog = ({

{desc}

- - +
diff --git a/src/app/album/[id]/_component/ImageDetail.tsx b/src/app/album/[id]/_component/ImageDetail.tsx index ce83f3f..b1a873b 100644 --- a/src/app/album/[id]/_component/ImageDetail.tsx +++ b/src/app/album/[id]/_component/ImageDetail.tsx @@ -4,8 +4,8 @@ import Image from "next/image" import { useState } from "react" import Slider from "react-slick" -import Button from "@/common/Button" import Icon from "@/common/Icon" +import SquareButton from "@/common/SquareButton" import { fullDateStr } from "@/utils" import { PhotoInfo } from "../../types" @@ -101,13 +101,13 @@ export const ImageDetail = ({
- +
diff --git a/src/app/album/create/_components/AlbumEditSection.tsx b/src/app/album/create/_components/AlbumEditSection.tsx index 390ca82..6fdf3b7 100644 --- a/src/app/album/create/_components/AlbumEditSection.tsx +++ b/src/app/album/create/_components/AlbumEditSection.tsx @@ -4,7 +4,7 @@ import { useRouter, useSearchParams } from "next/navigation" import { useState } from "react" import AlbumItem from "@/common/AlbumItem" -import Button from "@/common/Button" +import SquareButton from "@/common/SquareButton" import { usePatchPhotoAlbum } from "../../../scanner/hooks/usePhoto" import { AlbumType, AlbumValue } from "../../types" @@ -65,12 +65,12 @@ export function AlbumEditSection({
- +
) diff --git a/src/app/scanner/_component/PhotoModal.tsx b/src/app/scanner/_component/PhotoModal.tsx index 767db5b..acdc62c 100644 --- a/src/app/scanner/_component/PhotoModal.tsx +++ b/src/app/scanner/_component/PhotoModal.tsx @@ -4,8 +4,8 @@ import { useRouter } from "next/navigation" import { useState } from "react" import { PostQrCodeResponse } from "@/app/api/photo" -import Button from "@/common/Button" import Icon from "@/common/Icon" +import SquareButton from "@/common/SquareButton" interface PhotoModalProps { scanInfo: PostQrCodeResponse @@ -55,15 +55,15 @@ export const PhotoModal = ({ scanInfo, onClose }: PhotoModalProps) => { priority />
- - +
{
{selectedAlbum ? ( - + ) : ( - + )}
diff --git a/src/common/Alert.tsx b/src/common/Alert.tsx index a97dc68..2a1168c 100644 --- a/src/common/Alert.tsx +++ b/src/common/Alert.tsx @@ -1,6 +1,6 @@ import ReactDOM from "react-dom" -import Button from "./Button" +import SquareButton from "./SquareButton" interface AlertProps { title: string @@ -18,7 +18,7 @@ const Alert = ({ title, description, onClose }: AlertProps) => { {description}

- + 확인 , document.body diff --git a/src/common/Button.tsx b/src/common/Button.tsx index 967384a..0fd408a 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -28,6 +28,22 @@ const Button = forwardRef( ref ) => { const Comp = asChild ? Slot : "button" + if (children) { + return ( + +
+ {children} + + ) + } return ( ( disabled={disabled} ref={ref} type={type} - {...props}> - {children} - + {...props} + /> ) } ) diff --git a/src/common/Fallback.tsx b/src/common/Fallback.tsx index b7b1bd0..df6acca 100644 --- a/src/common/Fallback.tsx +++ b/src/common/Fallback.tsx @@ -3,9 +3,9 @@ import { useRouter } from "next/navigation" import { ComponentType } from "react" -import Button from "./Button" import { FallbackProps } from "./ErrorBoundary" import Icon from "./Icon" +import SquareButton from "./SquareButton" const Fallback: ComponentType = ({ resetErrorBoundary }) => { const router = useRouter() @@ -28,15 +28,15 @@ const Fallback: ComponentType = ({ resetErrorBoundary }) => {
- - + + 새로고침하기
diff --git a/src/common/FloatingButton.tsx b/src/common/FloatingButton.tsx index 6d1828b..fccc253 100644 --- a/src/common/FloatingButton.tsx +++ b/src/common/FloatingButton.tsx @@ -1,7 +1,9 @@ -import Button, { ButtonProps as FloatingButtonProps } from "./Button" +import SquareButton, { + ButtonProps as FloatingButtonProps, +} from "./SquareButton" const FloatingButton = ({ className, ...props }: FloatingButtonProps) => { - return + ) } diff --git a/src/app/profile/_components/ListItem.tsx b/src/app/profile/_components/ListItem.tsx index 9e3ae6e..0629b70 100644 --- a/src/app/profile/_components/ListItem.tsx +++ b/src/app/profile/_components/ListItem.tsx @@ -50,11 +50,11 @@ const ListItem = () => { {items.map((item, index) => (
  • -
    • ))} diff --git a/src/common/BottomBar.tsx b/src/common/BottomBar.tsx index a23d04a..266fd65 100644 --- a/src/common/BottomBar.tsx +++ b/src/common/BottomBar.tsx @@ -5,9 +5,13 @@ import Link from "next/link" import Icon from "@/common/Icon" import { bottomBarVariants } from "@/styles/variants" +import Button from "./Button" + interface BottomBarProps { variant: "album" | "scanner" | "profile" } +const TAB_ITEM_CLASSNAME = + "flex h-[54px] w-[54px] flex-col items-center justify-center gap-[2px]" export const BottomBar = ({ variant }: BottomBarProps) => { return ( @@ -22,20 +26,24 @@ export const BottomBar = ({ variant }: BottomBarProps) => { const Album = () => { return ( <> - + -
    - -
    + - + ) @@ -45,21 +53,25 @@ const Scanner = () => { return ( <> - + - + - + ) @@ -69,22 +81,26 @@ const Profile = () => { return ( <> - + -
    - -
    + - - - + + ) } diff --git a/src/common/Button.tsx b/src/common/Button.tsx index becb841..e9bb625 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -19,8 +19,8 @@ const Button = forwardRef( Date: Tue, 6 Aug 2024 12:30:27 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20Header=EC=9A=94=EC=86=8C=EB=93=A4?= =?UTF-8?q?=EC=9D=98=20active=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=80?= =?UTF-8?q?=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/album/[id]/_component/ImageDetail.tsx | 9 +++------ src/app/album/create/_components/Header.tsx | 4 +++- src/app/scanner/select-album/_component/Header.tsx | 9 +++------ src/styles/main.css | 4 ++++ 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/app/album/[id]/_component/ImageDetail.tsx b/src/app/album/[id]/_component/ImageDetail.tsx index b1a873b..b7d7fc6 100644 --- a/src/app/album/[id]/_component/ImageDetail.tsx +++ b/src/app/album/[id]/_component/ImageDetail.tsx @@ -71,12 +71,9 @@ export const ImageDetail = ({
    - + {idx + 1} / {photos.length} diff --git a/src/app/album/create/_components/Header.tsx b/src/app/album/create/_components/Header.tsx index 79dfbe9..92f1cca 100644 --- a/src/app/album/create/_components/Header.tsx +++ b/src/app/album/create/_components/Header.tsx @@ -33,6 +33,8 @@ function Back() { const router = useRouter() return ( - router.back()} /> + ) } diff --git a/src/app/scanner/select-album/_component/Header.tsx b/src/app/scanner/select-album/_component/Header.tsx index ff8d1d9..412d9c6 100644 --- a/src/app/scanner/select-album/_component/Header.tsx +++ b/src/app/scanner/select-album/_component/Header.tsx @@ -7,12 +7,9 @@ export const Header = () => { const router = useRouter() return (
    - router.back()} - /> +
    ) } diff --git a/src/styles/main.css b/src/styles/main.css index c5c2691..d22f5be 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -7,3 +7,7 @@ @tailwind utilities; @tailwind base; @tailwind components; + +header > button:active { + opacity: 70%; +} From 5ad5f842e5a5a03ff651f392b430d2f1a096a003 Mon Sep 17 00:00:00 2001 From: MayOwall Date: Tue, 6 Aug 2024 12:58:06 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EC=83=88=EC=95=A8=EB=B2=94?= =?UTF-8?q?=EC=83=9D=EC=84=B1=EB=B2=84=ED=8A=BC,=20=EC=95=A8=EB=B2=94?= =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20active=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/album/_component/NewAlbumButton.tsx | 11 +++++++---- src/common/AlbumItem.tsx | 12 ++++++++---- src/common/FloatingButton.tsx | 9 --------- 3 files changed, 15 insertions(+), 17 deletions(-) delete mode 100644 src/common/FloatingButton.tsx diff --git a/src/app/album/_component/NewAlbumButton.tsx b/src/app/album/_component/NewAlbumButton.tsx index b2cd263..73cc0dc 100644 --- a/src/app/album/_component/NewAlbumButton.tsx +++ b/src/app/album/_component/NewAlbumButton.tsx @@ -1,5 +1,6 @@ import Link from "next/link" +import Button from "@/common/Button" import Icon from "@/common/Icon" export const NewAlbumButton = () => { @@ -8,10 +9,12 @@ export const NewAlbumButton = () => { href="/album/create" aria-label="새 앨범 만들기" className="fixed bottom-[114px] left-[calc(100%/2-79px)]"> -
    - 새 앨범 만들기 - -
    + ) } diff --git a/src/common/AlbumItem.tsx b/src/common/AlbumItem.tsx index 1ee3b0a..6545cf0 100644 --- a/src/common/AlbumItem.tsx +++ b/src/common/AlbumItem.tsx @@ -60,7 +60,11 @@ function AlbumItem({ return (
    + className={cn( + albumItemVariants({ type, isEditable }), + !isEditable && "group", + className + )}> {isEditable ? ( <> 사진 {photoCount}장
    +
    - {isSelected && ( -
    - )} {isNew && ( New! )} diff --git a/src/common/FloatingButton.tsx b/src/common/FloatingButton.tsx deleted file mode 100644 index fccc253..0000000 --- a/src/common/FloatingButton.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import SquareButton, { - ButtonProps as FloatingButtonProps, -} from "./SquareButton" - -const FloatingButton = ({ className, ...props }: FloatingButtonProps) => { - return -} - -export default FloatingButton From 633d38165fcffe3d3644a052865910b9274f1a25 Mon Sep 17 00:00:00 2001 From: minsu-zip Date: Sun, 11 Aug 2024 17:39:52 +0900 Subject: [PATCH 06/10] =?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 07/10] =?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 08/10] =?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 09/10] =?UTF-8?q?feat:=20accessToken=20=EC=A0=84=EC=97=AD?= =?UTF-8?q?=20=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 10/10] =?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 }, },