front: 잘못된 정보 표현 수정 및 사용자 경험 개선

front/package.json

@@ -11,6 +11,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
+    "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",

front/src/api/auction/api.ts

@@ -30,7 +30,7 @@ async function requestAuctionDetail(
     baseUrl: string,
     auctionId: number,
     onSuccess: (auctionDetail: AuctionDetailItem) => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/auctions/${auctionId}`, {
@@ -45,11 +45,12 @@ async function requestAuctionDetail(
             const auctionDetail: AuctionDetailItem = await response.json();
             onSuccess(auctionDetail);
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(errorMessage);
         }
     } catch (error) {
         console.error('Failed to fetch auction detail.', error);
-        onFailure();
+        onFailure("REQUEST AUCTION DETAIL.");
     }
 }
 
@@ -58,7 +59,7 @@ async function requestAuctionBid(
     auctionId: number,
     request: AuctionPurchaseRequest,
     onSuccess: () => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/auctions/${auctionId}/purchase`, {
@@ -78,12 +79,13 @@ async function requestAuctionBid(
         if (response.ok) {
             onSuccess();
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(errorMessage);
         }
 
     } catch (error) {
         console.error('Failed to bid auction.', error);
-        onFailure();
+        onFailure("BID REQUEST FAILED");
     }
 }
 

front/src/api/payments/api.ts

@@ -4,7 +4,7 @@ async function chargePointsApi(
     baseUrl: string,
     data: ChargePointsRequest,
     onSuccess: () => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/payments/points/charge`, {
@@ -21,10 +21,11 @@ async function chargePointsApi(
         if (response.ok) {
             onSuccess();
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(errorMessage);
         }
     } catch (error) {
-        onFailure();
+        onFailure("CHARGE POINT ERROR.");
     }
 }
 

front/src/api/receipt/api.ts

@@ -61,7 +61,7 @@ async function requestRefund(
     baseUrl: string,
     receiptId: number,
     onSuccess: () => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/receipts/${receiptId}/refund`, {
@@ -76,10 +76,11 @@ async function requestRefund(
         if (response.ok) {
             onSuccess();
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(errorMessage);
         }
     } catch (error) {
-        onFailure();
+        onFailure("REQUEST REFUND ERROR");
     }
 }
 

front/src/api/user/api.ts

@@ -1,10 +1,10 @@
-import {SignInRequest, SignUpRequest} from "./type";
+import { SignInRequest, SignUpRequest } from "./type";
 
 async function signUpApi(
     baseUrl: string,
     data: SignUpRequest,
     onSuccess: () => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/auth/signup`, {
@@ -18,18 +18,20 @@ async function signUpApi(
         if (response.ok) {
             onSuccess();
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(`Sign up failed: ${errorMessage}`);
         }
     } catch (error) {
-        onFailure();
+        console.error(error);
+        onFailure("An unexpected error occurred during sign-up.");
     }
 }
 
 async function signInApi(
     baseUrl: string,
     data: SignInRequest,
     onSuccess: () => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/auth/signin`, {
@@ -41,21 +43,23 @@ async function signInApi(
             },
             body: JSON.stringify(data),
         });
+
         if (response.ok) {
             onSuccess();
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(`Sign in failed: ${errorMessage}`);
         }
     } catch (error) {
         console.error(error);
-        onFailure();
+        onFailure("An unexpected error occurred during sign-in.");
     }
 }
 
 async function signOut(
     baseUrl: string,
     onSuccess: () => void,
-    onFailure: () => void
+    onFailure: (message: string) => void
 ) {
     try {
         const response = await fetch(`${baseUrl}/auth/signout`, {
@@ -70,11 +74,13 @@ async function signOut(
         if (response.ok) {
             onSuccess();
         } else {
-            onFailure();
+            const errorMessage = await response.text();
+            onFailure(`Sign out failed: ${errorMessage}`);
         }
     } catch (error) {
-        onFailure();
+        console.error(error);
+        onFailure("An unexpected error occurred during sign-out.");
     }
 }
 
-export {signUpApi, signInApi, signOut};
+export { signUpApi, signInApi, signOut };

front/src/pages/ChargePoint.tsx

@@ -20,8 +20,8 @@ function ChargePointPage() {
                 showAlert("포인트 충전 성공!")
                 setRequest({amount: 0});
             },
-            () => {
-                showAlert("포인트 충전 실패!")
+            (message) => {
+                showAlert("포인트 충전 실패! " + message)
             }
         );
     }

front/src/pages/Footer.tsx

@@ -7,8 +7,11 @@ import creditCardIcon from '../img/credit-card.svg';
 import listIcon from '../img/list.svg';
 import logInIcon from '../img/log-in.svg';
 import logOutIcon from '../img/log-out.svg';
+import useAlert from "../hooks/useAlert";
 
 function Footer() {
+    const {showAlert} = useAlert();
+
     const { currentPage, setPage } = usePageStore();
     const { isLogin, setIsLogin } = useLoginStore();
     const baseUrl = process.env.REACT_APP_API_URL || '';
@@ -18,14 +21,18 @@ function Footer() {
     };
 
     const logout = () => {
+        if(!window.confirm("정말로 로그아웃할까요?")) {
+            return;
+        }
         signOut(
             baseUrl,
             () => {
                 setIsLogin(false);
                 setPage('home');
             },
-            () => {
+            (message) => {
                 console.log('Failed to sign out.');
+                showAlert(message);
             }
         );
     };

front/src/pages/Login.tsx

@@ -29,9 +29,9 @@ function LoginPage() {
                 setIsLogin(true);
                 showAlert('로그인 성공하였습니다.');
             },
-            () => {
+            (response) => {
                 setIsLogin(false);
-                showAlert('로그인에 실패하였습니다.');
+                showAlert(response);
                 setRequest({signInId: '', password: ''});
             }
         );