36 feat api 연결

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}`;
   }

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>

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 });
+            }
+          })();
         }
       }
     );

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;
+};

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) => {

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>
+);

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;