// 이 파일이 하는 일: "리눅스 / 터미널 기초" 코스 — 세상 서버 대부분이 왜 리눅스인지에서 출발해
// 터미널 명령어(길 찾기·파일 다루기·읽기), 권한, 프로세스, 그리고 SSH 원격 접속까지
// 8개 섹션으로 안내하는 정적 학습 페이지.
// (왜 리눅스 → 터미널 첫걸음 → 길 찾기 → 파일 다루기 → 파일 읽기 → 권한/sudo → 프로세스 → SSH)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 명령어 예시·출력·표는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 명령어 예시 · 출력 · 표 상수들 ──

const CODE_GUI_CLI = `윈도우 데스크톱 (GUI)          리눅스 서버 (CLI)
──────────────────────       ──────────────────────
마우스로 아이콘 더블클릭          키보드로 명령어 입력
화면·그래픽카드 필요              화면이 아예 없어도 됨
사람 한 명이 한 대씩 조작         명령을 파일(스크립트)로 저장해
                              서버 100대에 똑같이 자동 실행
켜 두면 무거움                  24시간 365일 가볍게 동작

→ 서버실의 서버에는 모니터가 안 붙어 있어요.
  "화면 없는 컴퓨터와 대화하는 법" = 오늘 배우는 터미널입니다.`;

const CODE_PROMPT = `Git Bash를 열면 이런 한 줄이 기다리고 있어요 — 프롬프트(prompt)라고 합니다.

user@DESKTOP-A1B2C3 MINGW64 ~
$
│         │            │    │
│         │            │    └ $ = "명령을 입력하세요" 신호 (관리자면 #)
│         │            └ ~ = 지금 내가 있는 위치 (~는 내 홈 폴더)
│         └ 컴퓨터 이름 (host)
└ 사용자 이름 (user)

리눅스 서버라면:  ubuntu@ip-172-31-5-10:~$
읽는 법은 똑같아요 — "누가 @ 어느 컴퓨터에서 : 어디에 있다 $"`;

const CODE_NAVIGATE = `$ pwd                      # Print Working Directory — "나 지금 어디지?"
/c/Users/mirim             # ← Windows의 C:\\Users\\mirim 을 이렇게 표기해요

$ ls                       # List — "여기 뭐가 있지?"
Desktop  Documents  Downloads  ...

$ ls -l                    # 자세히 (권한·크기·날짜까지)
$ ls -a                    # 숨김 파일(.으로 시작)까지 전부

$ cd Documents             # Change Directory — 이동!
$ cd ..                    # 한 칸 위(부모 폴더)로
$ cd ~                     # 어디에 있든 홈으로 순간이동
$ cd /c/awesomedev         # 절대 경로로 바로 이동`;

const CODE_PATH = `절대 경로 vs 상대 경로 — 주소를 말하는 두 가지 방법

절대 경로: 루트(/)부터 전부 다 말하기
  /c/awesomedev/mirim-app/frontend
  → "서울시 ○○구 ○○로 12, 3층" — 어디서 말해도 같은 곳

상대 경로: 지금 위치 기준으로 말하기
  ./frontend      → "여기서 frontend 폴더로" (.은 현재 위치)
  ../             → "한 칸 위로"
  ../../platform  → "두 칸 위로 갔다가 platform으로"
  → "여기서 두 블록 직진 후 우회전" — 내 위치에 따라 달라짐

특별 기호 정리:
  ~   내 홈 폴더        .   현재 폴더
  /   루트(최상위)       ..  부모 폴더(한 칸 위)`;

const CODE_FILES = `$ mkdir practice           # Make Directory — 폴더 만들기
$ cd practice
$ touch memo.txt           # 빈 파일 만들기
$ cp memo.txt memo2.txt    # Copy — 복사 (원본 → 사본)
$ mv memo2.txt note.txt    # Move — 이동인데, 같은 폴더 안에서 쓰면 '이름 바꾸기'
$ mv note.txt ../          # 진짜 이동 — 한 칸 위 폴더로 보내기
$ rm memo.txt              # Remove — 삭제 (⚠ 휴지통 없음!)
$ cd ..
$ rm -r practice           # 폴더는 -r(recursive, 안의 것까지 재귀적으로)을 붙여야 지워져요`;

