2단계: Login과 Admin Dashboard 화면 먼저 만들기

핵심 요약

첫 단계에서는 Backend, MySQL, Session, Redis와 Nginx를 사용하지 않습니다. React Frontend만 실행하여 다음 화면 흐름부터 확인합니다.

Windows Web Browser
        ↓
http://192.168.1.231:5173
        ↓
Login Page
        ↓
학습용 임시 Admin 확인
        ↓
Admin Dashboard

이 단계의 Login은 실제 인증이 아닙니다. Browser 화면, React Component, State와 Route의 역할을 이해하기 위한 UI Prototype입니다.

이번 단계의 Vibe Coding 작업 지시서

학습용 간단한 지시 설명서

React, Vite와 TypeScript로 Login과 최소 Admin Dashboard UI만 구현해 줘.
구현 범위는 frontend/이며 /login과 /admin Route, 임시 Admin 화면 전환과 Logout을 만들어 줘.
이 임시 판정은 실제 인증이 아님을 표시하고 Password를 Browser 저장소에 저장하지 마.
Express, API, MySQL, Session, Redis, Nginx, Docker와 Compose는 추가하지 마.
변경 전·후 02단계 Gate와 npm run build 결과를 보고해 줘.

정식 작업 지시서

다음 코드 블록 전체가 02단계 구현의 유일한 정식 작업 지시서입니다. 내용을 줄이거나 별도의 상세 Prompt로 복제하지 않고 docs/work-orders/02-login-dashboard-ui.md에 저장합니다.

# 02단계 정식 작업 지시서

## 단계별 상세 지시
루트 AGENTS.md, docs/requirements/admin-platform.md와
docs/work-orders/02-login-dashboard-ui.md를 먼저 읽어 줘.

구현 파일은 frontend 폴더 안에서 생성하거나 수정해 줘.
docs/requirements/admin-platform.md와 01단계의 공통 WebUI Gate 기준은 읽기만 하고, 검증 기록 문서와 README는 이 작업에서 수정하지 마. 사용자가 실제 WebUI 확인을 마친 뒤 별도 Prompt로 갱신한다.

React, Vite와 TypeScript를 사용한다.
개발 서버는 0.0.0.0:5173에서 strictPort로 실행한다.
/login과 /admin Route를 만든다.
Backend와 Database는 만들지 않는다.
학습용 임시 Admin 판정으로 화면 이동만 구현한다.
이 방식이 실제 인증이 아님을 코드와 화면에 명확히 표시한다.
Password를 localStorage나 sessionStorage에 저장하지 않는다.
Login 성공 시 최소 Admin Dashboard를 표시하고 Logout을 제공한다.
`docs/requirements/admin-platform.md`와 `Attachments/admin-dashboard-reference-ui.webp`의 화면 방향을 확인한다. 이 이미지는 실제 구현 완료 화면이 아니라 Layout, Sidebar, Header와 본문 영역의 시각적 방향을 정하기 위한 참고 목업으로만 사용한다.
이번 단계에서는 Login, Header, Sidebar 자리와 본문 영역의 시각적 원형만 만들고, 실제 메뉴 데이터와 펼침·접힘 동작은 06~07단계 범위로 남긴다.
회색 계열의 차분한 인상을 참고하되 이미지에서 식별되지 않는 정확한 색상 코드, 크기와 간격은 임의로 확정하지 않는다.
Desktop과 Mobile에서 화면 영역이 구분되고 Login과 Logout 흐름을 방해하지 않는지 확인한다.
**이 항목은 작성자의 구현 의도에 맞게 변경할 수 있다.** 실제로 변경한 화면 구성과 색상 방향은 완료 보고에 설명하고, 요구사항 문서 반영은 사용자 검증 뒤 별도 Prompt에서 수행한다.

작업 전 프로젝트 구조, 기존 변경, 변경 예정 파일과 검증 명령을 먼저 보고해 줘.
01단계 문서에서 제공한 필수 파일과 참고 이미지가 모두 존재하고 Git에 기록되었는지 자동 검사해 줘. 누락되었거나 미추적 상태이면 구현하지 말고 정확한 파일 경로와 실행할 복구 명령을 보고해 줘.
변경 전과 변경 후에 02단계 적용 범위의 공통 WebUI Gate를 실행해 줘. 02단계 시작 시 실행 가능한 기존 Frontend가 없으면 변경 전 Browser Gate는 `미수행—기존 Frontend 없음`으로 구분해. 01단계 완료 기록과 필수 기준 문서가 정상이면 이 사유만으로 02단계 구현을 중단하지 마. 변경 후 Gate는 반드시 실제로 실행해 줘.
`npm run build`와 Browser 검증 결과는 완료 보고에 통과, 실패와 미수행으로 구분해 줘. 검증 기록 문서 갱신은 이 작업에서 실행하지 마.
Build나 Gate가 실패하면 완료로 판정하거나 03단계 기능을 추가하지 말고 원인을 보고해 줘.

