feat: 설치 가이드 개편 — IntelliJ 설치·Git 연결 단계 추가, 가이드 디자인 시스템 도입

- STEP 6 IntelliJ 설치(Community 선택, JDK 지정, 첫 실행까지)
- STEP 7 IntelliJ에서 Git 연결(클론→브랜치→커밋→푸시→PR, 클릭 경로 명시)
- 히어로·단계 필 내비·번호 리스트·팁/주의 박스 등 가이드 전용 스타일 추가 (global.css)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

deploy/Caddyfile

@@ -5,7 +5,7 @@
 #  - 도메인이 연결되면 HTTPS 인증서를 자동으로 받아요 (Let's Encrypt)
 
 # 도메인 접속 (DNS 연결 후 자동 HTTPS)
-mirim.awesomedev.dev {
+edu.awesomedevapp.com {
 	encode gzip
 
 	handle /api/* {

deploy/docker-compose.prod.yml

@@ -65,7 +65,7 @@ services:
     image: gitea/gitea:1.23
     container_name: mirim-gitea
     environment:
-      GITEA__server__ROOT_URL: http://${GIT_HOST:-3.36.160.246}:3000/
+      GITEA__server__ROOT_URL: http://${GIT_HOST:-edu.awesomedevapp.com}:3000/
       GITEA__server__SSH_PORT: "222"
       GITEA__service__DISABLE_REGISTRATION: "false"   # 학생 스스로 가입 가능
       GITEA__security__INSTALL_LOCK: "true"           # 웹 설치 마법사 건너뛰기(설정은 env로 완료)

frontend/src/pages/SetupGuidePage.jsx

@@ -1,6 +1,7 @@
 // 이 파일이 하는 일: "개발 환경 설치 가이드" — 내 PC에 개발 도구를 처음부터 설치하는 방법을
-// 클릭 순서 수준으로 안내하는 정적 페이지. (JDK·PATH·Node·Git·에디터·프로젝트 실행·커밋/푸시)
-// 학습 포인트: 이 페이지도 CodingBasicsPage처럼 API 호출이 없는 '내용 고정' 페이지다.
+// 클릭 순서 수준으로 안내하는 정적 페이지. (JDK·PATH·Node·Git·에디터·IntelliJ·프로젝트 실행·커밋/푸시)
+// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
+// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
 
 // 명령어·경로 조각들 — JSX 안에서 중괄호/백틱이 깨지지 않게 문자열로 먼저 만들어 둔다.
 const CODE_JAVA_CHECK = `# 명령 프롬프트(cmd)나 PowerShell을 "새로 열고" 입력:
@@ -31,40 +32,28 @@ git config --global user.email "hong@example.com"
 # 확인
 git config --global --list`;
 
-const CODE_CLONE_RUN = `# 1) 프로젝트 받기 (원하는 폴더에서)
-git clone http://<서버주소>:3000/awesomedev/mirim-app.git
+const CODE_RUN = `# 1) 개발용 DB 띄우기 (Docker Desktop이 켜져 있어야 해요)
 cd mirim-app
-
-# 2) 개발용 DB 띄우기 (Docker Desktop이 켜져 있어야 해요)
 docker compose up -d
 
-# 3) 백엔드 실행 (새 터미널에서)
-cd backend
-# IntelliJ로 열어서 MirimApplication ▶ 실행하는 게 제일 편해요.
+# 2) 백엔드 실행 — IntelliJ에서 MirimApplication ▶ 실행 (STEP 6 참고)
 
-# 4) 프론트 실행 (또 새 터미널에서)
+# 3) 프론트 실행 (새 터미널에서)
 cd frontend
 npm install     # 처음 한 번만 — 라이브러리 설치
 npm run dev     # http://localhost:5173 접속!`;
 
-const CODE_GIT_FLOW = `# ── 매일 쓰는 Git 흐름 ──
+const CODE_GIT_FLOW = `# ── 매일 쓰는 Git 흐름 (터미널 버전) ──
 
-# 0) 최신 코드 받기 (일 시작할 때)
-git pull
+git pull                              # 0) 일 시작: 최신 코드 받기
+git switch -c feat/empty-state-alarm  # 1) 내 작업 브랜치 만들기
 
-# 1) 내 작업 브랜치 만들기
-git switch -c feat/empty-state-alarm
+# ... 코드 수정 ...
 
-# 2) 코드 수정 후, 뭐가 바뀌었나 확인
-git status          # 바뀐 파일 목록
-git diff            # 바뀐 내용 자세히
-
-# 3) 커밋할 파일 담기(스테이징) → 커밋
-git add .
+git status                            # 2) 뭐가 바뀌었나 확인
+git add .                             # 3) 커밋할 파일 담기
 git commit -m "feat: 알림 목록 빈 상태 화면 추가"
-
-# 4) 서버(Gitea)로 올리기
-git push -u origin feat/empty-state-alarm
+git push -u origin feat/empty-state-alarm   # 4) 서버로 올리기
 
 # 5) Gitea 웹에서 Pull Request 만들기 → 멘토 리뷰 → 머지!`;
 
@@ -79,170 +68,226 @@ chore: 그 외 잡일     예) chore: 불필요한 로그 제거
 한 줄로 "무엇을 왜" — 나중에 이력만 봐도 흐름이 보이게!`;
 
 // 학습 포인트: Gitea 주소를 하드코딩하지 않고, 지금 접속한 주소(hostname)를 재사용한다.
-// IP로 접속하면 IP:3000, 도메인으로 접속하면 도메인:3000이 자동으로 표시된다.
-const gitHost = `${window.location.hostname}:3000`;
+const HOST = window.location.hostname;
+const GIT_URL = `http://${HOST}:3000`;
+const CLONE_URL = `${GIT_URL}/awesomedev/mirim-app.git`;
 
-// 한 단계(스텝)를 그리는 작은 컴포넌트 — 이 페이지 안에서만 쓴다.
-function Step({ n, title, children }) {
+// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
+// 학습 포인트: 같은 모양이 반복되면 이렇게 컴포넌트로 뽑는다. props(n, title...)만 바꿔 재사용.
+function Step({ n, title, sub, children }) {
   return (
-    <div className="card" style={{ marginTop: 14 }}>
-      <h3 style={{ margin: '0 0 8px' }}>
-        <span style={{ color: 'var(--primary)', marginRight: 8 }}>STEP {n}</span>
-        {title}
-      </h3>
-      {children}
-    </div>
+    <section className="step-card" id={`step-${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>;
+}
+
+// 메뉴 클릭 경로를 [File] → [Settings] 처럼 보여주는 부품
+function Path({ items }) {
   return (
-    <pre
-      style={{
-        background: 'var(--code-bg, rgba(0,0,0,0.05))',
-        borderRadius: 10,
-        padding: '12px 14px',
-        overflowX: 'auto',
-        fontSize: 13,
-        lineHeight: 1.7,
-        whiteSpace: 'pre-wrap',
-      }}
-    >
-      <code>{children}</code>
-    </pre>
+    <span>
+      {items.map((item, i) => (
+        <span key={item}>
+          <span className="kbd">{item}</span>
+          {i < items.length - 1 && <span className="muted"> → </span>}
+        </span>
+      ))}
+    </span>
   );
 }
 
+const STEPS = [
+  { n: 1, label: 'JDK 21' },
+  { n: 2, label: 'PATH' },
+  { n: 3, label: 'Node.js' },
+  { n: 4, label: 'Git' },
+  { n: 5, label: 'VS Code · Docker' },
+  { n: 6, label: 'IntelliJ 설치' },
+  { n: 7, label: 'IntelliJ + Git 연결' },
+  { n: 8, label: '프로젝트 실행' },
+  { n: 9, label: '커밋과 푸시' },
+];
+
 export default function SetupGuidePage() {
   return (
     <div>
-      <h1 className="page-title">개발 환경 설치 가이드</h1>
-      <p className="page-desc">
-        내 PC를 개발할 수 있는 상태로 만드는 과정이에요. 순서대로 따라 하면 됩니다.
-        막히면 <strong>30분 룰</strong> — 혼자 30분 해보고, 안 되면 멘토에게 물어보세요.
-        설치 과정에서 막힌 것 자체가 좋은 질문 재료예요.
-      </p>
-
-      <Step n={1} title="자바(JDK 21) 설치 — 백엔드의 심장">
+      {/* 히어로: 이 페이지가 뭘 해주는지 한눈에 */}
+      <div className="hero">
+        <div className="eyebrow">Setup Guide</div>
+        <h1>내 PC를 개발자의 PC로<br />만드는 9단계</h1>
         <p>
-          우리 백엔드(Spring Boot)는 자바로 돌아가요. <strong>Eclipse Temurin 21 (LTS)</strong>을 설치합니다.
+          순서대로 따라 하면 됩니다. 막히면 <strong>30분 룰</strong> — 혼자 30분 해보고,
+          안 되면 멘토에게 물어보세요. 설치에서 막힌 것 자체가 좋은 질문 재료예요.
         </p>
-        <ol style={{ lineHeight: 2 }}>
+        <div className="chip-row">
+          <span className="chip">예상 소요 2~3시간</span>
+          <span className="chip">Windows 기준</span>
+          <span className="chip">디자이너는 STEP 3·4·5만</span>
+        </div>
+      </div>
+
+      {/* 단계 바로가기 */}
+      <nav className="pill-nav">
+        {STEPS.map((s) => (
+          <a key={s.n} href={`#step-${s.n}`}>
+            <b>{s.n}</b>
+            {s.label}
+          </a>
+        ))}
+      </nav>
+
+      <Step n={1} title="자바(JDK 21) 설치" sub="백엔드(Spring Boot)의 심장">
+        <ol className="olist">
+          <li>브라우저에서 <strong>adoptium.net</strong> 접속 → 큰 다운로드 버튼(<strong>Temurin 21 LTS</strong>, Windows x64 .msi) 클릭</li>
+          <li>받은 .msi 파일 실행 → 계속 <span className="kbd">다음</span></li>
           <li>
-            브라우저에서 <strong>adoptium.net</strong> 접속 → 큰 다운로드 버튼(Temurin 21 LTS, Windows x64 .msi) 클릭
+            <strong>제일 중요한 화면!</strong> "Custom Setup" 단계에서{' '}
+            <strong>Set JAVA_HOME variable</strong>과 <strong>Add to PATH</strong>를 클릭해{' '}
+            <em>"Will be installed on local hard drive"</em>로 바꾸기 — 이러면 PATH 설정을 설치기가 대신 해줘요
           </li>
-          <li>받은 .msi 파일 실행 → 계속 [다음]</li>
-          <li>
-            ⚠️ <strong>제일 중요한 화면!</strong> "Custom Setup" 단계에서{' '}
-            <strong>"Set JAVA_HOME variable"</strong>과 <strong>"Add to PATH"</strong> 항목을
-            클릭해서 <strong>"Will be installed on local hard drive"</strong>로 바꿔 주세요.
-            (이걸 켜면 아래 PATH 설정을 설치기가 대신 해줍니다)
-          </li>
-          <li>설치 완료 후, <strong>열려 있던 터미널은 모두 닫고 새로 열어서</strong> 확인:</li>
+          <li>설치 완료 후, <strong>열려 있던 터미널을 모두 닫고 새로 열어서</strong> 확인:</li>
         </ol>
         <Code>{CODE_JAVA_CHECK}</Code>
-        <p className="muted" style={{ marginTop: 8 }}>
-          💡 터미널을 새로 여는 이유: PATH 같은 환경 변수는 <strong>터미널이 켜질 때</strong> 읽혀요.
+        <div className="tip">
+          <b>왜 터미널을 새로 여나요?</b> PATH 같은 환경 변수는 터미널이 <strong>켜질 때</strong> 읽혀요.
           설치 전에 열어둔 터미널은 새 설정을 모릅니다.
-        </p>
+        </div>
       </Step>
 
-      <Step n={2} title="PATH가 뭐길래? — 손으로 직접 잡아보기">
+      <Step n={2} title="PATH가 뭐길래? — 손으로 직접 잡아보기" sub="java -version이 안 될 때">
         <Code>{CODE_PATH_EXPLAIN}</Code>
-        <p style={{ marginTop: 10 }}>
-          설치기에서 체크를 놓쳤거나 <code>java -version</code>이 안 될 때, 직접 잡는 방법(Windows):
-        </p>
-        <ol style={{ lineHeight: 2 }}>
+        <p>설치기에서 체크를 놓쳤다면 직접 잡습니다:</p>
+        <ol className="olist">
+          <li><Path items={['⊞ 시작', '"환경 변수" 검색', '시스템 환경 변수 편집']} /> 클릭</li>
+          <li>아래쪽 <span className="kbd">환경 변수(N)...</span> 버튼 클릭</li>
           <li>
-            <strong>⊞ 시작 버튼</strong> → "환경 변수" 검색 → <strong>"시스템 환경 변수 편집"</strong> 클릭
+            시스템 변수에서 <span className="kbd">새로 만들기</span> → 변수 이름 <span className="icode">JAVA_HOME</span> /
+            변수 값 <span className="icode">C:\Program Files\Eclipse Adoptium\jdk-21.0.x-hotspot</span>
+            <span className="muted"> (실제 설치 폴더를 탐색기로 확인해서 적어요)</span>
           </li>
-          <li>아래쪽 <strong>[환경 변수(N)...]</strong> 버튼 클릭</li>
-          <li>
-            아래 칸(시스템 변수)에서 <strong>[새로 만들기]</strong> →
-            변수 이름: <code>JAVA_HOME</code> /
-            변수 값: <code>C:\Program Files\Eclipse Adoptium\jdk-21.0.x-hotspot</code>
-            (실제 설치된 폴더를 파일 탐색기로 확인해서 적어요)
-          </li>
-          <li>
-            시스템 변수 목록에서 <strong>Path</strong> 선택 → [편집] → [새로 만들기] →{' '}
-            <code>%JAVA_HOME%\bin</code> 입력 → 전부 [확인]
-          </li>
-          <li>터미널 새로 열고 <code>java -version</code> 다시 확인!</li>
+          <li>시스템 변수 목록에서 <span className="kbd">Path</span> 선택 → <span className="kbd">편집</span> → <span className="kbd">새로 만들기</span> → <span className="icode">%JAVA_HOME%\bin</span> 입력 → 전부 확인</li>
+          <li>터미널 새로 열고 <span className="icode">java -version</span> 다시 확인!</li>
         </ol>
-        <p className="muted">
-          💡 <code>%JAVA_HOME%\bin</code>의 의미: "JAVA_HOME 변수에 적힌 폴더 안의 bin 폴더".
-          bin에 java.exe 같은 실행 파일이 들어 있어요.
-        </p>
+        <div className="tip">
+          <b>%JAVA_HOME%\bin의 의미</b> — "JAVA_HOME 변수에 적힌 폴더 안의 bin 폴더".
+          bin 안에 java.exe 같은 실행 파일이 들어 있어요.
+        </div>
       </Step>
 
-      <Step n={3} title="Node.js 설치 — 프론트엔드의 엔진">
-        <p>
-          React 개발 도구(Vite)와 라이브러리 관리(npm)에 필요해요. <strong>LTS 버전</strong>을 설치합니다.
-        </p>
-        <ol style={{ lineHeight: 2 }}>
-          <li><strong>nodejs.org</strong> 접속 → 초록색 <strong>LTS</strong> 버튼 클릭해 다운로드</li>
-          <li>설치 파일 실행 → 전부 기본값으로 [다음] (Node는 PATH를 자동으로 잡아줘요)</li>
+      <Step n={3} title="Node.js 설치" sub="프론트엔드(React)의 엔진">
+        <ol className="olist">
+          <li><strong>nodejs.org</strong> 접속 → 초록색 <strong>LTS</strong> 버튼으로 다운로드</li>
+          <li>설치 파일 실행 → 전부 기본값으로 <span className="kbd">Next</span> (Node는 PATH를 자동으로 잡아줘요)</li>
           <li>터미널 새로 열고 확인:</li>
         </ol>
         <Code>{CODE_NODE_CHECK}</Code>
       </Step>
 
-      <Step n={4} title="Git 설치 + 첫 설정 — 협업의 시작">
-        <ol style={{ lineHeight: 2 }}>
+      <Step n={4} title="Git 설치 + 첫 설정" sub="협업의 시작">
+        <ol className="olist">
           <li><strong>git-scm.com</strong> 접속 → Download for Windows</li>
-          <li>설치 옵션이 많이 나오는데 <strong>전부 기본값</strong>으로 [Next] 해도 충분해요</li>
-          <li>설치 후 터미널에서 <code>git --version</code> 확인</li>
-          <li>내가 누군지 등록 (커밋마다 이 이름이 남아요):</li>
+          <li>설치 옵션이 많이 나오는데 <strong>전부 기본값</strong>으로 <span className="kbd">Next</span> 해도 충분해요</li>
+          <li>설치 후 터미널에서 <span className="icode">git --version</span> 확인</li>
+          <li>내가 누군지 등록 — 커밋마다 이 이름이 남아요:</li>
         </ol>
         <Code>{CODE_GIT_CONFIG}</Code>
+        <div className="warn">
+          <b>먼저 할 일</b> — 우리 Git 서버(Gitea) <a href={GIT_URL} target="_blank" rel="noreferrer"><strong>{GIT_URL}</strong></a>에
+          접속해서 <strong>회원가입</strong>하고, 아이디를 멘토에게 알려 주세요. 다음 단계들에서 이 계정을 씁니다.
+        </div>
       </Step>
 
-      <Step n={5} title="에디터 설치 — 코드를 쓰는 곳">
-        <ul style={{ lineHeight: 2 }}>
-          <li>
-            <strong>VS Code</strong> (code.visualstudio.com) — 프론트엔드(React) 작업용.
-            설치 후 확장(Extensions)에서 <strong>Korean Language Pack</strong>, <strong>ES7+ React snippets</strong> 추천.
-          </li>
-          <li>
-            <strong>IntelliJ IDEA Community</strong> (jetbrains.com) — 백엔드(Java/Spring) 작업용. 무료 Community 버전이면 충분해요.
-            프로젝트 열기: [Open] → <code>mirim-app/backend</code> 폴더 선택 → Maven 프로젝트로 자동 인식.
-          </li>
-          <li>
-            <strong>Docker Desktop</strong> (docker.com) — 개발용 DB(PostgreSQL)를 띄울 때 필요해요.
-            설치 후 재부팅 한 번.
-          </li>
-        </ul>
+      <Step n={5} title="VS Code · Docker Desktop 설치" sub="프론트 에디터 + 개발용 DB">
+        <ol className="olist">
+          <li><strong>VS Code</strong> (code.visualstudio.com) 설치 — 프론트엔드(React) 작업용. 확장(Extensions)에서 <strong>Korean Language Pack</strong>, <strong>ES7+ React snippets</strong> 추천</li>
+          <li><strong>Docker Desktop</strong> (docker.com) 설치 — 개발용 DB(PostgreSQL)를 띄울 때 필요해요. 설치 후 재부팅 한 번</li>
+        </ol>
       </Step>
 
-      <Step n={6} title="프로젝트 받아서 내 PC에서 실행하기">
-        <p>
-          우리 회사 Git 서버(Gitea)는 <strong>http://{gitHost}</strong> 에 있어요.
-          먼저 브라우저로 접속해 <strong>회원가입</strong>하고 멘토에게 알려 주세요.
-        </p>
-        <Code>{CODE_CLONE_RUN.replace(/<서버주소>/g, window.location.hostname)}</Code>
-        <p className="muted">
-          💡 백엔드(8080)와 프론트(5173)를 <strong>둘 다</strong> 켜야 로그인이 돼요.
-          프론트의 /api 요청을 백엔드로 넘겨주는 설정은 <code>frontend/vite.config.js</code>에 있어요 — 열어서 읽어보세요!
-        </p>
+      <Step n={6} title="IntelliJ IDEA 설치" sub="백엔드(Java·Spring) 에디터 — 무료 Community 버전">
+        <ol className="olist">
+          <li><strong>jetbrains.com/idea</strong> 접속 → 아래로 스크롤해 <strong>IntelliJ IDEA Community Edition</strong>(무료) 다운로드 <span className="muted">(위쪽 Ultimate는 유료 — 우리는 Community로 충분해요)</span></li>
+          <li>설치 중 옵션 화면에서 <strong>Add "bin" folder to the PATH</strong>, <strong>.java 연결</strong> 체크 추천 → <span className="kbd">Next</span> → 설치 후 재부팅</li>
+          <li>첫 실행 → 테마 고르기(아무거나) → 시작 화면이 나오면 성공</li>
+          <li>
+            <strong>JDK 지정 확인</strong> — 프로젝트를 연 뒤(다음 단계){' '}
+            <Path items={['File', 'Project Structure', 'Project']} /> 에서 <strong>SDK가 21</strong>인지 확인.
+            비어 있으면 <span className="kbd">Add SDK</span> → <span className="kbd">JDK...</span> → STEP 1에서 설치한 폴더 선택
+          </li>
+          <li>
+            <strong>실행해 보기</strong> — 좌측 파일 트리에서 <span className="icode">backend/src/.../MirimApplication.java</span> 열고,
+            클래스 옆 <strong>초록 ▶ 버튼</strong> 클릭 → 아래 콘솔에 "Started MirimApplication"이 뜨면 백엔드가 켜진 거예요!
+          </li>
+        </ol>
+        <div className="tip">
+          <b>Maven이 뭘 하고 있는 거죠?</b> 프로젝트를 처음 열면 IntelliJ가 우측 하단에서 한참 뭔가를 내려받아요.
+          <span className="icode">pom.xml</span>에 적힌 라이브러리들을 자동으로 설치하는 중이니 기다려 주세요 (처음 한 번만 오래 걸려요).
+        </div>
       </Step>
 
-      <Step n={7} title="커밋하고 푸시하기 — 매일의 작업 흐름">
+      <Step n={7} title="IntelliJ에서 Git 연결하기" sub="클론부터 커밋·푸시까지 IDE 안에서">
+        <p><strong>① 프로젝트 클론 (처음 한 번)</strong></p>
+        <ol className="olist">
+          <li>IntelliJ 시작 화면에서 <span className="kbd">Clone Repository</span> 클릭 <span className="muted">(이미 다른 프로젝트가 열려 있으면 <Path items={['File', 'New', 'Project from Version Control...']} />)</span></li>
+          <li>URL에 <span className="icode">{CLONE_URL}</span> 입력 → Directory 확인 → <span className="kbd">Clone</span></li>
+          <li>로그인 창이 뜨면 <strong>Gitea 아이디/비밀번호</strong>(STEP 4에서 가입한 계정) 입력 — 한 번 입력하면 IntelliJ가 기억해요</li>
+          <li>"Trust Project?" 물으면 <span className="kbd">Trust Project</span></li>
+        </ol>
+        <p><strong>② 브랜치 만들기</strong></p>
+        <ol className="olist">
+          <li>우측 하단(또는 좌측 상단)의 <strong>브랜치 이름(main)</strong> 클릭 → <span className="kbd">New Branch</span> → 이름 입력 (예: <span className="icode">feat/my-first-fix</span>) → <span className="kbd">Create</span></li>
+        </ol>
+        <p><strong>③ 커밋하고 푸시하기</strong></p>
+        <ol className="olist">
+          <li>코드를 수정하면 파일 이름이 <strong>파란색</strong>으로 변해요 (= 변경됨 표시)</li>
+          <li>좌측 <strong>Commit 탭</strong>(체크 표시 아이콘, 단축키 <span className="kbd">Alt</span>+<span className="kbd">0</span>) 클릭 → 바뀐 파일 목록 확인</li>
+          <li>파일을 <strong>더블클릭하면 전/후 비교(diff)</strong>가 보여요 — 커밋 전에 꼭 훑어보는 습관!</li>
+          <li>커밋할 파일 체크 → 아래 메시지 칸에 <span className="icode">feat: 무엇을 했는지</span> 입력</li>
+          <li><span className="kbd">Commit and Push...</span> 버튼 → <span className="kbd">Push</span> — 끝! Gitea 웹에서 내 브랜치가 보여요</li>
+          <li>Gitea 웹({HOST}:3000)에서 <span className="kbd">Pull Request 만들기</span> → 멘토 리뷰 요청</li>
+        </ol>
+        <div className="tip">
+          <b>터미널과 IDE, 뭘 쓰든 같은 Git이에요.</b> IntelliJ 버튼들은 결국 STEP 9의 git 명령을 대신 눌러주는 것.
+          처음엔 IDE로 익히고, 익숙해지면 터미널 명령도 함께 배워두면 어디서든 일할 수 있어요.
+        </div>
+        <div className="warn">
+          <b>main에 직접 푸시 금지!</b> 항상 브랜치를 만들어 작업하고 Pull Request로 멘토 리뷰를 받아요. 이게 우리가 일하는 방식이에요.
+        </div>
+      </Step>
+
+      <Step n={8} title="프로젝트 실행 — 내 PC에서 전체 돌려보기" sub="DB + 백엔드 + 프론트 세 개가 한 세트">
+        <Code>{CODE_RUN}</Code>
+        <div className="tip">
+          <b>왜 세 개나 켜나요?</b> 프론트(5173)는 화면, 백엔드(8080)는 API, PG(5432)는 데이터.
+          프론트의 /api 요청을 백엔드로 넘기는 설정은 <span className="icode">frontend/vite.config.js</span>에 있어요 — 열어서 읽어보세요!
+        </div>
+      </Step>
+
+      <Step n={9} title="매일의 Git 흐름 (터미널 버전) + 커밋 규칙" sub="숙련자 코스 — IDE와 같은 일을 명령어로">
         <Code>{CODE_GIT_FLOW}</Code>
         <Code>{CODE_COMMIT_RULE}</Code>
-        <p className="muted">
-          💡 <strong>main 브랜치에 바로 커밋하지 않기!</strong> 항상 브랜치를 만들어 작업하고,
-          Pull Request로 멘토 리뷰를 받은 뒤 머지해요. 이게 우리가 일하는 방식이에요.
-        </p>
       </Step>
 
-      <div className="card" style={{ marginTop: 14 }}>
-        <h3 style={{ margin: '0 0 8px' }}>🎉 여기까지 됐다면</h3>
-        <p>
-          여러분 PC는 이제 어썸데브 개발자와 같은 환경이에요. 다음은{' '}
-          <strong>코딩 기초</strong> 메뉴에서 이 앱이 어떻게 만들어졌는지 읽어보고,
-          저장소의 <code>STUDY.md</code>에 있는 "직접 해보기 미니 과제"에 도전해 보세요.
-        </p>
+      <div className="step-card">
+        <div className="step-body">
+          <h3 style={{ marginBottom: 6 }}>🎉 여기까지 됐다면</h3>
+          <p className="muted">
+            여러분 PC는 이제 어썸데브 개발자와 같은 환경이에요. 다음은 <strong>코딩 기초</strong> 메뉴에서
+            이 앱이 어떻게 만들어졌는지 읽고, 저장소의 <span className="icode">STUDY.md</span>에 있는
+            "직접 해보기 미니 과제"에 도전해 보세요.
+          </p>
+        </div>
       </div>
     </div>
   );

