chore: axios 설정 충돌 해결

.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

@@ -9,9 +9,13 @@ const nextConfig: NextConfig = {
   async rewrites() {
     return [
       {
-        source: '/api/:path*',
+        source: '/api/user/login',
-        destination: `${process.env.NEXT_PUBLIC_API_URL}/api/:path*`,
+        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/api/auth/route.ts

@@ -0,0 +1,14 @@
+import { axiosInstance } from '@/libs/axios'
+import { NextResponse } from 'next/server'
+
+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)
+
+  return NextResponse.json('ok')
+}

src/components/Login.tsx

@@ -1,16 +1,68 @@
 'use client'
 
-import { useState } from 'react'
+import { axiosInstance } from '@/libs/axios'
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useReducer, useState } from 'react'
+import { AxiosResponse } from 'axios'
+
+interface AccountState {
+  loginId: string
+  pwd: string
+}
 
 export default function Login() {
-  const [pwShow, setPwShow] = useState(false) //비밀번호 보이기 숨기기
+  //비밀번호 보이기 숨기기
+  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: '',
+  })
+
+  const {
+    data: loginData,
+    isPending,
+    error,
+  } = useQuery<AxiosResponse, Error>({
+    queryKey: ['login', 'account'],
+    queryFn: () => {
+      const result = axiosInstance('').post(`/api/auth`, {
+        loginId: account.loginId,
+        pwd: account.pwd,
+      })
+      return result
+    },
+    enabled: isLogin,
+    staleTime: 0,
+    retry: false,
+  })
+
+  useEffect(() => {
+    if (loginData) {
+      console.log('🚀 ~ Login ~ loginData:', loginData)
+      setIsLogin(false)
+    }
+  }, [loginData])
 
   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 +70,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 +84,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/libs/axios.ts

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