// db.json
{
  "notes": [
    {
      "id": "n1",
      "title": "Vite 프로젝트 만들기",
      "body": "npm create vite@latest notes-app -- --template vanilla 로 시작한다.",
      "tags": ["setup"],
      "pinned": true,
      "updatedAt": "2026-09-15T09:00:00+09:00"
    },
    {
      "id": "n2",
      "title": "이벤트 위임 메모",
      "body": "목록 전체에 리스너 하나를 달고 event.target.closest 로 버튼을 찾는다.",
      "tags": ["dom", "events"],
      "pinned": false,
      "updatedAt": "2026-09-15T11:20:00+09:00"
    },
    {
      "id": "n3",
      "title": "fetch 취소",
      "body": "AbortController 의 signal 을 fetch 옵션으로 넘기고 abort() 로 취소한다.",
      "tags": ["fetch"],
      "pinned": false,
      "updatedAt": "2026-09-16T08:00:00+09:00"
    },
    {
      "id": "n4",
      "title": "IndexedDB 는 트랜잭션 단위",
      "body": "objectStore 접근은 transaction 안에서만 가능하다.",
      "tags": ["storage"],
      "pinned": false,
      "updatedAt": "2026-09-16T09:30:00+09:00"
    }
  ]
}

npx json-server db.json --port 3001

// src/api.js
const BASE_URL = 'http://localhost:3001';
 
export async function fetchNotes() {
  const response = await fetch(`${BASE_URL}/notes`);
  if (!response.ok) throw new Error(`목록을 불러오지 못했습니다 (${response.status})`);
  return response.json();
}
 
export async function createNoteOnServer(note) {
  const response = await fetch(`${BASE_URL}/notes`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(note),
  });
  if (!response.ok) throw new Error(`메모를 저장하지 못했습니다 (${response.status})`);
  return response.json();
}
 
export async function updateNoteOnServer(id, patch) {
  const response = await fetch(`${BASE_URL}/notes/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(patch),
  });
  if (!response.ok) throw new Error(`메모를 수정하지 못했습니다 (${response.status})`);
  return response.json();
}
 
export async function deleteNoteOnServer(id) {
  const response = await fetch(`${BASE_URL}/notes/${id}`, { method: 'DELETE' });
  if (!response.ok) throw new Error(`메모를 삭제하지 못했습니다 (${response.status})`);
}

// src/notes.js의 export 목록에 추가
export function setNotes(newNotes) {
  notes = newNotes;
  saveNotes(notes);
}

// src/main.js
import { getNotes, addNote, removeNote, updateNote, setNotes } from './notes.js';
import { renderList } from './render.js';
import {
  fetchNotes,
  createNoteOnServer,
  updateNoteOnServer,
  deleteNoteOnServer,
} from './api.js';
 
const listEl = document.querySelector('#note-list');
const form = document.querySelector('#note-form');
const titleInput = form.elements.title;
const titleError = form.querySelector('[data-error-for="title"]');
 
let editingId = null;
 
function render() {
  renderList(getNotes(), listEl, { editingId });
}
 
async function hydrate() {
  listEl.innerHTML = '<li class="note-status">불러오는 중...</li>';
  try {
    const serverNotes = await fetchNotes();
    setNotes(serverNotes);
  } catch (error) {
    console.error(error);
  }
  render();
}
 
titleInput.addEventListener('input', () => {
  titleInput.setCustomValidity('');
});
 
form.addEventListener('submit', async (event) => {
  event.preventDefault();
 
  if (titleInput.value.trim().length === 0) {
    titleInput.setCustomValidity('제목을 입력하세요.');
  } else if (titleInput.value.trim().length < 2) {
    titleInput.setCustomValidity('제목은 2자 이상 입력하세요.');
  } else {
    titleInput.setCustomValidity('');
  }
 
  if (!form.checkValidity()) {
    titleError.textContent = titleInput.validationMessage;
    return;
  }
 
  titleError.textContent = '';
  const formData = new FormData(form);
  const draft = {
    title: formData.get('title').trim(),
    body: formData.get('body').trim(),
    tags: [],
    pinned: false,
  };
 
  try {
    const saved = await createNoteOnServer(draft);
    addNote(saved);
  } catch (error) {
    console.error(error);
    addNote(draft);
  }
  form.reset();
  render();
});
 
listEl.addEventListener('click', async (event) => {
  const actionEl = event.target.closest('[data-action]');
  if (!actionEl) return;
  const card = actionEl.closest('.note-card');
  if (!card) return;
  const id = card.dataset.id;
  const action = actionEl.dataset.action;
 
  if (action === 'delete') {
    try {
      await deleteNoteOnServer(id);
    } catch (error) {
      console.error(error);
    }
    removeNote(id);
    render();
  } else if (action === 'edit') {
    editingId = id;
    render();
  } else if (action === 'cancel') {
    editingId = null;
    render();
  } else if (action === 'save') {
    const title = card.querySelector('.edit-title').value.trim();
    const body = card.querySelector('.edit-body').value.trim();
    try {
      await updateNoteOnServer(id, { title, body });
    } catch (error) {
      console.error(error);
    }
    updateNote(id, { title, body });
    editingId = null;
    render();
  }
});
 
hydrate();

npx json-server db.json --port 3001

npm run dev