Merge pull request #250 from cksrlcks/React-김찬기-sprint7

[김찬기] Sprint7

README.md

@@ -78,3 +78,13 @@ state 관리하고 있는 params과 usePageSize로 관리하는 pageSize의 변
 - url주소 기반으로 처리하는 useFetch를 쓰게되면, 만약에 api url이 변경되거나 요청전 작업이 수정되면 수정하러 이곳저곳을 돌아다녀야 할 것 같음.
 - 비동기 요청함수를 받아서 처리하는 훅으로 만들어둔 useAsync를 쓰는게 더 적합해보임
 - 주소를 기반으로 fetch만을 처리하는 훅으로 useFetch를 수정하고 남겨두기로 결정
+
+#### axios와 abortcontroller 사용기
+
+- fetch와 axios는 abort될시에 error name이 다르다.
+- 기존 fetch에서는 'AbortError'로 예외처리를 했는데, axios에서는 'CanceledError'로 예외처리를 해야했음.
+
+#### react router의 loader를 사용할시 추가로 설정해줘야했던 설정들
+
+- React의 Suspense와 fallback, React router의 loader, hydrateFallback을 조사해보고 정리해보았습니다.
+- https://heavy-bear.tistory.com/13

package.json

@@ -3,7 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.7.8",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/assets/scss/base/_variables.scss

@@ -14,6 +14,9 @@
   --color-secondary-100: #f3f4f6;
   --color-secondary-50: #f9fafb;
   --color-error: #f74747;
+  --color-error-100: #f74747;
+  --color-error-200: #da2d2d;
+  --color-error-300: #bd2020;
   --color-white: #fff;
   --color-grey: #dfdfdf;
   --color-black: #4b5563;

src/assets/scss/style.scss

@@ -1,2 +1 @@
 @use "base";
-@use "common";

src/components/Button/BackToList.jsx

@@ -0,0 +1,13 @@
+import { Button } from "@components/ui";
+import iconBack from "@assets/img/icon/icon_back.svg";
+import styles from "./BackToList.module.scss";
+
+export function BackToList() {
+  return (
+    <div className={styles.controls}>
+      <Button to="/items" size="md">
+        목록으로 돌아가기 <img src={iconBack} alt="목록으로 돌아가기" />
+      </Button>
+    </div>
+  );
+}

src/components/Button/BackToList.module.scss

@@ -0,0 +1,7 @@
+.controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin: 4rem 0;
+}

src/components/Button/More.jsx

@@ -0,0 +1,22 @@
+import { Dropdown } from "@components/ui";
+import dotsIcon from "@assets/img/icon/icon_dots.svg";
+import styles from "./More.module.scss";
+
+export function More({ options }) {
+  return (
+    <Dropdown>
+      <Dropdown.Toggle>
+        <div className={styles.icon}>
+          <img src={dotsIcon} alt="더보기" />
+        </div>
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {options.map((option) => (
+          <Dropdown.Item key={option.label} onClick={option.action}>
+            {option.label}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}