// 이 파일이 하는 일: "Docker Desktop 사용법" 코스 — 설치와 첫 실행부터
// 대시보드 읽는 법, GUI로 컨테이너 다루기, CLI 명령과의 짝, 우리 개발 DB 확인 루틴,
// 용량 청소, 흔한 문제 해결까지 7개 섹션으로 안내하는 정적 학습 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_WSL2 = `Docker Desktop이 Windows에서 돌아가는 구조

[Docker Desktop 앱]  ← 우리가 보는 예쁜 화면(GUI)
        │
[WSL2 — Windows 속의 작은 리눅스]  ← 진짜 엔진이 사는 곳
        │
[컨테이너들]  postgres, spring-boot, ...

→ Docker(컨테이너 기술)는 원래 리눅스에서 태어났어요.
  그래서 Windows에서는 WSL2라는 "리눅스 방"을 하나 만들고
  그 안에서 엔진을 돌립니다. 설치할 때 WSL2를 함께 켜는 이유!`;

const CODE_DASHBOARD = `Docker Desktop 왼쪽 메뉴 — 세 개만 알면 90%는 끝

탭           비유                 여기서 하는 일
─────────────────────────────────────────────────────
Containers   지금 돌아가는 기계    시작/중지, 로그 보기, 포트 확인
Images       기계의 설계도 창고    받아 둔 이미지 목록, 용량, 삭제
Volumes      기계 밖 데이터 금고   DB 데이터처럼 "지워지면 안 되는" 것

핵심 관계: 이미지(설계도)로 컨테이너(기계)를 찍어내고,
소중한 데이터는 볼륨(금고)에 따로 보관해요.
컨테이너를 지워도 볼륨이 살아 있으면 데이터는 안전합니다.`;

const CODE_CONTAINER_ROW = `Containers 탭의 한 줄을 읽는 법

이름            이미지          상태        포트
────────────────────────────────────────────────────
mirim-db        postgres:16    Running     5432:5432
                                  │           │
                          초록 = 살아 있음   왼쪽(내 PC):오른쪽(컨테이너)
                          회색 = 멈춰 있음   "내 PC의 5432 문을 두드리면
                                            컨테이너의 5432로 연결해 줄게"

한 줄에서 쓸 수 있는 버튼: ▶ 시작 · ■ 중지 · ⟳ 재시작 · 🗑 삭제
이름을 클릭하면 → Logs(로그) / Inspect / Files 상세 화면이 열려요.`;

const CODE_GUI_CLI = `GUI 버튼과 터미널 명령은 같은 일을 하는 쌍둥이

GUI에서 하는 일                CLI 명령 (터미널에서)
──────────────────────────────────────────────────────
Containers 목록 보기           docker ps -a
▶ 시작 버튼                    docker start mirim-db
■ 중지 버튼                    docker stop mirim-db
Logs 화면 열기                 docker logs -f mirim-db
Images 목록 보기               docker images
🗑 이미지 삭제                 docker rmi <이미지이름>

→ 버튼을 누를 때마다 "이건 CLI로 뭐였지?" 한 번씩 떠올려 보세요.
  나중에 GUI가 없는 서버(우리 EC2!)에 들어가면 CLI만 남거든요.
  Desktop은 훈련장, CLI는 실전이에요.`;

const CODE_COMPOSE_ROUTINE = `아침 개발 시작 루틴 — 우리 개발 DB 살아 있나?

# 1) 프로젝트 폴더에서 개발 인프라 올리기 (이미 떠 있으면 그대로 둠)
docker compose up -d

# 2) 상태 확인
docker compose ps

NAME        IMAGE          STATUS         PORTS
mirim-db    postgres:16    Up 2 hours     0.0.0.0:5432->5432/tcp
                              │
                    "Up"이면 통과! "Exited"면 로그를 볼 차례:

# 3) 뭔가 이상할 때 — 로그 확인
docker compose logs -f
# (Docker Desktop에서는 Containers 탭 → 이름 클릭 → Logs 와 같아요)`;

const CODE_CLEANUP = `Docker 용량 청소 — 방 청소와 똑같아요

# 지금 Docker가 먹고 있는 용량 확인
docker system df

TYPE          TOTAL   ACTIVE   SIZE      RECLAIMABLE
Images        12      3        8.4GB     5.1GB (60%)   ← 회수 가능!
Containers    5       2        120MB     ...
Volumes       4       2        1.2GB     ...

# 안 쓰는 것들 한 번에 정리 (멈춘 컨테이너·안 쓰는 이미지 등)
docker system prune

# 볼륨까지 지우는 -a·--volumes 옵션은 조심!
# DB 데이터가 볼륨에 있다는 것, 기억하죠? (섹션 2)`;