frontend/src/styles/global.css

@@ -16,6 +16,8 @@
   --rose: #B4463C;
   --radius: 14px;
   --shadow: 0 1px 3px rgba(16, 26, 40, 0.06), 0 4px 14px rgba(16, 26, 40, 0.05);
+  --code-bg: #F1F4F9;
+  --ink-faint: #7B8798;
 }
 
 /* 학습 포인트: 사용자의 OS가 다크 모드면 이 블록이 변수 값만 바꿔치기한다.
@@ -30,6 +32,8 @@
     --primary: #6AA0F0;
     --primary-soft: #172A44;
     --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.25);
+    --code-bg: #161E28;
+    --ink-faint: #74808F;
   }
 }
 
@@ -369,3 +373,256 @@ a {
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 14px;
 }
+
+/* ---------- 가이드 페이지 전용 (교육 문서 세트와 같은 디자인 언어) ---------- */
+/* 학습 포인트: 아래 클래스들은 SetupGuidePage 등 '읽는 페이지'의 완성도를 올리는 부품이다.
+   기존 페이지의 클래스는 건드리지 않고 추가만 했다 — 이렇게 하면 사이드이펙트가 없다. */
+
+.eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--primary);
+}
+
+.eyebrow::before {
+  content: "";
+  width: 22px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--primary);
+}
+
+.hero {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background:
+    radial-gradient(120% 150% at 100% 0%, var(--primary-soft) 0%, transparent 55%),
+    var(--card);
+  box-shadow: var(--shadow);
+  padding: 28px 28px 26px;
+  margin-bottom: 22px;
+}
+
+.hero h1 {
+  font-size: clamp(24px, 4vw, 32px);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 10px 0 8px;
+  text-wrap: balance;
+}
+
+.hero p {
+  color: var(--muted);
+  max-width: 56ch;
+}
+
+.chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 5px 12px;
+}
+
+.chip::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--primary);
+}
+
+/* 단계 이동 필 내비게이션 */
+.pill-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 22px;
+}
+
+.pill-nav a {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  background: var(--card);
+  border-radius: 999px;
+  padding: 6px 13px;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+
+.pill-nav a:hover {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+
+.pill-nav a b {
+  color: var(--primary);
+  margin-right: 5px;
+}
+
+/* 단계 카드 */
+.step-card {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  margin-top: 16px;
+  scroll-margin-top: 76px;   /* 앵커 이동 시 상단 네비에 가리지 않게 */
+}
+
+.step-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 15px 20px;
+  background: var(--primary-soft);
+  border-bottom: 1px solid var(--line);
+}
+
+.step-num {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 11px;
+  background: var(--primary);
+  color: #fff;
+  font-weight: 800;
+  font-size: 15px;
+  display: grid;
+  place-items: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.step-head h3 {
+  font-size: 16.5px;
+  font-weight: 800;
+  letter-spacing: -0.015em;
+}
+
+.step-head .step-sub {
+  display: block;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+  margin-top: 1px;
+}
+
+.step-body {
+  padding: 18px 20px 20px;
+}
+
+.step-body > * + * {
+  margin-top: 12px;
+}
+
+/* 번호 매긴 진행 순서 */
+.olist {
+  padding-left: 4px;
+  list-style: none;
+  counter-reset: ol;
+  display: grid;
+  gap: 9px;
+}
+
+.olist li {
+  counter-increment: ol;
+  position: relative;
+  padding-left: 32px;
+  line-height: 1.7;
+}
+
+.olist li::before {
+  content: counter(ol);
+  position: absolute;
+  left: 0;
+  top: 2px;
+  width: 22px;
+  height: 22px;
+  border-radius: 7px;
+  background: var(--primary-soft);
+  color: var(--primary);
+  font-weight: 800;
+  font-size: 12.5px;
+  display: grid;
+  place-items: center;
+}
+
+/* 코드/명령어 블록 */
+.code-block {
+  background: var(--code-bg);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 13px 15px;
+  overflow-x: auto;
+  font-family: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;
+  font-size: 13px;
+  line-height: 1.75;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* 팁/주의 박스 */
+.tip, .warn {
+  border-radius: 10px;
+  padding: 12px 15px;
+  font-size: 13.5px;
+  line-height: 1.65;
+}
+
+.tip {
+  background: color-mix(in srgb, var(--teal) 9%, transparent);
+  border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent);
+}
+
+.tip b { color: var(--teal); }
+
+.warn {
+  background: color-mix(in srgb, var(--amber) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent);
+}
+
+.warn b { color: var(--amber); }
+
+/* 메뉴 경로 표시: [File] > [Settings] 같은 클릭 경로 */
+.kbd {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--line);
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  background: var(--card);
+  font-size: 12.5px;
+  font-weight: 700;
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+inline-code, .icode {
+  font-family: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;
+  font-size: 0.92em;
+  background: var(--code-bg);
+  border-radius: 5px;
+  padding: 1px 6px;
+}