Merge pull request #124 from cskime/Next-김참솔-sprint9

[김참솔] Sprint9

Author: kiJu2

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;