[FEAT] DockerFile 작성 및 임시 배포 by suwonthugger · Pull Request #19 · koscom-team01/koslink-fe

suwonthugger · 2026-07-28T15:15:18Z

👥 작업 배경 및 목적

전체 관계망을 실데이터(graph.json) 기반으로 교체하고, news/impact API를 실 백엔드 명세(docs/KOSLINK_API.md)에 맞춰 정비. 프로덕션 배포 시 MSW 대신 nginx /api/ 프록시로 실 백엔드를 바라보도록 전환.
관련 Issue 번호: [FEAT] DockerFile 작성 및 임시 배포 #5

🛠️ 주요 변경 사항

전체 관계망 — graph.json 기반으로 교체

src/mocks/graph/graph.json : 전체 관계망 실데이터(종목 노드 + 관계 엣지) 정적 파일 추가
src/mocks/graph/fullGraph.ts : graph.json → OntologyNode/OntologyEdge 매핑 (capSize→marketCap 환산, 영문 relation 상수 한글 라벨링, relationType 추론)
src/utils/graph/layout.ts : fullLayout/tierOf를 파라미터화해 전체 관계망 전용 데이터와 기존 뉴스별 데모 데이터를 분리
src/components/graph/GraphPanel.tsx : fullGraphIndex 추가, GraphCanvas에 index prop 도입해 뉴스별 파급 경로 뷰와 전체 관계망 뷰가 각자의 데이터셋을 참조하도록 리팩터링
src/components/graph/NetworkView.tsx : useGraphQuery(API) 제거 — graph.json 데이터를 클라이언트에서 정적으로 바로 사용
src/shared/components/Header.tsx : 노드/엣지 카운트 배지를 graph.json 데이터 기준으로 변경

전체 관계망 — 종목 검색 추가

src/components/graph/GraphSearch.tsx (신규) : 이름/티커 검색 후 선택 시 노드 클릭과 동일하게 하이라이트되는 검색 컴포넌트
src/components/graph/graph.css : 캔버스 우상단 오버레이 형태의 검색 UI 스타일

API 명세 정비 (news / news 영향 분석)

docs/KOSLINK_API.md : GET /news, GET /news/{id}/impact 실 API 명세 문서 추가
src/apis/news/mock.ts, src/apis/news/mappers.ts, src/apis/news/queries.ts : 응답을 news/hasNext/lastCursorId(+url) 스키마로 정비, 쿼리 파라미터 cursorId/size로 변경
src/mocks/news/handlers.ts : MSW 핸들러 쿼리 파라미터 파싱 업데이트
src/apis/analysis/mock.ts, src/apis/analysis/mappers.ts : 뉴스 영향 그래프를 {id,name,ticker,capSize,marketType} 스키마로 통일, kind/relationType/direction은 매퍼에서 복원
src/shared/utils/format.ts : capSizeToMarketCap/marketCapToCapSize 공용 변환 헬퍼 추가
src/types/graph/index.ts : CapSize/MarketType 타입 추가
src/types/news/index.ts : NewsListItem에 url 필드 추가
src/routes/app.tsx : getNews() 응답 필드명 변경분 반영

프로덕션 배포 — MSW 비활성화, nginx 프록시로 전환

src/main.tsx : import.meta.env.PROD 기준으로 MSW 기동 게이팅(프로덕션 빌드는 MSW 미기동, 번들에서도 제외)
src/shared/apis/http.ts : API prefix를 /api 고정값으로 단순화
Dockerfile, .github/workflows/ci.yaml : 더 이상 쓰지 않는 VITE_API_BASE_URL ARG/ENV/빌드 인자 제거
.env.production.example : 삭제(설정할 환경변수 없음)

기타

src/components/news/NewsPanel.tsx : useRef 초기값 누락 타입 에러 수정
tsconfig.json : resolveJsonModule 활성화 (graph.json import 지원)

🧪 테스트 결과 (선택)

pnpm lint, tsc --noEmit 클린
pnpm build && pnpm preview로 프로덕션 빌드에서 MSW 미기동·번들 제외 확인
브라우저에서 전체 관계망 렌더링/검색/하이라이트, 뉴스별 파급 경로, 뉴스 새로고침 등 주요 플로우 수동 확인

Summary by CodeRabbit

