�front: 잘못된 정보 표현 수정 및 사용자 경험 개선 (#320)

* feat: 경매 가격 경신 로직 수정 * fix: 경매 가격 하락 로직 수정 * feat: 재고 수량을 폴링하는 로직 추가 (시연용) * feat: 정말로 로그아웃할까요? 문구 추가 * feat: 경매 입찰 성공을 시각적으로 표시. 및 따닥 방지 * style: list 미리보기 이미지 수정 * style: 목록에서는 현재가격을 추정할 수 없으므로 '시작 가격'으로 문구 변경 * feat: 타이머를 통해 다음 가격 변동 시점을 노출 * feat: 회원가입 시 아이디, 패스워드 규격을 사용자에게 안내한다. * feat: API 요청 실패 시, 일부 케이스에서 서버가 전달한 메세지를 표시 * feat: 활성항목을 리스트에 표시 * refactor: 진행 중인 경매에 색상을 표시한다. * feat: 회원가입 성공시 성공 멘트 표시 * refactor: 거래내역에서 생성일과 수정일을 표시하지 않습니다. (서버에서 생성하지 않음) * refactor: 판매자 가입 기능 제거 * fix: 경매 상세페이지에서 가격을 갱신하는 타이머 오류 수정 * fix: 종료된 경매에서 입찰버튼이 활성화되던 문제 수정 --------- Co-authored-by: MinSeok Oh <[email protected]>
woowa-techcamp-2024 · Aug 27, 2024 · 1dcd72b · 1dcd72b
1 parent 63eebfb
commit 1dcd72b
Show file tree

Hide file tree

Showing 15 changed files with 415 additions and 126 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/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",

diff --git a/front/src/api/auction/api.ts b/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");
     }
 }
 

diff --git a/front/src/api/payments/api.ts b/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.");
     }
 }
 

diff --git a/front/src/api/receipt/api.ts b/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");
     }
 }
 

diff --git a/front/src/api/user/api.ts b/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 };
diff --git a/front/src/pages/ChargePoint.tsx b/front/src/pages/ChargePoint.tsx
@@ -20,8 +20,8 @@ function ChargePointPage() {
                 showAlert("포인트 충전 성공!")
                 setRequest({amount: 0});
             },
-            () => {
-                showAlert("포인트 충전 실패!")
+            (message) => {
+                showAlert("포인트 충전 실패! " + message)
             }
         );
     }

diff --git a/front/src/pages/Footer.tsx b/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);
             }
         );
     };

diff --git a/front/src/pages/Login.tsx b/front/src/pages/Login.tsx
@@ -29,9 +29,9 @@ function LoginPage() {
                 setIsLogin(true);
                 showAlert('로그인 성공하였습니다.');
             },
-            () => {
+            (response) => {
                 setIsLogin(false);
-                showAlert('로그인에 실패하였습니다.');
+                showAlert(response);
                 setRequest({signInId: '', password: ''});
             }
         );