diff --git a/src/apis/http.api.ts b/src/apis/http.api.ts index fe233f9..66121c4 100644 --- a/src/apis/http.api.ts +++ b/src/apis/http.api.ts @@ -1,20 +1,9 @@ import axios, { AxiosRequestConfig } from 'axios'; -const BASE_URL = import.meta.env.VITE_API_BASE_URL; -const DEFAULT_TIMEOUT = 30000; // 요청 제한 시간 - -// 토큰 관리 함수 -function getToken(): string | null { - return localStorage.getItem('token'); -} - -function setToken(token: string) { - localStorage.setItem('token', token); -} +import { getToken, removeToken } from '@/utils/token'; -function removeToken() { - localStorage.removeItem('token'); -} +export const BASE_URL = import.meta.env.VITE_API_BASE_URL; +const DEFAULT_TIMEOUT = 30000; // 요청 제한 시간 export const createClient = (config?: AxiosRequestConfig) => { const token = getToken(); // 토큰 가져오기 @@ -61,35 +50,3 @@ export const createClient = (config?: AxiosRequestConfig) => { }; export const httpClient = createClient(); - -// 토큰 관련 함수 export -export { setToken, removeToken, getToken }; - -// 공통 요청 부분 - -type RequestMethod = 'get' | 'post' | 'put' | 'delete'; - -export const requestHandler = async ( - method: RequestMethod, - url: string, - payload?: T -) => { - let response; - - switch (method) { - case 'post': - response = await httpClient.post(url, payload); - break; - case 'get': - response = await httpClient.get(url); - break; - case 'put': - response = await httpClient.put(url, payload); - break; - case 'delete': - response = await httpClient.delete(url); - break; - } - - return response.data; -}; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b31e1f2..5264699 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -7,7 +7,7 @@ const Header = () => { const navigate = useNavigate(); const handleLogoClick = () => { - navigate('/'); // 메인 페이지로 이동 + navigate('/'); }; return ( @@ -38,7 +38,6 @@ const HeaderWrapper = styled.div` justify-content: space-between; `; -// 클릭 가능한 스타일을 추가한 로고 const Logo = styled.img` - cursor: pointer; // 커서를 클릭 가능한 손가락 모양으로 변경 + cursor: pointer; `; diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx index 02705db..807a178 100644 --- a/src/components/MenuButton.tsx +++ b/src/components/MenuButton.tsx @@ -7,7 +7,7 @@ import { useNavigate } from 'react-router'; import { logout } from '@/hooks/userSlice'; import { useSelector, useDispatch } from 'react-redux'; import { RootState } from '@/store/rootReducer'; -import { removeToken } from '@/apis/http.api'; +import { removeToken } from '@/utils/token'; const MenuButton = () => { const [isOpen, setIsOpen] = useState(false); @@ -17,17 +17,17 @@ const MenuButton = () => { const role = useSelector((state: RootState) => state.user.userInfo?.role); const handleMyPage = () => { - setIsOpen(false); // 드롭다운 먼저 닫기 + setIsOpen(false); navigate('/mypage'); }; const handleAdminPage = () => { - setIsOpen(false); // 드롭다운 먼저 닫기 + setIsOpen(false); navigate('/adminpage'); }; const handleLogin = () => { - setIsOpen(false); // 드롭다운 먼저 닫기 + setIsOpen(false); navigate('/login'); }; @@ -48,7 +48,6 @@ const MenuButton = () => { return ( - {/* 햄버거 버튼 */} - {/* 드롭다운 메뉴 */} {isOpen && (
  • { - setIsOpen(false); // 드롭다운 먼저 닫기 + setIsOpen(false); if (isLoggedIn) { role === 'admin' ? navigate('/adminpage') @@ -73,7 +71,6 @@ const MenuButton = () => { } }} > - {/* 아바타 표시 */} { try { - const response = await axios.post( - 'http://localhost:3333/api/users/login', - { - email, - password, - } - ); + const response = await axios.post(`${BASE_URL}/api/users/login`, { + email, + password, + }); if (response.data.success && response.data.token) { return response.data.token; diff --git a/src/pages/JoinPage.tsx b/src/pages/JoinPage.tsx index c2c87f0..651e03a 100644 --- a/src/pages/JoinPage.tsx +++ b/src/pages/JoinPage.tsx @@ -25,18 +25,18 @@ function JoinPage() { watch, } = useForm(); - const password = watch('password'); // PasswordGuideLines에서 실시간 사용 + const password = watch('password'); const onSubmit = async (data: JoinProps) => { setIsLoading(true); try { - await join(data); // 회원가입 요청 + await join(data); alert('회원가입이 완료되었습니다!'); - navigate('/login'); // 로그인 페이지로 이동 + navigate('/login'); } catch (error: any) { console.error('회원가입 중 에러 발생:', error); if (error.response?.data?.message) { - alert(error.response.data.message); // 서버에서 반환된 에러 메시지 표시 + alert(error.response.data.message); } else { alert('회원가입에 실패했습니다. 다시 시도해주세요.'); } diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index f418c29..0c1c3ca 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -38,8 +38,6 @@ function LoginPage() { } }; - // 로그인 상태 확인 후 리다이렉트 처리 - return ( diff --git a/src/utils/token.ts b/src/utils/token.ts index 025f9ed..99a666a 100644 --- a/src/utils/token.ts +++ b/src/utils/token.ts @@ -1,12 +1,11 @@ -// 로컬스토리지에서 토큰 가져오기 -export const getToken = (): string | null => { +export function getToken(): string | null { return localStorage.getItem('token'); -}; +} -export const setToken = (token: string) => { +export function setToken(token: string) { localStorage.setItem('token', token); -}; +} -export const removeToken = () => { +export function removeToken() { localStorage.removeItem('token'); -}; +}