const CODE_TROUBLE = `Docker Desktop 단골 고장 2가지 — 증상과 처방

증상 1) "Virtualization support not detected" / WSL 오류로 시작 실패
원인   PC의 가상화(VT-x/SVM) 기능이 꺼져 있음
처방   ① 작업 관리자(Ctrl+Shift+Esc) → 성능 → CPU → "가상화: 사용"인지 확인
      ② "사용 안 함"이면 BIOS에서 켜야 함 (부팅 시 F2/Del → VT-x 또는 SVM 켜기)
      ③ PowerShell(관리자)에서 wsl --update 후 재부팅

증상 2) PC가 갑자기 느려짐 / 팬이 비행기 이륙
원인   WSL2(Vmmem 프로세스)가 메모리를 너무 많이 차지
처방   내 폴더의 .wslconfig 파일로 상한선 정하기:

# C:\\Users\\<내이름>\\.wslconfig
[wsl2]
memory=4GB      # WSL2가 쓸 수 있는 최대 메모리
processors=2    # 사용할 CPU 코어 수

# 저장 후 PowerShell에서 wsl --shutdown → Docker Desktop 재시작`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '설치와 첫 실행' },
  { n: 2, label: '대시보드 읽기' },
  { n: 3, label: 'GUI로 컨테이너 다루기' },
  { n: 4, label: 'GUI ↔ CLI 짝짓기' },
  { n: 5, label: '개발 DB 확인 루틴' },
  { n: 6, label: '용량 청소' },
  { n: 7, label: '흔한 문제 해결' },
];