새 기능
- 그래프 전체 관계망을 안정적으로 표시하고, 종목명·티커로 검색할 수 있습니다.
- 뉴스 영향 분석 그래프에서 종목 방향과 관계 유형이 올바르게 표시됩니다.
- 뉴스 목록에 원문 링크가 제공됩니다.
개선
- 뉴스 목록 API가 새로운 커서 기반 페이지네이션 형식을 지원합니다.
- 운영 환경에서 동일 오리진의 /api를 통해 안정적으로 연결됩니다.
문서
- 뉴스 목록 및 영향 분석 API 명세를 추가했습니다.

전체 관계망(GNB 탭)이 API/TanStack Query 없이 mocks/graph/graph.json을 클라이언트에서 직접 읽어 렌더링하도록 변경. 뉴스별 파급 경로가 쓰는 mocks/graph/data.ts(CONCEPT 노드 포함 데모 데이터)와는 완전히 분리된 데이터셋이라 GraphCanvas가 모드별로 올바른 GraphIndex를 쓰도록 index prop을 추가함. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

GET /news, GET /news/{id}/impact 두 API의 wire 응답을 문서에 명시된 형태로 맞춤. news 리스트는 news/hasNext/lastCursorId(+url) 스키마로, 뉴스 영향 그래프는 graph.json과 동일한 {id,name,ticker,capSize,marketType} 노드 스키마로 통일해 kind/relationType/direction을 wire에서 제거하고 매퍼에서 복원하도록 변경. capSize↔marketCap 변환은 shared/utils/format.ts로 공용화. 개념 노드(HBM 등)는 wire에서 STOCK과 구분되지 않으므로 이제 일반 종목 카드로 렌더링된다(그래프 스키마를 GET /graph?mode=full과 통일하기 위한 의도된 트레이드오프). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

- GraphPanel.tsx: RelFlowEdge.data가 옵셔널이라 prev.data 접근 전 null 체크 누락으로 발생하던 TS18048 4건 수정(prev?.data로 가드). - NewsPanel.tsx: useRef<number>()가 초기값 없이 호출돼 TS2554 발생 — useRef<number | undefined>(undefined)로 명시. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

전체 관계망(mode='all')의 gbar에 이름/티커로 필터링되는 검색창을 추가. 결과 선택 시 setHighlightedNode(id)를 그대로 호출해 해당 노드를 클릭한 것과 동일하게 2단계 파급 강조·fitView가 재생되도록 함(GraphSearch가 GraphCanvas가 이미 들고 있는 index prop을 그대로 재사용). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

검색창이 gbar 텍스트·버튼들 사이에 묻혀 눈에 잘 안 띄던 문제 수정. gbar에서 캔버스 우상단 오버레이(legend/tip과 같은 레이어)로 옮기고, 검색 아이콘·지우기 버튼·그림자를 추가해 항상 같은 자리에서 눈에 띄게 함. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

