[김참솔] Sprint9

my-app/components/button/button-type.js

@@ -0,0 +1,7 @@
+const BUTTON_TYPE = Object.freeze({
+  add: "add",
+  edit: "edit",
+  delete: "delete",
+});
+
+export { BUTTON_TYPE };

my-app/components/button/button.jsx

@@ -0,0 +1,27 @@
+import { BUTTON_TYPE } from "./button-type";
+import styles from "./button.module.css";
+
+const className = {
+  [BUTTON_TYPE.add]: `${styles.button} ${styles.add}`,
+  [BUTTON_TYPE.edit]: `${styles.button} ${styles.edit}`,
+  [BUTTON_TYPE.delete]: `${styles.button} ${styles.delete}`,
+};
+
+const leadingIcon = {
+  [BUTTON_TYPE.add]: "/icons/ic-plus.svg",
+  [BUTTON_TYPE.edit]: "/icons/ic-check.svg",
+  [BUTTON_TYPE.delete]: "/icons/ic-xmark-white.svg",
+};
+
+function Button({ children, type = BUTTON_TYPE.add, ...props }) {
+  return (
+    <button className={className[type]} {...props}>
+      <div className={styles.trailingIcon}>
+        <img src={leadingIcon[type]} alt={type} />
+      </div>
+      {children}
+    </button>
+  );
+}
+
+export default Button;

my-app/components/button/button.module.css

