chore: sync local workspace changes

src/views/play/apps/test/TestPlayAppView.css

@@ -0,0 +1,89 @@
+.test-play-app {
+  height: 100%;
+  min-height: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: 32px;
+  background:
+    radial-gradient(circle at top left, rgba(255, 211, 105, 0.24), transparent 28%),
+    linear-gradient(160deg, #f4efe2 0%, #fcfaf4 48%, #eef3f8 100%);
+}
+
+.test-play-app__hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.test-play-app__hero-copy,
+.test-play-app__spotlight,
+.test-play-app__feature-card {
+  border-radius: 28px;
+  border: 1px solid rgba(34, 49, 63, 0.08);
+  box-shadow: 0 22px 60px rgba(63, 79, 92, 0.08);
+}
+
+.test-play-app__hero-copy {
+  padding: 32px;
+  background: rgba(255, 252, 244, 0.82);
+  backdrop-filter: blur(14px);
+}
+
+.test-play-app__hero-copy .ant-typography h2 {
+  margin-top: 14px;
+  margin-bottom: 14px;
+  font-size: clamp(2rem, 3vw, 3.2rem);
+  line-height: 1.04;
+}
+
+.test-play-app__hero-copy .ant-typography {
+  max-width: 640px;
+}
+
+.test-play-app__spotlight {
+  background: linear-gradient(180deg, #1e2b31 0%, #263b45 100%);
+}
+
+.test-play-app__spotlight .ant-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 100%;
+  color: #f5f6f8;
+}
+
+.test-play-app__spotlight .ant-typography,
+.test-play-app__spotlight .ant-typography-copy,
+.test-play-app__spotlight .ant-typography-secondary {
+  color: inherit;
+}
+
+.test-play-app__feature-card {
+  height: 100%;
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.test-play-app__feature-label {
+  display: inline-block;
+  margin-bottom: 8px;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #7d5b1f;
+}
+
+@media (max-width: 900px) {
+  .test-play-app {
+    padding: 20px;
+  }
+
+  .test-play-app__hero {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .test-play-app__hero-copy {
+    padding: 24px;
+  }
+}

src/views/play/apps/test/TestPlayAppView.tsx

@@ -0,0 +1,60 @@
+import { Button, Card, Col, Input, Row, Space, Tag, Typography } from 'antd';
+import './TestPlayAppView.css';
+
+const { Paragraph, Text, Title } = Typography;
+
+const featureCards = [
+  {
+    title: 'Isolated Entry',
+    description: '기존 Layout Editor 상태와 분리된 전용 play 앱 진입점입니다.',
+  },
+  {
+    title: 'Scoped Styling',
+    description: '이 화면은 `TestPlayAppView.css`만 사용하도록 분리해 독립 스타일 실험이 가능합니다.',
+  },
+  {
+    title: 'Next Extension',
+    description: '이후 라우트, 상태, API 연결을 현재 앱과 분리된 구조로 계속 확장할 수 있습니다.',
+  },
+];
+
+export function TestPlayAppView() {
+  return (
+    <div className="test-play-app">
+      <section className="test-play-app__hero">
+        <div className="test-play-app__hero-copy">
+          <Tag color="gold">Apps / Test</Tag>
+          <Title level={2}>분리된 test 앱 작업 공간</Title>
+          <Paragraph>
+            Play 사이드바의 <Text strong>Apps</Text> 카테고리에서 진입하는 전용 앱 뷰입니다. 기존 layout editor와
+            경로, 렌더링, 스타일 파일을 분리해 새 앱 형태를 바로 실험할 수 있게 구성했습니다.
+          </Paragraph>
+          <Space wrap>
+            <Button type="primary">Primary Action</Button>
+            <Button ghost>Secondary</Button>
+          </Space>
+        </div>
+
+        <Card className="test-play-app__spotlight" bordered={false}>
+          <Text type="secondary">test app shell</Text>
+          <Title level={4}>별도 index CSS 대신 전용 뷰 CSS 분리</Title>
+          <Paragraph>
+            React 엔트리는 공유하되, 실제 화면 스타일은 이 앱 전용 CSS로 한정해 기존 앱 전역 규칙과 충돌을 줄였습니다.
+          </Paragraph>
+          <Input placeholder="다음 단계에서 앱 전용 입력/상태를 붙일 수 있습니다." />
+        </Card>
+      </section>
+
+      <Row gutter={[20, 20]}>
+        {featureCards.map((card) => (
+          <Col key={card.title} xs={24} md={8}>
+            <Card className="test-play-app__feature-card" bordered={false}>
+              <Text className="test-play-app__feature-label">{card.title}</Text>
+              <Paragraph>{card.description}</Paragraph>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+}