코드 리뷰 인박스 앱 디자인

코드 리뷰 인박스 구조

이 데스크톱 앱 디자인은 GitHub 리뷰 요청 및 멘션 인박스를 세로로 정렬된 작업 공간으로 보여줍니다. 왼쪽 레일은 “All 5”로 시작하고, 이어서 “Participating,” “Mentions,” “Review requests 2”가 배치됩니다. 메인 열은 리뷰 요청, CI 검사, 할당된 이슈, 활동으로 작업을 그룹화합니다. 이러한 순서는 여러 엔지니어링 신호를 하나의 훑어보기 경로로 바꾸며, 별도 카테고리는 무엇에 먼저 주의를 기울여야 하는지 판단할 수 있을 만큼 충분한 맥락을 유지합니다.

증거로서의 리뷰 요청

첫 번째 리뷰 항목은 open-design/web PR #2371을 식별하고 “feat: orbit briefing card”를 표시하며 “3 of 5 reviewers approved · waiting on you + cody”를 보여줍니다. 그 아래의 파일 경로 “src/components/OrbitBriefingCard.tsx”는 간결한 diff를 소개하며 삭제된 줄과 추가된 줄을 보여줍니다. 이 조합을 통해 리뷰어는 승인 상태를 구체적인 변경 사항과 연결할 수 있습니다. 단점은 세로 밀도입니다. 코드 발췌가 유용한 맥락을 더해 주지만, 첫 번째 항목을 두 번째 요청보다 상당히 길게 만듭니다.

엔지니어링 트리아지 활용 사례

이 디자인은 서로 다른 여러 작업을 동일한 종류의 작업인 것처럼 취급하지 않으면서 지원합니다. 리뷰 요청은 응답이나 승인을 요구하고, CI 검사는 실패한 검증 상태를 나타내며, 할당된 이슈는 담당자가 정해진 백로그 작업을 나타내고, 활동은 완료된 변경 사항을 기록합니다. 이러한 그룹을 별도 패널로 유지하면 작업의 경계가 명확해집니다. 단점은 관련 신호가 하나의 범용 점수로 압축되지 않고 페이지 전체에 분산된다는 것입니다.

작업 공간 읽기 흐름

이 작업 공간은 동일한 크기의 대시보드 타일 대신 넓은 메인 열과 간결한 내비게이션 레일을 사용합니다. 제공된 CSS는 페이지 최대 너비를 1280px로 설정하며, 표시된 레이아웃은 이벤트 패널에 가로 공간의 대부분을 제공합니다. 이러한 비율은 긴 저장소 이름, 풀 리퀘스트 제목, 타임스탬프, 코드 줄을 각 항목을 별도의 카드 열에 배치하지 않고도 수용합니다. 단점은 긴 세로 훑어보기이며, 특히 리뷰 요청에 임베드된 diff가 포함될 때 두드러집니다.

필터에서 상세 정보로

상단 검색 필드에는 Type / to search라고 표시되지만 검색 핸들러는 없습니다. 사이드바 필터는 제공된 로컬 그룹에서 작동합니다. Participating은 리뷰 요청과 할당된 이슈를 표시하고, Review requests는 리뷰 그룹을 표시하며, Mentions는 소스의 멘션 마커가 있는 그룹만 표시합니다. 해당 마커는 답변 필요 리뷰 행이 아니라 할당된 이슈에 연결되어 있습니다. 이 필터링은 연결된 GitHub 검색 또는 인박스 서비스가 아닌 로컬 표시 동작입니다.

색상을 통한 상태 변화

색상은 겉보기에 비슷한 행 전반에 걸쳐 상태를 전달합니다. 초록색은 열려 있거나 정상으로 보이는 저장소 상태를 표시하고, 노란색은 응답을 기다리는 작업을 표시하며, 빨간색은 실패한 테스트를 표시하고, 보라색은 병합된 활동 항목을 표시합니다. 이슈 레이블은 “backend”와 “p1”에 각각 파란색과 분홍색 캡슐형 배지를 사용합니다. 따라서 모든 문장을 읽는 것보다 빠르게 훑어볼 수 있지만, 색상은 보조 수단으로 남습니다. 각 상태가 텍스트로도 작성되어 있어 색상만으로 충분하지 않을 때도 의미가 유지됩니다.

기능 범위

소스는 로컬 카테고리 필터링을 구현하고 행과 제목을 위한 외부 연결용 GitHub 링크를 생성합니다. 이러한 링크는 표시된 샘플 식별자를 사용해 고정된 저장소를 가리키지만, 링크가 존재한다고 해서 표시된 풀 리퀘스트, 이슈 또는 CI 결과가 검증되는 것은 아닙니다. 검색, 인증된 인박스 가져오기, 지속적인 리뷰 상태, 실제 테스트 실행은 구현되지 않았습니다. 이름, 수, 타임스탬프, 승인 상태, 코드 발췌는 디자인 시나리오를 위한 예시 콘텐츠로 남아 있습니다.