Merge branch 'dev' into feat/MAFOO-84

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",

src/app/_component/LoginButton.tsx

@@ -2,21 +2,21 @@
 
 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 () => {
     await signIn("kakao", { callbackUrl: "/scanner" })
   }
 
   return (
-    <Button
+    <SquareButton
       onClick={handleSignIn}
       className="w-full bg-kakao-600 text-gray-1000 active:bg-kakao-700">
       <Icon name={"kakaoLogo"} size={28}></Icon>
       카카오로 3초만에 계속하기
-    </Button>
+    </SquareButton>
   )
 }
 

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 = ({
           <p className="tp-body1-regular mt-3 text-gray-600">{desc}</p>
         </div>
         <div className="mt-7 flex w-full gap-3">
-          <Button
+          <SquareButton
             className="flex-1"
             variant="solid"
             size="large"
             theme="gray"
             onClick={onClose}>
             닫기
-          </Button>
-          <Button
+          </SquareButton>
+          <SquareButton
             className="flex-1"
             variant="solid"
             size="large"
             theme="red"
             onClick={onConfirm}>
             {confirmBtnContext}
-          </Button>
+          </SquareButton>
         </div>
       </div>
     </div>

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"
@@ -71,12 +71,9 @@ export const ImageDetail = ({
       <div className="fixed left-0 top-0 z-10 flex h-dvh w-dvw justify-center bg-gray-900">
         <div className="flex w-full max-w-[390px] flex-col">
           <header className="tp-body1-regular flex w-full items-center justify-between p-4 py-[14px]">
-            <Icon
-              name="altArrowLeftOutline"
-              size={28}
-              color="white"
-              onClick={onClose}
-            />
+            <button onClick={onClose}>
+              <Icon name="altArrowLeftOutline" size={28} color="white" />
+            </button>
             <span className="text-white">
               {idx + 1} / {photos.length}
             </span>
@@ -101,13 +98,13 @@ export const ImageDetail = ({
             </Slider>
           </div>
           <div className="w-full p-6 pb-11 pt-3">
-            <Button
+            <SquareButton
               color="green"
               className="w-full"
               onClick={() => handleDownload(photos[idx].photoUrl)}>
               <Icon name="downloadBold" size={28} color="white" />
               <span className="mr-[6px]">다운로드 받기</span>
-            </Button>
+            </SquareButton>
           </div>
         </div>
       </div>

src/app/album/[id]/_component/PhotoAddButton.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation"
 
+import Button from "@/common/Button"
 import Icon from "@/common/Icon"
 
 interface PhotoAddButtonProps {
@@ -15,10 +16,12 @@ export const PhotoAddButton = ({ albumId }: PhotoAddButtonProps) => {
   }
 
   return (
-    <button
-      className="mb-[13px] flex h-[165px] w-[165px] items-center justify-center rounded-xl border border-gray-200 bg-gray-100"
-      onClick={onClick}>
-      <Icon name="galleryAddOutline" size={56} color="gray-300" />
-    </button>
+    <Button
+      onClick={onClick}
+      className="h-[165px] w-[165px] overflow-hidden rounded-xl">
+      <div className="mb-[13px] flex h-[165px] w-[165px] items-center justify-center rounded-xl border border-gray-200 bg-gray-100">
+        <Icon name="galleryAddOutline" size={56} color="gray-300" />
+      </div>
+    </Button>
   )
 }

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)]">
-      <div className="flex items-center gap-2 rounded-full bg-green-600 p-5 py-3 text-white">
-        <span>새 앨범 만들기</span>
-        <Icon name="widgetAddOutline" size={20} color="white" />
-      </div>
+      <Button className="rounded-full">
+        <div className="flex items-center gap-2 rounded-full bg-green-600 p-5 py-3 text-white">
+          <span>새 앨범 만들기</span>
+          <Icon name="widgetAddOutline" size={20} color="white" />
+        </div>
+      </Button>
     </Link>
   )
 }

src/app/album/create/_components/AlbumEditSection.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from "next/navigation"
 import { useState } from "react"
 
 import AlbumItem from "@/common/AlbumItem"
-import Button from "@/common/Button"
+import SquareButton from "@/common/SquareButton"
 
 import { AlbumType, AlbumValue } from "../../types"
 import { usePostAlbum } from "../hooks/useAlbum"
@@ -56,12 +56,12 @@ export function AlbumEditSection({
       </div>
       <div className="fixed bottom-0 flex w-full max-w-[430px] flex-col items-center">
         <AlbumTypeSelectTab type={type} handleType={handleType} />
-        <Button
+        <SquareButton
           className="mb-11 mt-3 w-[calc(100%-3rem)]"
           onClick={handleSubmit}
           disabled={!value.name.length}>
           다음으로
-        </Button>
+        </SquareButton>
       </div>
     </>
   )

src/app/album/create/_components/Header.tsx

@@ -33,6 +33,8 @@ function Back() {
   const router = useRouter()
 
   return (
-    <Icon name="altArrowLeftOutline" size={28} onClick={() => router.back()} />
+    <button onClick={() => router.back()}>
+      <Icon name="altArrowLeftOutline" size={28} />
+    </button>
   )
 }

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()
 

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]

src/app/layout.tsx

@@ -1,12 +1,15 @@
 import "@/styles/main.css"
 
 import type { Metadata } from "next"
+import { cookies } from "next/headers"
 
-import AuthProvider from "@/common/AuthProvider"
 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,17 +44,20 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const accessToken = cookies().get(ACCESS_TOKEN_KEY)?.value || null
+
   return (
     <html lang="ko" className={`${pretendard}`}>
       <body className={pretendard.className}>
-        <AuthProvider>
+        <NextAuthProvider>
           <QueryProviders>
             <ErrorHandlingWrapper>
-              <AlertContainer />
+              <AlertProvider />
+              <AuthProvider accessToken={accessToken} />
               {children}
             </ErrorHandlingWrapper>
           </QueryProviders>
-        </AuthProvider>
+        </NextAuthProvider>
       </body>
     </html>
   )

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) {
@@ -50,11 +50,11 @@ const ListItem = () => {
 
           {items.map((item, index) => (
             <li key={index}>
-              <Button
-                onClick={() => handleClick(item)}
-                className="flex h-[54px] w-full items-center justify-between bg-white pl-[32px] pr-[24px]">
-                <p className="tp-body1-regular text-gray-600">{item.label}</p>
-                <Icon name="arrowRight" size={24} color="gray-500" />
+              <Button onClick={() => handleClick(item)} className="w-full">
+                <div className="flex h-[54px] w-full items-center justify-between px-6">
+                  <p className="tp-body1-regular text-gray-600">{item.label}</p>
+                  <Icon name="arrowRight" size={24} color="gray-500" />
+                </div>
               </Button>
             </li>
           ))}

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
         />
         <div className="flex w-full gap-3 p-6 py-3">
-          <Button
+          <SquareButton
             variant="weak"
             onClick={onAlreadyExistAlbumBtnClick}
             className="w-full">
             이미 만든 앨범
-          </Button>
-          <Button onClick={onNewAlbumBtnClick} className="w-full">
+          </SquareButton>
+          <SquareButton onClick={onNewAlbumBtnClick} className="w-full">
             새 앨범 추가
-          </Button>
+          </SquareButton>
         </div>
         <Icon
           name="closeCircleBold"

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),