[Week3] 윤지-routing test (App Router)

[Leeyoonji23]

Describe your changes

💬 파일 구조입니다.

week3/
├── src/
│   ├── actions/       # 서버 액션 정의
│   │   └── addItem.ts
│   ├── app/
│   │   ├── routing-test/   # 라우팅 경로 
│   │   │   ├── page.tsx    # 실제 라우팅되는 클라이언트 페이지
│   │   │   └── AddItemForm.tsx # 클라이언트 전용 컴포넌트
│   ├── lib/
│   │   └── db.ts       # 목데이터

🤷‍♂️ 간단한 Todo-List만들기 입니다

//actions/addItem.ts
"use server";

import { fakeDB } from "../lib/db";

export async function addItem(newItem: string) {
  fakeDB.push(newItem);
  return fakeDB;
}

// app/routing-test/AddItemForm.tsx
"use client";

import { useState, useTransition } from "react";
import { addItem } from "@/actions/addItem";

export default function AddItemForm({
  onAdd,
}: {
  onAdd: (items: string[]) => void;
}) {
  const [input, setInput] = useState("");
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const updated = await addItem(input);
      onAdd(updated);
      setInput("");
    });
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="추가할 항목 입력"
      />
      <button onClick={handleSubmit} disabled={isPending}>
        {isPending ? "추가 중..." : "추가"}
      </button>
    </div>
  );
}

// app/routing-test/page.tsx
"use client";
import AddItemForm from "./AddItemForm";
import { useState } from "react";
import { fakeDB } from "@/lib/db";

export default function RoutingTestPage() {
  const [items, setItems] = useState(fakeDB);

  return (
    <div style={{ padding: 24 }}>
      <h1>✅Todo-List</h1>

      <ul>
        {items.map((item, i) => (
          <li key={i}>📌 {item}</li>
        ))}
      </ul>

      <hr style={{ margin: "20px 0" }} />

      <AddItemForm onAdd={setItems} />
    </div>
  );
}

// lib/db.ts 
export const fakeDB: string[] = ['스터디 준비하기', 'Next.js 정리', '운동하기'];