## 완료 보고 형식

- 생성하거나 변경한 파일
- 실행한 명령과 실제 결과
- 통과, 실패와 미수행 검증
- 요구사항별 구현 내용과 변경 이유
- 남은 제한, 위험과 다음 단계 진행 가능 여부

정식 작업 지시서 저장과 실행 순서

다음 순서는 Windows 관리 PC의 VS Code에서 Remote SSH로 개발 서버에 연결한 상태를 기준으로 합니다. 아래 자동 검사에서 준비 완료가 표시될 때만 다음 번호로 이동합니다.

1. 프로젝트와 이전 단계 상태 확인

02단계를 시작하기 전에 01단계에서 만든 파일이 준비되어 있는지 확인합니다.

방법 1:

파일 이름이나 Git 상태를 직접 해석할 필요는 없습니다. VS Code의 원격 터미널에 다음 코드 블록 전체를 한 번에 붙여 넣고 Enter를 누릅니다.

cd /home/apple2ne1/projects/vibe-coding-platform

missing=0

check_file() {
  if test -s "$1"; then
    echo "[확인] 파일 있음: $1"
  else
    echo "[중지] 파일이 없거나 비어 있음: $1"
    missing=1
  fi
}

check_tracked() {
  if git ls-files --error-unmatch "$1" >/dev/null 2>&1; then
    echo "[확인] Git 기록 있음: $1"
  else
    echo "[중지] Git에 기록되지 않음: $1"
    missing=1
  fi
}

for file in \
  README.md \
  .env.example \
  compose.yaml \
  docs/requirements/admin-platform.md \
  docs/development-guides/local-development.md \
  docs/development-guides/webui-gate.md \
  Attachments/admin-dashboard-reference-ui.webp
do
  check_file "$file"
  check_tracked "$file"
done

if grep -q "01단계" docs/development-guides/webui-gate.md 2>/dev/null; then
  echo "[확인] 01단계 WebUI Gate 기록 있음"
else
  echo "[중지] 01단계 WebUI Gate 기록을 찾지 못함"
  missing=1
fi

if docker compose config --quiet; then
  echo "[확인] compose.yaml 문법 정상"
else
  echo "[중지] compose.yaml 검사 실패"
  missing=1
fi

echo ""
echo "현재 Git 변경 목록(Codex 확인용):"
git status --short
echo ""

if test "$missing" -eq 0; then
  echo "02단계 준비 완료: 2번으로 이동하세요."
else
  echo "02단계 시작 중지: 위 출력 전체를 Codex에 전달하세요."
fi

명령 실행이 끝나면 마지막 줄만 확인합니다.

• 02단계 준비 완료: 2번으로 이동하세요.가 표시되면 아래 2번 절로 이동합니다.
• 02단계 시작 중지: 위 출력 전체를 Codex에 전달하세요.가 표시되면 2번으로 이동하지 않습니다. 명령을 다시 실행하거나 파일을 직접 수정하지 말고 터미널 출력 전체를 Codex에 전달합니다.

— 아래와 같이 시작 중지메세지가 나왔을 때

중지 메시지가 표시되었을 때는 Codex CLI 에게 직접 물어보고 해결하며 Vibe Coding 을 시작합니다.

새 터미널을 열때 Split Terminal 로 열면 Codex CLI 가 실행중인 터미널과 Code 터미널을 좌우로 옮겨가며 바로 실행할 수 있습니다.

여기에선 가독성을 위해 한 터미널만 보이게 했습니다.

또는

아래 터미널 출력을 확인해서 무엇이 부족한지 설명하고, 기존 파일을 삭제하거나 덮어쓰지 않는 복구 명령만 알려 줘. 내가 결과를 해석하지 않아도 되도록 다음에 실행할 명령을 순서대로 작성해 줘. > >(여기에 터미널 출력 전체를 붙여 넣기)

Codex가 복구 명령을 제시하면 한 번에 하나씩 실행하고, 실행 결과를 다시 Codex에 전달합니다. Codex가 준비 검사를 다시 실행하라고 안내할 때 위 검사 코드 블록을 다시 실행합니다. 마지막 줄에 02단계 준비 완료가 표시되기 전에는 아직 이 문서에서 요구하는 것들이 제대로 준비가 되지 않은 것이므로 2번으로 이동하지 않습니다.

