Merge branch 'develop' of https://lab.ssafy.com/s10-blockchain-nft-su…

…b2/S10P22A710 into fix/fe/bug-fix2/S10P22A710-226
Sea-of-Secrets · Mar 29, 2024 · 85c7572 · 85c7572
2 parents 4118358 + 20b2ec8
commit 85c7572
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 14 deletions.
diff --git a/backend/src/main/java/com/ssafy/sos/nft/controller/NFTController.java b/backend/src/main/java/com/ssafy/sos/nft/controller/NFTController.java
@@ -25,28 +25,19 @@ public class NFTController {
     @GetMapping("/wallet")
     @ResponseBody
     public ResponseEntity<?> getNFTs(Authentication authentication) {
-        if (authentication == null) {
-            return ResponseEntity.status(HttpStatus.FORBIDDEN).body("로그인 해야함. 여길 어떻게 왔지?");
-        }
-
         CustomOAuth2User user = (CustomOAuth2User) authentication.getPrincipal();
          try {
              NFTResponse[] ownNFTs = nftService.getOwnNFTs(user);
              return ResponseEntity.status(HttpStatus.OK).body(ownNFTs);
          } catch(Exception e) {
              return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage());
          }
-
     }
 
 
     @PostMapping("/wallet")
     @ResponseBody
     public ResponseEntity<?> makeWallet(Authentication authentication) {
-        if (authentication == null) {
-            return ResponseEntity.status(HttpStatus.FORBIDDEN).body("로그인 해야함. 여길 어떻게 왔지?");
-        }
-
         CustomOAuth2User user = (CustomOAuth2User) authentication.getPrincipal();
 
         Wallet wallet = nftService.makeWallet(user);

diff --git a/frontend/app/api/users.ts b/frontend/app/api/users.ts
@@ -3,6 +3,20 @@ import { client } from "../../_lib/http";
 type User = {};
 
 export const getUserInfo = async () => {
-    const res = await client.get("/users");
-    return res;
-  };
+  const res = await client.get("/users");
+  return res;
+};
+
+export const getWalletInfo = async () => {
+  const res = await client.post("/users", {
+    type: "get",
+  });
+  return res;
+};
+
+export const makeWallet = async () => {
+  const res = await client.post("/users", {
+    type: "post",
+  });
+  return res;
+};
diff --git a/frontend/app/users/index.tsx b/frontend/app/users/index.tsx
@@ -1,18 +1,26 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import {getUserInfo} from "../api/users";
+import {getUserInfo, getWalletInfo, makeWallet} from "../api/users";
+import { waitFor } from "@testing-library/react";
 
 export default function Index() {
 
   const [user, setUser] = useState<any>();
+  const [wallet, setWallet] = useState<any>();
+  const [nftList, setNftList] = useState<any>([]);
 
   const fetchData = async () => {
     try {
       const res = await getUserInfo();
       const data = res.data;
       console.log(data);
       setUser(data);
+
+      const nfts = await getWalletInfo();
+      console.log(nfts.data);
+      setNftList(nfts.data);
+      console.log(nftList);
     } catch (error) {
       console.log(error);
     }
@@ -22,6 +30,12 @@ export default function Index() {
     fetchData();
   }, []);
 
+  const makeWalletButton = async () => {
+    const res = await makeWallet();
+    console.log(res.data);
+    setWallet(res.data);
+  }
+
   return (
     <>
   <p>MyPage</p>
@@ -30,7 +44,32 @@ export default function Index() {
           <div>
             <p>Username: {user.name}</p>
             <p>UserEmail: {user.email}</p>
-            <p>wallet: {user.walletAddress}</p>
+            {
+              !user.walletAddress && (
+                <button onClick={makeWalletButton}>지갑 만들기</button>
+              )
+            }
+            {
+              user.walletAddress && (
+                <p>wallet: {user.walletAddress}</p>
+              )
+            }
+            {
+              nftList && (
+                <div>
+                  <h1>NFT List</h1>
+                  <ul>
+                    {nftList.map((nft: any, index: number) => (
+                      <li key={index}>
+                        <h2>{nft.name}</h2>
+                        <p>{nft.description}</p>
+                        <img src={nft.image} alt={nft.name} />
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              )
+            }
           </div>
         )}
       </div>

diff --git a/frontend/pages/api/users.ts b/frontend/pages/api/users.ts
@@ -10,6 +10,25 @@ export default async function handler(
   res: NextApiResponse<ResponseData>,
 ) {
   try {
+    const { cookie } = req.headers;
+
+    if (!cookie) {
+      return res.status(401);
+    }
+
+    const cookies = cookie.split("; ");
+    let accessCookie = "";
+    let refreshCookie = "";
+
+    for (const cookie of cookies) {
+      const [key, value] = cookie.split("="); // 쿠키 문자열을 '=' 기준으로 분리하여 키와 값을 추출
+      if (key === "access") {
+        accessCookie = value;
+      } else if (key === "refresh") {
+        refreshCookie = value;
+      }
+    }
+
     if (req.method === "GET") {
       const cookies: any = req.headers.cookie?.split("; ");
       let accessCookie;
@@ -31,6 +50,26 @@ export default async function handler(
       });
 
       return res.status(response.status).json(response.data);
+    } else {
+      if (req.body.type === "get") {
+        const response = await http.get("/nft/wallet", {
+          headers: {
+            Cookie: `access=${accessCookie}; refresh=${refreshCookie}`,
+          },
+        });
+
+        return res.status(response.status).json(response.data);
+      } else if (req.body.type === "post") {
+        const response = await http.post("/nft/wallet", {
+          headers: {
+            Cookie: `access=${accessCookie}; refresh=${refreshCookie}`,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(null), // JSON.stringify를 사용하여 본문을 문자열로 변환
+        });
+
+        return res.status(response.status).json(response.data);
+      }
     }
 
     res.status(400).json({ message: "400" });