Merge pull request #213 from EasyAndBeauty/feature/#189

영수증 항목이 많아지면 검은줄이 생기는 문제 해결

src/components/atoms/SquareBtn/SquareBtn.jsx

@@ -1,5 +1,4 @@
 import * as S from "./SquareBtn.styles";
-import { ReactComponent as ArrowBelowIcon } from "assets/svg/arrow_below_sm_icon.svg";
 
 /**
  * SquareBtn component
@@ -9,20 +8,15 @@ import { ReactComponent as ArrowBelowIcon } from "assets/svg/arrow_below_sm_icon
  *
  * @param {function} onClick - 버튼을 클릭했을 때 실행되는 이벤트
  * @param {React.Component} children - 버튼의 텍스트
- *
+ * @param {String} color - 텍스트의 색 ※context에 지정된 색만 사용할 것 "bk"(default) / "wt" / "red" / "gray" / "green" / "lightGray"
+ * @param {String} type - 텍스트의 타입  "default" / "bold"
  * @returns {React.Component} 네모난 버튼 컴포넌트
  */
 
-export function SquareBtn({
-  onClick,
-  children,
-  type = "default",
-  color = "#191919",
-}) {
+export function SquareBtn({ onClick, children, type = "default", color = "#191919" }) {
   return (
     <S.BtnContainer onClick={onClick} color={color} type={type}>
       <span>{children}</span>
-      {/*<ArrowBelowIcon />*/}
     </S.BtnContainer>
   );
 }

src/components/atoms/SquareBtn/SquareBtn.styles.jsx

@@ -9,7 +9,8 @@ export const BtnContainer = styled.div`
   align-items: center;
   box-sizing: border-box;
   background-color: ${(props) => (props.type === "default" ? props.theme.wt : `#FFFFFF`)};
-  color: ${(props) => props.color};
+  color: ${(props) => props.theme[props.color]};
+  font-weight: ${(props) => (props.type === "bold" ? "bold" : "400")};
   font-family: "Courier Prime", monospace;
   font-size: 1.125rem;
   cursor: pointer;

src/components/index.js

@@ -4,8 +4,6 @@
  * atoms
  */
 //TodoPage
-import SaveBtn from "./atoms/ReceiptPageBtns/SaveBtn";
-
 export { HeaderText } from "./atoms/HeaderText";
 export { DayOfWeek } from "./atoms/DayOfWeek";
 export { SquareBtn } from "./atoms/SquareBtn";

src/components/molecules/ReceiptPaperContents/ReceiptPaperContents.styles.jsx

@@ -16,7 +16,7 @@ export const Paper = styled(Center)`
   letter-spacing: -0.5px;
   line-height: 1.4;
   color: #2f2f2f;
-  background: url(${paperTexture});
+  background: url(${paperTexture}) no-repeat center/cover; ;
 `;
 
 export const Title = styled.h1`

src/components/molecules/TodoListBlock/TodoListBlock.jsx

@@ -35,7 +35,7 @@ function TodoItem({ todo, onRemove, onEdit, onOpenBottomSheet }) {
     }
   };
 
-  const handleClickToDoRemoveButton = (e) => {
+  const handleClickToDoRemoveButton = () => {
     onRemove(todo.id);
   };
 
@@ -78,6 +78,7 @@ function TodoItem({ todo, onRemove, onEdit, onOpenBottomSheet }) {
  * @param {Array} todos - todo list
  * @param {Function} onRemove - todo 삭제
  * @param {Function} onEdit - todo 수정
+ * @param {Function} onOpenBottomSheet - 하단 포모도로 창 오픈
  * @returns
  */
 
@@ -86,12 +87,10 @@ export function TodoListBlock({ todos, onRemove, onEdit, onOpenBottomSheet }) {
 
   const setRunningTimer = (key) => {
     setHasRuuningTimer(key);
-    return;
   };
 
   const resetRunningTimer = () => {
     setHasRuuningTimer("");
-    return;
   };
 
   useEffect(() => {

src/components/pages/RedirectionPage/RedirectionPage.jsx

@@ -1,4 +1,3 @@
-import { BackBtn } from "components";
 import ReceiptImg from "assets/images/receipt_img.png";
 import * as S from "./RedirectionPage.styles";
 import { useNavigate } from "react-router-dom";

src/hooks/useAsync.jsx

@@ -0,0 +1,54 @@
+// 참고 자료 - https://react.vlpt.us/integrate-api/03-useAsync.html
+
+import { useReducer, useEffect } from "react";
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "LOADING":
+      return {
+        loading: true,
+        data: null,
+        error: null,
+      };
+    case "SUCCESS":
+      return {
+        loading: false,
+        data: action.data,
+        error: null,
+      };
+    case "ERROR":
+      return {
+        loading: false,
+        data: null,
+        error: action.error,
+      };
+    default:
+      throw new Error(`Unhandled action type: ${action.type}`);
+  }
+}
+
+function useAsync(callback, deps = []) {
+  const [state, dispatch] = useReducer(reducer, {
+    loading: false,
+    data: null,
+    error: false,
+  });
+
+  const fetchData = async () => {
+    dispatch({ type: "LOADING" });
+    try {
+      const data = await callback();
+      dispatch({ type: "SUCCESS", data });
+    } catch (e) {
+      dispatch({ type: "ERROR", error: e });
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, deps);
+
+  return [state, fetchData];
+}
+
+export default useAsync;