위 Codex CLI 로 지시를 이행해서 ’02 단계 준비 완료 : 2번으로 이동하세요.’ 메세지를 확인합니다.

방법 2:

터미널에서 아래 명령으로 01 단계에서 준비한 파일이 있는지 확인합니다.

pwd
git status --short
test -s docs/requirements/admin-platform.md
test -s docs/development-guides/local-development.md
test -s docs/development-guides/webui-gate.md
test -s Attachments/admin-dashboard-reference-ui.webp
git ls-files -- README.md docs/requirements/admin-platform.md docs/development-guides/local-development.md docs/development-guides/webui-gate.md Attachments/admin-dashboard-reference-ui.webp
docker compose config --quiet

test -s와 docker compose config --quiet는 문제가 없으면 별도의 메시지를 표시하지 않고 다음 프롬프트로 돌아옵니다. 오류 메시지가 나오거나 git ls-files 결과에 위 파일이 모두 표시되지 않으면 직접 원인을 해석하지 말고 터미널 출력 전체를 Codex에 전달합니다.

화면 예시와 자신의 출력이 완전히 같지 않아도 됩니다. 결과를 직접 구분하기 어렵다면 터미널 출력 전체를 Codex에 전달하여 다음에 실행할 명령을 요청합니다.

2. 정식 작업 지시서 저장

VS Code에서 docs/work-orders/02-login-dashboard-ui.md를 만들고, 위 정식 작업 지시서 코드 블록의 내용을 빠짐없이 저장합니다. 간단한 지시서와 정식 작업 지시서를 서로 다른 실행 Prompt로 보내지 않습니다.

방법 1: 터미널에서 02-login-dashboard-ui.md 파일 생성

mkdir -p docs/work-orders
touch docs/work-orders/02-login-dashboard-ui.md

VS Code의 Explorer에서 docs/work-orders/02-login-dashboard-ui.md를 선택해 열고, 위 정식 작업 지시서 코드 블록 전체를 복사해 붙여넣은 뒤 Ctrl+S로 저장합니다.

방법 2: VS Code에서 파일 생성 및 정식 작업 지시서 저장

저장한 다음 VS Code 원격 터미널에서 파일 내용과 변경 사항을 확인합니다.

test -s docs/work-orders/02-login-dashboard-ui.md && echo "파일이 존재하고 내용이 있습니다." || echo "파일이 없거나 비어 있습니다."

docs/work-orders/02-login-dashboard-ui.md 파일이 존재하고, 파일 크기가 0보다 큰지 확인

-s는 파일이 존재하면서 비어 있지 않은지 검사합니다.

3. 작업 지시서 Git 기준점 기록

위 정식 작업 지시서 코드 블록 전체를 지정한 파일에 저장한 뒤, 해당 파일만 먼저 커밋하여 구현 기준을 고정합니다.

cd /home/apple2ne1/projects/vibe-coding-platform
git status --short
test -s docs/work-orders/02-login-dashboard-ui.md
git add -- docs/work-orders/02-login-dashboard-ui.md
git diff --cached --name-only
git diff --cached --check

스테이징 파일 목록에 docs/work-orders/02-login-dashboard-ui.md 하나만 표시되고 git diff --cached --check가 오류 없이 종료되면 다음 커밋을 실행합니다. 다른 파일이 표시되거나 검사가 실패하면 커밋하지 않고 Codex에 출력 결과를 전달해 수정을 요청합니다.

git commit -m "docs: add 02 step work order"

.

4. Codex CLI 실행과 공통 Prompt 전달

작업의 편의를 위해 Terminal 을 하나 더 엽니다.

한쪽은 필요한 터미널 작업을 위해 두고, 다른 쪽에 Codex CLI 를 실행합니다.

프로젝트 루트에서 Codex CLI를 실행합니다.

codex -C /home/apple2ne1/projects/vibe-coding-platform

이 명령은 Codex CLI를 지정한 프로젝트 디렉터리를 작업 위치로 삼아 실행한다는 뜻입니다. -C 는 Codex를 시작하기 전에 작업 디렉터리(working directory)를 지정하는 옵션 입니다.

따라서, 위 명령은

아래 명령과 같습니다.

cd /home/apple2ne1/projects/vibe-coding-platform
codex

Codex CLI에 단계별 구현 조건을 다시 길게 복사하지 않고 다음 공통 Prompt를 전달합니다.

아래 코드 블록 전체를 복사하여 Codex CLI에 붙여 넣습니다.

