[FE] sprint2

fe/package.json

@@ -41,6 +41,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.59.11",
     "eslint": "^8.0.1",
@@ -50,4 +51,4 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.32.2"
   }
-}
+}

fe/src/App.css

@@ -2,15 +2,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  align-items: center;
 }
 
-.mainPage {
+.App {
+  display: flex;
   width: 50rem;
-  height: 100%;
+  height: 70rem;
+  justify-content: center;
+  align-items: center;
   border: 2px solid var(--color-primary);
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-title-md);
-  line-height: auto;
-}
+}

fe/src/App.tsx

@@ -1,26 +1,32 @@
-import { fetchMenus } from 'api';
-import MainPage from 'pages/MainPage';
-import { CategoryInfo } from 'pages/types';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import Home from 'pages/Home';
+import ReceiptPage from 'pages/ReceiptPage';
+import { useState } from 'react';
 import './App.css';
 
-function App() {
-  const [loading, setLoading]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(true);
-  const [menuData, setMenuData]: [CategoryInfo[], Dispatch<SetStateAction<[]>>] = useState([]);
+export default function App() {
+  return <Router />;
+}
 
-  const getMenus = async () => {
-    const menuData = await fetchMenus();
-    setMenuData(menuData);
-    setLoading(false);
+function Router() {
+  const [page, setPage] = useState('/');
+  const navigate = (path: string) => {
+    setPage(path);
+    window.history.pushState({}, '', path);
   };
 
-  useEffect(() => {
-    getMenus();
-  }, []);
+  const goHome = () => navigate('/');
 
-  return (
-    <div className="App">{loading ? <div>메뉴를 불러오고 있습니다...</div> : <MainPage allMenus={menuData} />}</div>
-  );
-}
+  let content;
+  const orderId = Number(page.split('/')[3]);
 
-export default App;
+  switch (page) {
+    case '/': {
+      content = <Home navigate={navigate} />;
+      break;
+    }
+    case `/receipt/orderId/${orderId}`: {
+      content = <ReceiptPage orderId={orderId} goHome={goHome} />;
+    }
+  }
+  return <div className="App">{content}</div>;
+}

fe/src/api/index.ts

@@ -1,7 +1,10 @@
-const BASE_API_DOMAIN = new URL(`https://050ac41b-0add-475f-9551-31bf41119bcc.mock.pstmn.io`);
+import { CategoryInfo, OrderResult, OrderSuccessInfo, ProductOrder } from 'pages/types';
+import { formatMenuOptionOrderList } from 'utils';
 
-const fetchJSON = async (url: URL) => {
-  const response = await fetch(url);
+const BASE_API_DOMAIN = process.env.REACT_APP_BASE_API_DOMAIN;
+
+const fetchJSON = async (url: URL, option?: {}) => {
+  const response = await fetch(url, option);
 
   if (!response.ok) {
     throw new Error(response.statusText);
@@ -10,11 +13,97 @@ const fetchJSON = async (url: URL) => {
   return response.json();
 };
 
-export const fetchMenus = async () => {
+export const fetchMenus = async (): Promise<CategoryInfo[] | undefined> => {
+  try {
+    const url = new URL('products', BASE_API_DOMAIN);
+    return await fetchJSON(url);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const requestCardOrder = async (
+  orderList: ProductOrder[],
+  totalPrice: number
+): Promise<OrderResult | undefined> => {
+  const formattedOrderList = formatMenuOptionOrderList(orderList);
+  const json = JSON.stringify({
+    orderProducts: formattedOrderList,
+    totalPrice: totalPrice,
+  });
+  const option = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: json,
+  };
+
+  try {
+    const url = new URL('api/payment/card', BASE_API_DOMAIN);
+    return await fetchJSON(url, option);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const fetchReceipt = async (orderId: number): Promise<OrderSuccessInfo | undefined> => {
   try {
-    const url = new URL('menus', BASE_API_DOMAIN);
+    const url = new URL(`api/receipt?orderId=${orderId}`, BASE_API_DOMAIN);
     return await fetchJSON(url);
   } catch (error) {
     console.error(error);
   }
 };
+
+export const requestCashOrder = async (
+  orderList: ProductOrder[],
+  totalPrice: number,
+  receivedPrice: number
+): Promise<OrderResult | undefined> => {
+  const formattedOrderList = formatMenuOptionOrderList(orderList);
+  const json = JSON.stringify({
+    orderProducts: formattedOrderList,
+    totalPrice: totalPrice,
+    receivedPrice: receivedPrice,
+  });
+  const option = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: json,
+  };
+
+  try {
+    const url = new URL('api/payment/cash', BASE_API_DOMAIN);
+    return await fetchJSON(url, option);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const failCardOrder = async (
+  orderList: ProductOrder[],
+  totalPrice: number
+): Promise<OrderResult | undefined> => {
+  const formattedOrderList = formatMenuOptionOrderList(orderList);
+  const json = JSON.stringify({
+    orderItems: formattedOrderList,
+    totalPrice: totalPrice,
+  });
+  const option = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: json,
+  };
+
+  try {
+    const url = new URL('api/payment/card?fail=500', BASE_API_DOMAIN);
+    return await fetchJSON(url, option);
+  } catch (error) {
+    console.error(error);
+  }
+};

fe/src/components/LoadingIndicator/LoadingIndicator.module.css

@@ -0,0 +1,95 @@
+.loadingIndicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+}
+
+.loadingIndicator span {
+  color: #e9d78d;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-display);
+}
+
+.indicatorWrap {
+  color: official;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.indicatorWrap div {
+  transform-origin: 40px 40px;
+  animation: indicator 1.2s linear infinite;
+}
+
+.indicatorWrap div:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 6px;
+  height: 18px;
+  border-radius: 20%;
+  background: #e9d78d;
+}
+.indicatorWrap div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.indicatorWrap div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.indicatorWrap div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.indicatorWrap div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.indicatorWrap div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.indicatorWrap div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.indicatorWrap div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.indicatorWrap div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.indicatorWrap div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.indicatorWrap div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.indicatorWrap div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.indicatorWrap div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes indicator {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

fe/src/components/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,29 @@
+import styles from './LoadingIndicator.module.css';
+
+export function LoadingIndicator({ text }: { text: string }) {
+  return (
+    <div className={styles.loadingIndicator}>
+      <Indicator />
+      <span>{text}</span>
+    </div>
+  );
+}
+
+function Indicator() {
+  return (
+    <div className={styles.indicatorWrap}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}