refactor: baseUrl 변경

src/apis/axios.ts

@@ -6,7 +6,8 @@ import axios, { AxiosError, AxiosInstance } from "axios";
 import { ReissueAccessToken } from "./api";
 
 export const instance = axios.create({
-  baseURL: "http://localhost:8080",
+  // baseURL: "http://localhost:8080",
+  baseURL: process.env.NEXT_PUBLIC_SERVER_BASE_URL,
 });
 
 export const setInstance = (baseUrl: string): AxiosInstance => {

src/components/Button/BackButton/index.tsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import * as S from "./styled";
+
+function BackButton() {
+  const router = useRouter();
+
+  const handleRouteBack = () => {
+    router.back();
+  };
+
+  return (
+    <S.BackButton type="button" onClick={handleRouteBack}>
+      <Image
+        width={28}
+        height={28}
+        src="/icons/arrow-left.svg"
+        alt="좌측 방향 화살표"
+      />
+    </S.BackButton>
+  );
+}
+
+export default BackButton;

src/components/Button/BackButton/styled.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+
+export const BackButton = styled.button`
+  display: flex;
+  align-items: center;
+  padding-top: 0.22rem;
+
+  &:hover {
+    animation: move-left 1s ease infinite;
+  }
+
+  @keyframes move-left {
+    0% {
+      transform: translateX(0);
+    }
+    50% {
+      transform: translateX(-5px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+`;

src/components/Modal/Login/index.tsx

@@ -1,5 +1,3 @@
-import Image from "next/image";
-
 import React from "react";
 
 import { oauth2Type } from "@/types";
@@ -36,6 +34,8 @@ const LOGIN_PLATFORM: LoginPlatformType[] = [
   },
 ];
 
+const BASE_URL = process.env.NEXT_PUBLIC_SERVER_BASE_URL;
+
 function LoginModal({
   isOpen,
   onClose,
@@ -64,7 +64,7 @@ function LoginModal({
           {LOGIN_PLATFORM.map((platform) => (
             <S.SocialNavLink
               key={platform.id}
-              href={`http://localhost:8080/oauth2/authorization/${platform.name}`}
+              href={`${BASE_URL}/oauth2/authorization/${platform.name}`}
             >
               <S.SocialLogo
                 src={platform.icon}

src/pages/api/clearCookies.page.ts

@@ -7,6 +7,7 @@ const handler = (req: NextApiRequest, res: NextApiResponse) => {
       `accessToken=; Path=/; HttpOnly;, SameSite=Strict; Max-Age=0; Secure`,
       `refreshToken=; Path=/; HttpOnly;, SameSite=Strict; Max-Age=0; Secure`,
     ]);
+
     res.status(200).json({ message: "로그아웃이 성공적으로 처리되었습니다" });
   } catch (error) {
     res

src/pages/mypage/bookmark/index.page.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, Suspense } from "react";
 
+import BackButton from "@/components/Button/BackButton";
 import FestivalGrid from "@/components/Festival/Grid";
 import HeaderLayout from "@/components/Layout/HeaderLayout";
 
@@ -9,7 +10,10 @@ import SkeletonGrid from "../components/Bookmark/Skeleton/Grid";
 function BookmarkPage() {
   return (
     <S.Container>
-      <S.Title>즐겨찾기 한 축제 목록</S.Title>
+      <S.Box>
+        <BackButton />
+        <S.Title>즐겨찾기 한 축제 목록</S.Title>
+      </S.Box>
       <Suspense fallback={<SkeletonGrid count={8} />}>
         <FestivalGrid />
       </Suspense>

src/pages/mypage/bookmark/styled.ts

@@ -14,10 +14,15 @@ export const Container = styled.main`
   }
 `;
 
+export const Box = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0 1rem 0.25rem;
+  border-bottom: 2px solid #000;
+`;
+
 export const Title = styled.h2`
   font-size: 1.5625rem;
   font-weight: 700;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid #000;
-  margin-bottom: 2rem;
 `;

src/pages/mypage/review/index.page.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement, Suspense } from "react";
 
+import BackButton from "@/components/Button/BackButton";
 import HeaderLayout from "@/components/Layout/HeaderLayout";
 import ReviewList from "@/components/ReviewList";
 
@@ -9,7 +10,10 @@ import ReviewSkeleton from "../components/Review/Skeleton";
 function ReviewPage() {
   return (
     <S.Container>
-      <S.Title>작성한 후기 목록</S.Title>
+      <S.Box>
+        <BackButton />
+        <S.Title>작성한 후기 목록</S.Title>
+      </S.Box>
       <Suspense fallback={<ReviewSkeleton count={10} />}>
         <ReviewList />
       </Suspense>

src/pages/mypage/review/styled.ts

@@ -14,9 +14,15 @@ export const Container = styled.main`
   }
 `;
 
+export const Box = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0 1rem 0.25rem;
+  border-bottom: 2px solid #000;
+`;
+
 export const Title = styled.h2`
   font-size: 1.5625rem;
   font-weight: 700;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid #000;
 `;