const CODE_READ = `$ cat app.log              # 파일 내용을 한 번에 좌르륵 출력 (짧은 파일용)
$ less app.log             # 긴 파일을 한 페이지씩 (↑↓ 스크롤, q로 나가기)
$ head -n 20 app.log       # 앞에서 20줄만
$ tail -n 20 app.log       # 뒤에서 20줄만 — 로그는 최신이 아래에 쌓이니까!

$ tail -f app.log          # ★ Follow — 파일에 새 줄이 쌓이는 걸 실시간 중계
                           #   (서버 개발자가 하루 종일 켜 두는 화면. Ctrl+C로 종료)

$ grep "ERROR" app.log     # 파일에서 "ERROR"가 들어간 줄만 골라내기
$ grep -i "error" app.log  # -i: 대소문자 무시
$ grep -n "ERROR" app.log  # -n: 몇 번째 줄인지 번호도 같이

# ★★ 실무에서 제일 많이 치는 조합 — 파이프(|)로 두 명령을 연결:
$ tail -f app.log | grep ERROR
# "실시간으로 흘러오는 로그 중에서, ERROR 줄만 보여줘"
# 장애가 났을 때 서버 개발자가 제일 먼저 치는 한 줄입니다.`;

const CODE_PERMISSION = `$ ls -l
-rwxr-xr--  1 ubuntu dev  1024 Jul 16 10:00 deploy.sh
│└┬┘└┬┘└┬┘    └──┬─┘ └┬┘
│ │  │  │        │    └ 그룹 이름
│ │  │  │        └ 주인(owner) 이름
│ │  │  └ 그 외 모두(others)의 권한: r--  (읽기만)
│ │  └ 그룹(group)의 권한:          r-x  (읽기·실행)
│ └ 주인(owner)의 권한:             rwx  (읽기·쓰기·실행)
└ 첫 글자: - 파일 / d 폴더

r = read(읽기)  w = write(쓰기)  x = execute(실행)
→ 세 글자씩 세 묶음: [주인][그룹][모두] — 집 열쇠를
  "우리 가족 / 친척 / 지나가는 사람"에게 각각 다르게 주는 것과 같아요.

$ chmod +x deploy.sh       # 이 파일에 실행(x) 권한 부여
                           # "다운받은 스크립트가 실행이 안 돼요"의 단골 해결책

$ sudo apt update          # sudo = SuperUser DO, 이 명령 한 번만 관리자로 실행`;

const CODE_PROCESS = `$ ps                        # 지금 내 터미널에서 돌고 있는 프로세스 목록
$ ps aux                    # 시스템 전체 프로세스 (서버에서 자주 씀)
$ top                       # 실시간 모니터링 — 작업관리자의 터미널판! (q로 나가기)

  PID  USER   %CPU  %MEM  COMMAND
 1234  ubuntu  2.1   5.3  java -jar app.jar   ← 우리 백엔드!
 1301  ubuntu  0.5   1.2  node server.js
      └ PID = 프로세스마다 붙는 고유 번호(주민번호 같은 것)

$ kill 1234                 # PID 1234에게 "정리하고 종료해 줘" 정중히 요청
$ kill -9 1234              # 강제 종료 — 말 안 들을 때 최후의 수단 (저장 못 하고 죽음)

$ ./run.sh &                # 맨 뒤 & = 백그라운드 실행
                            # 터미널을 붙잡지 않고 뒤에서 돌게 하기 —
                            # 서버 프로그램이 24시간 도는 원리의 출발점이에요.`;

const CODE_SSH = `$ ssh ubuntu@13.125.x.x         # "13.125.x.x 서버에 ubuntu 사용자로 들어갈게"
ubuntu@ip-172-31-5-10:~$         # ← 프롬프트가 바뀌었다 = 이제 내가 치는 명령은
                                 #    전부 그 서버에서 실행된다!

# 비밀번호 대신 열쇠 파일(키)을 쓰는 게 표준이에요:
$ ssh -i mykey.pem ubuntu@13.125.x.x
#      └ .pem = 나만 가진 열쇠 파일. 이게 곧 서버 출입증이라
#        절대 카톡·깃허브·공유폴더에 올리면 안 됩니다!

$ exit                           # 서버에서 나와 내 PC로 복귀`;