루트 AGENTS.md, docs/requirements/admin-platform.md와 docs/work-orders/02-login-dashboard-ui.md를 먼저 읽어 줘. > 구현 전에 다음 내용을 보고해 줘. >1. 현재 단계와 목표 >2. Git 상태와 기존 변경 >3. 선행 조건 충족 여부 >4. 생성하거나 변경할 파일 >5. 실행할 검증 명령과 WebUI Gate 항목 >6. 현재 확인된 위험, 충돌과 중단 조건 > 선행 조건이 충족되면 정식 작업 지시서의 허용 범위만 구현해 줘. 기존 사용자 변경을 보존하고 제외 범위의 기능은 추가하지 마. 실행하지 못한 검사는 통과로 기록하지 말고, 필수 검사에 실패하면 다음 단계로 진행하지 마. 구현·검증·문서 갱신 결과와 남은 작업을 마지막에 보고해 줘. 모든 필수 검사가 통과하면 이번 단계에서 변경한 파일만 정확한 경로로 스테이징하고 커밋은 실행하지 마. 마지막 보고에 스테이징한 파일 목록과 권장 커밋 메시지를 함께 적어 줘.

5. 사전 보고 검토 후 구현

Codex의 사전 보고 마지막에 선행 조건과 작업 범위가 충족되어 구현 진행 가능이라고 표시되면 구현을 계속하도록 지시합니다.

중단 또는 선행 조건 미충족으로 표시되면 구현하지 않고 Codex가 제시한 명령을 먼저 실행합니다.

중단이 되면 Codex 에게 직접지시 해서 수정을 요구하고, 실행을 다시 시킵니다.

완성본이 나올때 까지 이러한 진행을 반복적으로 해야 합니다.

지금 이 과정에서 나온 Codex 결과 설명물 입니다.

구현 결과 WebUI 실행

Frontend에서 실행합니다.

cd /home/apple2ne1/projects/vibe-coding-platform/frontend
npm run dev

터미널에서 다음과 비슷한 정보가 보여야 합니다.

Local:   http://localhost:5173/
Network: http://192.168.1.231:5173/
Network: http://172.20.0.1:5173/

Windows 관리 PC의 웹 브라우저에서 접속합니다.

http://192.168.1.231:5173

실제 Linux 서버 IP 주소가 다르면 해당 주소를 사용합니다. 화면이 열리면 이 절의 WebUI 확인 순서에 따라 Login과 Dashboard 구현 결과를 먼저 검증합니다. 정식 작업 지시서 해설은 검증 결과 기록과 커밋까지 마친 뒤 복습할 때 읽습니다.

잠시후, 다시 연결을 시도하면 안됩니다.

Codex 에게 직접 물어보고 해결하며 Vibe Coding 을 시작합니다.

여러가지 원인들을 제시합니다. 필요한 질문을 또 해서 원인을 찾아내야 하는 과정이 필요합니다.

Codex CLI 가 sudo 인증이 필요해 직접할 수 없으니, 아래 명령을 시행 후, 결과물을 보내달라고 합니다.

sudo ufw status verbose

결과를 copy 해서 codex 입력

방화벽으로 포트 5173 이 닫혀있으니 열어야 한다고 합니다.

Codex CLI 가 제시한 명령을 실행합니다.

sudo ufw allow from 192.168.1.0/24 to any port 5173 proto tcp
sudo ufw status verbose

방화벽 5173 port 개방 확인을 합니다.

npm run dev

npm run dev 실행으로 현재 Front 에서 vite 가 실행되어 아래 WebUI 를 보여주고 있습니다. Background 에서 실행하지 않았기 때문에, Ctrl+C 로 실행 중지시키면, 화면에 보여지는 것이 중지됩니다.

http://192.168.1.231:5731

만약 생성된 화면을 수정하고 싶으면, Codex CLI 에 수정해 달라고 하면 됩니다.

Codex 가 수정을 했습니다.

수정된 화면을 확인하려고 프로젝트 루트에서 npm run dev를 실행하였는데, package.json을 찾지 못했다는 오류가 발생합니다.

오류의 원인을 직접 판단하기 어렵다면 오류 메시를 copy 해서 Codex에 이유를 물어봅니다. 새 터미널을 열때 Split Terminal 로 열면 Codex CLI 가 실행중인 터미널과 Code 터미널을 좌우로 옮겨가며 바로 실행할 수 있습니다.

여기에선 가독성을 위해 한 터미널만 보이게 했습니다.

Codex는 frontend 폴더로 이동한 실행해야 한다고 알려줍니다.

