diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71bac8b..d58808f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@emotion/styled':
         specifier: 11.11.0
         version: 11.11.0(@emotion/react@11.11.3(@types/react@18.3.12)(react@18.2.0))(@types/react@18.3.12)(react@18.2.0)
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
       framer-motion:
         specifier: 11.0.3
         version: 11.0.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -38,6 +41,9 @@ importers:
       react-router-dom:
         specifier: ^6.21.1
         version: 6.21.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-spinners:
+        specifier: ^0.14.1
+        version: 0.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       vite-plugin-svgr:
         specifier: ^4.3.0
         version: 4.3.0(rollup@4.25.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.9.0)(terser@5.36.0))
@@ -1247,6 +1253,12 @@ packages:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.7.7:
+    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
+
   babel-plugin-macros@3.1.0:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
@@ -1297,6 +1309,10 @@ packages:
   color2k@2.0.3:
     resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -1350,6 +1366,10 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
@@ -1477,6 +1497,19 @@ packages:
     resolution: {integrity: sha512-QFaHbhv9WPUeLYBDe/PAuLKJ4Dd9OPvKs9xZBr3yLXnUrDNaVXKu2baDBXe3naPY30hgHYSsf2JW4jzas2mDEQ==}
     engines: {node: '>=10'}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.1:
+    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
+    engines: {node: '>= 6'}
+
   framer-motion@11.0.3:
     resolution: {integrity: sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==}
     peerDependencies:
