[FEAT] 컴포넌트 세팅 - #3
Merged
Merged
Conversation
전역 UI 상태(뉴스맵/검증 탭 전환, 선택된 뉴스, 그래프 모드, 브리핑 등)는 형제 컴포넌트와 루트 바깥 FAB/시트가 함께 공유해야 해서 여전히 필요하지만, Zustand 대신 Jotai atom 단위로 쪼개 쓰기로 결정했다.
바다색 테마·테마 토글·About/데모 라우트를 제거하고 KOSLINK GNB 뼈대로 교체했다. styles.css에 오렌지/딥애저/웜뉴트럴 디자인 토큰을 넣고 shadcn --primary/--border/--radius를 재정의했다. Pretendard는 CDN 대신 로컬 variable 폰트로 번들에 포함시켰다. 그래프·브리핑 구현에 필요한 jotai, @xyflow/react, shadcn badge/sheet/scroll-area/separator/button도 같이 설치했다.
docs/koslink.html의 36개 노드/52개 관계/뉴스 6건/검증 14건 데이터를 KOSLINK-FRONTEND.md §4·§5 타입 모양에 맞춰 lib/data.ts로 옮겼다. lib/api.ts는 getNews/getNewsAnalysis/getGraph/getVerify/runBriefing을 동기 함수로 제공하며, 나중에 실 API로 교체할 때 시그니처만 유지하면 되도록 했다. confidence 값은 어디에도 저장하지 않는다. UI 상태는 lib/atoms.ts의 Jotai atom으로 슬라이스별로 나눴다.
Header를 KOSLINK GNB(뉴스맵/예측 검증 탭, 온톨로지 카운터)로 완성하고 viewAtom으로 전환하게 했다. Jotai SSR에서 요청 간 상태가 새지 않도록 루트에 Provider를 새로 감쌌다. routes/index.tsx는 viewAtom에 따라 3분할 뉴스맵 그리드 또는 검증 화면을 렌더링하며, 뉴스/그래프/분석 패널은 다음 작업에서 채울 자리표시자로 추가했다. 그리드·패널·반응형 브레이크포인트(1280/1080/820)는 styles.css에 포팅했다.
NewsCard/NewsList/NewsPanel로 섹터 칩 필터와 뉴스 카드 목록을 구현했다. NewsPanel은 데스크탑에서는 일반 패널로, ≤1080px에서는 CSS(.col-news)로 같은 DOM이 바텀시트가 되도록 했다. MobileNewsBar가 그 진입점인 상단 현재뉴스 바(이전/다음 이동)와 배경 스크림을 담당한다. 가로 스크롤 없이 세로 스택으로만 배치했다.
@xyflow/react로 파급 경로/전체 관계망/종목 기점 탐색 3개 모드를 구현했다. lib/layout.ts에 radialLayout·focusBuild·nodeBuild·fullLayout을 삼각함수 기반으로 포팅했고(dagre 등 레이아웃 라이브러리 없음), StockNode/RelEdge는 도형 교점을 계산하는 커스텀 플로팅 엣지로 구현했다. usePropagation 훅이 기점 점등 → hop별 엣지 순차 등장 → 도착 노드 확정 시퀀스를 setTimeout으로 관리하며 언마운트/재선택 시 전부 clearTimeout한다. React Flow의 animated:true는 쓰지 않고 CSS 1회 재생(.ep.draw, forwards)으로 대체했다. nodeTypes/edgeTypes는 모듈 스코프 상수로 선언했고, 하이라이트가 켜진 동안은 호버 강조 리셋을 막았다. 뷰 진입 시 최신 뉴스를 자동 선택하도록 index.tsx에 초기화 effect를 추가했다.
기사 요약 3줄 + 원문 링크, 영향 기점(MainStockCard), 관계로 이어진 종목(RelatedList, hop 기반 직접/간접/확산 태그만 사용 — confidence 퍼센트 표시 없음), 판단 근거 3행(RationaleBox)을 구현했다. "지난 예측 적중률 보기" 버튼이 verifyContextAtom을 채우고 예측 검증 화면으로 전환한다.
지표 3개(뉴스/종목 단위 적중률, 검증 건수) + 30일 적중률 추이를 순수 SVG로 그리는 요약 카드, 섹터 필터 + 스크롤 목록(VerifyList, 페이지네이션 없음), 적중률 도넛과 종목별 예측/실제 표(VerifyDetail)를 구현했다. 분석 패널에서 진입하면 verifyContextAtom 기준으로 겹치는 검증만 보여주는 컨텍스트 배너가 뜬다. 1240px/1080px 반응형 그리드를 styles.css에 추가했다.
shadcn Sheet(우측 424px)로 종목 칩 입력 + 추천 버튼 + "오늘 뉴스에서 찾기" 조회 + 결과 카드를 구현했다. FAB은 SheetTrigger로 결합해 열림 상태를 별도 atom 없이 관리하고, 매칭 건수 배지를 보여준다. 시트를 닫아도 tickers/result/ranAt은 Jotai atom(세션 메모리)에 남는다. 결과 카드의 "이 뉴스의 파급 경로 보기"는 시트를 닫고 뉴스맵 탭의 해당 뉴스로 이동한다. FAB/시트는 두 탭 모두에서 보이도록 루트 레이아웃에 마운트했다.
fullLayout()을 모듈 스코프에서 한 번만 계산하도록 캐시해(뷰 전환마다 재계산하지 않도록) react-flow-graph 체크리스트를 마지막으로 다시 확인했다. shadcn이 생성한 badge/button 컴포넌트에 prettier 포맷을 맞췄다. 전체 typecheck·lint·prettier check·프로덕션 빌드·개발 서버 기동을 모두 재확인했다(router.tsx의 사전 존재 경고 3건 제외 전부 통과).
docs/koslink.html과 비교해 세 가지를 고쳤다. 파급 경로 뷰에서는 노드 클릭에 반응하지 않도록 했고, 이 클릭이 유일한 진입로였던 종목 기점 탐색(node) 모드는 도달 불가능해져 관련 상태(backToAtom, nodeFocusId, buildNodeScene)를 통째로 제거했다. 상단 상태 칩은 리빌 진행에 따라 단계별 문구가 바뀌다 시퀀스가 끝나면 사라지도록 usePropagation에 stageText를 추가했다. 엣지 그리기 애니메이션은 리빌 도중 연결된 노드가 갱신될 때 React Flow가 해당 엣지 컴포넌트를 리마운트하는 경우가 있어(노드·엣지가 많은 전체 관계망에서 특히 잦음), 기존 CSS 클래스 토글 방식은 리마운트마다 처음부터 다시 그려져 깜빡이는 것처럼 보였다. draw가 시작된 시각(drawAt)을 기록해 RelEdge가 경과 시간 기준으로 stroke-dashoffset을 계산해 인라인 스타일 + transition으로 이어 그리도록 바꿔, 리마운트가 일어나도 진행 중이던 지점부터 자연스럽게 이어지게 했다. 그 과정에서 노드/엣지 배열을 useMemo로 캐싱하고 바뀐 항목만 새 객체로 만들도록 해 불필요한 리렌더도 줄였다. 버튼 커서도 손봤다 — Tailwind v4 preflight가 button 커서를 pointer로 되돌려주지 않아 뉴스 카드·섹터 칩·그래프 툴바 버튼 등에 클릭 가능 표시가 없었는데, 전역 규칙을 추가했다.
이슈번호 없이 태그: 요약 형식으로 통일하고 예시도 맞춰 갱신했다.
koslink-design-constraints, react-flow-graph, tanstack-route-data 세 스킬을 추가했다. 각각 색상/문구 등 디자인 제약, @xyflow/react 그래프 구현 규칙, 라우트·데이터 연결 규칙을 코드 작성 시 자동으로 체크하도록 안내한다.
Closed
6 tasks
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (49)
📝 WalkthroughWalkthroughThe PR replaces the TanStack starter UI with a Korean KOSLINK application featuring news navigation, ontology impact graphs, analysis panels, ticker briefings, prediction verification, Jotai session state, static typed data services, responsive layouts, and repository-specific implementation guidance. ChangesKOSLINK application
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant Jotai
participant KoslinkApp
participant GraphPanel
participant AnalysisPanel
participant VerifyView
User->>Header: Select 뉴스맵 or 예측 검증
Header->>Jotai: Update viewAtom
Jotai->>KoslinkApp: Notify view change
KoslinkApp->>GraphPanel: Render selected news graph
KoslinkApp->>AnalysisPanel: Render selected news analysis
User->>AnalysisPanel: Open prediction verification
AnalysisPanel->>Jotai: Set verify context and verify view
Jotai->>VerifyView: Filter and render verification results
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. 🔧 Checkov (3.3.8)components.jsonTraceback (most recent call last): package.jsonTraceback (most recent call last): tsconfig.jsonTraceback (most recent call last): 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Comment |
This was referenced Jul 21, 2026
Merged
Merged
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
👥 작업 배경 및 목적
🛠️ 주요 변경 사항
🧪 테스트 결과 (선택)
Summary by CodeRabbit