diff --git a/.gitignore b/.gitignore index f96d0c9..66c0492 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules .github +.env \ No newline at end of file diff --git a/src/.env b/src/.env deleted file mode 100644 index 17c15f0..0000000 --- a/src/.env +++ /dev/null @@ -1 +0,0 @@ -VITE_API_BASE_URL=http://34.64.38.113:8080 \ No newline at end of file diff --git a/src/api/constant.ts b/src/api/constant.ts index cdfa4e0..34b89f6 100644 --- a/src/api/constant.ts +++ b/src/api/constant.ts @@ -1,3 +1,4 @@ export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL; + export const ACCESS_TOKEN = "accessToken"; export const REFRESH_TOKEN = "refreshToken"; \ No newline at end of file diff --git a/src/pages/Camera/CameraPage.tsx b/src/pages/Camera/CameraPage.tsx index 0000c35..3cf8e24 100644 --- a/src/pages/Camera/CameraPage.tsx +++ b/src/pages/Camera/CameraPage.tsx @@ -6,10 +6,12 @@ import { Button, Flex, IconButton, useToast } from "@chakra-ui/react"; import { CameraIcon, ImageIcon } from "lucide-react"; import axios from "axios"; import LoadingSpinner from "../../components/LoadingSpinner"; +import { ACCESS_TOKEN } from '../../api/constant'; const CameraPage: React.FC = () => { const navigate = useNavigate(); const toast = useToast(); + const accessToken = 'your-access-token'; const [isCameraActive, setIsCameraActive] = useState(false); const [capturedImage, setCapturedImage] = useState(null); const [loading, setLoading] = useState(false); // 로딩 상태 추가 @@ -93,7 +95,11 @@ const CameraPage: React.FC = () => { const backendResponse = await axios.post( "/api/v1/pokedex/update", { caughtPokemons: fishData }, - { headers: { "Content-Type": "application/json" } } + { headers: + { + "Authorization": `Bearer ${accessToken}`, // 인증 토큰 + "Content-Type": "application/json" } } + ); // 3단계: 분석 페이지로 이동 diff --git a/src/pages/MainPage/components/Aquarium.tsx b/src/pages/MainPage/components/Aquarium.tsx index 4a41ec7..d6571fb 100644 --- a/src/pages/MainPage/components/Aquarium.tsx +++ b/src/pages/MainPage/components/Aquarium.tsx @@ -43,11 +43,15 @@ interface AquariumProps { const Aquarium: React.FC = ({ children }) => { const [fishData, setFishData] = useState>({}); - + const accessToken = 'your-access-token'; // 실제 토큰 값을 여기에 설정하세요. useEffect(() => { const fetchFishData = async () => { try { - // const response = await axios.get(`${API_BASE_URL}/api/v1/pokedex`); + // const response = await axios.get(`${API_BASE_URL}/api/v1/pokedex`, + // { headers: { + // Authorization: `Bearer ${accessToken}`, // Bearer 토큰 추가 + // }, + // }); // setFishData(response.data); // 물고기 데이터 저장 setFishData( { diff --git a/src/pages/Start/LoginPage.tsx b/src/pages/Start/LoginPage.tsx index 46a17e0..a59a9bf 100644 --- a/src/pages/Start/LoginPage.tsx +++ b/src/pages/Start/LoginPage.tsx @@ -11,20 +11,18 @@ import PasswordInput from "../../components/PasswordInput.tsx"; import NextButton from "../../components/NextButton.tsx"; import { Link, useNavigate } from "react-router-dom"; import start_img from "../../assets/start_img.svg"; -import { API_BASE_URL - - } from "../../api/constant.ts"; +import { API_BASE_URL} from "../../api/constant.ts"; const LoginPage: React.FC = () => { const navigate = useNavigate(); const toast = useToast(); // Chakra UI의 Toast 사용 const [email, setEmail] = useState(""); // 이메일 상태 const [password, setPassword] = useState(""); const [animate, setAnimate] = useState(false); // 애니메이션 상태 - + const handleLogin = async () => { try { // POST 요청 - const response = await axios.post(`${API_BASE_URL}/api/v1/user/login`, { + const response = await axios.post(`/api/v1/user/login`, { email, password, }); @@ -37,6 +35,8 @@ const LoginPage: React.FC = () => { duration: 3000, isClosable: true, }); + const { accessToken } = response.data.accessToken; + localStorage.setItem("accessToken", accessToken); setAnimate(true); // 애니메이션 시작 setTimeout(() => { navigate("/main"); // 메인 페이지로 이동 diff --git a/vite.config.ts b/vite.config.ts index 7923e58..dfd1c3b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,15 @@ import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], base: "/", // 배포 경로를 '/'로 설정 + server: { + proxy: { + "/api": { + target: "http://34.64.38.113:8080", // 백엔드 API 서버 주소 + changeOrigin: true, + rewrite: (path) => path, // 경로를 그대로 유지 + }, + }, + }, build: { sourcemap: false, // 프로덕션 소스맵 비활성화 chunkSizeWarningLimit: 1000, // 청크 크기 제한 경고 설정