UI-Design

UI-Design은 Service-Front에 맞춰 Vue 기반으로 정렬한 디자인/연동 프로토타입입니다. 현재 작업 범위는 Main 구현을 참고해 UI를 병합 가능한 구조로 맞추는 것이며, Service-Back과 Service-Front는 수정하지 않습니다.

실행

npm install
npm run dev

기본 개발 서버:

http://127.0.0.1:5173/

현재 작업 프리뷰처럼 고정 포트로 확인하려면:

npm run dev -- --host :: --port 5176 --strictPort

http://localhost:5176/
http://127.0.0.1:5176/

빌드 확인:

npm run build

기술 스택

Service-Front와 같은 축으로 맞췄습니다.

영역	사용 기술
Framework	Vue 3
Build Tool	Vite
Routing	vue-router
Client State	Pinia
HTTP Client	axios
Styling	CSS variables + plain CSS

React, Tailwind, shadcn/Radix 기반 source와 설정은 제거했습니다.

Main 정렬 기준

Service-Front의 다음 구조를 UI-Design에 반영했습니다.

• src/main.js: createApp, createPinia, router, auth.restoreUser() 후 mount
• src/router/index.js: Main route 이름과 path 기준 정렬
• src/stores/auth.js: Pinia auth store, accessToken localStorage 저장
• src/api/index.js: axios instance, unwrapApiResponse, JWT request interceptor
• src/api/problems.js: GET /problems, GET /problems/{problemId}
• src/api/board.js: 게시글/댓글 CRUD endpoint 경계
• src/api/adminProblemPublications.js: 문제 bank 조회, 공개 등록/해제
• src/api/members.js: 내 프로필 조회/수정/탈퇴 경계

API 모드

기본값은 백엔드 없이 브라우저 preview가 열리도록 mock contract입니다.

npm run dev

실제 Service API에 연결하려면 아래처럼 실행합니다.

VITE_USE_SERVICE_API=true VITE_API_BASE_URL=http://localhost:8080/api npm run dev

구현된 Vue 화면

Path	화면
/	Main 정렬 대시보드
/login	로그인
/signup	회원가입
/account/restore	탈퇴 계정 복구
/oauth/callback	OAuth callback 처리
/mypage	내 정보
/problems	공개 문제 목록
/problems/:problemId	문제 상세
/board	게시판 목록
/board/write	게시글 작성
/board/:id	게시글 상세 + 댓글
/admin/problem-publications	관리자 문제 공개 관리

아직 Main에 없는 UI 후보

아래 기능은 라우트와 placeholder만 유지합니다. 실제 기능으로 승격하려면 Service-Back endpoint와 DTO가 먼저 필요합니다.

• CS 트랙
• 코스
• 랭킹
• 뱃지
• 캐릭터 성장
• AI 생성기
• Agent Monitor
• 설정 저장

변경 관리

중요 변경은 루트 log/ 폴더에 기록합니다.

• log/ui-design-main-feature-tracker.csv: 기능별 UI/Main 구현 여부 관리
• log/2026-06-16-ui-design-vue-stack-alignment.md: Vue 스택 전환 내역