[PWF3 5/5] Dashboard API·인증·Agent 입력 연결

.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api/v1

README.md

@@ -7,9 +7,17 @@ React + TypeScript 기반 프론트엔드 : HR 대시보드, 업무카드, 근
 
 ```bash
 npm install
+cp .env.example .env
 npm run dev
 ```
 
+## 로컬 백엔드 연결
+
+개발 서버는 `/api` 요청을 `http://127.0.0.1:8080`으로 전달합니다. 프론트에서는
+`VITE_API_BASE_URL=/api/v1`을 사용해야 로그인 Refresh Cookie가 같은 출처로 유지됩니다.
+백엔드 주소를 `VITE_API_BASE_URL`에 직접 넣으면 로그인 직후 요청은 성공해도 새로고침 시
+세션 복원이 실패할 수 있습니다.
+
 ## 스크립트
 
 | 명령 | 설명 |

src/pages/CreateWorkPage/CreateWorkPage.test.tsx

@@ -19,9 +19,9 @@ afterEach(() => {
   useToastStore.setState({ toasts: [] })
 })
 
-function renderPage() {
+function renderPage(initialEntry: string | { pathname: string; state?: unknown } = '/tasks/new') {
   render(
-    <MemoryRouter initialEntries={['/tasks/new']}>
+    <MemoryRouter initialEntries={[initialEntry]}>
       <Routes>
         <Route
           path="/tasks/new"
@@ -39,6 +39,12 @@ function renderPage() {
 }
 
 describe('CreateWorkPage', () => {
+  it('uses a request forwarded from the dashboard as the initial input', () => {
+    renderPage({ pathname: '/tasks/new', state: { prefill: '응웬반A 체류기간 연장 준비' } })
+
+    expect(screen.getByLabelText('업무 요청 내용')).toHaveValue('응웬반A 체류기간 연장 준비')
+  })
+
   it('disables the analyze button until a request is entered', async () => {
     const user = userEvent.setup()
     renderPage()

src/pages/DashboardPage/DashboardPage.module.css

@@ -55,10 +55,9 @@
   color: var(--brand-primary);
 }
 
-.commandInput {
+.commandForm {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: calc(100% - 37px);
   height: 40px;
   margin: 6px 18px 0;
@@ -67,23 +66,52 @@
   background: rgba(207, 227, 227, 0.7);
   border: 0;
   border-radius: 21px;
+}
+
+.commandForm:focus-within {
+  box-shadow: 0 0 0 2px rgba(7, 132, 127, 0.18);
+}
+
+.commandInput {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
   font-family: inherit;
   font-size: 13px;
   font-weight: 500;
   line-height: 22px;
   color: #465b5d;
   text-align: left;
-  cursor: pointer;
 }
 
-.commandInput span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.commandInput::placeholder {
+  color: #465b5d;
+  opacity: 1;
 }
 
-.commandInput img {
+.commandSubmit {
+  display: flex;
   flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 3px;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.commandSubmit:disabled {
+  cursor: default;
+  opacity: 0.58;
+}
+
+.commandSubmit img {
   width: 18px;
   height: 18px;
 }
@@ -110,6 +138,11 @@
   cursor: pointer;
 }
 
+.promptChip[aria-pressed='true'] {
+  background: #d7ebea;
+  color: var(--brand-primary);
+}
+
 .dashboardGrid {
   display: grid;
   grid-template-columns: minmax(0, 767px) minmax(0, 359px);
@@ -314,6 +347,35 @@
   cursor: pointer;
 }
 
+.priorityEmpty {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 72px;
+  margin-top: 15px;
+  padding: 12px 15px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+}
+
+.priorityEmpty p {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.priorityEmpty button {
+  height: 40px;
+  padding: 8px 16px;
+  background: var(--surface-default);
+  border: 1px solid var(--border-default);
+  border-radius: var(--fowoco-radius-6);
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
 .todayTasks {
   display: flex;
   flex-direction: column;
@@ -349,6 +411,15 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  max-height: 184px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.capNotice {
+  margin: -2px 0 0;
+  font-size: 11px;
+  color: var(--text-secondary);
 }
 
 .agentPrepared {
@@ -423,6 +494,13 @@
   color: var(--text-primary);
 }
 
+.preparedEmpty {
+  margin: 0;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--text-secondary);
+}
+
 .preparedSection ul {
   display: flex;
   flex-direction: column;
@@ -533,7 +611,7 @@
     min-height: 144px;
   }
 
-  .commandInput {
+  .commandForm {
     width: 100%;
     margin-right: 0;
     margin-left: 0;