<!-- portfolio/projects.html -->
<dialog id="project-dialog" class="project-dialog">
  <h2 class="dialog-title"></h2>
  <p class="dialog-background"></p>
  <p class="dialog-role"></p>
  <p class="dialog-learned"></p>
</dialog>

<!-- portfolio/projects.html의 project-grid 안 -->
<div class="project-grid">
  <article class="project-card">
    <img src="images/project-01.svg" alt="오늘의 날씨 프로젝트 화면" width="1200" height="800" />
    <h3>오늘의 날씨</h3>
    <p>위치 기반 날씨를 카드로 보여주는 웹앱입니다. 오프라인에서도 마지막 데이터를 보여줍니다.</p>
    <ul class="tags">
      <li>JavaScript</li>
      <li>PWA</li>
    </ul>
    <button type="button" class="btn-detail" data-project-id="weather">자세히</button>
  </article>
  <!-- bookshelf, notes, a11y, tokens, todo-cli 카드도 같은 구조로 반복 -->
</div>

// portfolio/js/main.js
const projectDialog = document.querySelector('#project-dialog');
 
const projectDetails = {
  weather: {
    title: '오늘의 날씨',
    background: '위치 기반 날씨 정보를 빠르게 확인할 수 있는 화면이 필요해서 시작한 프로젝트입니다.',
    role: 'fetch로 외부 날씨 API를 호출하고, Service Worker로 마지막 응답을 캐시했습니다.',
    learned: '네트워크가 끊겨도 마지막 데이터를 보여주는 오프라인 우선 설계를 배웠습니다.',
  },
  bookshelf: {
    title: '독서 기록 bookshelf',
    background: '읽은 책과 별점을 기록할 곳이 마땅치 않아 직접 만든 React 앱입니다.',
    role: '컴포넌트를 상태별로 나누고, Context로 테마를 전역에서 관리했습니다.',
    learned: 'props와 state를 분리하는 기준, 리스트 렌더링 최적화를 배웠습니다.',
  },
  notes: {
    title: '메모 앱 notes',
    background: '서버 없이 브라우저 저장소만으로 동작하는 메모 앱을 만들어 보고 싶었습니다.',
    role: 'IndexedDB로 메모를 저장하고, 검색은 Worker 스레드로 분리했습니다.',
    learned: '메인 스레드를 막지 않고 무거운 검색을 처리하는 방법을 배웠습니다.',
  },
  a11y: {
    title: '접근성 체크리스트',
    background: 'WCAG 항목을 하나씩 점검할 수 있는 정적 사이트가 필요했습니다.',
    role: '시맨틱 요소와 ARIA 속성만으로 체크리스트 UI를 구성했습니다.',
    learned: '시맨틱 마크업이 접근성의 기본 토대라는 것을 실감했습니다.',
  },
  tokens: {
    title: '디자인 토큰 미리보기',
    background: 'CSS 변수로 만든 색·간격 토큰을 한눈에 비교하고 싶어 만들었습니다.',
    role: 'CSS 커스텀 속성을 값별로 나열하고, 배경색을 그대로 미리보기로 썼습니다.',
    learned: '디자인 토큰을 코드로 관리하면 일관성을 지키기 쉽다는 것을 배웠습니다.',
  },
  'todo-cli': {
    title: 'todo-cli',
    background: '터미널에서 바로 쓸 수 있는 할 일 관리 도구가 필요해 만들었습니다.',
    role: 'Node.js로 파일 저장소를 구현하고, 명령어별로 모듈을 나눴습니다.',
    learned: '파일 I/O를 비동기로 다루는 법과 CLI 인자 파싱을 배웠습니다.',
  },
};
 
document.querySelectorAll('[data-project-id]').forEach((button) => {
  button.addEventListener('click', () => {
    const detail = projectDetails[button.dataset.projectId];
    projectDialog.querySelector('.dialog-title').textContent = detail.title;
    projectDialog.querySelector('.dialog-background').textContent = detail.background;
    projectDialog.querySelector('.dialog-role').textContent = detail.role;
    projectDialog.querySelector('.dialog-learned').textContent = detail.learned;
    projectDialog.showModal();
  });
});

<script type="module" src="js/main.js"></script>

$ (VS Code Live Server 확장으로 projects.html 열기)