// 이 파일이 하는 일: "DBeaver로 DB 들여다보기" 코스 — 지금까지 명령어로만 만나던
// PostgreSQL을 GUI 도구(DBeaver)로 열어 보는 부록 코스. 설치 → 로컬 DB 연결 →
// ERD → 데이터 보기 → SQL 편집기 → CSV 내보내기까지 7개 섹션으로 안내하는 정적 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip, warn 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 접속 정보·SQL 같은 고정 텍스트는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 텍스트 다이어그램 · 코드 상수들 ──

const CODE_WHY_GUI = `psql (터미널)                    DBeaver (GUI)
────────────────────────      ────────────────────────
글자로만 대화                    표·그림으로 대화
테이블 목록? → \\dt 입력          왼쪽 트리에서 폴더처럼 클릭
데이터 보기? → SELECT 입력        테이블 더블클릭 → 엑셀처럼 표가 뜸
구조 파악?  → 머릿속으로 상상      ERD 탭 → 관계도가 그림으로 짠!

→ 둘 다 결국 같은 DB에 말을 겁니다. DBeaver도 속으로는
  SQL을 만들어 보내요. 리모컨이 생겼다고 TV가 바뀌진 않죠.`;

const CODE_CONNECTION = `우리 로컬 개발 DB 접속 정보 (docker-compose.yml에 있는 그 값!)

Host      : localhost      ← 내 PC에서 돌고 있으니까
Port      : 5432           ← PostgreSQL의 기본 방 번호
Database  : mirim
Username  : mirim
Password  : mirim123       ← 로컬 개발용이라 공개돼 있는 값이에요

※ 연결 전에 DB 컨테이너가 켜져 있어야 해요:
   프로젝트 폴더에서  docker compose up -d
   확인은            docker ps   (mirim-postgres가 보이면 OK)`;

const CODE_TREE = `연결에 성공하면 왼쪽 '데이터베이스 탐색기'에 이런 트리가 생겨요:

mirim (연결 이름)
└── Databases
    └── mirim
        └── Schemas
            └── public          ← 우리 테이블은 다 여기!
                ├── Tables
                │   ├── users        (수습 개발자 계정)
                │   ├── assignment   (주차별 과제)
                │   └── submission   (과제 제출물)
                ├── Views
                └── ...

→ 폴더 탐색기 감각 그대로예요. 테이블을 더블클릭하면
  오른쪽에 탭이 열립니다.`;

const CODE_TABLE_TABS = `테이블을 더블클릭하면 열리는 탭 3총사:

Properties(속성) : 열 이름·타입·NOT NULL — 테이블의 '설계도'
Data(데이터)     : 실제 행들이 엑셀처럼 표로 — 오늘의 주인공
ER Diagram      : 이 테이블과 연결된 이웃 테이블 관계도

Data 탭에서 되는 것들:
· 열 머리글 클릭         → 그 열 기준 정렬
· 열 머리글 우클릭       → Filter → 조건 걸어 골라 보기
· 셀 더블클릭           → 값 수정 (엔터만으론 저장 안 됨!)
· 아래쪽 Save(💾)       → 그때서야 진짜 DB에 반영`;

const CODE_SQL_EDITOR = `-- SQL 편집기(Ctrl+])에 이걸 붙여넣고,
-- 실행할 줄에 커서를 두고 Ctrl+Enter!

-- 1) 수습 개발자 명단 (SQL 입문 코스에서 본 그 쿼리)
SELECT name, track FROM users;

-- 2) 1주차 과제만 골라 보기
SELECT title FROM assignment WHERE week = 1;

-- 3) 제출물이 몇 개나 쌓였나?
SELECT count(*) FROM submission;

-- 결과가 아래쪽에 표로 뜨고, 그 표도 Data 탭처럼
-- 정렬·필터가 됩니다. 터미널 psql과 비교하면 신세계죠?`;

const CODE_EXPORT = `데이터 내보내기 — 결과를 CSV 파일로 들고 나가기

방법: Data 탭(또는 쿼리 결과 표)에서
  우클릭 → Export data → CSV 선택 → 저장 위치 지정 → 완료

CSV가 뭐냐면:
  name,track
  김수습,frontend
  이신입,backend
→ 쉼표로 구분된 그냥 텍스트 파일. 그래서 엑셀·구글시트가
  바로 열 수 있고, 멘토에게 "이번 주 제출 현황"을 표로
  공유할 때 딱 좋아요.`;

