feat(sprint-001): backend Nest.js + Prisma7 adapter setup, frontend Next.js UI

- Backend: NestJS + Prisma 7 (MariaDB adapter) scaffold - PrismaService with @prisma/adapter-mariadb driver - SistersService: SSH 상태 체크 with graceful fallback - HealthController: GET /health - 시드 스크립트: 자매 4명 초기 데이터 - 테스트 5/5 pass - Frontend: Next.js 16 + styled-components - styled-components SSR registry (next.config 컴파일러) - 다크 테마 글로벌 스타일 + 테마 토큰 - SisterCard: glassmorphism 상태 카드 (온라인 pulse 애니메이션) - StatusBadge: 상태 표시 컴포넌트 - Sidebar: 접이식 네비게이션 - 대시보드 메인 페이지 (API 미연결 시 mock 데이터 fallback) - build 성공 확인 - DB credential 이랑이 대기 중
2026-04-04 11:06:44 +09:00
parent 930d84d5c4
commit 79135f24b0
56 changed files with 19108 additions and 2 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,16 @@
+# Database (Backend)
+DATABASE_URL="mysql://hanarang:PASSWORD@10.10.10.146:33006/hanarang_dashboard"
+
+# SSH
+SSH_KEY_PATH="/home/narang/.ssh/id_rsa"
+
+# Gitea
+GITEA_TOKEN="your_gitea_token_here"
+GITEA_BASE_URL="https://git.nabomhalang.co.kr"
+
+# Backend
+BACKEND_PORT=3005
+
+# Frontend
+FRONTEND_PORT=3004
+NEXT_PUBLIC_API_URL="http://localhost:3005"
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,46 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Build outputs
+dist/
+build/
+.next/
+out/
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Prisma
+*.db
+*.db-journal
+/backend/prisma/migrations/*.sql.bak
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Test coverage
+coverage/
+.nyc_output/
+
+# TypeScript
+*.tsbuildinfo
--- a/README.md
+++ b/README.md
@@ -1,3 +1,63 @@
-# hanarang-dashboard
+# 하나랑 대시보드

-하나랑 대시보드 — 4자매 멀티에이전트 관제 대시보드
+4자매 멀티에이전트 파이프라인 관제 대시보드.
+자기야가 한눈에 전체 현황을 파악하고 관리할 수 있는 화면.
+
+## 기술 스택
+
+| 레이어 | 기술 |
+|--------|------|
+| Frontend | Next.js + styled-components |
+| Backend | Nest.js + Prisma |
+| DB | MariaDB |
+| 도메인 (FE) | `hanarang.nabomhalang.co.kr` |
+| 도메인 (BE) | `hanarang-api.nabomhalang.co.kr` |
+
+## 프로젝트 구조
+
+```
+hanarang-dashboard/
+├── frontend/          # Next.js (포트 3004)
+├── backend/           # Nest.js (포트 3005)
+├── .gitignore
+├── .env.example
+└── README.md
+```
+
+## 실행 방법
+
+### 사전 준비
+
+1. `.env.example`을 참고해 `backend/.env` 파일 생성
+2. SSH 키 설정 (`SSH_KEY_PATH`)
+
+### Backend
+
+```bash
+cd backend
+npm install
+npx prisma migrate dev
+npx prisma db seed
+npm run dev
+```
+
+### Frontend
+
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+## 환경 변수
+
+루트 `.env.example` 참조.
+
+## 자매 담당
+
+| 역할 | 이름 | 담당 |
+|------|------|------|
+| 기획 | 하랑이 | Orchestrator |
+| 개발 | 나랑이 | Generator |
+| 검증 | 다랑이 | Evaluator |
+| 인프라 | 이랑이 | Infra Manager |
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -0,0 +1,3 @@
+DATABASE_URL="mysql://hanarang:PASSWORD@10.10.10.146:33006/hanarang_dashboard"
+SSH_KEY_PATH="/home/narang/.ssh/id_rsa"
+BACKEND_PORT=3005
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+# Keep environment variables out of version control
+.env
+
+/generated/prisma
--- a/backend/.prettierrc
+++ b/backend/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
--- a/backend/README.md
+++ b/backend/README.md
@@ -0,0 +1,98 @@
+<p align="center">
+  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
+</p>
+
+[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
+[circleci-url]: https://circleci.com/gh/nestjs/nest
+
+  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
+    <p align="center">
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
+<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
+<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
+<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
+<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
+  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" alt="Donate us"/></a>
+    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
+  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow" alt="Follow us on Twitter"></a>
+</p>
+  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
+  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
+
+## Description
+
+[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
+
+## Project setup
+
+```bash
+$ npm install
+```
+
+## Compile and run the project
+
+```bash
+# development
+$ npm run start
+
+# watch mode
+$ npm run start:dev
+
+# production mode
+$ npm run start:prod
+```
+
+## Run tests
+
+```bash
+# unit tests
+$ npm run test
+
+# e2e tests
+$ npm run test:e2e
+
+# test coverage
+$ npm run test:cov
+```
+
+## Deployment
+
+When you're ready to deploy your NestJS application to production, there are some key steps you can take to ensure it runs as efficiently as possible. Check out the [deployment documentation](https://docs.nestjs.com/deployment) for more information.
+
+If you are looking for a cloud-based platform to deploy your NestJS application, check out [Mau](https://mau.nestjs.com), our official platform for deploying NestJS applications on AWS. Mau makes deployment straightforward and fast, requiring just a few simple steps:
+
+```bash
+$ npm install -g @nestjs/mau
+$ mau deploy
+```
+
+With Mau, you can deploy your application in just a few clicks, allowing you to focus on building features rather than managing infrastructure.
+
+## Resources
+
+Check out a few resources that may come in handy when working with NestJS:
+
+- Visit the [NestJS Documentation](https://docs.nestjs.com) to learn more about the framework.
+- For questions and support, please visit our [Discord channel](https://discord.gg/G7Qnnhy).
+- To dive deeper and get more hands-on experience, check out our official video [courses](https://courses.nestjs.com/).
+- Deploy your application to AWS with the help of [NestJS Mau](https://mau.nestjs.com) in just a few clicks.
+- Visualize your application graph and interact with the NestJS application in real-time using [NestJS Devtools](https://devtools.nestjs.com).
+- Need help with your project (part-time to full-time)? Check out our official [enterprise support](https://enterprise.nestjs.com).
+- To stay in the loop and get updates, follow us on [X](https://x.com/nestframework) and [LinkedIn](https://linkedin.com/company/nestjs).
+- Looking for a job, or have a job to offer? Check out our official [Jobs board](https://jobs.nestjs.com).
+
+## Support
+
+Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
+
+## Stay in touch
+
+- Author - [Kamil Myśliwiec](https://twitter.com/kammysliwiec)
+- Website - [https://nestjs.com](https://nestjs.com/)
+- Twitter - [@nestframework](https://twitter.com/nestframework)
+
+## License
+
+Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).
--- a/backend/eslint.config.mjs
+++ b/backend/eslint.config.mjs
@@ -0,0 +1,35 @@
+// @ts-check
+import eslint from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['eslint.config.mjs'],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  eslintPluginPrettierRecommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      sourceType: 'commonjs',
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
+      "prettier/prettier": ["error", { endOfLine: "auto" }],
+    },
+  },
+);
--- a/backend/nest-cli.json
+++ b/backend/nest-cli.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "deleteOutDir": true
+  }
+}
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "backend",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json",
+    "dev": "nest start --watch"
+  },
+  "dependencies": {
+    "@nestjs/common": "^11.0.1",
+    "@nestjs/config": "^4.0.3",
+    "@nestjs/core": "^11.0.1",
+    "@nestjs/platform-express": "^11.0.1",
+    "@prisma/adapter-mariadb": "^7.6.0",
+    "@prisma/client": "^7.6.0",
+    "dotenv": "^17.4.0",
+    "mariadb": "^3.5.2",
+    "node-ssh": "^13.2.1",
+    "prisma": "^7.6.0",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.1"
+  },
+  "prisma": {
+    "seed": "ts-node prisma/seed.ts"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.18.0",
+    "@nestjs/cli": "^11.0.0",
+    "@nestjs/schematics": "^11.0.0",
+    "@nestjs/testing": "^11.0.1",
+    "@types/express": "^5.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.0",
+    "@types/supertest": "^7.0.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "globals": "^17.0.0",
+    "jest": "^30.0.0",
+    "prettier": "^3.4.2",
+    "source-map-support": "^0.5.21",
+    "supertest": "^7.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  }
+}
--- a/backend/prisma.config.ts
+++ b/backend/prisma.config.ts
@@ -0,0 +1,14 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env["DATABASE_URL"],
+  },
+});
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -0,0 +1,80 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "mysql"
+}
+
+model SisterConfig {
+  id          Int       @id @default(autoincrement())
+  name        String    @unique // harang, narang, darang, erang
+  ip          String
+  user        String
+  lxcId       Int
+  sshKeyPath  String?
+  lastSeen    DateTime?
+  status      String    @default("unknown") // online, offline, working, unknown
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+
+  activityLogs ActivityLog[]
+}
+
+model Project {
+  id          Int      @id @default(autoincrement())
+  giteaId     Int      @unique
+  name        String
+  repoUrl     String
+  description String?
+  status      String   @default("active") // active, completed, archived
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  sprints      Sprint[]
+  activityLogs ActivityLog[]
+}
+
+model Sprint {
+  id          Int       @id @default(autoincrement())
+  projectId   Int
+  project     Project   @relation(fields: [projectId], references: [id])
+  number      Int
+  name        String
+  status      String    @default("pending") // pending, in_progress, review, done, failed
+  startedAt   DateTime?
+  completedAt DateTime?
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+
+  tasks Task[]
+}
+
+model Task {
+  id        Int      @id @default(autoincrement())
+  sprintId  Int
+  sprint    Sprint   @relation(fields: [sprintId], references: [id])
+  taskId    String   // "TASK-001"
+  title     String
+  assignee  String   // harang, narang, darang, erang
+  status    String   @default("pending") // pending, in_progress, review, done, failed, blocked, escalated
+  iteration Int      @default(0)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model ActivityLog {
+  id        Int           @id @default(autoincrement())
+  sisterId  Int?
+  sister    SisterConfig? @relation(fields: [sisterId], references: [id])
+  projectId Int?
+  project   Project?      @relation(fields: [projectId], references: [id])
+  action    String
+  detail    String?       @db.Text
+  createdAt DateTime      @default(now())
+
+  @@index([createdAt])
+}
--- a/backend/prisma/seed.ts
+++ b/backend/prisma/seed.ts
@@ -0,0 +1,40 @@
+import { PrismaClient } from '@prisma/client';
+import { PrismaMariaDb } from '@prisma/adapter-mariadb';
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+const dbUrl = process.env.DATABASE_URL ?? '';
+const adapter = new PrismaMariaDb(dbUrl);
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  console.log('🌱 Seeding SisterConfig...');
+
+  const sisters = [
+    { name: 'harang', ip: '10.10.10.112', user: 'harang', lxcId: 104 },
+    { name: 'narang', ip: '10.10.10.216', user: 'narang', lxcId: 105 },
+    { name: 'darang', ip: '10.10.10.136', user: 'darang', lxcId: 106 },
+    { name: 'erang', ip: '10.10.10.163', user: 'erang', lxcId: 107 },
+  ];
+
+  for (const sister of sisters) {
+    await prisma.sisterConfig.upsert({
+      where: { name: sister.name },
+      update: { ip: sister.ip, user: sister.user, lxcId: sister.lxcId },
+      create: sister,
+    });
+    console.log(`  ✅ ${sister.name} (${sister.ip})`);
+  }
+
+  console.log('✅ Seed complete');
+}
+
+main()
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => {
+    await prisma.$disconnect();
+  });
--- a/backend/src/app.controller.spec.ts
+++ b/backend/src/app.controller.spec.ts
@@ -0,0 +1,22 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+describe('AppController', () => {
+  let appController: AppController;
+
+  beforeEach(async () => {
+    const app: TestingModule = await Test.createTestingModule({
+      controllers: [AppController],
+      providers: [AppService],
+    }).compile();
+
+    appController = app.get<AppController>(AppController);
+  });
+
+  describe('root', () => {
+    it('should return "Hello World!"', () => {
+      expect(appController.getHello()).toBe('Hello World!');
+    });
+  });
+});
--- a/backend/src/app.controller.ts
+++ b/backend/src/app.controller.ts
@@ -0,0 +1,12 @@
+import { Controller, Get } from '@nestjs/common';
+import { AppService } from './app.service';
+
+@Controller()
+export class AppController {
+  constructor(private readonly appService: AppService) {}
+
+  @Get()
+  getHello(): string {
+    return this.appService.getHello();
+  }
+}
--- a/backend/src/app.module.ts
+++ b/backend/src/app.module.ts
@@ -0,0 +1,19 @@
+import { Module } from '@nestjs/common';
+import { ConfigModule } from '@nestjs/config';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+import { PrismaModule } from './prisma/prisma.module';
+import { SistersModule } from './sisters/sisters.module';
+import { HealthModule } from './health/health.module';
+
+@Module({
+  imports: [
+    ConfigModule.forRoot({ isGlobal: true }),
+    PrismaModule,
+    SistersModule,
+    HealthModule,
+  ],
+  controllers: [AppController],
+  providers: [AppService],
+})
+export class AppModule {}
--- a/backend/src/app.service.ts
+++ b/backend/src/app.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class AppService {
+  getHello(): string {
+    return 'Hello World!';
+  }
+}
--- a/backend/src/health/health.controller.spec.ts
+++ b/backend/src/health/health.controller.spec.ts
@@ -0,0 +1,18 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { HealthController } from './health.controller';
+
+describe('HealthController', () => {
+  let controller: HealthController;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      controllers: [HealthController],
+    }).compile();
+
+    controller = module.get<HealthController>(HealthController);
+  });
+
+  it('GET /health returns { status: ok }', () => {
+    expect(controller.check()).toEqual({ status: 'ok' });
+  });
+});
--- a/backend/src/health/health.controller.ts
+++ b/backend/src/health/health.controller.ts
@@ -0,0 +1,9 @@
+import { Controller, Get } from '@nestjs/common';
+
+@Controller('health')
+export class HealthController {
+  @Get()
+  check() {
+    return { status: 'ok' };
+  }
+}
--- a/backend/src/health/health.module.ts
+++ b/backend/src/health/health.module.ts
@@ -0,0 +1,7 @@
+import { Module } from '@nestjs/common';
+import { HealthController } from './health.controller';
+
+@Module({
+  controllers: [HealthController],
+})
+export class HealthModule {}
--- a/backend/src/main.ts
+++ b/backend/src/main.ts
@@ -0,0 +1,10 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  app.enableCors();
+  await app.listen(process.env.BACKEND_PORT ?? 3005);
+  console.log(`🚀 Backend running on port ${process.env.BACKEND_PORT ?? 3005}`);
+}
+bootstrap();
--- a/backend/src/prisma/prisma.module.ts
+++ b/backend/src/prisma/prisma.module.ts
@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { ConfigModule } from '@nestjs/config';
+import { PrismaService } from './prisma.service';
+
+@Module({
+  imports: [ConfigModule],
+  providers: [PrismaService],
+  exports: [PrismaService],
+})
+export class PrismaModule {}
--- a/backend/src/prisma/prisma.service.ts
+++ b/backend/src/prisma/prisma.service.ts
@@ -0,0 +1,21 @@
+import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { PrismaClient } from '@prisma/client';
+import { PrismaMariaDb } from '@prisma/adapter-mariadb';
+
+@Injectable()
+export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
+  constructor(config: ConfigService) {
+    const dbUrl = config.get<string>('DATABASE_URL') ?? '';
+    const adapter = new PrismaMariaDb(dbUrl);
+    super({ adapter });
+  }
+
+  async onModuleInit() {
+    await this.$connect();
+  }
+
+  async onModuleDestroy() {
+    await this.$disconnect();
+  }
+}
--- a/backend/src/sisters/sisters.controller.ts
+++ b/backend/src/sisters/sisters.controller.ts
@@ -0,0 +1,12 @@
+import { Controller, Get } from '@nestjs/common';
+import { SistersService } from './sisters.service';
+
+@Controller('api/sisters')
+export class SistersController {
+  constructor(private readonly sistersService: SistersService) {}
+
+  @Get()
+  async getSistersStatus() {
+    return this.sistersService.getAllSistersStatus();
+  }
+}
--- a/backend/src/sisters/sisters.module.ts
+++ b/backend/src/sisters/sisters.module.ts
@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { SistersController } from './sisters.controller';
+import { SistersService } from './sisters.service';
+import { SshService } from './ssh.service';
+import { PrismaModule } from '../prisma/prisma.module';
+
+@Module({
+  imports: [PrismaModule],
+  controllers: [SistersController],
+  providers: [SistersService, SshService],
+})
+export class SistersModule {}
--- a/backend/src/sisters/sisters.service.spec.ts
+++ b/backend/src/sisters/sisters.service.spec.ts
@@ -0,0 +1,82 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { SistersService } from './sisters.service';
+import { SshService } from './ssh.service';
+import { PrismaService } from '../prisma/prisma.service';
+import { ConfigService } from '@nestjs/config';
+
+describe('SistersService', () => {
+  let service: SistersService;
+  let sshService: jest.Mocked<SshService>;
+  let prismaService: jest.Mocked<PrismaService>;
+
+  const mockSisters = [
+    { id: 1, name: 'harang', ip: '10.10.10.112', user: 'harang', lxcId: 104, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+    { id: 2, name: 'narang', ip: '10.10.10.216', user: 'narang', lxcId: 105, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+    { id: 3, name: 'darang', ip: '10.10.10.136', user: 'darang', lxcId: 106, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+    { id: 4, name: 'erang', ip: '10.10.10.163', user: 'erang', lxcId: 107, sshKeyPath: null, lastSeen: null, status: 'unknown', createdAt: new Date(), updatedAt: new Date() },
+  ];
+
+  beforeEach(async () => {
+    const mockSsh = {
+      executeCommand: jest.fn(),
+    };
+
+    const mockPrisma = {
+      sisterConfig: {
+        findMany: jest.fn().mockResolvedValue(mockSisters),
+        update: jest.fn().mockResolvedValue({}),
+      },
+    };
+
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        SistersService,
+        { provide: SshService, useValue: mockSsh },
+        { provide: PrismaService, useValue: mockPrisma },
+        {
+          provide: ConfigService,
+          useValue: { get: jest.fn().mockReturnValue('/home/narang/.ssh/id_rsa') },
+        },
+      ],
+    }).compile();
+
+    service = module.get<SistersService>(SistersService);
+    sshService = module.get(SshService);
+    prismaService = module.get(PrismaService);
+  });
+
+  it('SSH 성공 시 online 상태 반환', async () => {
+    sshService.executeCommand.mockResolvedValue({ stdout: 'active', stderr: '', code: 0 });
+
+    const result = await service.getAllSistersStatus();
+
+    expect(result).toHaveLength(4);
+    expect(result[0].status).toBe('online');
+    expect(result[0].name).toBe('harang');
+    expect(result[0].role).toBe('Orchestrator');
+  });
+
+  it('SSH 실패 시 offline graceful fallback', async () => {
+    sshService.executeCommand.mockRejectedValue(new Error('Connection refused'));
+
+    const result = await service.getAllSistersStatus();
+
+    expect(result).toHaveLength(4);
+    result.forEach((s) => expect(s.status).toBe('offline'));
+  });
+
+  it('일부 SSH 실패 시 실패한 자매만 offline', async () => {
+    sshService.executeCommand
+      .mockResolvedValueOnce({ stdout: 'active', stderr: '', code: 0 }) // harang
+      .mockRejectedValueOnce(new Error('timeout'))                       // narang
+      .mockResolvedValueOnce({ stdout: 'inactive', stderr: '', code: 1 }) // darang
+      .mockRejectedValueOnce(new Error('timeout'));                       // erang
+
+    const result = await service.getAllSistersStatus();
+
+    expect(result[0].status).toBe('online');  // harang
+    expect(result[1].status).toBe('offline'); // narang (SSH 실패)
+    expect(result[2].status).toBe('offline'); // darang (inactive)
+    expect(result[3].status).toBe('offline'); // erang (SSH 실패)
+  });
+});
--- a/backend/src/sisters/sisters.service.ts
+++ b/backend/src/sisters/sisters.service.ts
@@ -0,0 +1,112 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { PrismaService } from '../prisma/prisma.service';
+import { SshService } from './ssh.service';
+import { ConfigService } from '@nestjs/config';
+
+export interface SisterStatus {
+  id: number;
+  name: string;
+  ip: string;
+  user: string;
+  lxcId: number;
+  role: string;
+  status: 'online' | 'offline' | 'working' | 'unknown';
+  lastSeen: Date | null;
+  currentTask: string | null;
+}
+
+const SISTER_ROLES: Record<string, string> = {
+  harang: 'Orchestrator',
+  narang: 'Generator',
+  darang: 'Evaluator',
+  erang: 'Infra Manager',
+};
+
+@Injectable()
+export class SistersService {
+  private readonly logger = new Logger(SistersService.name);
+
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly ssh: SshService,
+    private readonly config: ConfigService,
+  ) {}
+
+  async getAllSistersStatus(): Promise<SisterStatus[]> {
+    const sisters = await this.prisma.sisterConfig.findMany();
+    const sshKeyPath = this.config.get<string>('SSH_KEY_PATH') ?? '/home/narang/.ssh/id_rsa';
+
+    const results = await Promise.allSettled(
+      sisters.map((sister) => this.checkSisterStatus(sister, sshKeyPath)),
+    );
+
+    return results.map((result, index) => {
+      if (result.status === 'fulfilled') {
+        return result.value;
+      }
+      // graceful fallback
+      const sister = sisters[index];
+      return {
+        id: sister.id,
+        name: sister.name,
+        ip: sister.ip,
+        user: sister.user,
+        lxcId: sister.lxcId,
+        role: SISTER_ROLES[sister.name] ?? 'Unknown',
+        status: 'offline' as const,
+        lastSeen: sister.lastSeen,
+        currentTask: null,
+      };
+    });
+  }
+
+  private async checkSisterStatus(
+    sister: { id: number; name: string; ip: string; user: string; lxcId: number; lastSeen: Date | null },
+    sshKeyPath: string,
+  ): Promise<SisterStatus> {
+    try {
+      const result = await this.ssh.executeCommand(
+        sister.ip,
+        sister.user,
+        sshKeyPath,
+        'systemctl --user is-active openclaw-gateway 2>/dev/null || echo "inactive"',
+      );
+
+      const isActive = result.stdout.trim() === 'active';
+      const status: 'online' | 'offline' = isActive ? 'online' : 'offline';
+
+      if (isActive) {
+        // 온라인이면 lastSeen 업데이트
+        await this.prisma.sisterConfig.update({
+          where: { id: sister.id },
+          data: { lastSeen: new Date(), status },
+        });
+      }
+
+      return {
+        id: sister.id,
+        name: sister.name,
+        ip: sister.ip,
+        user: sister.user,
+        lxcId: sister.lxcId,
+        role: SISTER_ROLES[sister.name] ?? 'Unknown',
+        status,
+        lastSeen: isActive ? new Date() : sister.lastSeen,
+        currentTask: null,
+      };
+    } catch {
+      this.logger.warn(`Failed to check status for ${sister.name} (${sister.ip})`);
+      return {
+        id: sister.id,
+        name: sister.name,
+        ip: sister.ip,
+        user: sister.user,
+        lxcId: sister.lxcId,
+        role: SISTER_ROLES[sister.name] ?? 'Unknown',
+        status: 'offline',
+        lastSeen: sister.lastSeen,
+        currentTask: null,
+      };
+    }
+  }
+}
--- a/backend/src/sisters/ssh.service.ts
+++ b/backend/src/sisters/ssh.service.ts
@@ -0,0 +1,43 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { NodeSSH } from 'node-ssh';
+
+export interface SshCommandResult {
+  stdout: string;
+  stderr: string;
+  code: number | null;
+}
+
+@Injectable()
+export class SshService {
+  private readonly logger = new Logger(SshService.name);
+
+  async executeCommand(
+    host: string,
+    username: string,
+    privateKeyPath: string,
+    command: string,
+  ): Promise<SshCommandResult> {
+    const ssh = new NodeSSH();
+
+    try {
+      await ssh.connect({
+        host,
+        username,
+        privateKeyPath,
+        readyTimeout: 5000,
+      });
+
+      const result = await ssh.execCommand(command);
+      return {
+        stdout: result.stdout,
+        stderr: result.stderr,
+        code: result.code,
+      };
+    } catch (error) {
+      this.logger.warn(`SSH connection failed to ${host}: ${(error as Error).message}`);
+      throw error;
+    } finally {
+      ssh.dispose();
+    }
+  }
+}
--- a/backend/test/app.e2e-spec.ts
+++ b/backend/test/app.e2e-spec.ts
@@ -0,0 +1,29 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { INestApplication } from '@nestjs/common';
+import request from 'supertest';
+import { App } from 'supertest/types';
+import { AppModule } from './../src/app.module';
+
+describe('AppController (e2e)', () => {
+  let app: INestApplication<App>;
+
+  beforeEach(async () => {
+    const moduleFixture: TestingModule = await Test.createTestingModule({
+      imports: [AppModule],
+    }).compile();
+
+    app = moduleFixture.createNestApplication();
+    await app.init();
+  });
+
+  it('/ (GET)', () => {
+    return request(app.getHttpServer())
+      .get('/')
+      .expect(200)
+      .expect('Hello World!');
+  });
+
+  afterEach(async () => {
+    await app.close();
+  });
+});
--- a/backend/test/jest-e2e.json
+++ b/backend/test/jest-e2e.json
@@ -0,0 +1,9 @@
+{
+  "moduleFileExtensions": ["js", "json", "ts"],
+  "rootDir": ".",
+  "testEnvironment": "node",
+  "testRegex": ".e2e-spec.ts$",
+  "transform": {
+    "^.+\\.(t|j)s$": "ts-jest"
+  }
+}
--- a/backend/tsconfig.build.json
+++ b/backend/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}
--- a/backend/tsconfig.json
+++ b/backend/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "resolvePackageJsonExports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2023",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "noFallthroughCasesInSwitch": false
+  }
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/frontend/app/favicon.ico
+++ b/frontend/app/favicon.ico
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -0,0 +1,43 @@
+import type { Metadata } from 'next';
+import StyledComponentsRegistry from '@/lib/registry';
+import GlobalStyle from '@/styles/GlobalStyle';
+import Sidebar from '@/components/common/Sidebar';
+import styled from 'styled-components';
+
+export const metadata: Metadata = {
+  title: '하나랑 대시보드',
+  description: '4자매 멀티에이전트 파이프라인 관제 대시보드',
+};
+
+const LayoutRoot = styled.div`
+  display: flex;
+  min-height: 100vh;
+  background: #0D1117;
+`;
+
+const MainContent = styled.main`
+  flex: 1;
+  margin-left: 220px;
+  min-height: 100vh;
+  transition: margin-left 0.2s ease;
+`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <body>
+        <StyledComponentsRegistry>
+          <GlobalStyle />
+          <LayoutRoot>
+            <Sidebar />
+            <MainContent>{children}</MainContent>
+          </LayoutRoot>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import SisterCard from '@/components/dashboard/SisterCard';
+
+type Status = 'online' | 'offline' | 'working' | 'unknown';
+
+interface SisterStatus {
+  id: number;
+  name: string;
+  ip: string;
+  user: string;
+  lxcId: number;
+  role: string;
+  status: Status;
+  lastSeen: string | null;
+  currentTask: string | null;
+}
+
+const MOCK_SISTERS: SisterStatus[] = [
+  { id: 1, name: 'harang', ip: '10.10.10.112', user: 'harang', lxcId: 104, role: 'Orchestrator', status: 'online', lastSeen: new Date().toISOString(), currentTask: 'Sprint 001 기획 중' },
+  { id: 2, name: 'narang', ip: '10.10.10.216', user: 'narang', lxcId: 105, role: 'Generator', status: 'working', lastSeen: new Date().toISOString(), currentTask: 'SPRINT-001 구현 중' },
+  { id: 3, name: 'darang', ip: '10.10.10.136', user: 'darang', lxcId: 106, role: 'Evaluator', status: 'online', lastSeen: new Date().toISOString(), currentTask: null },
+  { id: 4, name: 'erang', ip: '10.10.10.163', user: 'erang', lxcId: 107, role: 'Infra Manager', status: 'online', lastSeen: new Date().toISOString(), currentTask: null },
+];
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3005';
+
+const PageWrapper = styled.div`
+  padding: 32px;
+  min-height: 100vh;
+  background: #0D1117;
+`;
+
+const PageHeader = styled.div`
+  margin-bottom: 32px;
+`;
+
+const PageTitle = styled.h1`
+  font-size: 24px;
+  font-weight: 700;
+  color: #E6EDF3;
+  margin-bottom: 6px;
+`;
+
+const PageSubtitle = styled.p`
+  font-size: 14px;
+  color: #8B949E;
+`;
+
+const SectionTitle = styled.h2`
+  font-size: 14px;
+  font-weight: 600;
+  color: #8B949E;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 16px;
+`;
+
+const SistersGrid = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-bottom: 40px;
+
+  @media (max-width: 1024px) {
+    flex-wrap: wrap;
+    > * { flex: 1 1 calc(50% - 8px); }
+  }
+
+  @media (max-width: 640px) {
+    flex-direction: column;
+    > * { flex: 1 1 auto; }
+  }
+`;
+
+const TwoColumnRow = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const PlaceholderCard = styled.div`
+  background: rgba(22, 27, 34, 0.8);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(240, 246, 252, 0.1);
+  border-radius: 12px;
+  padding: 24px;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8B949E;
+  font-size: 14px;
+`;
+
+const ErrorBanner = styled.div`
+  padding: 10px 14px;
+  background: rgba(255, 23, 68, 0.08);
+  border: 1px solid rgba(255, 23, 68, 0.3);
+  border-radius: 8px;
+  font-size: 13px;
+  color: #FF1744;
+  margin-bottom: 20px;
+`;
+
+export default function DashboardPage() {
+  const [sisters, setSisters] = useState<SisterStatus[]>(MOCK_SISTERS);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchSisters = async () => {
+      setLoading(true);
+      try {
+        const res = await fetch(`${API_URL}/api/sisters`, { cache: 'no-store' });
+        if (!res.ok) throw new Error(`API error ${res.status}`);
+        const data = await res.json();
+        setSisters(data);
+        setError(null);
+      } catch (e) {
+        // API 미준비 시 mock 데이터 유지
+        setError('API 연결 실패 — mock 데이터로 표시 중');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSisters();
+    const interval = setInterval(fetchSisters, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <PageWrapper>
+      <PageHeader>
+        <PageTitle>하나랑 대시보드</PageTitle>
+        <PageSubtitle>4자매 멀티에이전트 파이프라인 관제 현황</PageSubtitle>
+      </PageHeader>
+
+      {error && <ErrorBanner>⚠️ {error}</ErrorBanner>}
+
+      <SectionTitle>자매 상태</SectionTitle>
+      <SistersGrid>
+        {sisters.map((sister) => (
+          <SisterCard
+            key={sister.id}
+            name={sister.name}
+            role={sister.role}
+            status={sister.status}
+            lastSeen={sister.lastSeen}
+            currentTask={sister.currentTask}
+            ip={sister.ip}
+          />
+        ))}
+      </SistersGrid>
+
+      <TwoColumnRow>
+        <div>
+          <SectionTitle>진행 중 프로젝트</SectionTitle>
+          <PlaceholderCard>Sprint 002에서 구현 예정</PlaceholderCard>
+        </div>
+        <div>
+          <SectionTitle>최근 활동 피드</SectionTitle>
+          <PlaceholderCard>Sprint 002에서 구현 예정</PlaceholderCard>
+        </div>
+      </TwoColumnRow>
+    </PageWrapper>
+  );
+}
--- a/frontend/components/common/Sidebar.tsx
+++ b/frontend/components/common/Sidebar.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const MENU_ITEMS = [
+  { href: '/', icon: '⬛', label: '대시보드' },
+  { href: '/projects', icon: '📁', label: '프로젝트' },
+  { href: '/sisters', icon: '🦊', label: '자매' },
+  { href: '/org', icon: '🏢', label: '조직도' },
+  { href: '/settings', icon: '⚙️', label: '설정' },
+];
+
+const ADMIN_ITEMS = [
+  { href: '/admin', icon: '🔧', label: '관리자' },
+];
+
+const Wrapper = styled.aside<{ $collapsed: boolean }>`
+  width: ${({ $collapsed }) => ($collapsed ? '60px' : '220px')};
+  height: 100vh;
+  background: rgba(13, 17, 23, 0.95);
+  backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(240, 246, 252, 0.1);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  transition: width 0.2s ease;
+  overflow: hidden;
+`;
+
+const LogoArea = styled.div`
+  padding: 20px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(240, 246, 252, 0.08);
+  min-height: 64px;
+`;
+
+const LogoText = styled.span`
+  font-size: 15px;
+  font-weight: 700;
+  color: #E6EDF3;
+  white-space: nowrap;
+`;
+
+const CollapseBtn = styled.button`
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: #8B949E;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  border-radius: 4px;
+  flex-shrink: 0;
+
+  &:hover { color: #E6EDF3; background: rgba(240, 246, 252, 0.06); }
+`;
+
+const Nav = styled.nav`
+  flex: 1;
+  padding: 12px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const NavItem = styled(Link)<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  color: ${({ $active }) => ($active ? '#E6EDF3' : '#8B949E')};
+  background: ${({ $active }) => ($active ? 'rgba(88, 166, 255, 0.12)' : 'transparent')};
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover {
+    background: rgba(240, 246, 252, 0.06);
+    color: #E6EDF3;
+  }
+`;
+
+const NavIcon = styled.span`
+  font-size: 16px;
+  flex-shrink: 0;
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  background: rgba(240, 246, 252, 0.08);
+  margin: 8px 8px;
+`;
+
+const AdminSection = styled.div`
+  padding: 8px;
+`;
+
+export default function Sidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const pathname = usePathname();
+
+  return (
+    <Wrapper $collapsed={collapsed}>
+      <LogoArea>
+        <span style={{ fontSize: '22px', flexShrink: 0 }}>🦊</span>
+        {!collapsed && <LogoText>하나랑</LogoText>}
+        <CollapseBtn onClick={() => setCollapsed(!collapsed)}>
+          {collapsed ? '›' : '‹'}
+        </CollapseBtn>
+      </LogoArea>
+
+      <Nav>
+        {MENU_ITEMS.map((item) => (
+          <NavItem key={item.href} href={item.href} $active={pathname === item.href}>
+            <NavIcon>{item.icon}</NavIcon>
+            {!collapsed && item.label}
+          </NavItem>
+        ))}
+      </Nav>
+
+      <Divider />
+      <AdminSection>
+        {ADMIN_ITEMS.map((item) => (
+          <NavItem key={item.href} href={item.href} $active={pathname === item.href}>
+            <NavIcon>{item.icon}</NavIcon>
+            {!collapsed && item.label}
+          </NavItem>
+        ))}
+      </AdminSection>
+    </Wrapper>
+  );
+}
--- a/frontend/components/common/StatusBadge.tsx
+++ b/frontend/components/common/StatusBadge.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import styled from 'styled-components';
+
+type Status = 'online' | 'offline' | 'working' | 'unknown';
+
+interface StatusBadgeProps {
+  status: Status;
+}
+
+const statusLabels: Record<Status, string> = {
+  online: '온라인',
+  offline: '오프라인',
+  working: '작업중',
+  unknown: '알 수 없음',
+};
+
+const statusColors: Record<Status, string> = {
+  online: '#00E676',
+  offline: '#FF1744',
+  working: '#2979FF',
+  unknown: '#8B949E',
+};
+
+const BadgeWrapper = styled.span<{ $status: Status }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${({ $status }) => statusColors[$status]};
+`;
+
+const Dot = styled.span<{ $status: Status }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $status }) => statusColors[$status]};
+  flex-shrink: 0;
+  ${({ $status }) =>
+    $status === 'online' &&
+    `
+    box-shadow: 0 0 6px #00E676;
+    animation: pulse 2s infinite;
+  `}
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+`;
+
+export default function StatusBadge({ status }: StatusBadgeProps) {
+  return (
+    <BadgeWrapper $status={status}>
+      <Dot $status={status} />
+      {statusLabels[status]}
+    </BadgeWrapper>
+  );
+}
--- a/frontend/components/dashboard/SisterCard.tsx
+++ b/frontend/components/dashboard/SisterCard.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import React from 'react';
+import styled from 'styled-components';
+import StatusBadge from '../common/StatusBadge';
+
+type Status = 'online' | 'offline' | 'working' | 'unknown';
+
+interface SisterCardProps {
+  name: string;
+  role: string;
+  status: Status;
+  lastSeen: string | null;
+  currentTask: string | null;
+  ip: string;
+}
+
+const statusBorderColors: Record<Status, string> = {
+  online: '#00E676',
+  offline: '#FF1744',
+  working: '#2979FF',
+  unknown: '#8B949E',
+};
+
+const sisterEmojis: Record<string, string> = {
+  harang: '🦊',
+  narang: '🦊',
+  darang: '🐱',
+  erang: '🐺',
+};
+
+const sisterDisplayNames: Record<string, string> = {
+  harang: '하랑이',
+  narang: '나랑이',
+  darang: '다랑이',
+  erang: '이랑이',
+};
+
+const Card = styled.div<{ $status: Status }>`
+  background: rgba(22, 27, 34, 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(240, 246, 252, 0.1);
+  border-left: 3px solid ${({ $status }) => statusBorderColors[$status]};
+  border-radius: 12px;
+  padding: 20px;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: default;
+  flex: 1;
+  min-width: 0;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+`;
+
+const Emoji = styled.span`
+  font-size: 24px;
+  line-height: 1;
+`;
+
+const NameBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const Name = styled.span`
+  font-size: 16px;
+  font-weight: 600;
+  color: #E6EDF3;
+`;
+
+const Role = styled.span`
+  font-size: 12px;
+  color: #8B949E;
+`;
+
+const StatusRow = styled.div`
+  margin-bottom: 10px;
+`;
+
+const MetaRow = styled.div`
+  font-size: 12px;
+  color: #8B949E;
+  margin-top: 6px;
+`;
+
+const CurrentTask = styled.div`
+  font-size: 12px;
+  color: #58A6FF;
+  margin-top: 8px;
+  padding: 6px 10px;
+  background: rgba(88, 166, 255, 0.08);
+  border-radius: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const IpBadge = styled.span`
+  font-size: 11px;
+  color: rgba(139, 148, 158, 0.6);
+  font-family: monospace;
+`;
+
+function formatLastSeen(lastSeen: string | null): string {
+  if (!lastSeen) return '기록 없음';
+  const date = new Date(lastSeen);
+  const diff = Date.now() - date.getTime();
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return '방금 전';
+  if (min < 60) return `${min}분 전`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}시간 전`;
+  return `${Math.floor(hr / 24)}일 전`;
+}
+
+export default function SisterCard({
+  name,
+  role,
+  status,
+  lastSeen,
+  currentTask,
+  ip,
+}: SisterCardProps) {
+  return (
+    <Card $status={status}>
+      <CardHeader>
+        <Emoji>{sisterEmojis[name] ?? '🤖'}</Emoji>
+        <NameBlock>
+          <Name>{sisterDisplayNames[name] ?? name}</Name>
+          <Role>{role}</Role>
+        </NameBlock>
+      </CardHeader>
+      <StatusRow>
+        <StatusBadge status={status} />
+      </StatusRow>
+      <MetaRow>
+        마지막 활동: {formatLastSeen(lastSeen)}
+      </MetaRow>
+      <MetaRow>
+        <IpBadge>{ip}</IpBadge>
+      </MetaRow>
+      {currentTask && <CurrentTask>📌 {currentTask}</CurrentTask>}
+    </Card>
+  );
+}
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/frontend/lib/registry.tsx
+++ b/frontend/lib/registry.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== 'undefined') return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -0,0 +1,9 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+};
+
+export default nextConfig;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3004",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.2.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "styled-components": "^6.3.12"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@types/styled-components": "^5.1.36",
+    "babel-plugin-styled-components": "^2.1.4",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.2",
+    "typescript": "^5"
+  }
+}
--- a/frontend/public/file.svg
+++ b/frontend/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/frontend/public/globe.svg
+++ b/frontend/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/frontend/public/next.svg
+++ b/frontend/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/frontend/public/vercel.svg
+++ b/frontend/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/frontend/public/window.svg
+++ b/frontend/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/frontend/styles/GlobalStyle.ts
+++ b/frontend/styles/GlobalStyle.ts
@@ -0,0 +1,44 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, body {
+    height: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, sans-serif;
+    background-color: #0D1117;
+    color: #E6EDF3;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #0D1117;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(240, 246, 252, 0.1);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(240, 246, 252, 0.2);
+  }
+`;
+
+export default GlobalStyle;
--- a/frontend/styles/theme.ts
+++ b/frontend/styles/theme.ts
@@ -0,0 +1,16 @@
+export const theme = {
+  colors: {
+    bg: '#0D1117',
+    cardBg: 'rgba(22, 27, 34, 0.8)',
+    textPrimary: '#E6EDF3',
+    textSecondary: '#8B949E',
+    accent: '#58A6FF',
+    border: 'rgba(240, 246, 252, 0.1)',
+    online: '#00E676',
+    offline: '#FF1744',
+    working: '#2979FF',
+    sidebarBg: 'rgba(13, 17, 23, 0.95)',
+  },
+} as const;
+
+export type Theme = typeof theme;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`