@@ -0,0 +1,42 @@
+.button {
+  color: var(--color-state-900);
+  background-color: var(--color-state-200);
+  padding: 18px 40px;
+  border: 2px solid var(--color-state-900);
+  border-radius: 24px;
+  box-shadow: 4px 4px 0px var(--color-state-900);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.button .trailingIcon {
+  width: 16px;
+  height: 16px;
+}
+.button .trailingIcon img {
+  width: 100%;
+  height: 100%;
+}
+
+.button.add:active {
+  color: white;
+  background-color: var(--color-violet-600);
+}
+.button.add:active img {
+  filter: invert(100%) sepia(14%) saturate(1801%) hue-rotate(190deg)
+    brightness(116%) contrast(101%);
+}
+
+.button.edit:active {
+  background-color: var(--color-lime-300);
+}
+
+.button.delete {
+  color: white;
+  background-color: var(--color-rose-500);
+}

my-app/components/color/color.js

@@ -0,0 +1,30 @@
+function colorVariable(name, shade) {
+  return `var(--color-${name}-${Math.max(100, Math.min(900, shade))})`;
+}
+
+const Colors = {
+  state: {
+    100: colorVariable("state", 100),
+    200: colorVariable("state", 200),
+    300: colorVariable("state", 300),
+    400: colorVariable("state", 400),
+    500: colorVariable("state", 500),
+    800: colorVariable("state", 800),
+    900: colorVariable("state", 900),
+  },
+  violet: {
+    100: colorVariable("violet", 100),
+    600: colorVariable("violet", 600),
+  },
+  rose: {
+    500: colorVariable("rose", 500),
+  },
+  lime: {
+    300: colorVariable("lime", 300),
+  },
+  amber: {
+    800: colorVariable("amber", 800),
+  },
+};
+
+export default Colors;

my-app/components/input/search-input.jsx

@@ -0,0 +1,11 @@
+import styles from "./search-input.module.css";
+
+function SearchInput({ ...props }) {
+  return (
+    <div className={styles.searchInput}>
+      <input type="text" {...props} />
+    </div>
+  );
+}
+
+export default SearchInput;

my-app/components/input/search-input.module.css

@@ -0,0 +1,24 @@
+.searchInput {
+  width: 100%;
+  background-color: var(--color-state-100);
+  padding: 16px 24px;
+  border: 2px solid var(--color-state-900);
+  border-radius: 24px;
+  box-shadow: 4px 4px 0px var(--color-state-900);
+}
+.searchInput input {
+  background: none;
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 100%;
+  color: var(--color-state-900);
+}
+.searchInput input::placeholder {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 100%;
+  color: var(--color-state-500);
+}

my-app/components/nav-bar/global-nav-bar.jsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import styles from "./global-nav-bar.module.css";
+
+function GlobalNavBar() {
+  return (
+    <nav className={styles.globalNavBar}>
+      <div className={styles.content}>
+        <Link href="/">
+          <picture>
+            <source
+              srcSet="/images/logo-small.svg"
+              media="(max-width: 743px)"
+            />
+            <img src="/images/logo-large.svg" alt="logo" />
+          </picture>
+        </Link>
+      </div>
+    </nav>
+  );
+}
+
+export default GlobalNavBar;

my-app/components/nav-bar/global-nav-bar.module.css

@@ -0,0 +1,31 @@
+.globalNavBar {
+  height: 60px;
+  background-color: white;
+  padding: 0 200px;
+  border-bottom: 1px solid var(--color-state-200);
+}
+
+.globalNavBar .content {
+  max-width: 1200px;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 1199px) {
+  .globalNavBar {
+    padding: 0 24px;
+  }
+
+  .globalNavBar .content {
+    max-width: none;
+    margin: 0;
+  }
+}
+
+@media (max-width: 743px) {
+  .globalNavBar {
+    padding: 0 16px;
+  }
+}

my-app/components/portal/portal.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+function Portal({ children }) {
+  const [container, setContainer] = useState(null);
+
+  useEffect(() => {
+    // setContainer(document.getElementById("portal"));
+    setContainer(document.body);
+  }, []);
+
+  return container && createPortal(children, container);
+}
+
+export default Portal;

my-app/components/todo/todo-label.jsx

@@ -0,0 +1,12 @@
+import styles from "./todo-label.module.css";
+
+function TodoLabel({ done }) {
+  let className = styles.todoLabel;
+  if (done) {
+    className += ` ${styles.done}`;
+  }
+
+  return <span className={className}>{done ? "DONE" : "TO DO"}</span>;
+}
+
+export default TodoLabel;

my-app/components/todo/todo-label.module.css

@@ -0,0 +1,15 @@
+.todoLabel {
+  background-color: var(--color-lime-300);
+  color: var(--color-green-700);
+  font-family: "HsSantoki20";
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 100%;
+  padding: 6px 27px;
+  border-radius: 24px;
+}
+
+.todoLabel.done {
+  background-color: var(--color-green-700);
+  color: var(--color-amber-300);
+}

my-app/components/todo/todo-list.jsx

@@ -0,0 +1,38 @@
+import TodoLabel from "./todo-label";
+import styles from "./todo-list.module.css";
+
+function EmptyMessage({ children }) {
+  const chunks = children.split("\n");
+  let messageChunks = [];
+  for (const chunk of chunks) {
+    messageChunks.push(<span key={chunk}>{chunk}</span>);
+    messageChunks.push(<br key={`${chunk}-br`} />);
+  }
+  messageChunks.pop();
+  return <p>{messageChunks}</p>;
+}
+
+function TodoList({ done = false, children }) {
+  const emptyMessage = done
+    ? "아직 다 한 일이 없어요.\n해야 할 일을 체크해보세요!"
+    : "할 일이 없어요.\nTODO를 새롭게 추가해주세요!";
+
+  return (
+    <div className={styles.todoList}>
+      <TodoLabel done={done} />
+      {children.length > 0 ? (
+        <div className={styles.todoListContent}>{children}</div>
+      ) : (
+        <div className={styles.todoListEmptyContainer}>
+          <img
+            src={`/images/${done ? "done" : "todo"}-list-empty.svg`}
+            alt="empty"
+          />
+          <EmptyMessage>{emptyMessage}</EmptyMessage>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TodoList;

my-app/components/todo/todo-list.module.css

@@ -0,0 +1,32 @@
+.todoList {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.todoListContent {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.todoListEmptyContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.todoListEmptyContainer img {
+  aspect-ratio: 1 / 1;
+}
+.todoListEmptyContainer p {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 100%;
+  color: var(--color-state-400);
+  text-align: center;
+}

my-app/components/todo/todo.jsx

@@ -0,0 +1,23 @@
+import styles from "./todo.module.css";
+
+function Todo({ children, checked = false, ...props }) {
+  let className = styles.todo;
+  if (checked) {
+    className += ` ${styles.checked}`;
+  }
+
+  const checkImage = checked
+    ? "/images/checkbox-checked.svg"
+    : "/images/checkbox.svg";
+
+  return (
+    <div className={className} {...props}>
+      <div className={styles.checkImage}>
+        <img src={checkImage} alt="check" />
+      </div>
+      <p className={styles.title}>{children}</p>
+    </div>
+  );
+}
+
+export default Todo;

my-app/components/todo/todo.module.css

@@ -0,0 +1,33 @@
+.todo {
+  background-color: white;
+  border: 2px solid var(--color-state-900);
+  border-radius: 27px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 100%;
+  color: var(--color-state-800);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 50px;
+  padding: 9px 12px;
+  cursor: pointer;
+}
+.todo.checked {
+  background-color: var(--color-violet-100);
+  text-decoration: line-through;
+}
+
+.todo .checkImage {
+  width: 32px;
+  height: 32px;
+}
+
+.todo .checkImage img {
+  width: 100%;
+  height: 100%;
+}
+
+.todo .title {
+  flex-grow: 1;
+}

my-app/hooks/use-async-call.js

@@ -0,0 +1,17 @@
+const { useState } = require("react");
+
+export function useAsyncCall() {
+  const [isLoading, setLoading] = useState(false);
+
+  const execute = async (callback) => {
+    setLoading(true);
+    try {
+      const result = await callback();
+      return result;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return [isLoading, execute];
+}