const CODE_CHEATSHEET = `━━━ 오늘 배운 명령어 치트시트 (한 장 요약) ━━━

[길 찾기]           [파일 다루기]        [파일 읽기]
pwd   나 어디?       mkdir  폴더 생성      cat    전체 출력
ls    뭐 있지?       touch  빈 파일        less   페이지 넘기며
ls -l 자세히         cp     복사           head   앞부분만
cd    이동          mv     이동/이름변경    tail   뒷부분만
cd ~  홈으로         rm     삭제(휴지통X!)  tail -f 실시간 중계
cd .. 위로          rm -r  폴더 삭제       grep   골라내기

[권한]                        [프로세스]
ls -l     rwx 확인            ps / top   목록 / 실시간
chmod +x  실행권한 부여         kill PID   종료 요청
sudo      관리자로 한 번 실행    명령 뒤 &   백그라운드 실행

[원격 접속]
ssh -i 키.pem user@서버주소    서버 접속
exit                          접속 종료

[조합의 마법]
tail -f app.log | grep ERROR   실시간 로그에서 에러만!`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '길 찾기 명령' },
  { n: 4, label: '파일 다루기' },
  { n: 5, label: '파일 읽기' },
  { n: 6, label: '권한과 sudo' },
  { n: 7, label: '프로세스와 서비스' },
  { n: 8, label: 'SSH — 원격 접속' },
];