@@ -1650,6 +1683,14 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1740,6 +1781,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -1809,6 +1853,12 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
+  react-spinners@0.14.1:
+    resolution: {integrity: sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
+
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -3420,6 +3470,16 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  asynckit@0.4.0: {}
+
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   babel-plugin-macros@3.1.0:
     dependencies:
       '@babel/runtime': 7.26.0
@@ -3469,6 +3529,10 @@ snapshots:
 
   color2k@2.0.3: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@2.20.3: {}
 
   compute-scroll-into-view@3.0.3: {}
@@ -3518,6 +3582,8 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  delayed-stream@1.0.0: {}
+
   detect-node-es@1.1.0: {}
 
   dot-case@3.0.4:
@@ -3684,6 +3750,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  follow-redirects@1.15.9: {}
+
+  form-data@4.0.1:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   framer-motion@11.0.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       tslib: 2.8.1
@@ -3820,6 +3894,12 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -3901,6 +3981,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -3965,6 +4047,11 @@ snapshots:
       '@remix-run/router': 1.14.1
       react: 18.2.0
 
+  react-spinners@0.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   react-style-singleton@2.2.1(@types/react@18.3.12)(react@18.2.0):
     dependencies:
       get-nonce: 1.0.1
diff --git a/src/components/CheckDuplicateEmail.tsx b/src/components/CheckDuplicateEmail.tsx
index 8fb51e9..f852da7 100644
--- a/src/components/CheckDuplicateEmail.tsx
+++ b/src/components/CheckDuplicateEmail.tsx
@@ -1,83 +1,88 @@
-import {ReactNode, useState } from "react";
 import { Input, Text, Button, useToast } from "@chakra-ui/react";
 import styled from "@emotion/styled";
 import axios from "axios";
-import { API_BASE_URL } from "../api/constant";
 interface CheckDEProps {
-    value: string;
-    text: string;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    placeholder: string;
+  value: string;
+  text: string;
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
 }
 
-const CheckDuplicateEmail: React.FC<CheckDEProps> = ({ value, text, handleChange, placeholder }) => {
-    const toast = useToast();
+const CheckDuplicateEmail: React.FC<CheckDEProps> = ({
+  value,
+  text,
+  handleChange,
+  placeholder,
+}) => {
+  const toast = useToast();
 
-    const checkEmail = async () => {
-        try {
-            const response = await axios.get(`/api/v1/user/email/${value}`);
-            if (response.data) {
-                toast({
-                    title: "가입 가능한 이메일입니다.",
-                    status: "success",
-                    duration: 3000,
-                    isClosable: true,
-                });
-            } else {
-                toast({
-                    title: "이미 가입된 이메일입니다.",
-                    status: "error",
-                    duration: 3000,
-                    isClosable: true,
-                });
-            }
-        } catch (error) {
-            toast({
-                title: "오류가 발생했습니다.",
-                status: "error",
-                duration: 3000,
-                isClosable: true,
-            });
-        }
-    };
+  const checkEmail = async () => {
+    try {
+      const response = await axios.get(`/api/v1/user/email/${value}`);
+      if (response.data) {
+        toast({
+          title: "가입 가능한 이메일입니다.",
+          status: "success",
+          duration: 3000,
+          isClosable: true,
+        });
+      } else {
+        toast({
+          title: "이미 가입된 이메일입니다.",
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+        });
+      }
+    } catch {
+      toast({
+        title: "오류가 발생했습니다.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+    }
+  };
 
-    return (
-        <>
-            <Text mb='8px' color="white" fontWeight="100" alignSelf="start" ml="48px">{text}</Text>
-            <Wrapper>
-                <Input
-                    variant="filled"
-                    value={value}
-                    onChange={handleChange}
-                    placeholder={placeholder}
-                    _placeholder={{ opacity: 1, color: 'gray.500' }}
-                    size='sm'
-                    height="60px"
-                    borderRadius="10px"
-                    backgroundColor="white"
-                    mb="24px"
-                />
-                <Button
-                    w="60px"
-                    h="56px"
-                    backgroundColor="#11597F"
-                    color="white"
-                    borderRadius="10px"
-                    fontWeight="200"
-                    onClick={checkEmail}
-                >
-                    중복 확인
-                </Button>
-            </Wrapper>
-        </>
-    );
+  return (
+    <>
+      <Text mb="8px" color="white" fontWeight="100" alignSelf="start" ml="48px">
+        {text}
+      </Text>
+      <Wrapper>
+        <Input
+          variant="filled"
+          value={value}
+          onChange={handleChange}
+          placeholder={placeholder}
+          _placeholder={{ opacity: 1, color: "gray.500" }}
+          size="sm"
+          height="60px"
+          borderRadius="10px"
+          backgroundColor="white"
+          mb="24px"
+        />
+        <Button
+          w="60px"
+          h="56px"
+          backgroundColor="#11597F"
+          color="white"
+          borderRadius="10px"
+          fontWeight="200"
+          onClick={checkEmail}
+        >
+          중복 확인
+        </Button>
+      </Wrapper>
+    </>
+  );
 };
 
 export default CheckDuplicateEmail;
 
 const Wrapper = styled.div`
-    display: flex;
-    width: calc(100% - 96px);
-    gap: 8px;
-    align-items: baseline;
+  display: flex;
+  width: calc(100% - 96px);
+  gap: 8px;
+  align-items: baseline;
 `;
diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
index 0db9d84..0eb8904 100644
--- a/src/components/LoadingSpinner.tsx
+++ b/src/components/LoadingSpinner.tsx
@@ -1,9 +1,9 @@
 import fishIcon from "../assets/fishIcon.svg";
-import {SyncLoader} from "react-spinners";
-import {useEffect, useState} from "react";
+import { SyncLoader } from "react-spinners";
+import { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { Text } from "@chakra-ui/react";
-export default function LoadingSpinner({timeout = 200}) {
+export default function LoadingSpinner({ timeout = 200 }) {
   const [showSpinner, setShowSpinner] = useState(false);
 
   /**
@@ -15,17 +15,18 @@ export default function LoadingSpinner({timeout = 200}) {
     }, timeout);
 
     return () => clearTimeout(timer); // 메모리 누수 방지
-  }, []);
-
+  });
 
   return (
-  <Wrapper>
+    <Wrapper>
       {showSpinner && (
         <>
-          <img className="w-[60px] h-[60px]" src={fishIcon}/>
-          <div className="h-[12px]"/>
-          <SyncLoader color="#59CAFC" size={10}/>
-          <Text mt="10px" fontSize='1xl' color="white">물고기 박사님이 확인 중이에요~</Text>
+          <img className="w-[60px] h-[60px]" src={fishIcon} />
+          <div className="h-[12px]" />
+          <SyncLoader color="#59CAFC" size={10} />
+          <Text mt="10px" fontSize="1xl" color="white">
+            물고기 박사님이 확인 중이에요~
+          </Text>
         </>
       )}
     </Wrapper>
@@ -33,10 +34,10 @@ export default function LoadingSpinner({timeout = 200}) {
 }
 
 const Wrapper = styled.div`
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`;
\ No newline at end of file
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
index 3592220..10ce7a3 100644
--- a/src/components/PasswordInput.tsx
+++ b/src/components/PasswordInput.tsx
@@ -1,27 +1,30 @@
-import { ReactNode } from "react";
-import { 
-    Input, Text
- } from "@chakra-ui/react";
-
+import { Input, Text } from "@chakra-ui/react";
 
 interface PasswordInputProps {
-    value: string;
-    text: string;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    placeholder: string;
+  value: string;
+  text: string;
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder: string;
 }
 
-const PasswordInput: React.FC<PasswordInputProps> = ({ value, text, handleChange, placeholder }) => {
+const PasswordInput: React.FC<PasswordInputProps> = ({
+  value,
+  text,
+  handleChange,
+  placeholder,
+}) => {
   return (
     <>
-      <Text mb='8px' color="white" fontWeight="100" alignSelf="start" ml="48px">{text}</Text>
+      <Text mb="8px" color="white" fontWeight="100" alignSelf="start" ml="48px">
+        {text}
+      </Text>
       <Input
-      variant="filled"
-      type="password"
+        variant="filled"
+        type="password"
         value={value}
         onChange={handleChange}
         placeholder={placeholder}
-        size='sm'
+        size="sm"
         width="calc(100% - 96px)"
         height="60px"
         borderRadius="10px"
diff --git a/src/components/WhiteInput.tsx b/src/components/WhiteInput.tsx
index 008af66..957a1fd 100644
--- a/src/components/WhiteInput.tsx
+++ b/src/components/WhiteInput.tsx
@@ -1,4 +1,3 @@
-import { ReactNode } from "react";
 import { 
     Input, Text
  } from "@chakra-ui/react";
diff --git a/src/pages/Analysis/AnalysisPage.tsx b/src/pages/Analysis/AnalysisPage.tsx
index 2dbd4ff..6feadfc 100644
--- a/src/pages/Analysis/AnalysisPage.tsx
+++ b/src/pages/Analysis/AnalysisPage.tsx
@@ -45,15 +45,6 @@ const AnalysisPage = () => {
     null
   );
 
-  //const mockData = {
-  //  pokemonStatus: {
-  //    gardenEel: "new",
-  //    clownfish: "old",
-  //    piranha: "old",
-  //    californiaSeaLion: "old",
-  //  },
-  //};
-
   const getStatusColor = (status: string) => {
     switch (status) {
       case "CR":
@@ -274,7 +265,7 @@ const AnalysisPage = () => {
         mt={20}
       >
         <Button
-          onClick={() => navigate("/capture")}
+          onClick={() => navigate("/camera")}
           colorScheme="blue"
           variant="outline"
           background={"white"}
diff --git a/src/pages/Camera/CameraPage.tsx b/src/pages/Camera/CameraPage.tsx
index 3cf8e24..e05fb1e 100644
--- a/src/pages/Camera/CameraPage.tsx
+++ b/src/pages/Camera/CameraPage.tsx
@@ -6,303 +6,322 @@ 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); // 로딩 상태 추가
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const fileInputRef = useRef<HTMLInputElement>(null); // 파일 선택 input 참조
+  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); // 로딩 상태 추가
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null); // 파일 선택 input 참조
 
-    useEffect(() => {
-        startCamera();
-        return () => stopCamera(); // 페이지 떠날 때 카메라 정지
-    }, []);
+  useEffect(() => {
+    startCamera();
+    return () => stopCamera(); // 페이지 떠날 때 카메라 정지
+  }, []);
 
-    const startCamera = async () => {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-            if (videoRef.current) {
-                videoRef.current.srcObject = stream;
-                setIsCameraActive(true);
-            }
-        } catch (error) {
-            console.error("카메라 접근 오류:", error);
-        }
-    };
-
-    const stopCamera = () => {
-        const stream = videoRef.current?.srcObject as MediaStream;
-        stream?.getTracks().forEach(track => track.stop());
-        setIsCameraActive(false);
-    };
+  const startCamera = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        setIsCameraActive(true);
+      }
+    } catch (error) {
+      console.error("카메라 접근 오류:", error);
+    }
+  };
 
-    const captureImage = () => {
-        if (videoRef.current && canvasRef.current) {
-            const canvas = canvasRef.current;
-            const video = videoRef.current;
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            const context = canvas.getContext("2d");
-            if (context) {
-                context.drawImage(video, 0, 0, canvas.width, canvas.height);
-                const imageData = canvas.toDataURL("image/png");
-                setCapturedImage(imageData);
-                stopCamera();
-            }
-        }
-    };
-    const handleGallerySelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0]; // 사용자가 선택한 첫 번째 파일
-        if (file) {
-            const reader = new FileReader(); // FileReader를 사용해 파일 읽기
-            reader.onload = (e) => {
-                setCapturedImage(e.target?.result as string); // Base64로 변환된 이미지 저장
-                stopCamera(); // 갤러리 이미지를 선택하면 카메라 중지
-            };
-            reader.readAsDataURL(file); // 파일을 Base64 문자열로 변환
-        }
-    };
+  const stopCamera = () => {
+    const stream = videoRef.current?.srcObject as MediaStream;
+    stream?.getTracks().forEach((track) => track.stop());
+    setIsCameraActive(false);
+  };
 
-    const analyzeImage = async () => {
-        if (!capturedImage) {
-            toast({
-                title: "분석할 이미지가 없습니다.",
-                status: "warning",
-                duration: 2000,
-                isClosable: true,
-            });
-            return;
-        }
-        setLoading(true); // 로딩 상태 활성화
-        try {
-            // 1단계: AI API로 이미지 전송
-            const aiResponse = await axios.post("/ai/analyze", { image: capturedImage });
-            const fishData = aiResponse.data.fishInfo;
+  const captureImage = () => {
+    if (videoRef.current && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const video = videoRef.current;
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext("2d");
+      if (context) {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const imageData = canvas.toDataURL("image/png");
+        setCapturedImage(imageData);
+        stopCamera();
+      }
+    }
+  };
+  const handleGallerySelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]; // 사용자가 선택한 첫 번째 파일
+    if (file) {
+      const reader = new FileReader(); // FileReader를 사용해 파일 읽기
+      reader.onload = (e) => {
+        setCapturedImage(e.target?.result as string); // Base64로 변환된 이미지 저장
+        stopCamera(); // 갤러리 이미지를 선택하면 카메라 중지
+      };
+      reader.readAsDataURL(file); // 파일을 Base64 문자열로 변환
+    }
+  };
 
-            if (!fishData || fishData.length === 0) {
-                setLoading(false);
-                navigate("/notfound");
-                return;
-            }
+  const analyzeImage = async () => {
+    if (!capturedImage) {
+      toast({
+        title: "분석할 이미지가 없습니다.",
+        status: "warning",
+        duration: 2000,
+        isClosable: true,
+      });
+      return;
+    }
+    setLoading(true); // 로딩 상태 활성화
+    try {
+      // 1단계: AI API로 이미지 전송
+      const aiResponse = await axios.post("/ai/analyze", {
+        image: capturedImage,
+      });
+      const fishData = aiResponse.data.fishInfo;
 
-            // 2단계: 물고기 데이터 백엔드로 전송
-            const backendResponse = await axios.post(
-                "/api/v1/pokedex/update",
-                { caughtPokemons: fishData },
-                { headers:
-                    {
-                    "Authorization": `Bearer ${accessToken}`, // 인증 토큰 
-                    "Content-Type": "application/json" } }
-                
-            );
+      if (!fishData || fishData.length === 0) {
+        setLoading(false);
+        navigate("/notfound");
+        return;
+      }
 
-            // 3단계: 분석 페이지로 이동
-            const { pokemonStatus } = backendResponse.data;
-            navigate("/analysis", { state: { pokemonStatus } });
-        } catch (error) {
-            toast({
-                title: "분석 실패",
-                description: "다시 시도해주세요.",
-                status: "error",
-                duration: 3000,
-                isClosable: true,
-            });
-        } finally {
-            setLoading(false); // 로딩 상태 비활성화
+      // 2단계: 물고기 데이터 백엔드로 전송
+      const backendResponse = await axios.post(
+        "/api/v1/pokedex/update",
+        { caughtPokemons: fishData },
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`, // 인증 토큰
+            "Content-Type": "application/json",
+          },
         }
-    };
+      );
 
-    return (
-        <Wrapper>
-            <IconButton
-                icon={<HomeIcon boxSize="30px" />}
-                aria-label="홈으로 이동"
-                onClick={() => navigate("/main")}
-                variant="ghost"
-                _hover={{ bg: "transparent" }}
-                _active={{ bg: "transparent" }}
-                _focus={{ boxShadow: "none" }}
-                position="absolute"
-                left="0"
-                zIndex="10"
-            />
+      // 3단계: 분석 페이지로 이동
+      const { pokemonStatus } = backendResponse.data;
+      navigate("/analysis", { state: { pokemonStatus } });
+    } catch {
+      toast({
+        title: "분석 실패",
+        description: "다시 시도해주세요.",
+        status: "error",
+        duration: 3000,
+        isClosable: true,
+      });
+    } finally {
+      setLoading(false); // 로딩 상태 비활성화
+    }
+  };
 
-            <CameraWrapper>
-                {loading ? (
-                    <LoadingSpinner /> // 로딩 중일 때 LoadingSpinner 표시
-                ) : (
-                    <>
-                        <video ref={videoRef} autoPlay style={{ width: "100%", height: "90%", display: isCameraActive ? "block" : "none", objectFit: "cover" }} />
+  return (
+    <Wrapper>
+      <IconButton
+        icon={<HomeIcon boxSize="30px" />}
+        aria-label="홈으로 이동"
+        onClick={() => navigate("/main")}
+        variant="ghost"
+        _hover={{ bg: "transparent" }}
+        _active={{ bg: "transparent" }}
+        _focus={{ boxShadow: "none" }}
+        position="absolute"
+        left="0"
+        zIndex="10"
+      />
 
-                        {isCameraActive && (
-               <Flex alignItems="baseline" justifyContent="center" mt="40px" width="100%">
-               {/* 갤러리 버튼 (왼쪽 끝) */}
-               <GalleryButton onClick={() => fileInputRef.current?.click()} ml="20px">
-                   <ImageIcon size="40" />
-               </GalleryButton>
-           
-               {/* 카메라 버튼 (중앙) */}
-               <CameraButton onClick={captureImage}>
-                   <CameraIcon size="40" />
-               </CameraButton>
-           </Flex>
-           
-                        )}
+      <CameraWrapper>
+        {loading ? (
+          <LoadingSpinner /> // 로딩 중일 때 LoadingSpinner 표시
+        ) : (
+          <>
+            <video
+              ref={videoRef}
+              autoPlay
+              style={{
+                width: "100%",
+                height: "90%",
+                display: isCameraActive ? "block" : "none",
+                objectFit: "cover",
+              }}
+            />
 
-                        {!isCameraActive && (
-                            <>
-                                <img src={capturedImage || ""} alt="캡처된 이미지" style={{ width: "100%", height: "90%", objectFit: "cover" }} />
+            {isCameraActive && (
+              <Flex
+                alignItems="baseline"
+                justifyContent="center"
+                mt="40px"
+                width="100%"
+              >
+                {/* 갤러리 버튼 (왼쪽 끝) */}
+                <GalleryButton
+                  onClick={() => fileInputRef.current?.click()}
+                  ml="20px"
+                >
+                  <ImageIcon size="40" />
+                </GalleryButton>
 
-                                <BottomButton
-                                    onClick={startCamera}
-                                    isPrimary
-                                    mt="10px"
-                                    mb="10px"
-                                    borderRadius="50%"
-                                    bg="white"
-                                    border="1px solid black"
-                                    color="black"
-                                    w={16}
-                                    h={16}
-                                    boxShadow="0px 4px 8px rgba(0, 0, 0, 0.2)"
-                                >
-                                    다시 찍기
-                                </BottomButton>
+                {/* 카메라 버튼 (중앙) */}
+                <CameraButton onClick={captureImage}>
+                  <CameraIcon size="40" />
+                </CameraButton>
+              </Flex>
+            )}
 
-                                <BottomButton
-                                    onClick={analyzeImage}
-                                    mt="10px"
-                                    mb="10px"
-                                    borderRadius="50%"
-                                    bg="white"
-                                    border="1px solid black"
-                                    color="black"
-                                    w={16}
-                                    h={16}
-                                    boxShadow="0px 4px 8px rgba(0, 0, 0, 0.2)"
-                                >
-                                    분석하기
-                                </BottomButton>
-                            </>
-                        )}
-                    </>
-                )}
-                {/* 숨겨진 input */}
-                <input
-                    type="file"
-                    accept="image/*"
-                    ref={fileInputRef}
-                    style={{ display: "none" }}
-                    onChange={handleGallerySelect}
+            {!isCameraActive && (
+              <>
+                <img
+                  src={capturedImage || ""}
+                  alt="캡처된 이미지"
+                  style={{ width: "100%", height: "90%", objectFit: "cover" }}
                 />
-                <canvas ref={canvasRef} style={{ display: "none" }} />
-            </CameraWrapper>
-        </Wrapper>
-    );
+
+                <BottomButton
+                  onClick={startCamera}
+                  isPrimary
+                  mt="10px"
+                  mb="10px"
+                  borderRadius="50%"
+                  bg="white"
+                  border="1px solid black"
+                  color="black"
+                  w={16}
+                  h={16}
+                  boxShadow="0px 4px 8px rgba(0, 0, 0, 0.2)"
+                >
+                  다시 찍기
+                </BottomButton>
+
+                <BottomButton
+                  onClick={analyzeImage}
+                  mt="10px"
+                  mb="10px"
+                  borderRadius="50%"
+                  bg="white"
+                  border="1px solid black"
+                  color="black"
+                  w={16}
+                  h={16}
+                  boxShadow="0px 4px 8px rgba(0, 0, 0, 0.2)"
+                >
+                  분석하기
+                </BottomButton>
+              </>
+            )}
+          </>
+        )}
+        {/* 숨겨진 input */}
+        <input
+          type="file"
+          accept="image/*"
+          ref={fileInputRef}
+          style={{ display: "none" }}
+          onChange={handleGallerySelect}
+        />
+        <canvas ref={canvasRef} style={{ display: "none" }} />
+      </CameraWrapper>
+    </Wrapper>
+  );
 };
 
 export default CameraPage;
 
 const Wrapper = styled.div`
-    background-color: #E9F9FF;
-    width: 100%;
-    height: 100vh;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  background-color: #e9f9ff;
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
 
 const CameraWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 90%;
 `;
 
 interface BottomButtonProps {
-    isPrimary?: boolean;
+  isPrimary?: boolean;
 }
 