cd /home/apple2ne1/projects/vibe-coding-platform/frontend
npm run dev

Windows 관리 PC의 웹 브라우저에서 Login 화면을 다시 열어 요청한 문구 크기가 적용되었는지 확인합니다.

‘차분하게 관리하고, 명확하게 확인하세요.’ 의 글씨가 원래크기의 1/2 로 작아졌습니다.

Vibe Coding 을 더 진행해서 원하는 디자인으로 변경해 나갑니다.

현재 구현 범위는 최소 관리자 대시보드까지입니다. 실제 계정을 등록한 단계가 아니므로 Codex의 완료 보고와 화면 안내에서 확인한 학습용 입력 조건을 사용하여 Continue to Dashboard를 선택합니다. 이 값은 운영 환경에서 재사용할 수 없는 공개 실습용 예시이며 실제 인증정보로 사용하지 않습니다.

이 Dashboard 도 Vibe Coding 으로 원하는 디자인으로 수정하실 수 있습니다.

6. Codex에 검증 결과 기록 요청

자동 검사와 Windows 관리 PC의 웹 브라우저 확인은 위 절차에서 이미 마쳤으므로 여기에서 다시 실행하지 않습니다. 사용자가 여러 기록 파일을 직접 열어 현재 단계를 맞출 필요도 없습니다.

아래 Prompt 하나를 Codex CLI에 전달하면 Codex가 기존 기록과 실제 검증 결과를 비교하고, 02단계 완료 상태가 문서마다 다르게 기록된 문제까지 함께 정리합니다. 요구사항 자체는 바꾸지 않고 현재 구현 상태와 검증 기록만 실제 결과에 맞춥니다.

• docs/development-guides/webui-gate.md
• docs/development-guides/local-development.md
• README.md
• docs/requirements/admin-platform.md

Codex CLI에 다음 Prompt를 그대로 전달합니다.

02단계 구현과 검증은 앞 절차에서 완료했어. 검증을 다시 실행하지 말고 현재 프로젝트의 코드, 기존 작업 기록과 아래 실제 확인 결과를 먼저 비교해 줘. > 사용자가 Windows 관리 PC의 웹 브라우저에서 직접 확인한 02단계 결과는 다음과 같아. > >- Login 화면 표시 확인 >- 잘못된 입력의 오류 표시 확인 >- Login에서 Dashboard로 이동 확인 >- Logout 후 Login 화면 복귀 확인 >- 새로고침 후 현재 단계에서 정한 Login 화면 복귀 확인 >- Keyboard를 사용한 Login과 Logout 조작 확인 >- Desktop과 Mobile 화면 구성 확인 >- Browser Console 오류 없음 확인 >- Browser Network에서 요청 실패와 Password 노출 없음 확인 > Codex가 앞에서 실행해 보고한 Frontend typecheck, lint, test와 production build 결과도 기존 기록에서 확인해 줘. 기존 기록에 실제로 확인할 수 없는 검사가 있으면 통과로 만들지 말고 미수행 또는 확인 불가로 남겨 줘. > 확인된 결과만 사용하여 다음 문서를 서로 일치하도록 갱신해 줘. > >- docs/development-guides/webui-gate.md >- 기존 기록을 삭제하거나 덮어쓰지 말고 02단계의 자동 검사와 Browser Gate 결과를 추가하거나 보완해 줘. 통과, 실패, 미수행과 확인 불가 항목을 구분해 줘. > >- docs/development-guides/local-development.md >- frontend 폴더에서 Vite 5173을 실행하고 중지하는 방법을 기록해 줘. >- Windows 관리 PC에서 접속하고 Login, Dashboard와 Logout을 확인하는 방법을 기록해 줘. > >- README.md >- 현재 구현 상태를 02단계 완료로 기록해 줘. >- Login과 Dashboard는 학습용 원형이며 실제 Backend 인증은 아직 없다는 제한을 유지해 줘. > >- docs/requirements/admin-platform.md >- 요구사항이나 화면 기준은 임의로 변경하지 마. >- 현재 구현 상태가 01단계로 남아 있거나 다른 문서와 충돌하면 실제 구현과 검증 결과에 맞춰 02단계 완료로 갱신해 줘. -> 화면 기준이 실제로 변경된 기록이 있을 때만 그 변경 이유를 보존하거나 보완해 줘. > 갱신 후 README.md, docs/requirements/admin-platform.md, docs/development-guides/local-development.md와 docs/development-guides/webui-gate.md의 현재 단계와 02단계 완료 상태가 서로 일치하는지 검사해 줘. > 작업을 마치면 비전공자도 이해할 수 있게 다음 내용만 보고해 줘. > >1. 변경한 파일 >2. 파일별로 기록한 실제 결과 >3. 네 문서의 현재 단계가 02단계 완료로 일치하는지 >4. 남은 실패, 미수행 또는 확인 불가 항목 >5. 03단계 진행 가능 여부 > 스테이징과 커밋은 실행하지 마.