export default function ToolDockerPage() {
  return (
    <div>
      {/* 히어로: 이 도구를 왜 배우고, 어디까지 다루는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>Docker Desktop 사용법</h1>
        <p>
          Docker Desktop은 내 PC에서 돌아가는 컨테이너들을 <strong>눈으로 보고 버튼으로
          다루는</strong> 관제실이에요. 어썸데브에서 매일 쓰는 개발용 PostgreSQL이
          잘 살아 있는지 확인하고, 멈추고, 로그를 읽고, 용량을 청소하는 법까지 배웁니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</span>
          <span className="chip">실습 2개 이상</span>
          <span className="chip">준비물: Docker Desktop 설치된 내 PC</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="설치와 첫 실행" sub="WSL2라는 '리눅스 방'부터 이해하기">
        <p>
          Docker Desktop 설치 자체는 설치 파일을 받아 <strong>다음 → 다음</strong>만 누르면
          끝나요. 그런데 설치 중에 <strong>"Use WSL 2 instead of Hyper-V"</strong> 같은
          체크박스가 나와서 처음엔 당황합니다. 이게 뭔지부터 짚고 갈게요.
        </p>
        <Code>{CODE_WSL2}</Code>
        <p>
          컨테이너 기술은 리눅스의 기능을 쓰기 때문에, Windows에서는{' '}
          <strong>WSL2</strong>(Windows Subsystem for Linux)라는 작은 리눅스를 먼저 깔고
          그 안에서 Docker 엔진을 돌려요. 우리 학교 건물(Windows) 안에 실습실(리눅스 방)을
          하나 만들고, 기계는 전부 그 실습실 안에서 돌리는 셈이죠. 설치 순서는 이래요.
        </p>
        <ol className="olist">
          <li>PowerShell(관리자)에서 <span className="icode">wsl --install</span> 실행 후 재부팅 — WSL2 준비 끝.</li>
          <li>Docker Desktop 설치 파일 실행 — WSL2 옵션은 체크된 그대로 두기.</li>
          <li>설치 후 첫 실행 — 고래 아이콘이 작업 표시줄에 뜨고, 고래가 <strong>멈춰 있으면 준비 완료</strong>(움직이는 동안은 시동 중).</li>
          <li>회원가입/로그인 화면은 <strong>건너뛰어도(Skip)</strong> 모든 기능을 쓸 수 있어요.</li>
        </ol>
        <div className="tip">
          <b>직접 확인해 보기</b> 터미널을 열고 <span className="icode">docker --version</span>을
          쳐 보세요. 버전이 찍히면 설치 성공! 이어서{' '}
          <span className="icode">docker run hello-world</span>를 실행하면 도커가
          이미지를 내려받아 첫 컨테이너를 돌리고 인사말을 출력해요 — 이 한 줄이
          "설계도 다운로드 → 기계 조립 → 가동"의 전 과정입니다.
        </div>
      </Section>

      <Section n={2} title="대시보드 화면 읽기" sub="Containers · Images · Volumes — 기계, 설계도, 금고">
        <p>
          Docker Desktop을 열면 왼쪽에 메뉴가 주르륵 있는데, 수습 기간에 실제로 쓰는 건
          딱 세 개예요. 이 셋의 관계만 잡으면 나머지는 자연스럽게 따라옵니다.
        </p>
        <Code>{CODE_DASHBOARD}</Code>
        <p>
          비유하자면 <strong>이미지는 붕어빵 틀, 컨테이너는 붕어빵</strong>이에요. 틀 하나로
          붕어빵을 몇 개든 찍을 수 있듯, <span className="icode">postgres:16</span> 이미지
          하나로 DB 컨테이너를 여러 개 만들 수 있죠. 그리고 <strong>볼륨</strong>은 붕어빵
          안의 팥... 이 아니라(!) 붕어빵 기계 옆의 <strong>금고</strong>예요. 컨테이너는
          지웠다 다시 만드는 게 일상이라, DB 데이터처럼 잃으면 안 되는 것은 컨테이너
          바깥의 볼륨에 보관합니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Docker Desktop 대시보드의 Containers, Images, Volumes 세 탭과 각 탭에서 하는 일, 그리고 이미지에서 컨테이너를 만들고 볼륨에 데이터를 보관하는 관계">
          <text x="20" y="24" fontSize="14" fontWeight="600" fill="var(--ink)">Docker Desktop 왼쪽 메뉴 — 세 개만 알면 90%</text>

          <rect x="20" y="44" width="140" height="286" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="36" y="68" fontSize="12" fill="var(--muted)">왼쪽 메뉴</text>

          <rect x="32" y="82" width="116" height="34" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="46" y="104" fontSize="13" fill="var(--ink)">Containers</text>

          <rect x="32" y="128" width="116" height="34" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="46" y="150" fontSize="13" fill="var(--ink)">Images</text>

          <rect x="32" y="174" width="116" height="34" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="46" y="196" fontSize="13" fill="var(--ink)">Volumes</text>

          <text x="36" y="234" fontSize="12" fill="var(--muted)">그 밖의 메뉴는</text>
          <text x="36" y="252" fontSize="12" fill="var(--muted)">수습 기간엔</text>
          <text x="36" y="270" fontSize="12" fill="var(--muted)">거의 안 써요</text>

          <line x1="148" y1="99" x2="196" y2="99" stroke="var(--primary)" strokeWidth="1.5" />
          <line x1="148" y1="145" x2="196" y2="177" stroke="var(--teal)" strokeWidth="1.5" />
          <line x1="148" y1="191" x2="196" y2="255" stroke="var(--amber)" strokeWidth="1.5" />

          <rect x="196" y="66" width="424" height="66" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="212" y="88" fontSize="13" fontWeight="600" fill="var(--ink)">Containers · 지금 돌아가는 기계</text>
          <text x="212" y="108" fontSize="12" fill="var(--muted)">시작 / 중지 / 재시작, 로그 보기, 포트 확인</text>
          <text x="212" y="124" fontSize="12" fill="var(--muted)">초록 = 살아 있음, 회색 = 멈춰 있음</text>

          <rect x="196" y="144" width="424" height="66" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="212" y="166" fontSize="13" fontWeight="600" fill="var(--ink)">Images · 기계의 설계도 창고</text>
          <text x="212" y="186" fontSize="12" fill="var(--muted)">받아 둔 이미지 목록, 용량 확인, 삭제</text>
          <text x="212" y="202" fontSize="12" fill="var(--muted)">예: postgres:16 (붕어빵 틀)</text>

          <rect x="196" y="222" width="424" height="66" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="212" y="244" fontSize="13" fontWeight="600" fill="var(--ink)">Volumes · 기계 밖 데이터 금고</text>
          <text x="212" y="264" fontSize="12" fill="var(--muted)">DB 데이터처럼 지워지면 안 되는 것</text>
          <text x="212" y="280" fontSize="12" fill="var(--muted)">컨테이너를 지워도 볼륨은 남아요</text>

          <path d="M 604 144 L 604 132" stroke="var(--teal)" strokeWidth="1.5" fill="none" />
          <text x="384" y="308" fontSize="12.5" fill="var(--ink)">이미지(설계도)로 컨테이너(기계)를 찍어내고,</text>
          <text x="384" y="326" fontSize="12.5" fill="var(--ink)">소중한 데이터는 볼륨(금고)에 따로 보관</text>
          <line x1="212" y1="300" x2="212" y2="330" stroke="var(--rose)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="228" y="308" fontSize="12.5" fill="var(--rose)">볼륨을 지우면</text>
          <text x="228" y="326" fontSize="12.5" fill="var(--rose)">DB 데이터도 사라짐</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 대시보드 세 탭 — 컨테이너(기계) · 이미지(설계도) · 볼륨(금고)</p>
        <div className="warn">
          <b>여기서 사고가 납니다</b> "컨테이너 지워도 다시 만들면 되지"는 맞는 말이지만,
          <strong> 볼륨까지 지우면 DB 데이터가 통째로 사라져요.</strong> Volumes 탭에서
          뭔가를 삭제하기 전엔 반드시 그 볼륨을 어떤 컨테이너가 쓰는지 확인하는 습관을!
        </div>
      </Section>

      <Section n={3} title="컨테이너 시작·중지·로그 보기" sub="GUI 버튼으로 기계 다루기">
        <p>
          Containers 탭의 한 줄 한 줄이 컨테이너 하나예요. 이 줄을 읽을 줄 알면
          "지금 뭐가 살아 있고, 어느 문(포트)으로 연결되는지"가 한눈에 보입니다.
        </p>
        <Code>{CODE_CONTAINER_ROW}</Code>
        <p>
          이 중 제일 자주 열게 될 화면은 <strong>Logs</strong>예요. 컨테이너의 일기장이라,
          "DB가 왜 안 뜨지?" 싶을 때 답의 90%가 여기 적혀 있어요. 에러가 나면 로그
          마지막 몇 줄부터 읽으세요 — 보통 제일 아래에 결정적 단서(예:{' '}
          <span className="icode">password authentication failed</span>)가 있습니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> Containers 탭에서 개발 DB 컨테이너를 찾아{' '}
          <strong>■ 중지</strong>를 눌러 보세요. 상태가 회색(Exited)으로 바뀌죠?
          그 상태에서 백엔드(Spring Boot)를 실행하면 DB 연결 에러가 나는 것까지 확인한 뒤,
          <strong> ▶ 시작</strong>으로 되살리고 Logs에서{' '}
          <span className="icode">database system is ready to accept connections</span>{' '}
          문장을 찾아보세요. "DB가 죽으면 무슨 일이 나는지"를 안전하게 체험하는 실습입니다.
        </div>
      </Section>

      <Section n={4} title="GUI 버튼 = CLI 명령" sub="버튼 하나마다 짝이 되는 명령이 있어요">
        <p>
          Docker Desktop의 모든 버튼은 사실 터미널 명령을 대신 눌러 주는 것뿐이에요.
          자동변속기(GUI)로 운전을 배우더라도 수동변속기(CLI)의 원리를 알아야
          어떤 차든 몰 수 있는 것처럼, 버튼과 명령을 <strong>쌍으로</strong> 외워 두면
          나중에 서버에서도 당황하지 않습니다.
        </p>
        <Code>{CODE_GUI_CLI}</Code>
        <p>
          특히 <span className="icode">docker ps</span>(지금 도는 것만)와{' '}
          <span className="icode">docker ps -a</span>(멈춘 것까지 전부)의 차이는 면접에서도
          나올 만큼 기본이에요. Desktop의 Containers 탭은 기본이{' '}
          <span className="icode">-a</span> 쪽 — 멈춘 컨테이너도 회색으로 보여 줍니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 터미널에서 <span className="icode">docker ps</span>를 실행해
          나온 목록과 Docker Desktop의 Containers 탭을 <strong>나란히 놓고</strong> 비교해
          보세요. 이름·이미지·포트가 똑같이 보이나요? 이제 GUI에서 컨테이너 하나를 중지한 뒤
          다시 <span className="icode">docker ps</span> — 목록에서 사라지고,{' '}
          <span className="icode">docker ps -a</span>에는 남아 있는 걸 확인하면 완벽!
        </div>
      </Section>

      <Section n={5} title="우리 개발 DB 상태 확인 루틴" sub="출근(등교?)하면 제일 먼저 하는 일">
        <p>
          어썸데브의 로컬 개발 환경은 PostgreSQL 같은 인프라를{' '}
          <span className="icode">docker compose</span>로 띄워요. compose는 "컨테이너
          여러 대의 출석부" — <span className="icode">docker-compose.yml</span> 파일에
          적힌 명단대로 컨테이너들을 한 번에 올리고 내립니다. 그래서 개발을 시작하는
          아침 루틴이 이렇게 됩니다.
        </p>
        <Code>{CODE_COMPOSE_ROUTINE}</Code>
        <ol className="olist">
          <li><span className="icode">docker compose up -d</span> — 출석부대로 전원 기상. <span className="icode">-d</span>는 "백그라운드에서"라는 뜻이라 터미널을 계속 안 잡아먹어요.</li>
          <li><span className="icode">docker compose ps</span> — 상태가 <strong>Up</strong>인지 눈으로 확인. Docker Desktop을 열어 초록 불을 확인해도 같아요.</li>
          <li>백엔드가 DB 연결 에러를 뱉으면? 십중팔구 이 루틴을 건너뛴 거예요. "코드 문제인가?" 고민하기 전에 <strong>DB부터 확인</strong>이 순서!</li>
        </ol>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 프로젝트 폴더에서 위 루틴 1→2번을 그대로 실행해 보고,
          Docker Desktop의 Containers 탭에서 같은 컨테이너가 초록 불로 떠 있는지
          교차 확인해 보세요. 포트 열의 <span className="icode">5432</span>가 PostgreSQL의
          방 번호라는 것, 네트워크 코스에서 배운 그 포트 맞아요.
        </div>
      </Section>

      <Section n={6} title="용량 정리 — 이미지 청소" sub="Docker는 조용히 디스크를 먹어요">
        <p>
          Docker를 몇 달 쓰다 보면 C 드라이브가 슬금슬금 차오릅니다. 범인은 대부분{' '}
          <strong>안 쓰는 이미지</strong> — 한 번 받아 본 이미지, 버전 올리고 남은 옛날
          이미지가 창고에 계속 쌓이거든요. 옷장 정리처럼 주기적으로 비워 줘야 해요.
        </p>
        <Code>{CODE_CLEANUP}</Code>
        <p>
          GUI로 하려면 <strong>Images 탭</strong>에서 <span className="icode">Unused</span>{' '}
          필터를 걸고 안 쓰는 이미지를 골라 🗑 삭제하면 됩니다. Docker Desktop 설정의{' '}
          <strong>Resources → Disk usage</strong>에서 전체 사용량을 그래프로 볼 수도 있어요.
        </p>
        <div className="warn">
          <b>prune 옵션은 읽고 누르세요</b> <span className="icode">docker system prune</span>은
          안전한 편이지만, <span className="icode">--volumes</span>를 붙이면{' '}
          <strong>안 쓰는 볼륨(=DB 데이터가 들어 있을 수 있는 금고)까지</strong> 지웁니다.
          지우기 전에 뜨는 확인 문구를 꼭 읽는 습관 — 실무에서도 그대로 통하는 습관이에요.
        </div>
      </Section>

      <Section n={7} title="흔한 문제 해결" sub="가상화 꺼짐 · 메모리 폭식 — 단골 두 녀석">
        <p>
          Docker Desktop이 말썽일 때, 원인은 놀랄 만큼 자주 이 둘 중 하나예요.
          증상 → 원인 → 처방 순서로 정리해 둘 테니, 막히면 이 섹션으로 돌아오세요.
        </p>
        <Code>{CODE_TROUBLE}</Code>
        <p>
          가상화는 "PC 안에 또 다른 컴퓨터(리눅스 방)를 돌려도 된다"는 CPU의 허가예요.
          공장에서 이 스위치를 꺼서 출고하는 PC가 많아, 처음 설치하는 날 한 번은
          꼭 만나는 문제입니다. 메모리 폭식은 WSL2가 "남는 메모리는 내가 다 써도
          되지?" 하는 성격이라 생기는 일 — <span className="icode">.wslconfig</span>로
          용돈(상한선)을 정해 주면 얌전해져요.
        </p>
        <div className="tip">
          <b>막혔을 때의 만능 3단 콤보</b> ① Docker Desktop 재시작 →
          ② PowerShell에서 <span className="icode">wsl --shutdown</span> 후 다시 시작 →
          ③ PC 재부팅. 이 셋으로 대부분 살아나요. 그래도 안 되면 에러 메시지를
          <strong> 그대로 복사해서</strong> 멘토에게 공유 — "안 돼요"보다 백 배 빠릅니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🐳 여기까지 왔다면</h3>
          <p className="muted">
            이제 Docker Desktop이라는 관제실에서 컨테이너(기계)·이미지(설계도)·볼륨(금고)을
            구분해 읽고, 개발 DB를 <strong>올리고·확인하고·로그 보고·청소하는</strong> 하루
            루틴이 손에 익었어요. GUI 버튼마다 짝이 되는 CLI 명령까지 챙겼으니, 다음은
            이 컨테이너들이 실제 서버에서 어떻게 돌아가는지 —{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서 포트와
            서버의 큰 그림을 복습하고, 백엔드 과제에서 오늘 배운 DB 확인 루틴을
            매일 아침 직접 써먹어 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
