diff --git a/src/api/index.ts b/src/api/index.ts
index e8eab16..af405dc 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,12 @@ const API = axios.create({
 
 // 요청 시 Authorization 헤더 추가
 API.interceptors.request.use((config) => {
-  const token = localStorage.getItem("access_token");
+  if (!localStorage.getItem("accessToken")) {
+    console.log("토큰없음.");
+    return config;
+  }
+  const token = localStorage.getItem("accessToken");
+  console.log("토큰:", token);
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 2ffc051..182b0c4 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -1,14 +1,30 @@
 import { useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
 import * as S from "@/components/NavBar/NavBar.style";
 import logo from "@/assets/image/logo.svg";
 import doc from "@/assets/image/doc.svg";
 import lank from "@/assets/image/lank.svg";
 import add from "@/assets/image/add.svg";
 import logout from "@/assets/image/logout.svg";
+import API from "@/api/index";
 
 const NavBar = () => {
   const navigate = useNavigate();
 
+  const [user, setUser] = useState({
+    user_id: "",
+    nickname: "",
+    level_title: "",
+    point: 0.0,
+    total_revenue: 0.0,
+  });
+
+  useEffect(() => {
+    API.get("/users").then((response) => {
+      setUser(response.data);
+    });
+  }, []);
+
   return (
     <S.NavBar>
       <div className="left">
@@ -36,18 +52,20 @@ const NavBar = () => {
                   src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
                   alt="Profile"
                 />
-                <span className="user-name">사용자 이름</span>
+                <span className="user-name">{user.nickname} 님</span>
               </span>
               <hr className="dropdown-hr" />
-              <S.StyledLankLabel rank="골드">골드</S.StyledLankLabel>
-              <div className="content">포인트: 1000</div>
-              <div className="content">누적수익: 1000</div>
+              <S.StyledLankLabel rank="골드">
+                {user.level_title}
+              </S.StyledLankLabel>
+              <div className="content">포인트: {user.point}</div>
+              <div className="content">누적수익: {user.total_revenue}</div>
               <hr className="dropdown-hr" />
               <a href="/fileask">
                 <img src={doc} alt="Doc" />
                 문서 요청하기
               </a>
-              <a href="/mypage">
+              <a href="/lank">
                 <img src={lank} alt="Lank" />
                 랭킹 페이지
               </a>
diff --git a/src/hooks/uaeSignup.ts b/src/hooks/uaeSignup.ts
index 64319dc..962760e 100644
--- a/src/hooks/uaeSignup.ts
+++ b/src/hooks/uaeSignup.ts
@@ -49,17 +49,23 @@ export async function signUp({
               result?.user.getUsername() +
               "님, 회원 가입이 성공적으로 완료되었습니다.",
           });
+          console.log("회원가입 성공:", result);
 
-          signIn(Email, Password);
-
-          while (!localStorage.getItem("access_token")) {
-            continue;
-          }
-
-          console.log(
-            "AccessToken in signup:",
-            localStorage.getItem("access_token")
-          );
+          // 회원가입 후 바로 로그인 진행
+          (async () => {
+            try {
+              const accessToken = await signIn(Email, Password); // 로그인 처리
+              if (accessToken) {
+                resolve({
+                  message: "로그인 성공!" + accessToken,
+                });
+              } else {
+                reject({ message: "로그인 실패. 다시 시도해주세요." });
+              }
+            } catch (error) {
+              reject({ message: "로그인 중 오류가 발생했습니다: " + error });
+            }
+          })();
         }
       }
     );
diff --git a/src/hooks/usePrice.ts b/src/hooks/usePrice.ts
new file mode 100644
index 0000000..20715af
--- /dev/null
+++ b/src/hooks/usePrice.ts
@@ -0,0 +1,82 @@
+import API from "@/api/index";
+import { useEffect, useState } from "react";
+
+export const usePriceSale = (documentId: string, price: number) => {
+  const [user, setUser] = useState({
+    user_id: "",
+    nickname: "",
+    level_title: "",
+    point: 0.0,
+    total_revenue: 0.0,
+    xrp_balance: 0.0,
+    rlusd_balance: 0.0,
+  });
+  const [newPrice, setPrice] = useState<number>(0);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await API.get("/users");
+        console.log(response); // API 응답 확인
+        setUser(response.data); // 데이터를 상태에 저장
+      } catch (error) {
+        console.error("데이터를 불러오는 중 오류가 발생했습니다:", error);
+      }
+    };
+
+    fetchData(); // API 호출 실행
+  }, [documentId]);
+
+  if (user.level_title === "platinum") {
+    setPrice(price * 0.2);
+  } else if (user.level_title === "silver") {
+    setPrice(price * 0.05);
+  } else if (user.level_title === "gold") {
+    setPrice(price * 0.1);
+  } else {
+    setPrice(price);
+  }
+
+  return newPrice;
+};
+
+export const usePriceFee = (price: number) => {
+  const [user, setUser] = useState({
+    user_id: "",
+    nickname: "",
+    level_title: "",
+    point: 0.0,
+    total_revenue: 0.0,
+    xrp_balance: 0.0,
+    rlusd_balance: 0.0,
+  });
+  const [newPrice, setPrice] = useState<number>(0);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await API.get("/users");
+        console.log(response); // API 응답 확인
+        setUser(response.data); // 데이터를 상태에 저장
+      } catch (error) {
+        console.error("데이터를 불러오는 중 오류가 발생했습니다:", error);
+      }
+    };
+
+    fetchData(); // API 호출 실행
+  }, []);
+
+  const fee = price * 0.1; // 수수료는 가격의 10%
+
+  if (user.level_title === "platinum") {
+    setPrice(fee * 0.85);
+  } else if (user.level_title === "silver") {
+    setPrice(fee * 0.95);
+  } else if (user.level_title === "gold") {
+    setPrice(fee * 0.9);
+  } else {
+    setPrice(fee);
+  }
+
+  return newPrice;
+};
diff --git a/src/hooks/usrLogin.ts b/src/hooks/usrLogin.ts
index 5d77018..905b75f 100644
--- a/src/hooks/usrLogin.ts
+++ b/src/hooks/usrLogin.ts
@@ -25,10 +25,9 @@ const signIn = (username: string, password: string) => {
     user.authenticateUser(authDetails, {
       onSuccess: (session) => {
         console.log("로그인 성공", session);
-        const accessToken = session.getAccessToken().getJwtToken();
-        localStorage.setItem("access_token", accessToken);
-        console.log("AccessToken in login:", accessToken);
 
+        const accessToken = session.getAccessToken().getJwtToken();
+        localStorage.setItem("accessToken", accessToken);
         resolve(accessToken);
       },
       onFailure: (err) => {
diff --git a/src/main.tsx b/src/main.tsx
index 67ad9f4..13be7a1 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,30 +3,36 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 
-async function enableMocking() {
-  if (!import.meta.env.DEV) {
-    return;
-  }
+// async function enableMocking() {
+//   if (!import.meta.env.DEV) {
+//     return;
+//   }
 
-  console.log("Starting MSW worker...");
+//   console.log("Starting MSW worker...");
 
-  const { worker } = await import("./mocks/browser.ts");
-  await worker.start();
+//   const { worker } = await import("./mocks/browser.ts");
+//   await worker.start();
 
-  console.log("MSW worker started successfully!");
-}
+//   console.log("MSW worker started successfully!");
+// }
 
 // 비동기 호출 이후 React 렌더링
-enableMocking().then(() => {
-  const rootElement = document.getElementById("root");
-  if (!rootElement) {
-    console.error("❌ Error: Root element not found!");
-    return;
-  }
+// enableMocking().then(() => {
+//   const rootElement = document.getElementById("root");
+//   if (!rootElement) {
+//     console.error("❌ Error: Root element not found!");
+//     return;
+//   }
 
-  createRoot(rootElement).render(
-    <StrictMode>
-      <App />
-    </StrictMode>
-  );
-});
+//   createRoot(rootElement).render(
+//     <StrictMode>
+//       <App />
+//     </StrictMode>
+//   );
+// });
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/src/pages/FileAskPage/FileAskPage.tsx b/src/pages/FileAskPage/FileAskPage.tsx
index d3f6dc6..07c30ee 100644
--- a/src/pages/FileAskPage/FileAskPage.tsx
+++ b/src/pages/FileAskPage/FileAskPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import NavBar from "@/components/NavBar/NavBar";
 import {
   FileAskPageWrapper,
@@ -11,11 +11,16 @@ import {
   TotalAmount,
   SubmitButton,
 } from "./FileAskPage.style";
+import { usePriceFee } from "@/hooks/usePrice";
 
 const FileAskPage = () => {
   const [xrpPrice, setXrpPrice] = useState(10); // XRP 가격 상태
   const [rlusdPrice, setRlusdPrice] = useState(2); // RLUSD 수수료 상태
 
+  useEffect(() => {
+    // 💡 useEffect 훅을 사용하여 usePriceFee 훅을 호출
+    usePriceFee(xrpPrice);
+  }, [xrpPrice]); // 💡 xrpPrice가 변경될 때마다 useEffect 훅이 호출
   // 💡 가격(XRP) + 수수료(RLUSD)의 합을 계산
   const totalPrice = xrpPrice + rlusdPrice;
 
diff --git a/src/pages/FileDetailPage/FileDetailPage.tsx b/src/pages/FileDetailPage/FileDetailPage.tsx
index f6761f8..c9eb1d2 100644
--- a/src/pages/FileDetailPage/FileDetailPage.tsx
+++ b/src/pages/FileDetailPage/FileDetailPage.tsx
@@ -1,30 +1,30 @@
 import React from "react";
 import NavBar from "@/components/NavBar/NavBar";
 import RLUSD from "@/assets/image/RLUSD.svg";
+import { useLocation, useNavigate } from "react-router-dom";
 
-interface DocumentData {
-  title: string;
-  rating: number;
-  downloads: number;
-  pages: number;
-  date: string;
-  publisher: string;
-  description: string;
-  price: number;
-  currency: string;
+interface Document {
+  document_id: string; // document_id는 문자열
+  file_id: string; // file_id도 문자열
+  document_name: string; // document_name은 문자열
+  document_image_url: string; // URL은 문자열로 처리
+  introduction: string; // introduction은 문자열
+  downloads: number; // 다운로드 수는 숫자
+  pageNumber: number; // 페이지 수는 숫자
+  upload_date: string; // 업로드 날짜는 문자열 (ISO 8601 포맷)
+  uploader: string; // 업로더 ID는 문자열 (UUID 형식)
+  price: number; // 가격은 숫자
+  category: string; // 카테고리는 문자열 (예: "category_piano")
+  rating: number; // 평점은 숫자
 }
 
 const FileDetailPage: React.FC = () => {
-  const documentData: DocumentData = {
-    title: "문서명",
-    rating: 4.5,
-    downloads: 368,
-    pages: 25,
-    date: "2025.03.20",
-    publisher: "윤길동",
-    description: "파일 업로드 때 작성한 문서 소개글",
-    price: 59.99,
-    currency: "RLUSD",
+  const location = useLocation();
+  const navigator = useNavigate();
+  const documentData: Document = location.state as Document;
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toISOString().split("T")[0]; // 날짜만 반환 (YYYY-MM-DD)
   };
 
   return (
@@ -74,9 +74,11 @@ const FileDetailPage: React.FC = () => {
                 marginTop: "20px", // 기존보다 위쪽 마진 추가하여 아래로 내림
               }}
             >
-              <div style={{ color: "black", fontSize: "14px" }}>
-                문서 이미지
-              </div>
+              <img
+                src={documentData.document_image_url}
+                alt={documentData.document_name}
+                style={{ width: "100%", height: "100%" }}
+              />
             </div>
 
             {/* 문서 정보 컨테이너 */}
@@ -105,7 +107,7 @@ const FileDetailPage: React.FC = () => {
                   📕
                 </span>
                 <h2 style={{ margin: 0, fontSize: "20px", fontWeight: "bold" }}>
-                  {documentData.title}
+                  {documentData.document_name}
                 </h2>
               </div>
 
@@ -116,12 +118,20 @@ const FileDetailPage: React.FC = () => {
                 {[
                   { label: "평점", value: documentData.rating },
                   { label: "다운로드", value: documentData.downloads },
-                  { label: "페이지", value: documentData.pages },
-                  { label: "등록", value: documentData.date },
+                  { label: "페이지", value: documentData.pageNumber },
+                  {
+                    label: "등록",
+                    value: formatDate(documentData.upload_date),
+                  },
                 ].map((item, index) => (
                   <div
                     key={index}
-                    style={{ display: "flex", flexDirection: "column" }}
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      gap: "5px",
+                      alignItems: "center",
+                    }}
                   >
                     <span style={{ fontWeight: "bold", fontSize: "14px" }}>
                       {item.value}
@@ -151,7 +161,7 @@ const FileDetailPage: React.FC = () => {
                     fontWeight: "bold",
                   }}
                 >
-                  {documentData.publisher}
+                  {documentData.uploader}
                 </span>
               </div>
 
@@ -177,7 +187,7 @@ const FileDetailPage: React.FC = () => {
                     minHeight: "60px",
                   }}
                 >
-                  {documentData.description}
+                  {documentData.introduction}
                 </div>
               </div>
 
@@ -207,7 +217,7 @@ const FileDetailPage: React.FC = () => {
                     {documentData.price}
                   </span>
                   <span style={{ fontSize: "16px", color: "#999" }}>
-                    {documentData.currency}
+                    {documentData.price === 0 ? "무료" : "RLUSD"}
                   </span>
                 </div>
               </div>
@@ -225,7 +235,11 @@ const FileDetailPage: React.FC = () => {
                   cursor: "pointer",
                   width: "100%",
                 }}
-                onClick={() => console.log("구매하기 버튼 클릭됨")}
+                onClick={() =>
+                  navigator("/payment/${documentData.document_id}", {
+                    state: documentData,
+                  })
+                }
               >
                 구매하기
               </button>
diff --git a/src/pages/FileUploadPage/FileUpload.tsx b/src/pages/FileUploadPage/FileUpload.tsx
index 0a90d76..f239eea 100644
--- a/src/pages/FileUploadPage/FileUpload.tsx
+++ b/src/pages/FileUploadPage/FileUpload.tsx
@@ -2,6 +2,7 @@ import * as S from "@/pages/FileUploadPage/FileUpload.style";
 import { ChangeEvent, useCallback, useRef, useState, useEffect } from "react";
 import upload from "@/assets/image/upload.svg";
 import remove from "@/assets/image/remove.svg";
+import axios from "axios";
 
 interface FileFormat {
   id: number;
@@ -14,6 +15,7 @@ const Upload = () => {
   const dragRef = useRef<HTMLLabelElement | null>(null);
   const fileId = useRef<number>(0);
 
+  // 파일 상태 업데이트 함수
   const onChangeFiles = useCallback(
     (e: ChangeEvent<HTMLInputElement> | any): void => {
       let selectFiles: File[] = [];
@@ -42,6 +44,7 @@ const Upload = () => {
     e.preventDefault();
   };
 
+  // 파일 삭제 처리
   const handleDeleteFile = useCallback(
     (id: number): void => {
       setFiles(files.filter((file: FileFormat) => file.id !== id));
@@ -49,6 +52,7 @@ const Upload = () => {
     [files]
   );
 
+  // 드래그 이벤트 처리
   const handleDragIn = useCallback((e: DragEvent): void => {
     e.preventDefault();
     e.stopPropagation();
@@ -57,14 +61,12 @@ const Upload = () => {
   const handleDragOut = useCallback((e: DragEvent): void => {
     e.preventDefault();
     e.stopPropagation();
-
     setIsDragging(false);
   }, []);
 
   const handleDragOver = useCallback((e: DragEvent): void => {
     e.preventDefault();
     e.stopPropagation();
-
     if (e.dataTransfer!.files) {
       setIsDragging(true);
     }
@@ -74,7 +76,6 @@ const Upload = () => {
     (e: DragEvent): void => {
       e.preventDefault();
       e.stopPropagation();
-
       onChangeFiles(e);
       setIsDragging(false);
     },
@@ -99,11 +100,42 @@ const Upload = () => {
     }
   }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]);
 
+  // 드래그 이벤트 초기화
   useEffect(() => {
     initDragEvents();
     return () => resetDragEvents();
   }, [initDragEvents, resetDragEvents]);
 
+  // 서버로 파일을 업로드하는 함수
+  const uploadFile = async () => {
+    if (files.length === 0) {
+      alert("파일이 없습니다.");
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append("file", files[0].content); // 첫 번째 파일을 전송
+    console.log("파일 업로드 시작: ", files[0].content, formData);
+    try {
+      const response = await axios.post(
+        "http://13.124.96.218:8000/files",
+        { file: files[0].content },
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+
+            Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+          },
+        }
+      );
+
+      console.log("파일 업로드 성공:", response.data);
+      localStorage.setItem("fileId", response.data.file_id);
+    } catch (error) {
+      console.error("파일 업로드 실패:", error);
+    }
+  };
+
   return (
     <S.UploadWrapper>
       <div
@@ -150,6 +182,9 @@ const Upload = () => {
         style={{ display: "none" }}
         onChange={onChangeFiles} // 하나의 파일만 추가
       />
+      <button onClick={uploadFile} style={{ margin: "20px 0px" }}>
+        파일 업로드
+      </button>
     </S.UploadWrapper>
   );
 };
diff --git a/src/pages/FileUploadPage/FileUploadPage.style.ts b/src/pages/FileUploadPage/FileUploadPage.style.ts
index b09803c..580bd8a 100644
--- a/src/pages/FileUploadPage/FileUploadPage.style.ts
+++ b/src/pages/FileUploadPage/FileUploadPage.style.ts
@@ -1,5 +1,9 @@
 import styled from "styled-components";
 
+export const MarginDiv = styled.div`
+  height: 50px;
+`;
+
 export const StyledFileUploadPage = styled.div`
   margin-top: 25px;
   display: flex;
diff --git a/src/pages/FileUploadPage/FileUploadPage.tsx b/src/pages/FileUploadPage/FileUploadPage.tsx
index f6cf330..f3a9ee9 100644
--- a/src/pages/FileUploadPage/FileUploadPage.tsx
+++ b/src/pages/FileUploadPage/FileUploadPage.tsx
@@ -2,21 +2,46 @@ import NavBar from "@/components/NavBar/NavBar";
 import * as S from "@/pages/FileUploadPage/FileUploadPage.style";
 import Upload from "./FileUpload";
 import { useState } from "react";
+import API from "@/api/index";
 
 const FileUploadPage = () => {
   // 상태 선언
   const [fileName, setFileName] = useState("");
   const [fileCategory, setFileCategory] = useState("0");
-  const [filePrice, setFilePrice] = useState("");
+  const [filePrice, setFilePrice] = useState<number>(0); // 가격을 number로 처리
   const [fileDescription, setFileDescription] = useState("");
 
   // form 제출 시 데이터 출력
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault(); // 기본 폼 제출 동작 방지
-    console.log("자료명:", fileName);
-    console.log("카테고리:", fileCategory);
-    console.log("가격:", filePrice);
-    console.log("자료 설명:", fileDescription);
+
+    // API 요청을 위한 useEffect를 handleSubmit 내에서 실행하는 것은 비효율적이므로
+    // useEffect를 handleSubmit 밖에서 실행하여 요청만 보내도록 변경
+
+    const fetchData = async () => {
+      try {
+        const response = await API.post("/documents", {
+          file_id: localStorage.getItem("fileId"),
+          document_name: fileName,
+          introduction: fileDescription,
+          price: filePrice, // 가격을 float로 처리
+          category: fileCategory,
+        });
+        console.log(response); // API 응답 확인
+      } catch (error) {
+        console.error("데이터를 불러오는 중 오류가 발생했습니다:", error);
+      }
+    };
+
+    fetchData(); // API 호출 실행
+  };
+
+  // 가격 값 처리 (number로 처리)
+  const handlePriceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (value === "" || !isNaN(Number(value))) {
+      setFilePrice(Number(value)); // 가격을 숫자 타입으로 저장
+    }
   };
 
   return (
@@ -70,7 +95,7 @@ const FileUploadPage = () => {
                       id="filePrice"
                       className="price_input"
                       value={filePrice}
-                      onChange={(e) => setFilePrice(e.target.value)}
+                      onChange={handlePriceChange} // 가격 변경 핸들러
                     />
                     &nbsp;XRP
                   </div>
@@ -95,6 +120,7 @@ const FileUploadPage = () => {
           </S.FileUploadDescription>
         </S.FileUploadContent>
       </S.StyledFileUploadPage>
+      <S.MarginDiv></S.MarginDiv>
     </>
   );
 };
diff --git a/src/pages/LankPage/LankPage.style.ts b/src/pages/LankPage/LankPage.style.ts
index 7c49026..ad0ab13 100644
--- a/src/pages/LankPage/LankPage.style.ts
+++ b/src/pages/LankPage/LankPage.style.ts
@@ -1,5 +1,8 @@
 import styled from "styled-components";
 
+export const MarginDiv = styled.div`
+  height: 50px;
+`;
 export const StyledLankPage = styled.div`
   display: flex;
   align-items: start;
diff --git a/src/pages/LankPage/LankPage.tsx b/src/pages/LankPage/LankPage.tsx
index 8290841..5655509 100644
--- a/src/pages/LankPage/LankPage.tsx
+++ b/src/pages/LankPage/LankPage.tsx
@@ -55,6 +55,7 @@ const LankPage = () => {
           <Table />
         </S.Lank>
       </S.StyledLankPage>
+      <S.MarginDiv></S.MarginDiv>
     </>
   );
 };
diff --git a/src/pages/LankPage/LankTable.tsx b/src/pages/LankPage/LankTable.tsx
index 0f8528a..24abc32 100644
--- a/src/pages/LankPage/LankTable.tsx
+++ b/src/pages/LankPage/LankTable.tsx
@@ -13,16 +13,36 @@ interface TableData {
 const Table = () => {
   // 더미 데이터 (실제로는 API로 데이터를 받으면 됩니다)
   const data: TableData[] = [
-    { no: 1, name: "홍길동", points: 5000, ranking: "플래티넘" },
-    { no: 2, name: "홍길동", points: 5000, ranking: "플래티넘" },
-    { no: 3, name: "홍길동", points: 5000, ranking: "골드" },
-    { no: 4, name: "홍길동", points: 5000, ranking: "골드" },
-    { no: 5, name: "홍길동", points: 5000, ranking: "실버" },
-    { no: 6, name: "홍길동", points: 2000, ranking: "실버" },
-    { no: 7, name: "홍길동", points: 2000, ranking: "실버" },
-    { no: 8, name: "홍길동", points: 2000, ranking: "브론즈" },
-    { no: 9, name: "홍길동", points: 2000, ranking: "브론즈" },
-    { no: 10, name: "홍길동", points: 2000, ranking: "브론즈" },
+    { no: 1, name: "오은진", points: 3200, ranking: "플래티넘" },
+    { no: 2, name: "김초련", points: 2100, ranking: "플래티넘" },
+    { no: 3, name: "이유진", points: 2020, ranking: "플래티넘" },
+    { no: 4, name: "신현수", points: 1500, ranking: "플래티넘" },
+    { no: 5, name: "박문기", points: 1324, ranking: "골드" },
+    { no: 6, name: "최세연", points: 1293, ranking: "골드" },
+    { no: 7, name: "임서연", points: 1140, ranking: "골드" },
+    { no: 8, name: "일등가", points: 961, ranking: "골드" },
+    { no: 9, name: "우리가", points: 753, ranking: "골드" },
+    { no: 10, name: "삼순이", points: 570, ranking: "골드" },
+    { no: 11, name: "마크곤", points: 480, ranking: "골드" },
+    { no: 12, name: "광운대", points: 370, ranking: "골드" },
+    { no: 13, name: "블로체인", points: 330, ranking: "실버" },
+    { no: 14, name: "엑스얼피", points: 300, ranking: "실버" },
+    { no: 15, name: "해커톤", points: 280, ranking: "실버" },
+    { no: 16, name: "밤샘작", points: 240, ranking: "실버" },
+    { no: 17, name: "힘들어", points: 120, ranking: "실버" },
+    { no: 18, name: "위스콘", points: 100, ranking: "실버" },
+    { no: 19, name: "펩시콜", points: 92, ranking: "브론즈" },
+    { no: 20, name: "제로제로", points: 78, ranking: "브론즈" },
+    { no: 21, name: "리플", points: 68, ranking: "브론즈" },
+    { no: 22, name: "핑크옷", points: 52, ranking: "브론즈" },
+    { no: 23, name: "집갈래", points: 49, ranking: "브론즈" },
+    { no: 24, name: "둥근해", points: 43, ranking: "브론즈" },
+    { no: 25, name: "미친것", points: 31, ranking: "브론즈" },
+    { no: 26, name: "또오오", points: 23, ranking: "브론즈" },
+    { no: 27, name: "떴어어", points: 12, ranking: "브론즈" },
+    { no: 28, name: "생수병", points: 10, ranking: "브론즈" },
+    { no: 29, name: "치즈벅", points: 0, ranking: "브론즈" },
+    { no: 30, name: "나무목", points: 0, ranking: "브론즈" },
   ];
 
   const [currentPage, setCurrentPage] = useState(1);
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
index 43c3dc0..cd45834 100644
--- a/src/pages/LoginPage/LoginPage.tsx
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -55,9 +55,9 @@ const LoginPage: React.FC = () => {
 
     try {
       // 로그인 API 호출
-      await signIn(formData.email, formData.password);
+      const accessToken = await signIn(formData.email, formData.password);
 
-      if (localStorage.getItem("access_token")) {
+      if (accessToken) {
         // 로그인 성공 시, 대시보드로 이동
         navigate("/main");
       } else {
diff --git a/src/pages/MainPage/MainPage.style.ts b/src/pages/MainPage/MainPage.style.ts
index ca22b4b..5029e47 100644
--- a/src/pages/MainPage/MainPage.style.ts
+++ b/src/pages/MainPage/MainPage.style.ts
@@ -173,6 +173,7 @@ export const FileItem = styled.div`
 // Image (이미지 영역)
 export const FileImage = styled.div`
   height: 120px;
+  width: 70px;
   background-color: #e0e0e0;
   display: flex;
   align-items: center;
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index c243f18..71595f2 100644
--- a/src/pages/MainPage/MainPage.tsx
+++ b/src/pages/MainPage/MainPage.tsx
@@ -6,18 +6,34 @@ import { useNavigate } from "react-router";
 import search from "@/assets/image/Search.svg";
 import frontArrow from "@/assets/image/frontArrow.svg";
 import backArrow from "@/assets/image/backArrow.svg";
+import API from "@/api/index";
+
+interface Document {
+  document_id: string; // document_id는 문자열
+  file_id: string; // file_id도 문자열
+  document_name: string; // document_name은 문자열
+  document_image_url: string; // URL은 문자열로 처리
+  introduction: string; // introduction은 문자열
+  downloads: number; // 다운로드 수는 숫자
+  pageNumber: number; // 페이지 수는 숫자
+  upload_date: string; // 업로드 날짜는 문자열 (ISO 8601 포맷)
+  uploader: string; // 업로더 ID는 문자열 (UUID 형식)
+  price: number; // 가격은 숫자
+  category: string; // 카테고리는 문자열 (예: "category_piano")
+  rating: number; // 평점은 숫자
+}
 
 const MainPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
   const navigate = useNavigate();
-  const [data, setData] = useState<any[]>([]);
+  const [data, setData] = useState<Document[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 8; // 한 페이지에 보여줄 아이템 수
   const users = [
-    { name: "홍길동", rank: 1, points: 5000 },
-    { name: "김철수", rank: 2, points: 4500 },
-    { name: "박영희", rank: 3, points: 3000 },
+    { name: "오은진", rank: 1, points: 3200 },
+    { name: "김초련", rank: 2, points: 2100 },
+    { name: "이유진", rank: 3, points: 2020 },
   ];
 
   const currentData = data.slice(
@@ -43,101 +59,17 @@ const MainPage = () => {
   };
 
   useEffect(() => {
-    const fetchedData = [
-      // 더미 데이터
-      {
-        id: 1,
-        name: "React로 배우는 프론트엔드",
-        category: "시험자료",
-        image: "image1.jpg",
-      },
-      {
-        id: 2,
-        name: "JavaScript 핵심 문법",
-        category: "이력서",
-        image: "image2.jpg",
-      },
-      {
-        id: 3,
-        name: "HTML5 & CSS3 마스터",
-        category: "레포트",
-        image: "image3.jpg",
-      },
-      {
-        id: 4,
-        name: "웹 개발의 기초",
-        category: "이력서",
-        image: "image4.jpg",
-      },
-      {
-        id: 5,
-        name: "Node.js 기초부터 실전까지",
-        category: "시험자료",
-        image: "image5.jpg",
-      },
-      {
-        id: 6,
-        name: "디자인 패턴과 아키텍처",
-        category: "레포트",
-        image: "image6.jpg",
-      },
-      {
-        id: 7,
-        name: "Git으로 협업하는 방법",
-        category: "이력서",
-        image: "image7.jpg",
-      },
-      {
-        id: 8,
-        name: "Typescript 완벽 가이드",
-        category: "시험자료",
-        image: "image8.jpg",
-      },
-      {
-        id: 9,
-        name: "React로 배우는 프론트엔드",
-        category: "시험자료",
-        image: "image1.jpg",
-      },
-      {
-        id: 10,
-        name: "JavaScript 핵심 문법",
-        category: "이력서",
-        image: "image2.jpg",
-      },
-      {
-        id: 11,
-        name: "HTML5 & CSS3 마스터",
-        category: "레포트",
-        image: "image3.jpg",
-      },
-      {
-        id: 12,
-        name: "웹 개발의 기초",
-        category: "이력서",
-        image: "image4.jpg",
-      },
-      {
-        id: 13,
-        name: "Node.js 기초부터 실전까지",
-        category: "시험자료",
-        image: "image5.jpg",
-      },
-      {
-        id: 14,
-        name: "디자인 패턴과 아키텍처",
-        category: "레포트",
-        image: "image6.jpg",
-      },
-      {
-        id: 15,
-        name: "Git으로 협업하는 방법",
-        category: "이력서",
-        image: "image7.jpg",
-      },
-    ];
+    const fetchData = async () => {
+      try {
+        const response = await API.get("/documents");
+        console.log(response); // API 응답 확인
+        setData(response.data); // 데이터를 상태에 저장
+      } catch (error) {
+        console.error("데이터를 불러오는 중 오류가 발생했습니다:", error);
+      }
+    };
 
-    setData(fetchedData);
+    fetchData(); // API 호출 실행
   }, []);
 
   // 더미 데이터
@@ -241,14 +173,19 @@ const MainPage = () => {
           <div className="title">모든 자료</div>
           <hr />
           <S.FileItemList>
-            {currentData.map((item) => (
-              <S.FileItem key={item.id}>
+            {currentData.map((item, index) => (
+              <S.FileItem
+                key={index}
+                onClick={() =>
+                  navigate(`/filedetail/${item.document_id}`, { state: item })
+                }
+              >
                 <S.FileImage>
-                  <img src={item.image} alt={item.name} />
+                  <img src={item.document_image_url} alt={item.document_name} />
                 </S.FileImage>
                 <S.FileInfo>
                   <S.FileLabel>{item.category}</S.FileLabel>
-                  <S.FileDescription>{item.name}</S.FileDescription>
+                  <S.FileDescription>{item.document_name}</S.FileDescription>
                 </S.FileInfo>
               </S.FileItem>
             ))}
diff --git a/src/pages/SignupPage/SignupPage.tsx b/src/pages/SignupPage/SignupPage.tsx
index c8de142..e9320fd 100644
--- a/src/pages/SignupPage/SignupPage.tsx
+++ b/src/pages/SignupPage/SignupPage.tsx
@@ -5,17 +5,35 @@ import ConnectIcon from "../../assets/connect_icon.svg";
 import SuccessIcon from "../../assets/succes.svg";
 import logo from "../../assets/image/logo.svg";
 import { signUp } from "@/hooks/uaeSignup";
+import API from "@/api/index";
 
 import {
-
-  AppContainer, Header,
-  Main, ProgressBarContainer, Navigation, NavButton, Indicators, 
-  Dot, SignupContainer, Title, Subtitle, FormGroup, Label, Input,
-  PasswordContainer, ToggleVisibility, SubmitButton, ForgotPassword, 
-  ForgotLink, WalletButton, WalletButtonContainer, WalletContainer, SuccessMessage,
-  EyeIcon, Form
-} from './SignupPage.style';
-
+  AppContainer,
+  Header,
+  Main,
+  ProgressBarContainer,
+  Navigation,
+  NavButton,
+  Indicators,
+  Dot,
+  SignupContainer,
+  Title,
+  Subtitle,
+  FormGroup,
+  Label,
+  Input,
+  PasswordContainer,
+  ToggleVisibility,
+  SubmitButton,
+  ForgotPassword,
+  ForgotLink,
+  WalletButton,
+  WalletButtonContainer,
+  WalletContainer,
+  SuccessMessage,
+  EyeIcon,
+  Form,
+} from "./SignupPage.style";
 
 // Component Interfaces
 interface ProgressBarProps {
@@ -64,7 +82,7 @@ const SignupForm: React.FC<{
     <SignupContainer>
       <Title>회원가입</Title>
       <Subtitle>회원 정보 입력</Subtitle>
-      
+
       <Form onSubmit={handleSubmit}>
         <FormGroup>
           <Label htmlFor="name">이름</Label>
@@ -93,9 +111,8 @@ const SignupForm: React.FC<{
         <FormGroup>
           <Label htmlFor="password">비밀번호</Label>
           <PasswordContainer>
-
-            <Input 
-              id="password" 
+            <Input
+              id="password"
               name="password"
               placeholder="비밀번호를 입력해주세요."
               value={formData.password}
@@ -107,18 +124,23 @@ const SignupForm: React.FC<{
         <FormGroup>
           <Label htmlFor="confirmPassword">비밀번호 확인</Label>
           <PasswordContainer>
-
-            <Input 
-              id="confirmPassword" 
-
+            <Input
+              id="confirmPassword"
               name="confirmPassword"
               placeholder="비밀번호를 입력해주세요."
               value={formData.confirmPassword}
               onChange={handleChange}
             />
-     <ToggleVisibility >
+            <ToggleVisibility>
               <EyeIcon>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
                   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                   <circle cx="12" cy="12" r="3"></circle>
                 </svg>
@@ -126,7 +148,7 @@ const SignupForm: React.FC<{
             </ToggleVisibility>
           </PasswordContainer>
         </FormGroup>
-        
+
         <SubmitButton
           type="button"
           onClick={() => {
@@ -136,7 +158,6 @@ const SignupForm: React.FC<{
           다음
         </SubmitButton>
       </Form>
-      
 
       <ForgotPassword>
         이미 계정이 있으신가요?
@@ -148,7 +169,25 @@ const SignupForm: React.FC<{
 
 const WalletForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => {
   let navigate = useNavigate();
-
+  const [loading, setLoading] = useState(false);
+  const [wallet, setWallet] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  // 지갑 발급하기
+  const handleCreateWallet = async () => {
+    try {
+      setLoading(true);
+      const response = await API.post("/users/wallets", {});
+      console.log("Wallet created:", response.data);
+
+      // 서버로부터 받은 응답 처리 (예: 지갑 주소 반환)
+    } catch (error) {
+      setErrorMessage("지갑 발급 실패");
+      console.error("Error creating wallet:", error);
+    } finally {
+      setLoading(false);
+      setWallet(true);
+    }
+  };
   return (
     <SignupContainer>
       <Title>회원가입</Title>
@@ -169,10 +208,17 @@ const WalletForm: React.FC<{ handleNext: () => void }> = ({ handleNext }) => {
             <img src={ConnectIcon}></img>
             <WalletButtonContainer>
               <div>XRP 지갑이 없다면,</div>
-              <WalletButton>지갑 발급하기</WalletButton>
+              <WalletButton onClick={handleCreateWallet} disabled={loading}>
+                {loading
+                  ? "발급 중..."
+                  : wallet
+                  ? "발급완료!"
+                  : "지갑 발급하기"}
+              </WalletButton>
             </WalletButtonContainer>
           </WalletContainer>
         </div>
+        {errorMessage && <p style={{ color: "red" }}>{errorMessage}</p>}
       </form>
 
       {/* 임의로 넣은 버튼임 */}
@@ -208,7 +254,9 @@ const SuccessForm: React.FC<{ formData: any }> = ({ formData }) => {
         </WalletContainer>
       </div>
 
-      <SubmitButton type="button">회원가입</SubmitButton>
+      <SubmitButton type="button" onClick={() => navigate("/main")}>
+        XRPedia로 이동
+      </SubmitButton>
 
       <ForgotPassword>
         이미 계정이 있으신가요?
@@ -230,7 +278,7 @@ const SignupPage: React.FC = () => {
     confirmPassword: "",
   });
 
-  const handleNext = async (): Promise<void> => {
+  const signUpHandNext = async (): Promise<void> => {
     console.log("handleNext 호출됨! 현재 단계:", currentStep);
     console.log("현재 formData 상태:", formData);
 
@@ -254,6 +302,21 @@ const SignupPage: React.FC = () => {
     }
   };
 
+  const handleNext = async (): Promise<void> => {
+    console.log("handleNext 호출됨! 현재 단계:", currentStep);
+    console.log("현재 formData 상태:", formData);
+
+    try {
+      // 요청이 성공했으면 다음 단계로 진행
+      if (currentStep < totalSteps) {
+        setCurrentStep((prev) => prev + 1);
+      }
+    } catch (error: any) {
+      // 오류 처리
+      console.error("회원가입 실패:", error);
+    }
+  };
+
   return (
     <AppContainer>
       <Header>
@@ -263,7 +326,7 @@ const SignupPage: React.FC = () => {
         <ProgressBar currentStep={currentStep} totalSteps={totalSteps} />
         {currentStep === 1 && (
           <SignupForm
-            handleNext={handleNext}
+            handleNext={signUpHandNext}
             formData={formData}
             setFormData={setFormData}
           />
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 449a42b..1f1ce4d 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -18,7 +18,7 @@ const Router = () => {
         <Route path="/" element={<LoginPage />} />
         <Route path="/signup" element={<SignupPage />} />
         <Route path="/search" element={<SearchPage />} />
-        <Route path="/payment" element={<PaymentPage />} />
+        <Route path="/payment/:id" element={<PaymentPage />} />
         <Route path="/lank" element={<LankPage />} />
         <Route path="/fileupload" element={<FileUploadPage />} />
         <Route path="/filedetail/:id" element={<FileDetailPage />} />