Codex가 작업을 마치면 사용자가 네 문서의 내용을 직접 대조할 필요는 없습니다. 마지막 보고에서 03단계 진행 가능인지 확인합니다. 실패, 미수행 또는 확인 불가 항목이 없고 네 문서가 02단계 완료로 일치하면 7번으로 이동합니다. Codex가 아직 03단계 진행 불가라고 보고하면 다음 단계로 넘어가지 말고 마지막 보고 전체를 다시 Codex에 전달하여 남은 항목을 해결하도록 요청합니다.

7. 최종 변경 검토와 Commit

Codex가 완료 보고를 마치면 프로젝트 루트에서 현재 변경 파일을 확인하고 커밋할 파일을 스테이징합니다.

cd /home/apple2ne1/projects/vibe-coding-platform
git status --short
git add .
git --no-pager diff --cached --name-only
git diff --cached --check

스테이징 파일 목록이 Codex의 완료 보고와 같고 git diff --cached --check가 오류 없이 종료되면 단계 결과를 커밋합니다. 목록이 다르거나 검사가 실패하면 커밋하지 않고 터미널 출력 전체를 Codex에 전달해 스테이징 범위를 정리해 달라고 요청합니다.

git commit -m "feat: complete 02 step"

문서·검증만 수행한 단계라면 Codex가 완료 보고에 제시한 docs:, test: 또는 chore: 메시지를 사용합니다. 필수 검사가 실패하면 커밋으로 완료 상태를 만들거나 다음 단계 작업 지시서를 실행하지 않습니다.

정식 작업 지시서 해설

이 절은 새로운 작업을 지시하거나 추가 명령을 실행하는 단계가 아닙니다. 정식 작업 지시서 실행, 구현 결과 WebUI 검증, Codex의 검증 기록 갱신과 커밋까지 마친 뒤 읽는 복습용 해설입니다.

비전공자도 이번 단계에서 무엇을 만들었는지, 요구사항마다 어떤 이유가 있는지, 무엇을 검증해야 완료할 수 있는지를 이해할 수 있도록 정식 작업 지시서의 내용을 순서대로 풀어서 설명합니다. 실제 생성 파일과 구현 방식은 Codex의 완료 보고 및 현재 프로젝트를 기준으로 확인하며, 정식 작업 지시서에서 지정하지 않은 파일명이나 기능을 해설에서 임의로 확정하지 않습니다.

1. 이번 단계의 목적과 범위

이번 단계의 목적은 실제 인증 시스템을 완성하는 것이 아니라 React 화면에서 로그인과 최소 관리자 대시보드 사이의 사용자 흐름을 먼저 확인하는 것입니다. 구현 범위는 frontend/이며 다음 결과를 만듭니다.

• /login 로그인 화면
• 학습용 입력 조건을 만족했을 때 이동하는 /admin 화면
• 최소 Header, Sidebar 자리와 본문 영역
• 현재 단계의 임시 로그인 상태와 Logout 동작
• 데스크톱과 모바일에서 영역을 구분할 수 있는 반응형 화면 구성

Express API, 데이터베이스, 세션, Redis, Nginx, Docker와 Compose는 이 단계에서 추가하지 않습니다. 실제 메뉴 데이터와 Sidebar 펼침·접힘 동작도 06~07단계의 범위로 남깁니다. 이 경계를 지키면 화면 원형과 실제 인증 구현을 한 단계에서 섞지 않고 각각 검증할 수 있습니다.

02단계에서 채워진 주요 폴더와 파일

vibe-coding-platform/
├── docs/
│   └── work-orders/
│       └── 02-login-dashboard-ui.md
└── frontend/
    ├── package.json
    ├── package-lock.json
    ├── src/
    │   └── <Login과 Dashboard 화면을 구성하는 실제 소스 파일>
    └── <Vite가 생성한 기본 설정 파일>

02단계는 frontend/ 안에 React·Vite·TypeScript 화면 원형을 만듭니다. 컴포넌트와 스타일 파일명은 현재 Vite 구조를 확인한 뒤 정하므로, 정식 작업 지시서에 없는 이름을 해설에서 임의로 고정하지 않습니다.

