Merge pull request #8 from team-GDGline/feat/login

feat: proxy 설정

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .github
+.env

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";

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<string | null>(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단계: 분석 페이지로 이동

src/pages/MainPage/components/Aquarium.tsx

@@ -43,11 +43,15 @@ interface AquariumProps {
 
 const Aquarium: React.FC<AquariumProps> = ({ children }) => {
   const [fishData, setFishData] = useState<Record<string, boolean>>({});
-
+  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(
           {

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"); // 메인 페이지로 이동

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, // 청크 크기 제한 경고 설정