-const BottomButton = styled(Button) <BottomButtonProps>`
-    background-color: #FFFFFF;
-    color: #05518F;
-    width: 40%;
-    height: 70px;
-    font-weight: 300;
-    font-size: 24px;
-    border-radius: 10px;
-    border: none;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-    position: absolute;
-    bottom: 20px;
-    text-align: center;
-    ${({ isPrimary }) =>
-        isPrimary
-            ? `left: 30px;`
-            : `right: 30px;`}
+const BottomButton = styled(Button)<BottomButtonProps>`
+  background-color: #ffffff;
+  color: #05518f;
+  width: 40%;
+  height: 70px;
+  font-weight: 300;
+  font-size: 24px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  bottom: 20px;
+  text-align: center;
+  ${({ isPrimary }) => (isPrimary ? `left: 30px;` : `right: 30px;`)}
 
-    &:hover {
-        background-color: #C5EFFF;
-    }
+  &:hover {
+    background-color: #c5efff;
+  }
 
-    &:active {
-        background-color: #55CFFF;
-        transform: scale(0.95);
-        box-shadow: 0 0 20px rgba(85, 207, 255, 0.6);
-    }
+  &:active {
+    background-color: #55cfff;
+    transform: scale(0.95);
+    box-shadow: 0 0 20px rgba(85, 207, 255, 0.6);
+  }
 `;
 
 const GalleryButton = styled(Button)`
