Feature/#189: 영수증 출력화면 이동기능 수정

EasyAndBeauty · Nov 22, 2022 · 79412eb · 79412eb
1 parent 109d58e
commit 79412eb
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 67 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,19 +1,13 @@
 import { useContext } from "react";
 import { Routes, Route } from "react-router-dom";
 import BaseContext from "store/baseContext";
-import {
-  AuthPage,
-  TodoPage,
-  LoginPage,
-  ReceiptPage,
-  UserPage,
-  RedirectionPage,
-} from "components";
+import { AuthPage, TodoPage, LoginPage, ReceiptPage, UserPage, RedirectionPage } from "components";
 import { useCurrentToken } from "hooks/useCurrentToken";
 
 function App() {
   const BaseCtx = useContext(BaseContext);
   const { user } = useCurrentToken();
+  // const { isLoggedIn } = user;
   const isLoggedIn = true;
   const isBase = BaseCtx.isBase;
 

diff --git a/src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.jsx b/src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.jsx
@@ -1,9 +1,4 @@
-import {
-	ReceiptTodo,
-	ReceiptPaperInfo,
-	ReceiptBarcode,
-	ReceiptQuotes,
-} from "components";
+import { ReceiptTodo, ReceiptPaperInfo, ReceiptBarcode, ReceiptQuotes } from "components";
 import * as S from "./ReceiptPaperContents.styles";
 
 /**
@@ -15,38 +10,37 @@ import * as S from "./ReceiptPaperContents.styles";
  * @returns
  */
 export function ReceiptPaperContents({ todos }) {
-	const line = "-----------------------------------";
-	let timerTotal = 0;
-	return (
-		<S.Paper>
-			<S.Title>RECEIPT</S.Title>
-			<ReceiptPaperInfo />
-			<div>{line}</div>
-			<S.TodoContainer>
-				{todos.map((todo, index) => {
-					timerTotal += todo.timer;
-					return <ReceiptTodo key={todo.todoId + index}>{todo}</ReceiptTodo>;
-				})}
-			</S.TodoContainer>
-			<div>{line}</div>
-			<S.TotalContainer>
-				<div>
-					<span>ITEM COUNT :</span>
-					<span>{todos.length}</span>
-				</div>
-				<div>
-					<span>TOTAL :</span>
-					<span>
-						{Math.floor(timerTotal / 60)}:
-						{(timerTotal % 60).toString().padStart(2, "0")}
-					</span>
-				</div>
-			</S.TotalContainer>
-			<div>{line}</div>
-			<ReceiptQuotes />
-			<div>{line}</div>
-			<ReceiptBarcode />
-			<div>{line}</div>
-		</S.Paper>
-	);
+  const line = "-----------------------------------";
+  let timerTotal = 0;
+  return (
+    <S.Paper>
+      <S.Title>RECEIPT</S.Title>
+      <ReceiptPaperInfo />
+      <div>{line}</div>
+      <S.TodoContainer>
+        {todos.map((todo) => {
+          timerTotal += todo.timer;
+          return <ReceiptTodo key={todo.id}>{todo}</ReceiptTodo>;
+        })}
+      </S.TodoContainer>
+      <div>{line}</div>
+      <S.TotalContainer>
+        <div>
+          <span>ITEM COUNT :</span>
+          <span>{todos.length}</span>
+        </div>
+        <div>
+          <span>TOTAL :</span>
+          <span>
+            {Math.floor(timerTotal / 60)}:{(timerTotal % 60).toString().padStart(2, "0")}
+          </span>
+        </div>
+      </S.TotalContainer>
+      <div>{line}</div>
+      <ReceiptQuotes />
+      <div>{line}</div>
+      <ReceiptBarcode />
+      <div>{line}</div>
+    </S.Paper>
+  );
 }
diff --git a/src/components/molecules/ReceiptTodo/ReceiptTodo.jsx b/src/components/molecules/ReceiptTodo/ReceiptTodo.jsx
@@ -13,22 +13,22 @@ import * as S from "./ReceiptTodo.styles";
  */
 
 const makeEllipsis = (str, len) => {
-	if (str.length > len) {
-		return str.slice(0, len) + "...";
-	}
-	return str;
+  if (str.length > len) {
+    return str.slice(0, len) + "...";
+  }
+  return str;
 };
 
 export function ReceiptTodo({ children: { task, timer } }) {
-	return (
-		<S.Container>
-			<S.Info />
-			<S.Todo>
-				<S.Task>{makeEllipsis(task, ELLIPSISLENGTH)}</S.Task>
-				<S.Timer>
-					{Math.floor(timer / 60)}:{String(timer % 60).padStart(2, "0")}
-				</S.Timer>
-			</S.Todo>
-		</S.Container>
-	);
+  return (
+    <S.Container>
+      <S.Info />
+      <S.Todo>
+        <S.Task>{makeEllipsis(task, ELLIPSISLENGTH)}</S.Task>
+        <S.Timer>
+          {Math.floor(timer / 60)}:{String(timer % 60).padStart(2, "0")}
+        </S.Timer>
+      </S.Todo>
+    </S.Container>
+  );
 }
diff --git a/src/components/organisms/MySection/MySection.jsx b/src/components/organisms/MySection/MySection.jsx
@@ -33,7 +33,7 @@ export const MySection = () => {
           <S.CreatedDate>{receipt.date && formatReceiptDate(receipt.date)}</S.CreatedDate>
           <ReceiptPaper
             onClick={() => {
-              navigate(`/receipt`, { state: receipt.todos });
+              navigate(`/receipt`, { state: { todos: receipt.todos } });
             }}
             todos={Array.from(receipt.todos)}
             key={receipt.id}

diff --git a/src/controllers/dummy.js b/src/controllers/dummy.js
@@ -123,6 +123,7 @@ export const dummyPinnedReceipts = [
     id: 2,
     todos: [
       {
+        id: 1,
         task: "create a meeting agenda",
         date: "2022-08-29",
         isDone: true,
@@ -138,46 +139,51 @@ export const dummyPinnedReceipts = [
     id: 16,
     todos: [
       {
+        id: 2,
         task: "create a meeting agenda",
         date: "2022-08-29",
         isDone: true,
         timer: 0,
       },
       {
+        id: 3,
         task: "Update project plan ",
         date: "2022-08-29",
         isDone: false,
         timer: 172,
       },
     ],
     pinned: true,
-    famous_saying:
-      "Good advice is something a man gives when he is too old to set a bad example.",
+    famous_saying: "Good advice is something a man gives when he is too old to set a bad example.",
     createdAt: "2022-08-01",
     updatedAt: "",
   },
   {
     id: 17,
     todos: [
       {
+        id: 4,
         task: "create a meeting agenda",
         date: "2022-08-30",
         isDone: true,
         timer: 0,
       },
       {
+        id: 5,
         task: "Update project plan ",
         date: "2022-08-30",
         isDone: false,
         timer: 172,
       },
       {
+        id: 6,
         task: "60 mins plank",
         date: "2022-08-30",
         isDone: false,
         timer: 60,
       },
       {
+        id: 7,
         task: "Take vitamins",
         date: "2022-08-30",
         isDone: true,
@@ -191,6 +197,8 @@ export const dummyPinnedReceipts = [
         timer: 200,
       },
       {
+        id: 11,
+
         task: "Learn Angular",
         date: "2022-08-30",
         isDone: true,
@@ -206,25 +214,28 @@ export const dummyPinnedReceipts = [
     id: 1,
     todos: [
       {
+        id: 12,
         task: "60 mins plank",
         date: "2022-10-30",
         isDone: false,
         timer: 60,
       },
       {
+        id: 13,
         task: "Take vitamins",
         date: "2022-10-30",
         isDone: true,
         timer: 0,
       },
       {
-        id: 10,
+        id: 14,
         task: "Study Typescript",
         date: "2022-10-30",
         isDone: true,
         timer: 200,
       },
       {
+        id: 15,
         task: "Learn Angular",
         date: "2022-10-30",
         isDone: true,