2. 화면을 먼저 만드는 이유

백엔드와 데이터베이스를 연결하기 전에 화면 이동, 입력 오류, Logout과 관리자 화면 구성을 먼저 확인하면 이후 인증 기능을 연결할 때 변경 범위를 줄일 수 있습니다. 사용자는 먼저 화면 흐름과 화면 구성이 의도에 맞는지 판단하고, 다음 단계에서는 확인된 화면을 유지하면서 인증 방식만 점진적으로 교체할 수 있습니다.

참고 이미지 Attachments/admin-dashboard-reference-ui.webp는 완성 화면을 그대로 복사하는 기준이 아닙니다. Header, Sidebar와 본문 영역의 배치 및 차분한 회색 계열의 방향을 이해하기 위한 목업입니다. 이미지에서 확인할 수 없는 정확한 색상 코드, 크기와 간격은 필수 요구사항으로 추정하지 않습니다. 작성자가 화면 구성이나 색상 방향을 바꿨다면 실제 변경 이유와 결과를 완료 보고에 남기고, 사용자 검증 뒤 필요한 경우에만 요구사항 문서에 반영합니다.

3. 화면과 경로를 구성하는 요소

실제 파일명과 폴더 구성은 현재 프로젝트와 Codex의 완료 보고에서 확인합니다. 구현 방식이 달라도 다음 역할은 구분되어야 합니다.

• 로그인 페이지: 입력값, 빈 값과 잘못된 값의 오류 및 제출 동작을 표시합니다.
• 관리자 대시보드 페이지: 로그인 흐름이 성공했을 때 최소 관리자 화면을 표시합니다.
• 경로 설정: /login과 /admin 화면을 연결합니다.
• 임시 로그인 상태: 학습용 판정 결과와 Logout을 현재 웹 브라우저 메모리에서만 관리합니다.
• Vite 설정: 개발 서버를 0.0.0.0:5173에서 실행하고 지정한 포트를 사용할 수 없을 때 다른 포트로 자동 변경하지 않도록 strictPort를 적용합니다.

0.0.0.0은 Ubuntu 서버 외부의 Windows 관리 PC에서도 Vite 개발 서버에 접속할 수 있게 수신 범위를 정하는 설정입니다. strictPort는 5173이 이미 사용 중일 때 Vite가 임의의 다른 포트로 바뀌는 것을 막아 문서의 접속 주소와 실제 실행 주소가 달라지는 문제를 방지합니다.

4. 학습용 로그인 흐름의 동작 원리

사용자가 로그인 폼을 제출하면 프런트엔드에서 빈 값과 현재 구현이 정한 학습용 입력 조건을 확인합니다. 조건을 만족하지 않으면 로그인 화면에 오류를 표시하고, 만족하면 React 경로가 /admin으로 이동합니다. Logout을 실행하면 임시 상태를 지우고 /login으로 돌아갑니다.

이 판정은 웹 브라우저에 전달된 프런트엔드 코드 안에서 수행되므로 사용자가 조건을 확인하거나 우회할 수 있습니다. 따라서 실제 인증이나 관리자 경로 보호로 사용할 수 없습니다. 코드와 화면에도 학습용 임시 판정이라는 사실이 명확히 표시되어야 하며, WebUI 검증에서 해당 안내가 실제로 보이는지 확인합니다.

학습용 입력값은 운영 환경에서 재사용할 수 없는 공개 실습용 예시입니다. 실제 암호나 인증정보를 사용하지 않으며 암호를 localStorage 또는 sessionStorage에 저장하지 않습니다. 로그인 상태도 메모리에만 있으므로 새로고침하면 사라지고 /login으로 돌아가는 것이 현재 단계의 의도한 동작입니다.

5. 자동 검사와 WebUI 검증을 함께 사용하는 이유

npm run build는 TypeScript와 프런트엔드 소스가 빌드 가능한지 확인하지만 실제 사용자 흐름과 화면 구성을 보장하지 않습니다. 따라서 변경 후에는 다음 WebUI Gate도 실제 웹 브라우저에서 확인해야 합니다.

• 빈 값과 현재 구현에서 허용하지 않는 입력에 오류가 표시됩니다.
• 확인된 공개 실습용 입력 조건을 사용하면 /admin으로 이동합니다.
• 로그인 화면에 실제 인증이 아닌 학습용 판정이라는 안내가 표시됩니다.
• Logout과 새로고침 뒤 /login으로 돌아갑니다.
• 키보드만으로 입력 필드와 버튼을 사용할 수 있습니다.
• 데스크톱과 모바일에서 로그인 화면, Header, Sidebar 자리와 본문 영역이 구분됩니다.
• 개발자 도구의 Console에 예상하지 못한 오류가 없고 Network에서 요청 실패나 암호 노출이 없습니다.