-   background-color: #FFFFFF;
-    color: black;
-    width: 60px;
-    height: 60px;
-    font-weight: 300;
-    font-size: 24px;
-    border-radius: 10px;
-    border: none;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-    position: absolute;
-    left: 20px;
-    text-align: center;
-    &:hover {
-        background-color: #C5EFFF;
-    }
+  background-color: #ffffff;
+  color: black;
+  width: 60px;
+  height: 60px;
+  font-weight: 300;
+  font-size: 24px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  left: 20px;
+  text-align: center;
+  &:hover {
+    background-color: #c5efff;
+  }
 
-    &:active {
-        background-color: #55CFFF;
-        transform: scale(0.95);
-        box-shadow: 0 0 20px rgba(85, 207, 255, 0.6);
-    }
+  &:active {
+    background-color: #55cfff;
+    transform: scale(0.95);
+    box-shadow: 0 0 20px rgba(85, 207, 255, 0.6);
+  }
 `;
 const CameraButton = styled(Button)`
-    background-color: #FFFFFF;
-    color: black;
-    width: 80px;
-    height: 80px;
-    font-weight: 300;
-    font-size: 24px;
-    border-radius: 50%;
-    border: none;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-    bottom: 20px;
-    text-align: center;
-    &:hover {
-        background-color: #C5EFFF;
-    }
+  background-color: #ffffff;
+  color: black;
+  width: 80px;
+  height: 80px;
+  font-weight: 300;
+  font-size: 24px;
+  border-radius: 50%;
+  border: none;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  bottom: 20px;
+  text-align: center;
+  &:hover {
+    background-color: #c5efff;
+  }
 
