ID: key_26_30_05_26_ui_layout_01 Created date: 5월 30 2026 토요일
연관 문서
요구사항 정의
| 항목 | 내용 |
|---|---|
| 진입점 | 기존 Home 화면에 “CIRA” 버튼 추가 |
| 분리 방식 | 버튼 클릭 시 기존 UI Layout과 완전히 다른 별도 레이아웃으로 전환 |
| 레이아웃 기준 | Jira와 동일한 수준의 사이드바 + 콘텐츠 구조 |
| UX | 사용자가 기존 서비스와 명확히 다른 경험 인식 |
레이아웃 구조 설계
graph LR A[기존 App Layout<br>헤더 + 기본 콘텐츠] -->|CIRA 버튼 클릭| B[CIRA Layout<br>Jira 스타일] B --> C[글로벌 상단바<br>GlobalTopBar] B --> D[좌측 프로젝트 사이드바<br>ProjectSidebar] B --> E[좌측 네비게이션<br>NavSidebar] B --> F[메인 콘텐츠 영역<br>MainContent] D -->|프로젝트 선택| E E --> G[Board] E --> H[Backlog] E --> I[Issues] E --> J[Reports] E --> K[Settings]
CIRA Layout 구성 요소
┌─────────────────────────────────────────────────────────┐
│ GlobalTopBar (고정, 높이 56px) │
│ [≡ CIRA] [Search] [Create] [Notification] [Avatar] │
├──────┬──────────┬───────────────────────────────────────┤
│ Pro │ │ │
│ ject │ Nav │ Main Content Area │
│ Side │ Sidebar │ │
│ bar │ │ (Board / Backlog / Issue Detail) │
│(48px)│ (200px) │ │
│ │ Board │ │
│ [P1] │ Backlog │ │
│ [P2] │ Issues │ │
│ [P3] │ Reports │ │
│ │ Settings │ │
│ [+] │ │ │
└──────┴──────────┴───────────────────────────────────────┘
라우팅 구조
/ (기존 Home)
│
└── /cira ← CiraLayout 적용 시작점
├── /cira/projects ← 프로젝트 목록 (선택 전)
└── /cira/projects/:projectId
├── /board ← 칸반 보드
├── /backlog ← 백로그
├── /issues ← 이슈 목록
├── /issues/:issueId ← 이슈 상세
├── /reports ← 리포트
└── /settings ← 프로젝트 설정
구현 방안
1. Home에 CIRA 진입 버튼 추가
// pages/Home.tsx (기존 홈 화면)
import { useNavigate } from 'react-router-dom';
export default function Home() {
const navigate = useNavigate();
return (
<div className="home-container">
{/* 기존 콘텐츠 유지 */}
{/* CIRA 진입 버튼 */}
<button
className="cira-entry-btn"
onClick={() => navigate('/cira/projects')}
>
<CiraIcon />
CIRA 프로젝트 관리
</button>
</div>
);
}2. CiraLayout 컴포넌트 신규 생성
// layouts/CiraLayout.tsx
import GlobalTopBar from '@/components/cira/GlobalTopBar';
import ProjectSidebar from '@/components/cira/ProjectSidebar';
import NavSidebar from '@/components/cira/NavSidebar';
import { Outlet, useParams } from 'react-router-dom';
export default function CiraLayout() {
const { projectId } = useParams();
return (
<div className="cira-root">
<GlobalTopBar />
<div className="cira-body">
<ProjectSidebar />
{projectId && <NavSidebar projectId={projectId} />}
<main className="cira-main">
<Outlet />
</main>
</div>
</div>
);
}3. 라우터 설정 (React Router v6)
// router/index.tsx
import CiraLayout from '@/layouts/CiraLayout';
import DefaultLayout from '@/layouts/DefaultLayout'; // 기존 레이아웃
const router = createBrowserRouter([
{
path: '/',
element: <DefaultLayout />, // 기존 레이아웃
children: [
{ index: true, element: <Home /> },
{ path: 'dashboard', element: <Dashboard /> },
// ... 기존 라우트
],
},
{
path: '/cira',
element: <CiraLayout />, // CIRA 전용 레이아웃
children: [
{ index: true, element: <Navigate to="projects" replace /> },
{ path: 'projects', element: <CiraProjectList /> },
{
path: 'projects/:projectId',
children: [
{ index: true, element: <Navigate to="board" replace /> },
{ path: 'board', element: <KanbanBoard /> },
{ path: 'backlog', element: <Backlog /> },
{ path: 'issues', element: <IssueList /> },
{ path: 'issues/:issueId', element: <IssueDetail /> },
{ path: 'reports', element: <Reports /> },
{ path: 'settings', element: <ProjectSettings /> },
],
},
],
},
]);4. 스타일 분리 전략
CIRA 전용 CSS는 기존 스타일과 충돌 방지를 위해 .cira-root 스코프로 분리:
/* styles/cira-layout.css */
.cira-root {
display: flex;
flex-direction: column;
height: 100vh;
background: #f4f5f7;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cira-body {
display: flex;
flex: 1;
overflow: hidden;
}
.cira-main {
flex: 1;
overflow-y: auto;
padding: 24px;
}
/* GlobalTopBar */
.cira-topbar {
height: 56px;
background: #0052cc; /* Jira 블루 */
color: #fff;
display: flex;
align-items: center;
padding: 0 16px;
gap: 12px;
position: sticky;
top: 0;
z-index: 100;
}
/* ProjectSidebar */
.cira-project-sidebar {
width: 48px;
background: #0747a6;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
gap: 8px;
}
/* NavSidebar */
.cira-nav-sidebar {
width: 200px;
background: #fff;
border-right: 1px solid #dfe1e6;
padding: 16px 0;
}주요 컴포넌트 목록
| 컴포넌트 | 경로 | 설명 |
|---|---|---|
CiraLayout | layouts/CiraLayout.tsx | CIRA 전용 레이아웃 루트 |
GlobalTopBar | components/cira/GlobalTopBar.tsx | 상단 고정 바 |
ProjectSidebar | components/cira/ProjectSidebar.tsx | 좌측 프로젝트 아이콘 목록 |
NavSidebar | components/cira/NavSidebar.tsx | 프로젝트 내 메뉴 |
CiraProjectList | pages/cira/ProjectList.tsx | 프로젝트 선택 화면 |
KanbanBoard | pages/cira/Board.tsx | 칸반 보드 |
Backlog | pages/cira/Backlog.tsx | 백로그 |
IssueList | pages/cira/IssueList.tsx | 이슈 목록 |
IssueDetail | pages/cira/IssueDetail.tsx | 이슈 상세 |
Claude Code 작업 수행서
web-plate에서 CIRA 전용 레이아웃을 구성해줘.
[경로]
- C:\workspace\tsh\boilerplate\fe\web-plate
[수행 순서]
1. src/layouts/CiraLayout.tsx 신규 생성
- GlobalTopBar, ProjectSidebar, NavSidebar, <Outlet /> 포함
- Jira 스타일 3단 레이아웃 (프로젝트 사이드바 + 네비 사이드바 + 메인)
2. src/components/cira/ 디렉토리 생성 후 아래 컴포넌트 신규 작성
- GlobalTopBar.tsx: 상단 바 (CIRA 로고, 검색, 생성 버튼, 알림, 아바타)
- ProjectSidebar.tsx: 좌측 프로젝트 아이콘 목록 (GET /api/v1/projects 호출)
- NavSidebar.tsx: Board, Backlog, Issues, Reports, Settings 메뉴
3. src/styles/cira-layout.css 신규 작성
- .cira-root 스코프로 기존 스타일과 완전 분리
- 상단바 배경색 #0052cc (Jira 블루)
- 프로젝트 사이드바 배경색 #0747a6
4. 라우터 파일(router/index.tsx 또는 App.tsx)에 /cira 경로 추가
- /cira/* → CiraLayout 적용
- 기존 / 경로는 DefaultLayout 유지
5. 기존 Home 페이지에 CIRA 진입 버튼 추가
- 버튼 클릭 시 /cira/projects 로 이동
- Jira 로고 스타일 버튼 (파란색 배경, 흰색 텍스트)
[완료 기준]
- Home에서 버튼 클릭 시 /cira/projects 로 이동
- CIRA 내 페이지에서는 기존 레이아웃이 아닌 CiraLayout 렌더링 확인
- 브라우저 직접 URL 접근 시에도 CiraLayout 유지