const CODE_PRACTICE_ME = `실습 ②: 내 계정 행을 DB에서 직접 찾아라!

1) users 테이블 더블클릭 → Data 탭
2) username 열 머리글 우클릭 → Filter → Custom Filter
   조건:  username = '내아이디'
   (또는 SQL 편집기에서)
   SELECT * FROM users WHERE username = '내아이디';
3) 내 행이 딱 한 줄 나오면 성공!
4) 그 화면을 스크린샷(Win+Shift+S) → 과제 게시판에 제출

관찰 포인트: password_hash 열에 내 비밀번호가
'그대로' 있나요? 아니죠 — 왜 암호화(해시)돼 있는지는
SQL 입문 코스의 보안 이야기를 다시 읽어 보세요.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: 'DBeaver가 뭐죠?' },
  { n: 2, label: '설치하기' },
  { n: 3, label: '로컬 DB 연결' },
  { n: 4, label: 'ERD로 한눈에' },
  { n: 5, label: '데이터 GUI로 보기' },
  { n: 6, label: 'SQL 편집기' },
  { n: 7, label: 'CSV 내보내기 & 실습' },
];

export default function ToolDbeaverPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어떤 도구를, 왜 배우는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>DBeaver로 DB 들여다보기</h1>
        <p>
          지금까지 깜깜한 터미널에서 글자로만 대화하던 PostgreSQL에{' '}
          <strong>눈과 손</strong>을 달아 봅니다. DBeaver라는 무료 GUI 도구로 우리
          플랫폼의 진짜 테이블을 폴더처럼 열고, 표처럼 보고, 그림(ERD)으로 펼쳐 볼 거예요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</span>
          <span className="chip">실습 2개 + 스크린샷 제출 1개</span>
          <span className="chip">준비물: Docker로 띄운 로컬 DB</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="DBeaver가 뭐죠?" sub="DB에 눈을 달아 주는 만능 리모컨">
        <p>
          <Link to="/learn/sql"><strong>SQL 입문</strong></Link> 코스에서 우리는
          터미널로 DB와 대화했어요. 잘 통하긴 하는데, 매번 글자를 쳐야 하고 결과도
          글자로만 와서 <strong>전체 그림</strong>이 잘 안 보이죠. 라디오로 축구
          중계를 듣는 느낌이랄까요.
        </p>
        <p>
          <strong>DBeaver</strong>(디비버)는 DB를 화면으로 보여 주는 <strong>GUI
          클라이언트</strong>예요. 테이블은 폴더 트리로, 데이터는 엑셀 같은 표로,
          테이블 사이 관계는 그림으로 보여 줍니다. 라디오 중계가 TV 중계로 바뀌는 거죠.
          PostgreSQL뿐 아니라 거의 모든 DB에 꽂아 쓸 수 있어서, 실무에서 개발자들이
          정말 널리 쓰는 도구예요.
        </p>
        <Code>{CODE_WHY_GUI}</Code>
        <div className="tip">
          <b>오해 방지</b> DBeaver가 DB 그 자체는 아니에요. DB(PostgreSQL)는 우리
          Docker 컨테이너 안에서 계속 돌고 있고, DBeaver는 거기에 <strong>접속해서
          보여 주기만</strong> 하는 창문입니다. 창문을 닫아도(DBeaver 종료) 방(DB)은
          그대로예요.
        </div>
      </Section>

      <Section n={2} title="설치하기" sub="Community 에디션 — 무료면 충분해요">
        <p>
          DBeaver는 <strong>Community 에디션이 무료</strong>고, 우리가 배울 기능은
          전부 무료판에 들어 있어요. 결제 화면이 보인다면 유료판(PRO) 페이지로 잘못
          들어간 거니까 뒤로 나오세요.
        </p>
        <ol className="olist">
          <li>공식 사이트(dbeaver.io)에서 <strong>Community Edition</strong> → Windows 설치 파일을 내려받아요.</li>
          <li>설치 마법사는 기본값으로 <span className="kbd">Next</span>만 눌러도 됩니다.</li>
          <li>첫 실행 때 "샘플 DB를 만들까요?" 하고 물으면 <strong>No</strong> — 우리는 진짜 우리 DB에 붙을 거니까요.</li>
        </ol>
        <div className="tip">
          <b>포터블 팁</b> 학교 PC처럼 설치가 제한된 환경이면 zip(포터블) 버전을 받아
          압축만 풀어도 실행돼요. 단, Java로 만들어진 프로그램이라 첫 실행이 조금
          느린 건 정상입니다.
        </div>
      </Section>

      <Section n={3} title="우리 로컬 PostgreSQL에 연결하기" sub="host·port·db·user — 네 칸만 채우면 끝">
        <p>
          연결(Connection)은 DB에 <strong>전화를 거는 일</strong>이에요. 어느 건물
          (host)의 몇 호(port)로 걸어서, 어떤 방(database)에, 누구(user)라고 밝히고
          들어갈지 — 네트워크 코스에서 배운 IP·포트가 여기서 그대로 쓰입니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="내 PC의 DBeaver가 localhost 5432 포트를 통해 도커 PostgreSQL 컨테이너에 연결되는 경로">
          <rect x="20" y="40" width="600" height="290" rx="8" fill="none" stroke="var(--line)" strokeDasharray="6 4" />
          <text x="34" y="62" fontSize="13" fill="var(--muted)">내 PC (localhost)</text>

          <rect x="50" y="120" width="170" height="90" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="135" y="152" fontSize="15" textAnchor="middle" fill="var(--ink)" fontWeight="600">DBeaver</text>
          <text x="135" y="174" fontSize="12" textAnchor="middle" fill="var(--muted)">GUI 클라이언트</text>
          <text x="135" y="192" fontSize="12" textAnchor="middle" fill="var(--muted)">보여주기만 함</text>

          <line x1="220" y1="165" x2="292" y2="165" stroke="var(--teal)" strokeWidth="2" />
          <line x1="348" y1="165" x2="418" y2="165" stroke="var(--teal)" strokeWidth="2" />
          <polyline points="410,159 418,165 410,171" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />

          <rect x="292" y="145" width="56" height="40" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="170" fontSize="12" textAnchor="middle" fill="var(--ink)">5432</text>
          <text x="320" y="130" fontSize="12" textAnchor="middle" fill="var(--muted)">포트(방 번호)</text>
          <text x="320" y="205" fontSize="12" textAnchor="middle" fill="var(--muted)">SQL 요청 · 표 응답</text>

          <rect x="418" y="100" width="180" height="130" rx="8" fill="none" stroke="var(--amber)" strokeWidth="2" />
          <text x="508" y="122" fontSize="12" textAnchor="middle" fill="var(--amber)">Docker 컨테이너</text>
          <rect x="438" y="136" width="140" height="76" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="508" y="164" fontSize="14" textAnchor="middle" fill="var(--ink)" fontWeight="600">PostgreSQL</text>
          <text x="508" y="186" fontSize="12" textAnchor="middle" fill="var(--muted)">mirim-postgres</text>
          <text x="508" y="202" fontSize="12" textAnchor="middle" fill="var(--muted)">DB: mirim</text>

          <text x="60" y="270" fontSize="12" fill="var(--muted)">Host: localhost — DB가 내 PC에서 돌고 있으니까</text>
          <text x="60" y="292" fontSize="12" fill="var(--muted)">Port: 5432 · Database/User: mirim</text>
          <text x="60" y="314" fontSize="12" fill="var(--rose)">컨테이너가 꺼져 있으면 연결 실패 → docker compose up -d</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: DBeaver → localhost:5432 → 도커 PostgreSQL 컨테이너로 이어지는 연결 경로</p>
        <ol className="olist">
          <li>먼저 DB가 켜져 있는지 확인 — 프로젝트 폴더에서 <span className="icode">docker compose up -d</span>.</li>
          <li>DBeaver에서 왼쪽 위 <strong>플러그 모양(새 연결)</strong> 아이콘 클릭 → <strong>PostgreSQL</strong> 선택.</li>
          <li>아래 접속 정보를 그대로 입력해요.</li>
          <li><span className="kbd">Test Connection</span> 클릭 — 처음엔 "드라이버를 내려받을까요?" 하고 물어요. 이건 DBeaver가 PostgreSQL과 대화할 통역사를 데려오는 과정이니 <strong>Download</strong>.</li>
          <li>초록 체크 "Connected"가 뜨면 <span className="kbd">Finish</span>!</li>
        </ol>
        <Code>{CODE_CONNECTION}</Code>
        <Code>{CODE_TREE}</Code>
        <div className="warn">
          <b>연결이 안 될 때 3단 점검</b> ① <span className="icode">docker ps</span>에
          mirim-postgres가 있나요? (없으면 DB가 꺼진 것) ② Host를{' '}
          <span className="icode">localhost</span>로 썼나요? ③ 비밀번호 오타는 없나요?
          — 십중팔구 이 셋 중 하나예요.
        </div>
      </Section>

      <Section n={4} title="ERD 자동 생성 — 우리 스키마 한눈에" sub="테이블 관계도가 그림으로 짠!">
        <p>
          <Link to="/learn/data-modeling"><strong>데이터 모델링 기초</strong></Link>{' '}
          코스에서 ERD를 손으로 그려 봤죠? DBeaver는 그걸 <strong>자동으로</strong>{' '}
          그려 줍니다. 이미 존재하는 DB를 읽어서 지도를 만들어 주는 거예요 —
          처음 가 본 동네에서 지도 앱을 켜는 것과 같습니다.
        </p>
        <ol className="olist">
          <li>왼쪽 트리에서 <span className="icode">public</span> 스키마를 <strong>우클릭</strong> → <strong>View Diagram</strong> (또는 스키마 더블클릭 → <strong>ER Diagram</strong> 탭).</li>
          <li>테이블들이 상자로, 관계(외래키)가 선으로 그려져요.</li>
          <li>상자를 드래그해서 보기 좋게 배치해 보세요 — 배치만 바뀌고 DB는 안 바뀌니 마음껏!</li>
        </ol>
        <p>
          선 끝을 잘 보세요. <span className="icode">submission</span>에서{' '}
          <span className="icode">users</span>로, 또{' '}
          <span className="icode">assignment</span>로 선이 뻗어 있죠? "제출물 한 건은
          <strong> 어느 학생이, 어느 과제에</strong> 낸 것"이라는 관계가 그림 한 장에
          담겨 있는 거예요. 새 회사에 가서 처음 보는 DB를 파악할 때, 개발자들이 제일
          먼저 하는 일이 바로 이 ERD 열어 보기입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> ERD를 열고, 선(관계)을 하나 골라{' '}
          <strong>말로 설명</strong>해 보세요. "submission의 user_id가 users의 id를
          가리킨다 = 제출물마다 주인이 있다"처럼요. 세 테이블 관계를 전부 설명할 수
          있으면 이 섹션은 통과!
        </div>
      </Section>

      <Section n={5} title="테이블 데이터를 GUI로 보기" sub="더블클릭 한 번이면 엑셀처럼">
        <p>
          트리에서 <span className="icode">users</span> 테이블을 <strong>더블클릭</strong>해
          보세요. 오른쪽에 탭이 열리고, <strong>Data</strong> 탭을 누르면 실제 행들이
          표로 나타납니다. <span className="icode">SELECT * FROM users;</span>를 손으로
          치던 일이 클릭 한 번이 된 거예요.
        </p>
        <Code>{CODE_TABLE_TABS}</Code>
        <p>
          <strong>필터</strong>가 특히 물건이에요. 열 머리글을 우클릭해서 조건을 걸면
          — 예를 들어 assignment 테이블에서 <span className="icode">week = 1</span> —
          WHERE 절을 안 쓰고도 원하는 행만 골라 볼 수 있어요. 물론 속으로는 DBeaver가
          WHERE 절을 만들어 보내고 있고, 상단 필터 칸에 그 조건이 그대로 보입니다.
          GUI로 편하게 쓰면서 SQL도 눈으로 배우는 일석이조!
        </p>
        <div className="warn">
          <b>셀 수정은 신중하게</b> Data 탭에서 셀을 더블클릭하면 <strong>값이
          수정</strong>돼요. 저장(💾)을 눌러야 진짜 반영되긴 하지만, 로컬 DB라도
          함부로 고치면 백엔드가 이상하게 동작해서 "버그인 줄 알고 한참 헤매는" 일이
          생깁니다. 이 코스에서는 <strong>보기만</strong> 하고, 데이터 변경은 SQL
          입문 코스에서 배운 UPDATE로 의도를 갖고 하세요.
        </div>
      </Section>

      <Section n={6} title="SQL 편집기 — 배운 쿼리를 GUI에서" sub="Ctrl+] 로 열고 Ctrl+Enter로 실행">
        <p>
          GUI가 편해도 결국 개발자의 본 무기는 SQL이에요. DBeaver의 <strong>SQL
          편집기</strong>는 그 무기를 쓰기 제일 좋은 연습장입니다. 연결을 선택한 채{' '}
          <span className="kbd">Ctrl+]</span> (또는 상단 SQL Editor 메뉴)를 누르면
          빈 편집기가 열려요.
        </p>
        <Code>{CODE_SQL_EDITOR}</Code>
        <p>
          터미널 psql보다 좋은 점 세 가지 — ① 테이블·열 이름을 몇 글자만 치면{' '}
          <strong>자동완성</strong>이 떠요. ② 결과가 <strong>표</strong>로 나와서
          정렬·필터를 이어서 할 수 있어요. ③ 쿼리를 파일로 저장해 두고 다음에 또
          쓸 수 있어요. SQL 입문 코스의 연습 문제들을 여기서 다시 풀어 보면 속도가
          완전히 다를 거예요.
        </p>
        <div className="tip">
          <b>실행 단축키 정리</b> 커서가 있는 문장 하나 실행 ={' '}
          <span className="kbd">Ctrl+Enter</span>, 편집기 전체 실행 ={' '}
          <span className="kbd">Alt+X</span>. 여러 문장을 써 놓고 한 줄씩 실행하며
          결과를 비교하는 게 학습에는 최고예요.
        </div>
      </Section>

      <Section n={7} title="CSV 내보내기 & 마무리 실습" sub="DB 밖으로 데이터 들고 나가기 + 내 계정 찾기">
        <p>
          조회한 데이터를 멘토나 팀에 공유할 땐 <strong>CSV</strong>로 내보내는 게
          정석이에요. CSV는 쉼표로 값을 구분한 순수 텍스트 파일이라 엑셀·구글시트가
          바로 열 수 있거든요. DB라는 창고에서 물건을 꺼내 택배 상자에 담는 과정이라고
          생각하면 됩니다.
        </p>
        <Code>{CODE_EXPORT}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> SQL 편집기에서{' '}
          <span className="icode">SELECT name, track FROM users;</span>를 실행하고,
          결과 표를 우클릭 → Export data → <strong>CSV</strong>로 저장해 보세요.
          저장된 파일을 메모장으로 열어 "정말 쉼표로 구분된 텍스트"인지 눈으로
          확인하면 CSV의 정체가 완전히 이해됩니다.
        </div>
        <p>
          마지막은 제출 실습이에요. 이 코스에서 배운 걸 총동원해서{' '}
          <strong>내 계정 행</strong>을 DB에서 직접 찾아 보세요.
        </p>
        <Code>{CODE_PRACTICE_ME}</Code>
        <div className="warn">
          <b>철칙: 운영 DB에는 연결하지 않는다</b> DBeaver에 접속 정보만 넣으면
          어떤 DB든 열 수 있어요 — 그래서 위험합니다. 우리가 연결해도 되는 건{' '}
          <strong>내 PC의 로컬 개발 DB뿐</strong>이에요. 운영 서버(EC2)의 DB 접속
          정보를 개인 PC의 DBeaver에 넣는 것은 <strong>금지</strong>입니다. 실수로
          운영 데이터를 한 줄만 고쳐도 실제 사용자에게 사고가 나고, 접속 정보가 내
          PC에 저장돼 유출 통로가 되기 때문이에요. 운영 DB 확인이 필요한 일이 생기면
          반드시 멘토에게 먼저 이야기하세요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🦫 여기까지 왔다면</h3>
          <p className="muted">
            이제 DB를 <strong>글자(psql)로도, 그림(DBeaver)으로도</strong> 다룰 수
            있게 됐어요 — 연결 설정, ERD 읽기, GUI 필터, SQL 편집기, CSV 내보내기까지.
            테이블 구조가 왜 이렇게 생겼는지 궁금해졌다면{' '}
            <Link to="/learn/data-modeling"><strong>데이터 모델링 기초</strong></Link>로,
            쿼리 실력을 더 올리고 싶다면 <Link to="/learn/sql"><strong>SQL 입문</strong></Link>을
            DBeaver로 다시 풀어 보세요. 스크린샷 실습 제출은{' '}
            <Link to="/assignments"><strong>과제 게시판</strong></Link>에서!
          </p>
        </div>
      </div>
    </div>
  );
}