-    &:active {
-        background-color: #55CFFF;
-        transform: scale(0.95);
-        box-shadow: 0 0 20px rgba(85, 207, 255, 0.6);
-    }
+  &:active {
+    background-color: #55cfff;
+    transform: scale(0.95);
+    box-shadow: 0 0 20px rgba(85, 207, 255, 0.6);
+  }
 `;
 // const CameraButton = styled(Button)`
 //     border-radius: 50%;
@@ -318,4 +337,4 @@ const CameraButton = styled(Button)`
 //     &:hover {
 //         background-color: #f0f0f0;
 //     }
-// `;
\ No newline at end of file
+// `;
diff --git a/src/pages/NotFound/NotFoundPage.tsx b/src/pages/NotFound/NotFoundPage.tsx
index fbe3ca7..c1c2ba5 100644
--- a/src/pages/NotFound/NotFoundPage.tsx
+++ b/src/pages/NotFound/NotFoundPage.tsx
@@ -76,7 +76,7 @@ const NotFound = () => {
           분석된 물고기가 없어요 😢
         </Text>
         <Button
-          onClick={() => navigate("/capture")}
+          onClick={() => navigate("/camera")}
           colorScheme="blue"
           variant="outline"
           background={"white"}
diff --git a/src/pages/Start/LoginPage.tsx b/src/pages/Start/LoginPage.tsx
index a59a9bf..6ce675c 100644
--- a/src/pages/Start/LoginPage.tsx
+++ b/src/pages/Start/LoginPage.tsx
@@ -11,14 +11,14 @@ 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";
+
 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 요청
@@ -42,10 +42,9 @@ const LoginPage: React.FC = () => {
           navigate("/main"); // 메인 페이지로 이동
         }, 1300);
       }