import.meta.env.PROD(빌드 타임에 Vite가 심어주는 값, 환경변수 설정 불필요) 기준으로 MSW 기동을 게이팅해 프로덕션 빌드에서는 MSW를 아예 띄우지 않고 dead-code로 번들에서도 제외되게 함. 개발 서버에서만 MSW가 /api/*를 가로챈다. VITE_API_BASE_URL을 쓰지 않기로 하여 관련 분기·설정을 모두 제거: - http.ts: prefix를 '/api' 고정값으로 단순화 - Dockerfile/ci.yaml: ARG/ENV/--build-arg 제거(어차피 기본값과 동일했음) - .env.production.example 삭제(더 이상 설정할 게 없음) 프로덕션에서는 nginx.conf의 location /api/ 프록시가 같은 오리진 /api 요청을 koslink-backend-app 실 백엔드로 그대로 전달한다. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

coderabbitai · 2026-07-28T15:15:41Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2128ec8e-7024-4ddb-a2d8-14893d860354

📥 Commits

Reviewing files that changed from the base of the PR and between 980656a and ea36c98.

📒 Files selected for processing (26)

.env.production.example
.github/workflows/ci.yaml
Dockerfile
docs/KOSLINK_API.md
src/apis/analysis/mappers.ts
src/apis/analysis/mock.ts
src/apis/news/mappers.ts
src/apis/news/mock.ts
src/apis/news/queries.ts
src/components/graph/GraphPanel.tsx
src/components/graph/GraphSearch.tsx
src/components/graph/NetworkView.tsx
src/components/graph/graph.css
src/components/news/NewsPanel.tsx
src/main.tsx
src/mocks/graph/fullGraph.ts
src/mocks/graph/graph.json
src/mocks/news/handlers.ts
src/routes/app.tsx
src/shared/apis/http.ts
src/shared/components/Header.tsx
src/shared/utils/format.ts
src/types/graph/index.ts
src/types/news/index.ts
src/utils/graph/layout.ts
tsconfig.json

📝 Walkthrough

Walkthrough

뉴스 및 영향도 API 와이어 계약이 문서·목·매퍼·호출부에 반영되었습니다. 정적 전체 그래프 데이터와 검색 UI가 추가되었고, 그래프 인덱스 주입 방식 및 API 실행 구성이 변경되었습니다.

Changes

뉴스 API 계약

Layer / File(s)	Summary
뉴스 계약 및 페이지네이션 `docs/KOSLINK_API.md`, `src/apis/news/*`, `src/routes/app.tsx`, `src/types/news/index.ts`, `src/mocks/news/handlers.ts`	뉴스 목록이 `cursorId`/`size`, `news`, `hasNext`, `lastCursorId`, camelCase 필드와 `url`을 사용하도록 변경되었습니다.

영향도 그래프 계약

Layer / File(s)	Summary
영향도 그래프 와이어 매핑 `src/apis/analysis/*`, `src/types/graph/index.ts`, `src/shared/utils/format.ts`	그래프 노드·엣지 와이어 타입과 변환 로직이 추가되고, 시가총액 구간 및 관계 타입 매핑이 반영되었습니다.

전체 그래프 UI

Layer / File(s)	Summary
정적 전체 그래프와 검색 `src/mocks/graph/`, `src/utils/graph/layout.ts`, `src/components/graph/`, `src/shared/components/Header.tsx`, `tsconfig.json`	JSON 기반 전체 그래프 인덱스·레이아웃을 도입하고, 그래프 캔버스에 검색 및 주입된 인덱스 기반 조회를 연결했습니다.

API 실행 구성

Layer / File(s)	Summary
동일 오리진 `/api` 구성 `src/shared/apis/http.ts`, `src/main.tsx`, `Dockerfile`, `.github/workflows/ci.yaml`, `src/components/news/NewsPanel.tsx`	API prefix를 `/api`로 고정하고 프로덕션 MSW 및 Docker 빌드 시 API URL 주입을 제거했습니다.

Estimated code review effort: 4 (Complex) | ~45 minutes

Possibly related issues

koscom-team01/koslink-backend#9 — /news, 영향도, 그래프 응답 계약 변경과 프론트 매핑·목·문서 변경이 해당 백엔드 API 구현과 연결됩니다.

Possibly related PRs

koscom-team01/koslink-fe#3 — 그래프 컴포넌트와 검색·관계 그래프 구현 흐름이 현재 인덱스 기반 그래프 변경과 연결됩니다.
koscom-team01/koslink-fe#7 — relationType, graphIndex, 영향도 그래프 매핑 계약을 함께 다룹니다.
koscom-team01/koslink-fe#12 — NetworkView와 GraphPanel의 전체 그래프 및 씬 구성 변경과 직접 연결됩니다.

Suggested labels: feature

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/5-production

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Trivy (0.72.0)

Trivy execution failed: 2026-07-28T15:15:49Z FATAL Fatal error run error: fs scan error: scan error: scan failed: failed analysis: post analysis error: post analysis error: helm scan error: fs filter error: fs filter error: walk error range error: stat doctor.config.json: no such file or directory: range error: stat doctor.config.json: no such file or directory

_{Comment @coderabbitai help to get the list of available commands.}

suwonthugger and others added 6 commits July 28, 2026 23:26

suwonthugger linked an issue Jul 28, 2026 that may be closed by this pull request

[FEAT] DockerFile 작성 및 임시 배포 #5

Closed

2 tasks

suwonthugger merged commit 4b5290e into main Jul 28, 2026
1 of 2 checks passed

Navigation Menu

Uh oh!

[FEAT] DockerFile 작성 및 임시 배포 - #19

[FEAT] DockerFile 작성 및 임시 배포#19
suwonthugger merged 6 commits into
mainfrom
feat/5-production

suwonthugger commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

suwonthugger commented Jul 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👥 작업 배경 및 목적

🛠️ 주요 변경 사항

🧪 테스트 결과 (선택)

Summary by CodeRabbit

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

suwonthugger commented Jul 28, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 28, 2026 •

edited

Loading