[문주영] Sprint9

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# vscode
+/.vscode

components/Btn.module.css

@@ -0,0 +1,77 @@
+button.btn {
+  position: relative;
+  height: 56px;
+}
+
+button.btn.large {
+  width: 168px;
+}
+
+button.btn.small {
+  width: 56px;
+}
+
+button.btn div {
+  position: absolute;
+  height: 52px;
+  border: 2px solid var(--slate900);
+  border-radius: 24px;
+}
+
+button.btn.large div {
+  width: 164.35px;
+}
+
+button.btn.small div {
+  width: 54.78px;
+}
+
+button.btn div.content {
+  top: 0;
+  left: 0;
+  display: flex;
+  background-color: var(--slate200);
+  color: var(--slate900);
+  line-height: 18px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+button.btn div.content.delete {
+  background-color: var(--rose500);
+  color: white;
+}
+
+button.btn:hover div.content.add {
+  background-color: var(--violet600);
+  color: white;
+}
+
+button.btn:hover div.content.edit {
+  background-color: var(--lime300);
+}
+
+button.btn.large div.content {
+  align-items: center;
+  gap: 4px;
+  justify-content: center;
+}
+
+button.btn.small div.content {
+  padding: 16px;
+}
+
+button.btn div.content.add img#light,
+button.btn:hover div.content.add img#dark {
+  display: none;
+}
+
+button.btn:hover div.content.add img#light {
+  display: initial;
+}
+
+button.btn div.shadow {
+  bottom: 0;
+  right: 0;
+  background-color: var(--slate900);
+}

components/Btn.tsx

@@ -0,0 +1,55 @@
+import { ButtonHTMLAttributes, useMemo } from "react";
+import Image from "next/image";
+import ic_plus_black from "@/assets/icons/plus_black.svg";
+import ic_plus_white from "@/assets/icons/plus_white.svg";
+import ic_cross from "@/assets/icons/cross.svg";
+import ic_check from "@/assets/icons/check.svg";
+import styles from "./Btn.module.css";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: "large" | "small";
+  mode: "add" | "delete" | "edit";
+}
+
+const CONTENT: Record<Props["mode"], string> = {
+  add: "추가하기",
+  delete: "삭제하기",
+  edit: "수정 완료",
+};
+
+export default function Btn({
+  className = "",
+  size = "large",
+  mode,
+  ...props
+}: Props) {
+  const img = useMemo(() => {
+    switch (mode) {
+      case "add":
+        return { alt: "plus", src: ic_plus_black };
+      case "delete":
+        return { alt: "cross", src: ic_cross };
+      case "edit":
+        return { alt: "check", src: ic_check };
+    }
+  }, [mode]);
+
+  return (
+    <button className={`${styles.btn} ${styles[size]} ${className}`} {...props}>
+      <div className={styles.shadow}></div>
+      <div className={`${styles.content} ${styles[mode]}`}>
+        <Image height={16} width={16} id={styles.dark} {...img} />
+        {mode === "add" && (
+          <Image
+            height={16}
+            width={16}
+            id={styles.light}
+            alt="plus"
+            src={ic_plus_white}
+          />
+        )}
+        {size === "large" && CONTENT[mode]}
+      </div>
+    </button>
+  );
+}

components/CheckList.module.css

