Merge branch 'main' of https://github.com/KUSITMS-30th-TEAM-C/frontend

src/api/core.ts

@@ -11,7 +11,7 @@ import { ACCESS_TOKEN, HTTP_METHODS } from '@/constants'
 import { BaseResponse } from './types'
 
 const axiosInstance: AxiosInstance = axios.create({
-  baseURL: '/v1',
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
   timeout: 10000,
   headers: { 'Content-Type': 'application/json' },
   withCredentials: true,

src/app/auth/callback/page.tsx

@@ -43,6 +43,7 @@ function LoginCheck() {
 
       const data = await res.json()
       Cookies.set('accessToken', data.data.accessToken)
+      Cookies.set('role', data.data.userInfo.role)
       setUserInfo({
         ...data.data.userInfo,
         profileImage:

src/app/home/components/TimeCard.tsx

@@ -1,17 +1,31 @@
 import { categoryLabels } from '@/app/archive/api/types'
-import { Badge, Cup, Div } from '@/components'
+import { Badge, Div } from '@/components'
+import Image from 'next/image'
 
 interface TimeCardProps {
   time: number
   category: string
   title: string
+  imgSrc: string
 }
 
-export default function TimeCard({ time, category, title }: TimeCardProps) {
+export default function TimeCard({
+  time,
+  category,
+  title,
+  imgSrc,
+}: TimeCardProps) {
+  console.log(category, 'category')
   return (
     <Div className="relative bg-white px-12">
       <div className="">
-        <Cup className="absolute left-0 top-0" />
+        <Image
+          alt="icon"
+          src={imgSrc}
+          width="88"
+          height="88"
+          className="absolute left-0 top-0"
+        />
         <div className="bg-black text-white flex items-center justify-center rounded-bl-12 rounded-tr-12 absolute top-0 right-0 w-59 h-38 whitespace-nowrap text-14">
           +{time}분
         </div>

src/app/home/components/TimePiece.tsx

@@ -1,4 +1,3 @@
-import { transKeyword } from '@/app/archive/components/Treemap/Treemap'
 import TimeCard from './TimeCard'
 import { useHomeContext } from '../fast/components/Fetcher'
 
@@ -12,7 +11,8 @@ export default function TimePiece() {
           key={id}
           time={savedTime}
           title={title}
-          category={transKeyword(keyword.category)}
+          category={keyword.category}
+          imgSrc={keyword.image}
         />
       ))}
     </div>

src/app/mypage/page.tsx

@@ -93,7 +93,7 @@ export default function MyPage() {
               className="px-20 py-16"
               onClick={() => {
                 deleteUserInfo()
-                Cookies.remove('accesstoken')
+                Cookies.remove('accessToken')
                 push('/')
               }}
             >

src/app/start/api/api.ts

@@ -1,3 +1,4 @@
+import Cookies from 'js-cookie'
 import { http } from '@/api'
 import useUserInfo, { UserInfo } from '@/store/useUserInfo'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
@@ -24,6 +25,7 @@ export const usePostOnboard = () => {
     onSuccess: ({ data }) => {
       const updatedUserInfo = { ...data, role: 'MEMBER' as const }
       setUserInfo(updatedUserInfo)
+      Cookies.set('role', 'MEMBER')
       router.push('/home')
     },
     onError: (error) => {

src/app/start/components/Step3.tsx

@@ -8,7 +8,7 @@ export default function Step3() {
     useProfileSelector()
 
   return (
-    <div className=" px-20 w-full flex flex-col relative]">
+    <div className="px-20 w-full flex flex-col relative">
       <h1 className="title !mb-6">어떤 프로필로 함께 하시겠어요?</h1>
       <h2 className="text-primary_foundation_50 text-sm font-medium leading-snug">
         프로필은 나중에 바꿀 수 있어요

src/app/start/components/Step4.tsx

@@ -6,10 +6,6 @@ import Image from 'next/image'
 export default function Step4() {
   const { userInfo } = useUserInfo()
 
-  if (!userInfo.nickname) {
-    return <div>loading...</div>
-  }
-
   return (
     <div className="relative h-screen">
       <div className="absolute w-screen h-full bg-gradient-to-b from-white via-[#fffbfb] to-[#ffa89c]" />

src/app/start/page.tsx

@@ -73,7 +73,7 @@ export default function Start() {
           </If>
         </div>
 
-        <div className="w-full py-4 flex justify-center">
+        <div className="w-full pt-10 flex justify-center relative">
           <Button
             className="w-[90%] mx-auto"
             disabled={!!error}

src/middleware.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest) {
+  const token = req.cookies.get('accessToken')?.value
+  const role = req.cookies.get('role')?.value
+  const response = NextResponse.next()
+  const { pathname } = req.nextUrl
+
+  if (
+    pathname.startsWith('/_next') ||
+    pathname.startsWith('/static') ||
+    pathname.includes('.')
+  ) {
+    return response
+  }
+
+  if (pathname !== '/') {
+    if (!token) {
+      return NextResponse.redirect('/')
+    }
+  }
+
+  if (pathname !== '/start' && role === 'MEMBER') {
+    return NextResponse.redirect(new URL('/start', req.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {}