[문주영] Sprint10

components/Btn.tsx

@@ -19,6 +19,7 @@ const CONTENT: Record<Props["mode"], string> = {
 
 export default function Btn({
   className = "",
+  type = "button",
   size = "large",
   mode,
   ...props
@@ -35,7 +36,11 @@ export default function Btn({
   }, [mode]);
 
   return (
-    <button className={`${styles.btn} ${styles[size]} ${className}`} {...props}>
+    <button
+      className={`${styles.btn} ${styles[size]} ${className}`}
+      type={type}
+      {...props}
+    >
       <div className={styles.shadow}></div>
       <div className={`${styles.content} ${styles[mode]}`}>
         <Image height={16} width={16} id={styles.dark} {...img} />

components/BtnImage.module.css

@@ -0,0 +1,20 @@
+.btn {
+  justify-items: center;
+  align-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 9999px;
+}
+
+.btn.plus {
+  background-color: var(--slate200);
+}
+
+.btn.edit {
+  border: 2px solid var(--slate900);
+  background-color: rgb(from var(--slate900) r g b / 0.5);
+}
+
+.btn img {
+  display: block;
+}

components/BtnImage.tsx

@@ -0,0 +1,17 @@
+import { LabelHTMLAttributes } from "react";
+import Image from "next/image";
+import ic_plus from "@/assets/icons/plus_big.svg";
+import ic_edit from "@/assets/icons/edit.svg";
+import styles from "./BtnImage.module.css";
+
+interface Props extends LabelHTMLAttributes<HTMLLabelElement> {
+  mode: "plus" | "edit";
+}
+
+export default function BtnImage({ className = "", mode, ...props }: Props) {
+  return (
+    <label className={`${styles.btn} ${styles[mode]} ${className}`} {...props}>
+      <Image alt={mode} src={mode === "plus" ? ic_plus : ic_edit} />
+    </label>
+  );
+}

components/CheckList.tsx

@@ -1,10 +1,14 @@
-import { HTMLAttributes, MouseEventHandler } from "react";
+import { AnchorHTMLAttributes, MouseEventHandler } from "react";
 import Image from "next/image";
+import Link, { LinkProps } from "next/link";
 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> {
+type LinkAttributes = AnchorHTMLAttributes<HTMLAnchorElement> & LinkProps;
+
+interface Props extends LinkAttributes {
+  href: string;
   isChecked: boolean;
   onButtonClick: MouseEventHandler<HTMLButtonElement>;
 }
@@ -17,7 +21,7 @@ export default function CheckList({
   ...props
 }: Props) {
   return (
-    <div
+    <Link
       className={`${styles["check-list"]} ${
         styles[String(isChecked)]
       } ${className}`}
@@ -27,6 +31,6 @@ export default function CheckList({
         <Image alt="checkbox" src={isChecked ? ic_checked : ic_empty} />
       </button>
       {children}
-    </div>
+    </Link>
   );
 }

components/CheckListDetail.module.css

@@ -0,0 +1,43 @@
+.check-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  height: 64px;
+  border: 2px solid var(--slate900);
+  border-radius: 24px;
+}
+
+.check-list.true {
+  background-color: var(--violet200);
+}
+
+.check-list.false {
+  background-color: white;
+}
+
+.check-list * {
+  color: var(--slate900);
+  line-height: 23px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.check-list button {
+  line-height: 0;
+}
+
+.check-list span {
+  z-index: -100;
+  position: fixed;
+  visibility: hidden;
+  white-space: pre;
+}
+
+.check-list input {
+  padding: 0;
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  text-decoration: underline;
+}

components/CheckListDetail.tsx

@@ -0,0 +1,48 @@
+import { HTMLAttributes, useEffect, useRef, useState } 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 "./CheckListDetail.module.css";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  defaultIsChecked: boolean;
+  defaultValue: string;
+}
+
+export default function CheckListDetail({
+  className = "",
+  defaultIsChecked = false,
+  defaultValue = "",
+  ...props
+}: Props) {
+  const [value, setValue] = useState(defaultValue ?? "");
+  const [isChecked, setIsChecked] = useState(defaultIsChecked);
+  const spanRef = useRef<HTMLSpanElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const width = (spanRef.current?.offsetWidth ?? 0) + 1;
+    if (inputRef.current) inputRef.current.style.width = width + "px";
+  }, [value]);
+
+  return (
+    <div
+      className={`${styles["check-list"]} ${
+        styles[String(isChecked)]
+      } ${className}`}
+      {...props}
+    >
+      <button type="button" onClick={() => setIsChecked((prev) => !prev)}>
+        <Image alt="checkbox" src={isChecked ? ic_checked : ic_empty} />
+        <input type="hidden" name="isCompleted" value={String(isChecked)} />
+      </button>
+      <span ref={spanRef}>{value}</span>
+      <input
+        ref={inputRef}
+        name="name"
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+      />
+    </div>
+  );
+}

global.d.ts

@@ -0,0 +1,6 @@
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.svg";
+declare module "*.css";

lib/api.ts

@@ -4,14 +4,6 @@ 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;
@@ -21,6 +13,10 @@ export type ResponseItem = {
   id: number;
 };
 
+export type SimpleItem = Pick<ResponseItem, "id" | "name" | "isCompleted">;
+
+export type ResponseSimpleItems = SimpleItem[];
+
 export type ResponseDelete = {
   message: string;
 };
@@ -60,3 +56,10 @@ export async function deleteItem(itemId: number) {
   const response = await api.delete<ResponseDelete>("/items/" + itemId);
   return response.data;
 }
+
+export async function postImage(file: File) {
+  const data = new FormData();
+  data.append("image", file);
+  const response = await api.post<{ url: string }>("/images/upload", data);
+  return response.data;
+}

pages/index.tsx

@@ -15,7 +15,7 @@ import todo from "@/assets/images/todo.png";
 import done from "@/assets/images/done.png";
 import empty_todo from "@/assets/images/empty_todo.png";
 import empty_done from "@/assets/images/empty_done.png";
-import styles from "@/styles/index.module.css";
+import styles from "@/styles/home.module.css";
 
 export async function getServerSideProps() {
   const items = await getItems();
@@ -30,16 +30,18 @@ export default function Home({
 }) {
   const [items, setItems] = useState(initialItems);
   const [disabled, setDisabled] = useState(false);
-  const searchRef = useRef<HTMLInputElement>(null);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (searchRef.current?.value) {
+    const form = e.currentTarget;
+    const name = new FormData(form).get("name")?.toString().trim();
+
+    if (name) {
       try {
         setDisabled(true);
-        const item = await postItem({ name: searchRef.current.value });
+        const item = await postItem({ name });
         setItems((prev) => [...prev, item]);
-        searchRef.current.value = "";
+        form.reset();
       } finally {
         setDisabled(false);
       }
@@ -61,12 +63,8 @@ export default function Home({
       <Gnb />
       <main>
         <form onSubmit={handleSubmit}>
-          <Search
-            className={styles.search}
-            disabled={disabled}
-            ref={searchRef}
-          />
-          <Btn mode="add" disabled={disabled} />
+          <Search name="name" className={styles.search} disabled={disabled} />
+          <Btn mode="add" type="submit" disabled={disabled} />
         </form>
         <div>
           <section>
@@ -77,6 +75,7 @@ export default function Home({
                 .map((item) => (
                   <CheckList
                     key={item.id}
+                    href={`/items/${item.id}`}
                     isChecked={false}
                     onButtonClick={async (e) => {
                       e.currentTarget.disabled = true;
@@ -107,6 +106,7 @@ export default function Home({
                 .map((item) => (
                   <CheckList
                     key={item.id}
+                    href={`/items/${item.id}`}
                     isChecked={true}
                     onButtonClick={async (e) => {
                       e.currentTarget.disabled = true;