02단계 시작 시 실행 가능한 기존 프런트엔드가 없었다면 변경 전 Browser Gate는 미수행—기존 Frontend 없음으로 기록할 수 있습니다. 그러나 변경 후 npm run build와 WebUI Gate는 반드시 실제로 수행해야 합니다. 실행하지 않은 검사를 통과로 기록하지 않으며 필수 검사가 실패하면 완료 또는 03단계 진행 가능으로 판정하지 않습니다.

6. 정식 작업 지시서와 검증 기록의 역할

docs/work-orders/02-login-dashboard-ui.md는 이번 단계의 구현 범위, 금지 사항과 완료 조건을 고정하는 기준 문서입니다. 구현 중에는 이 파일을 유일한 작업 기준으로 사용하고 docs/requirements/admin-platform.md, 검증 기록 문서와 README.md를 미리 완료 상태로 바꾸지 않습니다.

사용자가 실제 WebUI 검증을 마친 뒤에는 별도의 Codex에 검증 결과 기록 요청 Prompt를 사용합니다. Codex는 실제 프로젝트, 완료 보고와 사용자 확인 결과를 다시 대조하고 확인된 사실만 다음 문서에 기록합니다.

webui-gate.md에 기록되는 내용

docs/development-guides/webui-gate.md에는 변경 전 Gate의 통과 또는 미수행 사유, 변경 후 빌드 결과와 로그인·Dashboard·Logout WebUI Gate를 통과·실패·미수행으로 구분하여 기록합니다.

local-development.md에 기록되는 내용

docs/development-guides/local-development.md에는 확인된 Node.js와 npm 조건, frontend/ 패키지 설치 및 Vite 실행 명령, 0.0.0.0:5173과 strictPort, Windows 관리 PC의 접속 주소와 종료 방법을 기록합니다. frontend/node_modules/와 frontend/dist/가 Git에서 제외되는지도 실제 결과에 따라 남깁니다.

README.md에 기록되는 내용

루트 README.md에는 확인된 02단계 결과만 사용하여 현재 단계, 완료된 기능, 개발 실행 방법과 현재 제한을 기록합니다. 실제로 구현하거나 검증하지 않은 로딩 상태, 인증 기능 또는 백엔드 연결을 완료 기능으로 추가하지 않습니다.

## 현재 단계

02단계: 로그인과 관리자 대시보드 화면 먼저 만들기

## 완료된 기능

- React와 Vite 기반 프런트엔드 프로젝트
- 학습용 임시 관리자 로그인 화면
- `/login`과 보호 전 단계의 `/admin` 화면 전환
- Logout과 최소 관리자 대시보드 화면

## 개발 실행

- 접속 주소: `http://<서버-IP>:5173`
- 실행: `frontend/`에서 `npm run dev`
- 검증: `npm run build`와 공통 WebUI Gate

## 현재 제한

- 실제 백엔드 인증, 데이터베이스와 세션은 아직 연결하지 않았습니다.
- 학습용 로그인 상태는 메모리에만 있으므로 새로고침하면 사라집니다.

7. 제한과 다음 단계

현재 단계의 로그인은 화면 흐름을 확인하기 위한 프런트엔드 원형입니다. 03단계에서는 로그인 판정을 Express 백엔드로 옮기고, 04단계에서는 MySQL의 관리자 계정과 암호 해시를 사용합니다. 로그인 상태 유지는 05단계의 세션에서 구현합니다.

따라서 02단계 완료는 관리자 인증이 완성되었다는 의미가 아닙니다. 프런트엔드 화면 원형, 학습용 로그인 흐름, 반응형 화면 구성과 검증 기준이 확인되어 다음 인증 단계로 진행할 준비가 되었다는 의미입니다.

다음 단계

다음 글에서는 화면 안의 임시 판정을 Express API 호출로 교체합니다.

• 이전: 1단계: VS Code 원격 서버에서 Vibe Coding 환경 준비와 Codex CLI 실행
• 다음: 3단계: Express API 연결하기

참고 자료 및 출처

• Vite Getting Started: React TypeScript Template과 Vite Project 생성 방식 확인. 확인일: 2026-07-26
• Vite Server Options: host, port, strictPort 설정 확인. 확인일: 2026-07-26
• React Router Installation: Declarative Route 설치와 구성 방식 확인. 확인일: 2026-07-26