@@ -0,0 +1,26 @@
+.check-list {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 50px;
+  padding: 0 12px;
+  border: 2px solid var(--slate900);
+  border-radius: 9999px;
+  color: var(--slate800);
+  line-height: 18px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.check-list.true {
+  background-color: var(--violet100);
+  text-decoration: line-through 1px;
+}
+
+.check-list.false {
+  background-color: white;
+}
+
+.check-list button {
+  line-height: 0;
+}

components/CheckList.tsx

@@ -0,0 +1,32 @@
+import { HTMLAttributes, MouseEventHandler } from "react";
+import Image from "next/image";
+import ic_checked from "@/assets/icons/checkbox_checked.svg";
+import ic_empty from "@/assets/icons//checkbox_empty.svg";
+import styles from "./CheckList.module.css";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  isChecked: boolean;
+  onButtonClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+export default function CheckList({
+  className = "",
+  children,
+  isChecked,
+  onButtonClick,
+  ...props
+}: Props) {
+  return (
+    <div
+      className={`${styles["check-list"]} ${
+        styles[String(isChecked)]
+      } ${className}`}
+      {...props}
+    >
+      <button type="button" onClick={onButtonClick}>
+        <Image alt="checkbox" src={isChecked ? ic_checked : ic_empty} />
+      </button>
+      {children}
+    </div>
+  );
+}

components/Gnb.module.css

@@ -0,0 +1,22 @@
+nav.gnb {
+  z-index: 20;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  border-bottom: 1px solid var(--slate200);
+  background-color: white;
+}
+
+nav.gnb > div {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 10px 24px 9px;
+  line-height: 0;
+}
+
+nav.gnb > div a {
+  display: inline-block;
+  line-height: 0;
+}

components/Gnb.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+import Image from "next/image";
+import logo from "@/assets/images/logo_text.png";
+import styles from "./Gnb.module.css";
+
+export default function Gnb() {
+  return (
+    <nav className={styles.gnb}>
+      <div>
+        <Link href="/">
+          <Image height={40} alt="logo" src={logo} />
+        </Link>
+      </div>
+    </nav>
+  );
+}

components/Search.module.css

@@ -0,0 +1,35 @@
+.search {
+  position: relative;
+  display: block;
+  height: 56px;
+}
+
+.search > * {
+  width: calc(100% - 4px);
+  height: 52.5px;
+  border: 2px solid var(--slate900);
+  border-radius: 24px;
+}
+
+.search > input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 15px 22px;
+  background-color: var(--slate100);
+  color: var(--slate900);
+  line-height: 18px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.search > input::placeholder {
+  color: var(--slate500);
+}
+
+.search > div {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-color: var(--slate900);
+}

components/Search.tsx

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes, Ref } from "react";
+import styles from "./Search.module.css";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  ref?: Ref<HTMLInputElement>;
+}
+
+export default function Search({ className = "", style, ...props }: Props) {
+  return (
+    <label className={`${styles.search} ${className}`} style={style}>
+      <div />
+      <input placeholder="할 일을 입력해주세요" {...props} />
+    </label>
+  );
+}

lib/api.ts

@@ -0,0 +1,62 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+});
+
+export type SimpleItem = {
+  isCompleted: boolean;
+  name: string;
+  id: number;
+};
+
+export type ResponseSimpleItems = SimpleItem[];
+
+export type ResponseItem = {
+  isCompleted: boolean;
+  imageUrl: string | null;
+  memo: string | null;
+  name: string;
+  tenantId: string;
+  id: number;
+};
+
+export type ResponseDelete = {
+  message: string;
+};
+
+export type PostItem = {
+  name: string;
+};
+
+export type PatchItem = {
+  name?: string;
+  memo?: string;
+  imageUrl?: string;
+  isCompleted?: boolean;
+};
+
+export async function getItems() {
+  const response = await api.get<ResponseSimpleItems>("/items");
+  return response.data;
+}
+
+export async function getItem(itemId: number) {
+  const response = await api.get<ResponseItem>("/items/" + itemId);
+  return response.data;
+}
+
+export async function postItem(body: PostItem) {
+  const response = await api.post<ResponseItem>("/items", body);
+  return response.data;
+}
+
+export async function patchItem(itemId: number, body: PatchItem) {
+  const response = await api.patch<ResponseItem>("/items/" + itemId, body);
+  return response.data;
+}
+
+export async function deleteItem(itemId: number) {
+  const response = await api.delete<ResponseDelete>("/items/" + itemId);
+  return response.data;
+}