-    } catch (error: any) {
-      // 오류 처리
-      if (error.response) {
-        const status = error.response.status;
+    } catch (error: unknown) {
+      if (axios.isAxiosError(error)) {
+        const status = error.response?.status;
 
         if (status === 401) {
           toast({
@@ -71,6 +70,7 @@ const LoginPage: React.FC = () => {
           });
         }
       } else {
+        // axios 오류가 아닌 경우의 일반 오류 처리
         toast({
           title: "서버와 연결할 수 없습니다.",
           description: "네트워크 상태를 확인해주세요.",
diff --git a/src/pages/Start/SignupPage.tsx b/src/pages/Start/SignupPage.tsx
index 55277f9..42db65d 100644
--- a/src/pages/Start/SignupPage.tsx
+++ b/src/pages/Start/SignupPage.tsx
@@ -12,7 +12,6 @@ import NextButton from "../../components/NextButton.tsx";
 import CheckDuplicateEmail from "../../components/CheckDuplicateEmail.tsx";
 import { useNavigate } from "react-router-dom";
 import start_img from "../../assets/start_img.svg";
-import { API_BASE_URL } from "../../api/constant.ts";
 
 const SignupPage: React.FC = () => {
   const navigate = useNavigate();
@@ -24,16 +23,20 @@ const SignupPage: React.FC = () => {
 
   const handleSignup = async () => {
     try {
-      const response = await axios.post(`/api/v1/user/signup`, {
-        email,
-        nickName,
-        password,
-      },
-      {
-        headers: {
-          "Content-Type": "application/json",
-        }});
-      
+      const response = await axios.post(
+        `/api/v1/user/signup`,
+        {
+          email,
+          nickName,
+          password,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
       if (response.status === 200) {
         toast({
           title: "회원가입이 완료되었습니다",
@@ -47,13 +50,25 @@ const SignupPage: React.FC = () => {
         }, 1300);
       }
     } catch (error) {
-      toast({
-        title: "회원가입에 실패했습니다",
-        description: error.response?.data?.message || "다시 시도해주세요",
-        status: "error",
-        duration: 3000,
-        isClosable: true,
-      });
+      if (axios.isAxiosError(error)) {
+        // error가 AxiosError 타입일 때만 접근
+        toast({
+          title: "회원가입에 실패했습니다",
+          description: error.response?.data?.message || "다시 시도해주세요",
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+        });
+      } else {
+        // 일반적인 오류 처리
+        toast({
+          title: "회원가입에 실패했습니다",
+          description: "알 수 없는 오류가 발생했습니다.",
+          status: "error",
+          duration: 3000,
+          isClosable: true,
+        });
+      }
     }
   };
 
@@ -89,21 +104,51 @@ const SignupPage: React.FC = () => {
         animation={`${swimAnimation} 10s linear infinite reverse`}
         opacity={0.8}
       />
-      <Flex zIndex="10" position="relative" mt="80px" justifyContent="center" alignItems="center" flexDirection="column">
-        <Text fontSize="4xl" color="#152972">물</Text>
-        <Text fontSize="4xl" color="#152972">멍</Text>
+      <Flex
+        zIndex="10"
+        position="relative"
+        mt="80px"
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="column"
+      >
+        <Text fontSize="4xl" color="#152972">
+          물
+        </Text>
+        <Text fontSize="4xl" color="#152972">
+          멍
+        </Text>
       </Flex>
-      
+
       <Flex width="100%" flexDirection="column" alignItems="center">
-        <CheckDuplicateEmail value={email} text="이메일" handleChange={handleChangeEmail} placeholder="이메일을 입력해주세요." />
-        <PasswordInput value={password} text="비밀번호" handleChange={handleChangePw} placeholder="비밀번호를 입력해주세요." />
-        <WhiteInput value={nickName} text="닉네임" handleChange={handleChangeName} placeholder="닉네임을 입력해주세요." />
+        <CheckDuplicateEmail
+          value={email}
+          text="이메일"
+          handleChange={handleChangeEmail}
+          placeholder="이메일을 입력해주세요."
+        />
+        <PasswordInput
+          value={password}
+          text="비밀번호"
+          handleChange={handleChangePw}
+          placeholder="비밀번호를 입력해주세요."
+        />
+        <WhiteInput
+          value={nickName}
+          text="닉네임"
+          handleChange={handleChangeName}
+          placeholder="닉네임을 입력해주세요."
+        />
       </Flex>
-      
+
       <NextButton onClick={handleSignup}>가입하기</NextButton>
 
       {/* 화면 밖에서 시작해 오른쪽으로 지나가는 애니메이션 */}
-      <AnimatedFish src={start_img} alt="fish" className={animate ? "animate-in" : ""} />
+      <AnimatedFish
+        src={start_img}
+        alt="fish"
+        className={animate ? "animate-in" : ""}
+      />
     </Wrapper>
   );
 };
@@ -127,7 +172,7 @@ const AnimatedFish = styled.img`
   z-index: 5;
   animation: ${floatAnimation} 3s ease-in-out infinite; /* 둥둥 떠있는 애니메이션 */
   &.animate-in {
-    animation: ${slideInOutAnimation} 3s ease-in-out forwards;  
+    animation: ${slideInOutAnimation} 3s ease-in-out forwards;
   }
 `;