팝업 UI 디자인 작업 요청 · 3 / 3
기업정보 불러오기 팝업
[기관] Tech-Index > 기업·기술정보 입력 > 기업 정보 > [기업정보 관리]
- 진입 경로
- 기업 정보 섹션 헤더 › [기업정보 관리] 버튼
- 사용 회원
- 기관회원 전용 (개별평가 화면)
- 데이터 범위
- 현재 진행 중인 평가모형의 과거 평가 이력만 (모형별 5~12건)
- 현재 크기
- PC·모바일 모두 화면 중앙 모달 / 최대 920px
1팝업 구조
필터 → 건수 → 카드 목록 → 페이지네이션 → 푸터 순서입니다
1234567
| No | 영역 | 구성 요소 | 현재 적용 스펙 (변경 가능) |
|---|---|---|---|
| 1 | 헤더 | 팝업 제목 + 닫기(X) | 높이 73px · 제목 17px/700 · 하단 구분선 있음 |
| 2 | 기간 단축 | [오늘] [1개월] [3개월] [전체] pill 버튼 | 높이 30px · 기본값 [전체] 활성 · 클릭 즉시 반영 |
| 3 | 조회 조건 | 조회기간(날짜 2칸) + 검색어(대상 드롭다운 + 입력) | 컨트롤 높이 36px · 검색 대상 = 기업명 / 조회 기관 |
| 4 | 조회 버튼 | [초기화] + [조회] | 검색어 줄 아래 우측 정렬 · 아이콘 + 텍스트 |
| 5 | 건수 표시 | 좌측 평가모형 약칭 · 우측 “총 N건” | 양끝 정렬 · 15px |
| 6 | 기업 카드 | 라디오 + 기업명 + 평가일 + 사업자번호 · 조회 기관 | 카드 R12 · 기업명 17px/700 · 선택 시 #f4f8ff |
| 7 | 푸터 | 우측 정렬 [선택] 버튼 | 88×42px · 선택 전 비활성 |
목록이 10건을 넘으면 카드 아래 페이지네이션이 붙습니다(페이지당 10건). 캡처에는 스크롤 아래라 보이지 않으며, 케이스 C5에서 확인할 수 있습니다.
2케이스별 상태 — 디자인이 필요한 화면
총 8케이스 · 각 상태마다 시안 필요
C1기본 · 전체 이력
기본
발생 조건 · 팝업을 처음 열었을 때
현재 평가모형의 이력만 최신순으로. 기간은 [전체], 선택 없음, [선택] 버튼 비활성 상태입니다.
디자인 포인트 · 카드 1장에 들어가는 정보가 4가지(기업명·평가일·사업자번호·조회 기관)입니다.
C2조회 조건 적용
조회
발생 조건 · 검색 대상·검색어 입력 후 [조회]
검색 대상은 기업명 / 조회 기관 2종. 기간 버튼은 클릭 즉시, 날짜·검색어는 [조회]를 눌러야 반영됩니다.
디자인 포인트 · “즉시 반영되는 필터”와 “[조회] 필요 필터”가 섞여 있습니다 — 위계 표현이 필요합니다.
C3선택 상태
활성
발생 조건 · 카드 클릭
선택 카드가 강조되고 우측 하단 [선택]이 활성화됩니다. 같은 카드를 다시 누르면 해제.
디자인 포인트 · 카드 높이가 크므로 선택 강조가 과하지 않게(테두리+연한 배경) 잡아 주세요.
C4결과 없음
빈 상태
발생 조건 · 조회 결과 0건
“조회된 데이터가 없습니다.” 안내만 남고 페이지네이션은 사라집니다. 건수는 총 0건.
디자인 포인트 · 3개 팝업 공통 빈 상태 규격 적용.
C5페이지 이동
10건/쪽
발생 조건 · 이력이 10건을 넘을 때
페이지당 10건. 현재 페이지 기준 최대 5개 번호 + 이전/다음. 페이지를 옮기면 선택은 해제됩니다.
디자인 포인트 · 번호 버튼 기본/현재/비활성 3상태가 필요합니다.
C6다크 모드
Dark
발생 조건 · 사이트 다크 모드 ON
카드 #252525 · 선택 #1e2a44 · 포인트 #60a5fa 계열을 사용합니다.
디자인 포인트 · 필터 영역(회색 밴드)의 다크 대비도 함께 확인 필요.
C7모바일 · 태블릿
390px
발생 조건 · 화면 폭 768px 이하
중앙 모달 유지. 기간 버튼이 폭을 나눠 갖고, 날짜·검색어가 줄바꿈됩니다.
디자인 포인트 · 조회 조건이 4줄까지 늘어나므로 목록 영역 확보가 관건입니다.
C8선택 완료 피드백
토스트
발생 조건 · [선택] 클릭 직후
팝업이 닫히면서 화면에 “✓ 기업정보가 불러와졌습니다.” 토스트가 잠깐 뜨고, 입력 폼 전체에 값이 채워집니다.
디자인 포인트 · 토스트 디자인(위치·지속시간·다크)도 함께 정해 주세요.
이 팝업은 선택 시 기업정보 전체(기업명·사업자번호·설립일·대표자·업종코드 등)가 폼에 한 번에 채워집니다. 되돌리기 기능이 없으므로 “선택 = 덮어쓰기”라는 점이 사용자에게 전달되어야 하는지 검토가 필요합니다.
3상태 변화 흐름
사용자 조작에 따른 화면 전환
팝업 열기
현재 모형 이력 · 기간 [전체]
›
기간·검색어 조회
기간 버튼은 즉시 / 나머지는 [조회]
›
기업 카드 선택
라디오 1개 · 재클릭 시 해제
›
[선택]
폼 전체 자동 입력 + 토스트 후 닫힘
초기화 · [초기화]는 기간 [전체] · 검색 대상 기업명 · 검색어 없음으로 되돌리고 바로 조회합니다.
페이지 · 조회·초기화하면 1페이지로 돌아가고 선택도 해제됩니다.
닫기 · 헤더 X · ESC · 배경 클릭. 선택만 하고 닫으면 폼에는 반영되지 않습니다.
4디자인 작업 범위
산출물 기준
| 구분 | 항목 | 필요 산출물 | 비고 · 제약 |
|---|---|---|---|
| 필수 | 기업 카드 | 기본 / hover / 선택 / 포커스 | 정보 4종 배치 · 모바일 줄바꿈 포함 |
| 필수 | 조회 조건 영역 | 기간 pill · 날짜 · 드롭다운 · 입력 · 버튼 2종 | 즉시 반영 / [조회] 필요 구분 |
| 필수 | [선택] 버튼 | 활성 · 비활성 2종 | 우측 정렬 · 다른 팝업(풀폭)과 형태가 달라 통일 여부 결정 필요 |
| 필수 | 빈 상태(결과 없음) | 안내 화면 1종 | 3개 팝업 공통 규격 |
| 필수 | 페이지네이션 | 기본 / 현재 / 비활성 | 페이지당 10건 |
| 필수 | 건수 표시 줄 | 모형명(좌) · 총 N건(우) | 양끝 정렬 |
| 필수 | 다크 모드 | 위 전 케이스의 다크 버전 | 필터 밴드 대비 확인 |
| 필수 | 모바일(≤768px) | 중앙 모달 축소형 | 조회 조건 줄바꿈 레이아웃 |
| 필수 | 완료 토스트 | 토스트 1종(라이트·다크) | 위치·노출 시간 포함 |
공통 유의사항
- 세 팝업(업종코드 · 기술분류 · 기업정보 불러오기)은 같은 화면 안에서 연달아 쓰이므로 통일된 규격이 필요합니다. 헤더·버튼·목록 행·빈 상태는 공통 컴포넌트로 잡아 주세요.
- 모바일·태블릿도 중앙 모달입니다(바텀시트 폐지 확정). 화면 폭이 좁아지면 여백과 글자만 줄어듭니다.
- 다크 모드는 필수입니다. 사이트 전역 테마(배경 #1e1e1e / 텍스트 #e0e0e0 / 포인트 #93aeff)를 따릅니다.
- 필터·검색은 [조회]/[검색] 버튼 또는 Enter 로만 반영됩니다(입력 즉시 반영 아님). 버튼 위계가 드러나야 합니다.
- 치수·색·타이포는 전부 조정 가능합니다. 다만 케이스 구성과 상태 전환 규칙은 확정된 기획이라 변경 시 별도 협의가 필요합니다.
작성일 2026-09-16 · 기준 파일 individual-evaluation.html (기업정보 불러오기 팝업) · 화면 캡처는 현재 퍼블리싱된 실제 구현 상태입니다.