export default function LinuxPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 서버와 데이터</div>
        <h1>리눅스 / 터미널 기초<br />— 서버의 세계로</h1>
        <p>
          여러분이 매일 쓰는 우리 서비스도, 유튜브도, 게임 서버도 — 전부{' '}
          <strong>리눅스 서버</strong> 위에서 돌아가요. 그런데 서버에는 마우스도 화면도 없습니다.
          키보드로 컴퓨터와 대화하는 법, <strong>터미널</strong>을 오늘 배워요.
          각 섹션의 <strong>"직접 확인해 보기"</strong>는 꼭 손으로 쳐 보세요 —
          명령어는 눈이 아니라 손가락이 외웁니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">준비물: Git Bash</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="세상 서버의 대부분이 리눅스인 이유">
        <p>
          전 세계 서버의 대부분은 <strong>리눅스</strong>로 돌아가요. 이유는 세 가지입니다.
        </p>
        <ol className="olist">
          <li><strong>무료</strong> — 서버 1,000대를 운영해도 운영체제 값이 0원이에요. 윈도우 서버는 대수만큼 돈을 냅니다.</li>
          <li><strong>안정</strong> — 한 번 켜면 몇 년씩 재부팅 없이 도는 게 목표인 운영체제예요. 24시간 장사하는 편의점 같은 서버에 딱 맞죠.</li>
          <li><strong>자동화</strong> — 모든 작업을 명령어로 하니까, 명령어를 파일로 저장하면 <strong>사람 없이 반복 실행</strong>이 됩니다. 서버 100대에 같은 설정을 1분 만에 뿌릴 수 있어요.</li>
        </ol>
        <p>
          우리 학습 플랫폼도 <strong>AWS의 리눅스 서버</strong> 위에서 돌아갑니다.
          여러분이 지금 보는 이 페이지도 리눅스 서버가 보내 준 거예요.
        </p>
        <p>
          그런데 결정적 차이가 하나 있어요 — <strong>서버엔 화면이 없습니다!</strong>
        </p>
        <Code>{CODE_GUI_CLI}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 쓰는 웹 서비스 아무거나 하나 떠올려 보세요
          (유튜브, 카톡, 게임...). "이것도 어딘가의 화면 없는 리눅스 서버에서 돌고 있겠구나"
          하고 생각해 보면, 오늘 배우는 내용이 왜 필요한지 감이 옵니다.
        </div>
      </Section>

      <Section n={2} title="터미널 첫걸음" sub="키보드로 컴퓨터와 대화하기">
        <p>
          <strong>터미널</strong>은 키보드로 컴퓨터와 대화하는 창구예요. 내가 한 줄 말하면(명령),
          컴퓨터가 한 줄 답하는(출력) <strong>채팅창</strong>이라고 생각하면 됩니다.
          단, 상대가 사람이 아니라서 <strong>정확한 문법</strong>으로만 알아들어요 —
          오타 하나에 "그런 명령 몰라요(command not found)"라고 답하죠.
        </p>
        <p>
          좋은 소식: 여러분 PC에는 이미 연습장이 깔려 있어요. Git을 설치할 때 같이 들어온{' '}
          <strong>Git Bash</strong>가 윈도우 위에서 리눅스 명령어를 흉내내 줍니다.
          <span className="kbd">시작 메뉴</span>에서 <span className="kbd">Git Bash</span>를
          검색해 열어 보세요.
        </p>
        <p>열자마자 보이는 한 줄, <strong>프롬프트</strong> 읽는 법부터 배웁니다.</p>
        <Code>{CODE_PROMPT}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> Git Bash를 열고 프롬프트에서 내 사용자 이름과 컴퓨터 이름을
          찾아 읽어 보세요. 그리고 <span className="icode">echo 안녕</span>을 쳐 보세요 —
          컴퓨터가 그대로 따라 말하면, 첫 대화 성공입니다!
        </div>
      </Section>

      <Section n={3} title="길 찾기 명령 — pwd · ls · cd" sub="내가 어딨지? 뭐가 있지? 저기로 가자!">
        <p>
          터미널에는 폴더 창이 없으니, 항상 세 가지 질문으로 움직여요.{' '}
          <strong>내가 어디에 있지?</strong>(<span className="icode">pwd</span>)
          — <strong>여긴 뭐가 있지?</strong>(<span className="icode">ls</span>)
          — <strong>저기로 가자!</strong>(<span className="icode">cd</span>).
          낯선 건물에서 "현 위치" 지도를 보고, 층별 안내를 읽고, 계단으로 이동하는 것과 똑같습니다.
        </p>
        <Code>{CODE_NAVIGATE}</Code>
        <p>이동하려면 <strong>주소(경로)</strong>를 말하는 법을 알아야 해요.</p>
        <Code>{CODE_PATH}</Code>
        <p>
          말로만 들으면 헷갈리니, 리눅스 서버의 폴더 구조를 그림으로 볼게요.
          모든 폴더는 <strong>루트(/)</strong>에서 시작하는 하나의 나무입니다 —
          루트부터 가지를 따라 차례로 다 말한 것이 곧 절대 경로예요.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="리눅스 디렉터리 트리: 루트에서 var, log를 거쳐 app.log까지 내려가는 절대 경로">
          <rect x="292" y="18" width="56" height="32" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="39" textAnchor="middle" fill="var(--ink)" fontSize="15" fontWeight="700">/</text>
          <text x="358" y="38" fill="var(--muted)" fontSize="12">루트 — 모든 경로의 시작</text>
          <line x1="320" y1="50" x2="320" y2="72" stroke="var(--primary)" strokeWidth="2" />
          <line x1="125" y1="72" x2="515" y2="72" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="125" y1="72" x2="125" y2="96" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="320" y1="72" x2="320" y2="96" stroke="var(--primary)" strokeWidth="2" />
          <line x1="515" y1="72" x2="515" y2="96" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="62" y="96" width="126" height="34" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="125" y="118" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">home</text>
          <rect x="264" y="96" width="112" height="34" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="118" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">var</text>
          <rect x="459" y="96" width="112" height="34" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="515" y="118" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">etc</text>
          <text x="515" y="152" textAnchor="middle" fill="var(--muted)" fontSize="12">서버 설정 파일 모음</text>
          <line x1="125" y1="130" x2="125" y2="166" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="320" y1="130" x2="320" y2="166" stroke="var(--primary)" strokeWidth="2" />
          <rect x="62" y="166" width="126" height="34" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="125" y="188" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">ubuntu</text>
          <text x="125" y="222" textAnchor="middle" fill="var(--muted)" fontSize="12">사용자의 홈 폴더 = ~</text>
          <rect x="264" y="166" width="112" height="34" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="188" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">log</text>
          <text x="388" y="188" fill="var(--muted)" fontSize="12">서버의 일기장(로그) 폴더</text>
          <line x1="320" y1="200" x2="320" y2="236" stroke="var(--primary)" strokeWidth="2" />
          <rect x="266" y="236" width="108" height="32" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="257" textAnchor="middle" fill="var(--primary)" fontSize="13" fontWeight="600">app.log</text>
          <text x="320" y="300" textAnchor="middle" fill="var(--primary)" fontSize="13" fontWeight="700">/ → var → log → app.log</text>
          <text x="320" y="322" textAnchor="middle" fill="var(--muted)" fontSize="12">루트부터 차례로 전부 말하면 절대 경로: /var/log/app.log</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 리눅스 디렉터리 트리 — 루트(/)부터 가지를 따라 내려가면 절대 경로</p>
        <div className="tip">
          <b>직접 확인해 보기</b> Git Bash에서 <span className="icode">cd /c/awesomedev/mirim-app</span>으로
          우리 프로젝트 폴더까지 이동한 뒤, <span className="icode">pwd</span>로 위치를 확인하고{' '}
          <span className="icode">ls</span>로 안에 뭐가 있는지 구경해 보세요.
          <span className="icode">cd fro</span>까지 치고 <span className="kbd">Tab</span> 키를 누르면
          자동완성이 됩니다 — 터미널 고수의 필수 습관!
        </div>
      </Section>

      <Section n={4} title="파일 다루기 — mkdir · touch · cp · mv · rm" sub="만들고, 복사하고, 옮기고, 지우고">
        <p>
          마우스 우클릭으로 하던 일을 전부 명령어로 할 수 있어요. 다섯 개면 충분합니다.
        </p>
        <Code>{CODE_FILES}</Code>
        <div className="warn">
          <b>rm에는 휴지통이 없다!</b> 윈도우에서 지운 파일은 휴지통에서 되살릴 수 있지만,{' '}
          <span className="icode">rm</span>은 <strong>즉시, 영구히</strong> 삭제합니다.
          특히 <span className="icode">rm -rf</span>(강제로+폴더째)는 서버 전체를 한 줄에 날릴 수
          있는 명령이에요. 실제로 회사들이 이 명령 실수로 서비스 전체를 잃은 사고가 여럿 있습니다.
          지우기 전에 <span className="icode">pwd</span>로 위치 확인, <span className="icode">ls</span>로
          대상 확인 — 두 번 보는 습관을 들이세요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 홈 폴더(<span className="icode">cd ~</span>)에서{' '}
          <span className="icode">mkdir practice</span>로 연습 폴더를 만들고, 위 예시를 한 줄씩
          그대로 따라 쳐 보세요. 한 줄 칠 때마다 <span className="icode">ls</span>로 결과를 확인하고,
          마지막에 <span className="icode">rm -r practice</span>로 깨끗이 정리하면 실습 끝!
        </div>
      </Section>

      <Section n={5} title="파일 읽기 — cat · less · tail · grep" sub="서버 개발자의 일상: 로그 읽기">
        <p>
          서버엔 메모장이 없으니 파일도 명령어로 읽어요. 특히 서버가 남기는 일기장인{' '}
          <strong>로그(log) 파일</strong>을 읽는 건 서버 개발자의 매일 하는 일과입니다.
          "서비스가 이상해요!" 신고가 오면 제일 먼저 하는 일이 로그 열어 보기거든요.
        </p>
        <Code>{CODE_READ}</Code>
        <p>
          <span className="icode">tail -f</span>는 로그 파일에 새 줄이 쌓이는 걸{' '}
          <strong>실시간으로 중계</strong>해 줘요. CCTV 생중계 화면처럼요. 그리고{' '}
          <span className="icode">grep</span>은 수만 줄에서 원하는 단어가 든 줄만 골라내는{' '}
          <strong>형광펜</strong>입니다. 이 둘을 파이프(<span className="icode">|</span>)로 이으면 —
          "실시간 CCTV에 형광펜 필터 달기"가 되죠. 실무에서 제일 많이 쓰는 조합이에요.
        </p>
        <svg className="diagram" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="파이프 동작 원리: tail -f가 흘려보낸 로그가 grep ERROR 필터를 지나 에러 줄만 화면에 남는다">
          <text x="320" y="30" textAnchor="middle" fill="var(--ink)" fontSize="14" fontWeight="700">tail -f app.log | grep ERROR</text>
          <rect x="24" y="70" width="170" height="100" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="109" y="92" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">tail -f app.log</text>
          <text x="36" y="116" fill="var(--muted)" fontSize="12">INFO 로그인 성공</text>
          <text x="36" y="136" fill="var(--rose)" fontSize="12">ERROR DB 연결 실패</text>
          <text x="36" y="156" fill="var(--muted)" fontSize="12">INFO 페이지 조회</text>
          <line x1="194" y1="120" x2="248" y2="120" stroke="var(--muted)" strokeWidth="1.5" />
          <polyline points="240,114 248,120 240,126" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <text x="221" y="106" textAnchor="middle" fill="var(--primary)" fontSize="12" fontWeight="600">파이프 |</text>
          <rect x="254" y="90" width="130" height="60" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="319" y="114" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">grep ERROR</text>
          <text x="319" y="136" textAnchor="middle" fill="var(--muted)" fontSize="12">형광펜 필터</text>
          <line x1="384" y1="120" x2="438" y2="120" stroke="var(--muted)" strokeWidth="1.5" />
          <polyline points="430,114 438,120 430,126" fill="none" stroke="var(--muted)" strokeWidth="1.5" strokeLinecap="round" />
          <rect x="444" y="70" width="172" height="100" rx="8" fill="var(--card)" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="530" y="92" textAnchor="middle" fill="var(--ink)" fontSize="13" fontWeight="600">내 화면</text>
          <text x="530" y="124" textAnchor="middle" fill="var(--rose)" fontSize="12" fontWeight="600">ERROR DB 연결 실패</text>
          <text x="530" y="150" textAnchor="middle" fill="var(--muted)" fontSize="12">ERROR 줄만 통과!</text>
          <text x="320" y="208" textAnchor="middle" fill="var(--muted)" fontSize="12">새 로그가 쌓일 때마다 왼쪽에서 오른쪽으로 실시간 통과</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 파이프(|) — tail -f의 실시간 로그가 grep 필터를 지나 ERROR 줄만 남는다</p>
        <div className="tip">
          <b>직접 확인해 보기</b> Git Bash에서 연습해 봐요. 창을 두 개 열고,
          첫 창에서 <span className="icode">tail -f ~/test.log</span>를 켜 두세요.
          두 번째 창에서 <span className="icode">echo "hello" &gt;&gt; ~/test.log</span>,{' '}
          <span className="icode">echo "ERROR: 큰일남" &gt;&gt; ~/test.log</span>를 치면 —
          첫 창에 실시간으로 나타납니다! <span className="icode">grep ERROR ~/test.log</span>로
          에러 줄만 골라내는 것까지 해 보면, 방금 서버 개발자의 하루를 체험한 거예요.
        </div>
      </Section>

      <Section n={6} title="권한과 sudo" sub="rwx 세 글자와 관리자 모자">
        <p>
          리눅스 서버는 여러 사람(그리고 여러 프로그램)이 같이 쓰는 컴퓨터예요.
          그래서 모든 파일에 <strong>"누가 뭘 할 수 있는지"</strong> 딱지가 붙어 있습니다.{' '}
          <span className="icode">ls -l</span>로 그 딱지를 읽을 수 있어요.
        </p>
        <Code>{CODE_PERMISSION}</Code>
        <p>
          <span className="icode">sudo</span>는 <strong>관리자 모자를 잠깐 쓰는 것</strong>이에요.
          평소엔 일반 사원 권한으로 일하다가, 시스템 설정처럼 큰 권한이 필요한 일만
          모자를 쓰고 처리하고, 바로 벗습니다. 처음부터 끝까지 관리자로 사는 게 아니라요.
        </p>
        <div className="warn">
          <b>sudo를 함부로 쓰지 않기</b> <span className="icode">sudo</span>를 붙이면 리눅스는
          "정말 아는 사람이구나" 하고 <strong>아무 확인 없이</strong> 시키는 대로 다 합니다.
          섹션 4의 <span className="icode">rm -rf</span>에 <span className="icode">sudo</span>까지
          붙으면 시스템 파일도 지워져요. 원칙: <strong>에러가 나서 인터넷에서 찾은 명령에{' '}
          sudo가 붙어 있으면, 실행 전에 그 명령이 뭘 하는지 먼저 이해하기.</strong>
          회사 서버에서는 멘토에게 물어본 뒤에!
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> Git Bash에서 <span className="icode">ls -l</span>을 쳐 보세요.
          아무 줄이나 골라 첫 10글자를 소리 내어 해석해 보기 —
          "폴더고, 주인은 다 되고, 그룹은 읽기·실행만..." 이렇게 읽어내면 통과입니다.
        </div>
      </Section>

      <Section n={7} title="프로세스와 서비스" sub="작업관리자의 터미널판">
        <p>
          실행 중인 프로그램 하나하나를 <strong>프로세스</strong>라고 불러요.
          윈도우에서 <span className="kbd">Ctrl+Shift+Esc</span>로 여는 작업관리자,
          그 터미널판이 <span className="icode">ps</span>와 <span className="icode">top</span>입니다.
          서버가 느려지면 "누가 CPU를 다 먹고 있지?" 하고 <span className="icode">top</span>부터 열죠.
        </p>
        <Code>{CODE_PROCESS}</Code>
        <p>
          백그라운드 실행(<span className="icode">&amp;</span>)이 중요한 이유 — 서버 프로그램은
          내가 터미널을 꺼도 계속 돌아야 하잖아요. "뒤에서 돌게 하기"가 그 출발점입니다.
          그리고 하나 더: 요즘 서버에서 많이 쓰는 <strong>도커 컨테이너</strong>도, 겉보기엔
          특별해 보이지만 서버 입장에선 결국 <strong>프로세스 하나</strong>예요.{' '}
          <span className="icode">ps</span>에 다 잡힙니다 — 나중에 도커를 배울 때 이 문장을 떠올려 보세요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> Git Bash에서 <span className="icode">ps</span>를 쳐 보세요 —
          지금 떠 있는 bash 자신이 보일 거예요. 더 실감나게는 윈도우 작업관리자
          (<span className="kbd">Ctrl+Shift+Esc</span>)를 옆에 띄워 놓고 "아, 이 목록의
          터미널 버전이 ps구나" 하고 비교해 보세요. PID 열이 양쪽에 다 있습니다!
        </div>
      </Section>

      <Section n={8} title="SSH — 원격 서버 접속" sub="지구 반대편 서버의 터미널을 내 앞으로">
        <p>
          드디어 오늘의 최종 보스. AWS 서버는 데이터센터 어딘가에 있는데, 우리는 어떻게
          그 서버에 명령을 칠까요? <strong>SSH</strong>(Secure Shell)는 <strong>원격 서버의
          터미널을 암호화된 통로로 내 화면에 끌어오는</strong> 기술이에요.
          접속한 순간부터 내가 치는 명령은 전부 <strong>그 서버에서</strong> 실행됩니다.
        </p>
        <Code>{CODE_SSH}</Code>
        <p>
          비밀번호 대신 <strong>키 파일(.pem)</strong>을 쓰는 게 표준이에요. 서버에는 자물쇠(공개키),
          나에게는 열쇠(개인키)가 있어서, 열쇠 파일을 가진 사람만 들어갈 수 있습니다.
          비밀번호보다 훨씬 안전하지만 — 뒤집으면 <strong>열쇠 파일이 유출되면 누구든 우리 서버에
          들어올 수 있다</strong>는 뜻이기도 해요.
        </p>
        <div className="warn">
          <b>실제 접속은 멘토와 함께</b> 우리 회사 AWS 서버도 이렇게 SSH로 관리합니다.
          다만 운영 서버는 실수 한 번이 실제 서비스 장애로 이어지는 곳이라, 접속 권한과 키 발급은{' '}
          <strong>멘토와 함께 보안 안내를 받은 뒤에</strong> 진행해요. 그리고 .pem 파일은
          절대 메신저·저장소·공유폴더에 올리지 않기 — 서버 열쇠니까요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> Git Bash에서 <span className="icode">ssh -V</span>를 쳐 보세요.
          버전이 나오면 여러분 PC에 이미 SSH가 준비돼 있다는 뜻입니다.
          지금은 연결할 서버가 없어도, 명령이 손에 익어 있으면 멘토와 첫 접속하는 날 훨씬 수월해요.
        </div>
        <p>마지막으로, 오늘 배운 것 전부를 한 장에 담았어요. 인쇄해서 모니터 옆에 붙여 두세요.</p>
        <Code>{CODE_CHEATSHEET}</Code>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🐧 여기까지 왔다면</h3>
          <p className="muted">
            이제 화면 없는 서버와 키보드로 대화하고, 로그를 읽고, 원격으로 들어가는 법까지
            알게 됐어요. 서버에 들어갔으니 이제 <strong>데이터</strong>를 만나러 갈 차례 —{' '}
            <Link to="/learn/sql"><strong>SQL 입문</strong></Link> 코스에서 서버 안에 잠들어 있는
            데이터베이스에게 질문하는 법을 이어서 배워 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
