// src/notes.js
let 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',
  },
];
 
function generateId() {
  return `n${Date.now()}`;
}
 
export function getNotes() {
  return notes;
}
 
export function addNote({ id, title, body, tags = [], pinned = false, updatedAt }) {
  const note = {
    id: id ?? generateId(),
    title,
    body,
    tags,
    pinned,
    updatedAt: updatedAt ?? new Date().toISOString(),
  };
  notes = [note, ...notes];
  return note;
}
 
export function removeNote(id) {
  notes = notes.filter((note) => note.id !== id);
}
 
export function updateNote(id, patch) {
  notes = notes.map((note) =>
    note.id === id ? { ...note, ...patch, updatedAt: new Date().toISOString() } : note,
  );
}

// src/render.js
function renderDisplayCard(note) {
  return `
    <h2>${note.title}</h2>
    <p>${note.body}</p>
    <div class="note-actions">
      <button type="button" data-action="edit">편집</button>
      <button type="button" data-action="delete">삭제</button>
    </div>
  `;
}
 
function renderEditCard(note) {
  return `
    <input class="edit-title" name="title" type="text" value="${note.title}" />
    <input class="edit-body" name="body" type="text" value="${note.body}" />
    <div class="note-actions">
      <button type="button" data-action="save">저장</button>
      <button type="button" data-action="cancel">취소</button>
    </div>
  `;
}
 
export function renderList(notes, container, { editingId = null } = {}) {
  container.innerHTML = '';
  for (const note of notes) {
    const li = document.createElement('li');
    li.className = 'note-card';
    li.dataset.id = note.id;
    li.innerHTML = note.id === editingId ? renderEditCard(note) : renderDisplayCard(note);
    container.appendChild(li);
  }
}

// src/main.js
import { getNotes, addNote, removeNote, updateNote } from './notes.js';
import { renderList } from './render.js';
 
const listEl = document.querySelector('#note-list');
const titleInput = document.querySelector('#new-title');
const bodyInput = document.querySelector('#new-body');
const addBtn = document.querySelector('#add-btn');
 
let editingId = null;
 
function render() {
  renderList(getNotes(), listEl, { editingId });
}
 
addBtn.addEventListener('click', () => {
  const title = titleInput.value.trim();
  if (!title) return;
  addNote({ title, body: bodyInput.value.trim() });
  titleInput.value = '';
  bodyInput.value = '';
  render();
});
 
listEl.addEventListener('click', (event) => {
  const actionEl = event.target.closest('[data-action]');
  if (!actionEl) return;
  const card = actionEl.closest('.note-card');
  const id = card.dataset.id;
  const action = actionEl.dataset.action;
 
  if (action === 'delete') {
    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();
    updateNote(id, { title, body });
    editingId = null;
    render();
  }
});
 
render();

<!-- index.html -->
<div class="note-composer">
  <input id="new-title" type="text" placeholder="제목" />
  <input id="new-body" type="text" placeholder="내용" />
  <button id="add-btn" type="button">추가</button>
</div>

npm run dev