refactor: enhance session management and routing in middleware and API authentication

.env.development

@@ -1,3 +1,7 @@
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
-NEXT_PUBLIC_API_URL=http://localhost:3000
+#route handler
+NEXT_PUBLIC_API_URL=http://localhost:3000
+
+#qsp 로그인 api
+NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120

.env.production

@@ -1 +1,5 @@
-NEXT_PUBLIC_API_URL=http://172.30.1.35:3000
+#route handler
+NEXT_PUBLIC_API_URL=http://172.30.1.35:3000
+
+#qsp 로그인 api
+NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120

next.config.ts

@@ -8,6 +8,10 @@ const nextConfig: NextConfig = {
   },
   async rewrites() {
     return [
+      {
+        source: '/api/user/login',
+        destination: `${process.env.NEXT_PUBLIC_QSP_API_URL}/api/user/login`,
+      },
       {
         source: '/api/:path*',
         destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,

src/app/@header/default.tsx

@@ -1,5 +1,5 @@
 import Header from '@/components/ui/common/Header'
 
-export default function page() {
+export default async function page() {
   return <Header name={'調査物件一覧'} />
 }

src/app/api/auth/logout/route.ts

@@ -0,0 +1,15 @@
+import { sessionOptions } from '@/libs/session'
+import { SessionData } from '@/types/Auth'
+import { getIronSession } from 'iron-session'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const cookieStore = await cookies()
+  const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
+
+  session.destroy()
+  // return redirect('/login')
+
+  return NextResponse.json({ code: 200, message: 'Logout successful' })
+}

src/app/api/auth/route.ts

@@ -0,0 +1,58 @@
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import { getIronSession } from 'iron-session'
+import { axiosInstance } from '@/libs/axios'
+import { sessionOptions } from '@/libs/session'
+
+import type { SessionData } from '@/types/Auth'
+
+export async function POST(request: Request) {
+  const { loginId, pwd } = await request.json()
+
+  const result = await axiosInstance(`${process.env.NEXT_PUBLIC_QSP_API_URL}`).post(`/api/user/login`, {
+    loginId,
+    pwd,
+  })
+  console.log('🚀 ~ result ~ result:', result)
+
+  if (result.data.result.code === 200) {
+    const cookieStore = await cookies()
+    const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
+
+    console.log('start session edit!')
+    session.langCd = result.data.data.langCd
+    session.currPage = result.data.data.currPage
+    session.rowCount = result.data.data.rowCount
+    session.startRow = result.data.data.startRow
+    session.endRow = result.data.data.endRow
+    session.compCd = result.data.data.compCd
+    session.agencyStoreId = result.data.data.agencyStoreId
+    session.storeId = result.data.data.storeId
+    session.userId = result.data.data.userId
+    session.category = result.data.data.category
+    session.userNm = result.data.data.userNm
+    session.userNmKana = result.data.data.userNmKana
+    session.telNo = result.data.data.telNo
+    session.fax = result.data.data.fax
+    session.email = result.data.data.email
+    session.lastEditUser = result.data.data.lastEditUser
+    session.storeGubun = result.data.data.storeGubun
+    session.pwCurr = result.data.data.pwCurr
+    session.pwdInitYn = result.data.data.pwdInitYn
+    session.apprStatCd = result.data.data.apprStatCd
+    session.loginFailCnt = result.data.data.loginFailCnt
+    session.loginFailMinYn = result.data.data.loginFailMinYn
+    session.priceViewStatCd = result.data.data.priceViewStatCd
+    session.groupId = result.data.data.groupId
+    session.storeLvl = result.data.data.storeLvl
+    session.custCd = result.data.data.custCd
+    session.builderNo = result.data.data.builderNo
+    session.isLoggedIn = true
+    console.log('end session edit!')
+
+    await session.save()
+  }
+
+  return NextResponse.json({ code: 200, message: 'Login is Succecss!!' })
+}

src/app/page.tsx

@@ -1,6 +1,14 @@
 import Main from '@/components/ui/Main'
+import { sessionOptions } from '@/libs/session'
+import type { SessionData } from '@/types/Auth'
+import { getIronSession } from 'iron-session'
+import { cookies } from 'next/headers'
 
 export default async function Home() {
+  const cookieStore = await cookies()
+  const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
+  console.log('🚀 ~ Home ~ session:', session)
+
   return (
     <>
       <div className="container">

src/components/Login.tsx

@@ -1,16 +1,69 @@
 'use client'
 
-import { useState } from 'react'
+import { useReducer, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useQuery } from '@tanstack/react-query'
+import { axiosInstance } from '@/libs/axios'
+
+interface AccountState {
+  loginId: string
+  pwd: string
+}
 
 export default function Login() {
-  const [pwShow, setPwShow] = useState(false) //비밀번호 보이기 숨기기
+  const router = useRouter()
+  //비밀번호 보이기 숨기기
+  const [pwShow, setPwShow] = useState(false)
+  //ID 저장 체크박스
+  const [idSave, setIdSave] = useState(false)
+  //Q.PARTNERS 체크박스
+  const [isPartners, setIsPartners] = useState(false)
+  //로그인 상태
+  const [isLogin, setIsLogin] = useState(false)
+
+  const reducer = (state: AccountState, newState: Partial<AccountState>) => ({ ...state, ...newState })
+  const [account, setAccount] = useReducer(reducer, {
+    loginId: '',
+    pwd: '',
+  })
+
+  interface LoginData {
+    code: number
+    message: string | null
+  }
+
+  const {
+    data: loginData,
+    isPending,
+    error,
+  } = useQuery<LoginData, Error>({
+    queryKey: ['login', 'account'],
+    queryFn: async () => {
+      const { data } = await axiosInstance('').post<LoginData>(`/api/auth`, {
+        loginId: account.loginId,
+        pwd: account.pwd,
+      })
+      router.push('/')
+
+      return data
+    },
+    enabled: isLogin,
+    staleTime: 0,
+    retry: false,
+  })
 
   return (
     <>
       <div className="login-form-wrap">
         <div className="login-form mb15">
           <div className="login-input id">
-            <input type="text" className="login-frame" placeholder="Input Frame ID" />
+            <input
+              type="text"
+              className="login-frame"
+              placeholder="Input Frame ID"
+              value={account.loginId}
+              onChange={(e) => setAccount({ loginId: e.target.value })}
+            />
             <button className="login-icon">
               <i className="del-icon"></i>
             </button>
@@ -18,7 +71,13 @@ export default function Login() {
         </div>
         <div className="login-form">
           <div className="login-input pw">
-            <input type={`${pwShow ? 'text' : 'password'}`} className="login-frame" placeholder="Input Frame PW" />
+            <input
+              type={`${pwShow ? 'text' : 'password'}`}
+              className="login-frame"
+              placeholder="Input Frame PW"
+              value={account.pwd}
+              onChange={(e) => setAccount({ pwd: e.target.value })}
+            />
             <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}>
               <i className="show-icon"></i>
             </button>
@@ -26,19 +85,19 @@ export default function Login() {
         </div>
         <div className="login-check-warp">
           <div className="check-form-box">
-            <input type="checkbox" id="ch01" />
+            <input type="checkbox" id="ch01" checked={idSave} onChange={() => setIdSave(!idSave)} />
             <label htmlFor="ch01">ID Save</label>
           </div>
           <div className="toggle-form">
             <label className="toggle-btn">
-              <input type="checkbox" />
+              <input type="checkbox" checked={isPartners} onChange={() => setIsPartners(!isPartners)} />
               <span className="slider"></span>
             </label>
             <div className="toggle-name">Q.PARTNERS</div>
           </div>
         </div>
         <div className="login-btn-wrap">
-          <button className="btn-frame icon login">
+          <button className="btn-frame icon login" onClick={() => setIsLogin(true)}>
             お問い合わせ <i className="btn-arr"></i>
           </button>
         </div>

src/components/ui/Main.tsx

@@ -1,16 +1,27 @@
 'use client'
 
 import { useHeaderStore } from '@/store/header'
-import { useRouter } from 'next/navigation'
+import { useSideNavState } from '@/store/sideNavState'
+import { usePathname, useRouter } from 'next/navigation'
 import { useEffect } from 'react'
 
 export default function Main() {
   const router = useRouter()
+  const pathname = usePathname()
   const { setBackBtn } = useHeaderStore()
+  const { reset } = useSideNavState()
 
+  /**
+   * 헤더 뒤로가기 버튼 컨트롤
+   * 사이드바 초기화 컨트롤
+   */
   useEffect(() => {
-    setBackBtn(false)
-  }, [])
+    if (pathname === '/') {
+      setBackBtn(false)
+    }
+    //사이드바 초기화
+    reset()
+  }, [pathname])
 
   return (
     <>

src/components/ui/common/Header.tsx

@@ -1,16 +1,17 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 
 import { Swiper, SwiperSlide } from 'swiper/react'
 
+import { useSideNavState } from '@/store/sideNavState'
+import { useHeaderStore } from '@/store/header'
+
 import type { HeaderProps } from '@/types/Header'
 
 import 'swiper/css'
-import { useSideNavState } from '@/store/sideNavState'
+import { axiosInstance } from '@/libs/axios'
 
 // type HeaderProps = {
 //   name: string //header 이름
@@ -20,27 +21,26 @@ import { useSideNavState } from '@/store/sideNavState'
 export default function Header({ name }: HeaderProps) {
   const router = useRouter()
   const pathname = usePathname()
-  const { sideNavIsOpen, setSideNavIsOpen, reset } = useSideNavState()
-  const [isShowBackBtn, setIsShowBackBtn] = useState<boolean>(false)
+  const { sideNavIsOpen, setSideNavIsOpen } = useSideNavState()
+  const { backBtn } = useHeaderStore()
 
   if (pathname === '/login') {
     return null
   }
 
-  useEffect(() => {
-    if (pathname !== '/') {
-      setIsShowBackBtn(true)
+  const handleLogout = async () => {
+    const { data } = await axiosInstance(null).get('/api/auth/logout')
+    if (data.code === 200) {
+      router.push('/login')
     }
-    //사이드바 초기화
-    reset()
-  }, [pathname])
+  }
 
   return (
     <>
       <div className="header-warp">
         <header>
           <div className="header-inner">
-            {isShowBackBtn && (
+            {backBtn && (
               <div className="back-button-wrap">
                 <button className="back-button" onClick={() => router.back()}></button>
               </div>
@@ -112,7 +112,9 @@ export default function Header({ name }: HeaderProps) {
               <div className="side-nav-footer">
                 <ul className="side-footer-list">
                   <li className="side-footer-item">
-                    <button className="bold">LOGOUT</button>
+                    <button className="bold" onClick={handleLogout}>
+                      LOGOUT
+                    </button>
                   </li>
                   <li className="side-footer-item">
                     <button>Jynoadmin</button>

src/libs/axios.ts

@@ -1,16 +1,18 @@
 import axios from 'axios'
 
-const baseURL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000'
+export const axiosInstance = (url: string | null | undefined) => {
+  const baseURL = url || process.env.NEXT_PUBLIC_API_URL
 
-export const axiosInstance = axios.create({
-  baseURL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
+  return axios.create({
+    baseURL,
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+}
 
 // Request interceptor
-axiosInstance.interceptors.request.use(
+axios.interceptors.request.use(
   (config) => {
     // 여기에 토큰 추가 등의 공통 로직을 넣을 수 있습니다
     return config
@@ -21,7 +23,7 @@ axiosInstance.interceptors.request.use(
 )
 
 // Response interceptor
-axiosInstance.interceptors.response.use(
+axios.interceptors.response.use(
   (response) => transferResponse(response),
   (error) => {
     // 에러 처리 로직

src/libs/session.ts

@@ -1,5 +1,7 @@
+import type { SessionData } from '@/types/Auth'
 import { getIronSession, SessionOptions } from 'iron-session'
 import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
 
 export const sessionOptions: SessionOptions = {
   cookieName: 'onsitesurvey_session',
@@ -14,15 +16,34 @@ export const sessionOptions: SessionOptions = {
   },
 }
 
-export interface SessionData {
-  username: string | null
-  email: string | null
-  isLoggedIn: boolean
-}
-
 export const defaultSession: SessionData = {
-  username: '',
-  email: '',
+  langCd: null,
+  currPage: 0,
+  rowCount: 0,
+  startRow: 0,
+  endRow: 0,
+  compCd: null,
+  agencyStoreId: null,
+  storeId: null,
+  userId: null,
+  category: null,
+  userNm: null,
+  userNmKana: null,
+  telNo: null,
+  fax: null,
+  email: null,
+  lastEditUser: null,
+  storeGubun: null,
+  pwCurr: null,
+  pwdInitYn: null,
+  apprStatCd: null,
+  loginFailCnt: null,
+  loginFailMinYn: null,
+  priceViewStatCd: null,
+  groupId: null,
+  storeLvl: null,
+  custCd: null,
+  builderNo: null,
   isLoggedIn: false,
 }
 
@@ -31,3 +52,11 @@ export const getSession = async () => {
   const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
   return session
 }
+
+export const logout = async () => {
+  const cookieStore = await cookies()
+  const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
+
+  session.destroy()
+  return redirect('/login')
+}

src/middleware.ts

@@ -2,16 +2,17 @@ import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
 import type { NextRequest } from 'next/server'
 import { getIronSession } from 'iron-session'
-import { SessionData, sessionOptions } from './libs/session'
+import { sessionOptions } from './libs/session'
+import type { SessionData } from './types/Auth'
 
 export async function middleware(request: NextRequest) {
   const cookieStore = await cookies()
   const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
 
   // todo: 로그인 기능 추가 시 주석 해제
-  // if (!session.isLoggedIn) {
-  //   return NextResponse.redirect(new URL('/login', request.url))
-  // }
+  if (!session.isLoggedIn) {
+    return NextResponse.redirect(new URL('/login', request.url))
+  }
 
   return NextResponse.next()
 }

src/types/Auth.ts

@@ -0,0 +1,30 @@
+export interface SessionData {
+  langCd: null
+  currPage: Number | null
+  rowCount: Number | null
+  startRow: Number | null
+  endRow: Number | null
+  compCd: null
+  agencyStoreId: null
+  storeId: null
+  userId: null
+  category: null
+  userNm: null
+  userNmKana: null
+  telNo: null
+  fax: null
+  email: null
+  lastEditUser: null
+  storeGubun: null
+  pwCurr: null
+  pwdInitYn: null
+  apprStatCd: null
+  loginFailCnt: Number | null
+  loginFailMinYn: null
+  priceViewStatCd: null
+  groupId: null
+  storeLvl: null
+  custCd: null
+  builderNo: null
+  isLoggedIn: boolean
+}