단계와 요약을 같은 카드에 둡니다.
처리 단계와 법안명을 먼저 보여 주고 AI 요약, 발의 의원과 정당을 이어서 읽게 했습니다. 피드에서 법안을 고를 때 필요한 맥락을 모은 구조입니다.
API 응답을 화면에서 쓰는 타입으로 연결하고, 피드에서 선택한 법안의 상세 내용을 이어 읽게 했습니다.
실제 법안 카드 컴포넌트 ↗← Side Projects법안의 요약과
모두의입법 / LAWDIGEST
법안의 요약과
처리 과정을 보는 서비스
- 기술 스택
- TypeScript · React · Next.js · Python · MySQL
- 프로젝트 소개
- 국회 법안과 의원 활동을 수집·요약하고, 법안의 처리 과정과 요약을 카드·타임라인에서 찾아보는 입법 정보 서비스입니다.
- 담당 역할
- 프론트엔드 개발 · AI 파이프라인 개발
01 / 주요 구현
법안 한 건이
읽을 정보가 되기까지
긴 법안 원문을 요약하고, 처리 상태와 함께 카드와 타임라인에서 읽게 합니다. 프론트엔드와 AI 데이터 파이프라인을 맡아 법안 수집·요약, 누락된 요약의 복구, 화면의 데이터 연결을 구현했습니다.
- 01 / 새 법안과 처리 정보 수집
이미 저장한 법안과 새 법안을 구분합니다.
새 법안의 수집과 기존 법안의 상태 갱신을 나누었습니다. 법안 ID로 중복을 걸러냅니다.
- 02 / 상태 갱신과 요약·복구
요약이 빠진 법안을 다시 가공합니다.
수집한 법안 원문을 읽기 쉬운 요약으로 바꿉니다. 에이전트 요약과 빠진 요약의 복구를 별도 실행 경로로 구성했습니다. 새 법안 수집과 상태 갱신을 나누듯, 누락된 요약도 복구 경로에서 다룹니다.
- 03 / 피드·타임라인에서 탐색
한 법안을 발견하고 처리 과정을 따라갑니다.
피드·하단 내비게이션과 타임라인을 구현하고, API 응답 타입과 무한 스크롤을 연결했습니다. 레거시 레이아웃·컴포넌트를 정리하고 Storybook 호환성과 배포 빌드 문제를 수정했습니다.
02 / 화면과 데이터
긴 원문을 읽기 전에,
먼저 알아야 할 정보
법안 카드와 탐색 메뉴의 컴포넌트 예시입니다. 처리 단계와 AI 요약을 함께 보여 주고, 관심 있는 법안의 처리 과정을 이어서 살펴보게 했습니다.
찾는 정보에 따라 탐색 화면을 나눕니다.
피드는 법안을 발견하는 시작점이고, 타임라인은 처리 과정을 따라가는 화면입니다. 팔로잉과 검색에서는 관심 의원·정당과 법안을 찾습니다.
피드 템플릿은 전체·팔로잉·인기 탭과 내비게이션을 구성합니다. 이 법안의 처리 과정을 따라가는 타임라인 구현은 API 응답 타입과 무한 스크롤까지 연결한 작업입니다.
피드 템플릿 소스 ↗다시 읽을 법안을 표시합니다.
같은 법안 카드의 북마크 활성 상태입니다. 제목과 요약의 구조는 유지하면서 저장 상태를 하단 아이콘으로 구분합니다.
기본·저장·간략형 카드는 같은 정보 구조를 공유하며, 화면에 따라 표시할 내용을 조절합니다.
카드 상태별 예시 소스 ↗03 / 데이터에서 화면으로
법안을 가공하고,
읽는 흐름을 연결합니다.
수집·상태 갱신·요약은 별도로 실행합니다. 저장한 결과는 API를 통해 전달되고, 프론트엔드에서 카드와 타임라인으로 보여 줍니다.
AI로 가공한 법안 데이터를 탐색 화면에 연결합니다
데이터 · AI
Python · MySQL · 국회 데이터 수집 · 요약·복구
API 전달
저장한 법안 정보와 처리 상태를 화면에 전달
프론트엔드
Next.js · React · TypeScript · 피드 · 타임라인
전체 연결 읽기 · 2개
- 데이터 · AI → API 전달
- API 전달 → 프론트엔드
다음으로 이어지는 질문
요약 다음에는 무엇을 알아야 할까?
법안 요약은 내용을 빠르게 파악하게 하지만, 왜 중요한지, 어떤 주장이 맞서는지, 무엇이 달라졌는지까지 설명하기에는 부족했습니다. 이 질문을 출발점으로, 궁금한 문제를 질문하고 원문 근거와 함께 읽는 IssueDigest를 만들고 있습니다.
IssueDigest 살펴보기국회 데이터가 읽을 수 있는 정보가 되기까지
화면에 연결저장·전달
가공한 데이터는 MySQL에 저장합니다. 화면에서는 API로 전달받은 요약과 처리 상태를 사용합니다.
전체 연결 읽기 · 3개
- 수집·정제 → 상태·요약
- 상태·요약 → 저장·전달
- 저장·전달 → 탐색·읽기
수집·AI 가공과 프론트엔드에서 맡은 작업을 서비스 흐름으로 연결했습니다.