@ncds/ui-admin 1.8.21-alpha.7 → 1.8.21-alpha.9

package/dist/cjs/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.test.js

@@ -10,11 +10,11 @@ var _PostcodeSearchModal = require("../PostcodeSearchModal");
 // React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 const PAGE_SIZE = 15;
-/** Tip 압축 임계값(30) 이하 결과 건수 — Tip 미노출 케이스 */
+/** 한 페이지에 다 들어가는 결과 건수 — Tip 카드 미노출 케이스 */
 const SMALL_RESULT_COUNT = 5;
 /** SMALL_RESULT_COUNT 기준 총 페이지 수 */
 const SMALL_RESULT_TOTAL_PAGE = 1;
-/** Tip 압축 임계값(30) 초과 결과 건수 — Tip 압축 + totalPage(3) <= 페이지 그룹 크기(10) */
+/** 여러 페이지로 나뉘는 결과 건수 — totalPage(3) <= 페이지 그룹 크기(10) */
 const LARGE_RESULT_COUNT = 45;
 /** LARGE_RESULT_COUNT 기준 총 페이지 수 */
 const LARGE_RESULT_TOTAL_PAGE = 3;
@@ -22,6 +22,10 @@ const LARGE_RESULT_TOTAL_PAGE = 3;
 const HUGE_RESULT_COUNT = 200;
 /** 클릭 대상 페이지 번호 */
 const TARGET_PAGE = 3;
+/** 본문을 아래로 내린 상태를 흉내 낼 scrollTop 값 */
+const SCROLLED_OFFSET = 120;
+/** 맨 위로 되돌린 scrollTop 값 */
+const SCROLL_TOP = 0;
 /** 결과 더미 생성 기준값 */
 const ZIP_CODE_BASE = 13529;
 const ROAD_NUMBER_BASE = 242;
@@ -96,7 +100,23 @@ function baseProps() {
   };
 }
 const tipOf = el => el.querySelector('.ncua-postcode-search-modal__tip');
-const isCompactTip = el => Boolean(el.querySelector('.ncua-postcode-search-modal__tip-compact-text'));
+const searchAreaOf = el => el.querySelector('.ncua-postcode-search-modal__search-area');
+const isFixedSearchArea = el => Boolean(searchAreaOf(el)?.classList.contains('is-fixed'));
+const scrollerOf = el => el.querySelector('.ncua-modal__content');
+/** jsdom 은 레이아웃이 없어 scrollTop 이 항상 0 이므로, 값을 덮어쓰고 scroll 이벤트를 쏜다. */
+function scrollContent(el, scrollTop) {
+  const scroller = scrollerOf(el);
+  if (!scroller) throw new Error('모달 본문 스크롤 컨테이너를 찾을 수 없습니다');
+  Object.defineProperty(scroller, 'scrollTop', {
+    value: scrollTop,
+    configurable: true
+  });
+  (0, _testUtils.act)(() => {
+    scroller.dispatchEvent(new Event('scroll'));
+  });
+}
+const resultTitleOf = el => el.querySelector('.ncua-postcode-search-modal__result-title');
+const resultDescOf = el => el.querySelector('.ncua-postcode-search-modal__result-desc');
 const countLabelOf = el => el.querySelector('.ncua-postcode-search-modal__count');
 const itemsOf = el => el.querySelectorAll('.ncua-postcode-search-modal__item');
 const inputRootOf = el => el.querySelector('.ncua-input');
@@ -116,13 +136,13 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
   _vitest.vi.unstubAllGlobals();
 });
 (0, _vitest.describe)('PostcodeSearchModal — Case 1: 검색 전 초기 상태', () => {
-  (0, _vitest.it)('상세 Tip 만 노출되고 카운트·리스트·페이지네이션·EmptyState 는 렌더되지 않는다', () => {
+  (0, _vitest.it)('Tip 카드만 노출되고 카운트·리스트·페이지네이션·EmptyState 는 렌더되지 않는다', () => {
     // Given: 검색어·결과가 비어 있고 에러도 없는 상태에서
     // When: 모달을 열면
     const el = render(baseProps());
-    // Then: 상세 Tip 만 노출되고 결과 영역은 전부 미노출이다
+    // Then: Tip 카드만 노출되고 결과 영역은 전부 미노출이다
     (0, _vitest.expect)(tipOf(el)).not.toBeNull();
-    (0, _vitest.expect)(isCompactTip(el)).toBe(false);
+    (0, _vitest.expect)(resultTitleOf(el)).toBeNull();
     (0, _vitest.expect)(countLabelOf(el)).toBeNull();
     (0, _vitest.expect)(el.querySelector('.ncua-postcode-search-modal__list')).toBeNull();
     (0, _vitest.expect)(paginationOf(el)).toBeNull();
@@ -157,15 +177,15 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     (0, _vitest.expect)(inputRootOf(el)?.classList.contains('destructive')).toBe(true);
     (0, _vitest.expect)(hintOf(el)?.textContent).toBe(hint);
   });
-  (0, _vitest.it)('에러 상태에서는 상세 Tip 이 노출되고 리스트·EmptyState 는 미노출이다', () => {
+  (0, _vitest.it)('에러 상태에서는 Tip 카드가 노출되고 리스트·EmptyState 는 미노출이다', () => {
     // Given/When: 에러코드를 전달해 렌더하면
     const el = render(baseProps({
       searchQuery: '서',
       errorCode: 'E0008'
     }));
-    // Then: 상세 Tip 만 남는다
+    // Then: Tip 카드만 남는다
     (0, _vitest.expect)(tipOf(el)).not.toBeNull();
-    (0, _vitest.expect)(isCompactTip(el)).toBe(false);
+    (0, _vitest.expect)(resultTitleOf(el)).toBeNull();
     (0, _vitest.expect)(el.querySelector('.ncua-postcode-search-modal__list')).toBeNull();
     (0, _vitest.expect)(emptyStateOf(el)).toBeNull();
     (0, _vitest.expect)(paginationOf(el)).toBeNull();
@@ -185,11 +205,11 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
       results: [],
       totalCount: 0
     }));
-    // Then: "검색 결과가 없습니다." 는 뜨지 않고 상세 Tip 만 유지된다
+    // Then: "검색 결과가 없습니다." 는 뜨지 않고 Tip 카드만 유지된다
     (0, _vitest.expect)(emptyStateOf(el)).toBeNull();
     (0, _vitest.expect)(tipOf(el)).not.toBeNull();
   });
-  (0, _vitest.it)('EmptyState 가 "검색 결과가 없습니다." 로 렌더되고 상세 Tip 이 유지된다', () => {
+  (0, _vitest.it)('EmptyState 가 "검색 결과가 없습니다." 로 렌더되고 Tip 카드가 유지된다', () => {
     // Given: 검색어는 있으나 결과가 0건인 상태에서
     const el = render(baseProps({
       searchQuery: '존재하지않는주소',
@@ -203,14 +223,14 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     // Then: EmptyState 가 노출되고 오류 스타일은 아니며 페이지네이션은 없다
     (0, _vitest.expect)(emptyStateOf(el)?.textContent).toContain('검색 결과가 없습니다.');
     (0, _vitest.expect)(tipOf(el)).not.toBeNull();
-    (0, _vitest.expect)(isCompactTip(el)).toBe(false);
+    (0, _vitest.expect)(resultTitleOf(el)).toBeNull();
     (0, _vitest.expect)(inputRootOf(el)?.classList.contains('destructive')).toBe(false);
     (0, _vitest.expect)(paginationOf(el)).toBeNull();
     (0, _vitest.expect)(countLabelOf(el)).toBeNull();
   });
 });
-(0, _vitest.describe)('PostcodeSearchModal — Case 6: 결과 30건 이하', () => {
-  (0, _vitest.it)('카운트 "검색 5개" 와 5행 리스트가 렌더되고 Tip 은 미노출된다', () => {
+(0, _vitest.describe)('PostcodeSearchModal — Case 6: 결과 있음', () => {
+  (0, _vitest.it)('카운트 "검색 5개" 와 5행 리스트가 렌더되고 Tip 카드는 미노출된다', () => {
     // Given/When: 5건 결과를 전달하면
     const results = makeResults(SMALL_RESULT_COUNT);
     const el = render(baseProps({
@@ -218,7 +238,7 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
       results,
       totalCount: SMALL_RESULT_COUNT
     }));
-    // Then: 카운트·리스트가 노출되고 Tip 은 사라진다
+    // Then: 카운트·리스트가 노출되고 Tip 카드는 사라진다
     (0, _vitest.expect)(countLabelOf(el)?.textContent).toBe(`검색 ${SMALL_RESULT_COUNT}개`);
     (0, _vitest.expect)(itemsOf(el)).toHaveLength(SMALL_RESULT_COUNT);
     (0, _vitest.expect)(tipOf(el)).toBeNull();
@@ -255,19 +275,34 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     (0, _vitest.expect)(el.querySelectorAll('.ncua-pagination__page-num')).toHaveLength(SMALL_RESULT_TOTAL_PAGE);
   });
 });
-(0, _vitest.describe)('PostcodeSearchModal — Case 7: 결과 30건 초과', () => {
-  (0, _vitest.it)('카운트 "검색 45개" 와 15행 리스트, 압축 Tip 이 렌더된다', () => {
+(0, _vitest.describe)('PostcodeSearchModal — Case 7: 결과 여러 페이지', () => {
+  (0, _vitest.it)('카운트 "검색 45개" 와 15행 리스트가 렌더되고 Tip 카드 대신 결과 안내 문구가 남는다', () => {
     // Given/When: 45건 중 첫 페이지 15건을 전달하면
     const el = render(baseProps({
       searchQuery: '판교로',
       results: makeResults(PAGE_SIZE),
       totalCount: LARGE_RESULT_COUNT
     }));
-    // Then: 압축 Tip 이 노출된다
+    // Then: Tip 카드는 사라지고 검색 영역의 안내 문구(제목·조합)가 남는다
     (0, _vitest.expect)(countLabelOf(el)?.textContent).toBe(`검색 ${LARGE_RESULT_COUNT}개`);
     (0, _vitest.expect)(itemsOf(el)).toHaveLength(PAGE_SIZE);
-    (0, _vitest.expect)(tipOf(el)).not.toBeNull();
-    (0, _vitest.expect)(isCompactTip(el)).toBe(true);
+    (0, _vitest.expect)(tipOf(el)).toBeNull();
+    (0, _vitest.expect)(resultTitleOf(el)?.textContent).toBe('아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.');
+    (0, _vitest.expect)(resultDescOf(el)?.textContent).toBe('도로명+건물번호, 지역명+지번, 지역명+건물명(아파트명)');
+  });
+  (0, _vitest.it)('검색 인풋과 안내 문구가 같은 고정 영역 안에 묶이고 결과 목록은 그 밖에 있다', () => {
+    // Given/When: 결과가 여러 페이지인 상태로 렌더하면
+    const el = render(baseProps({
+      searchQuery: '판교로',
+      results: makeResults(PAGE_SIZE),
+      totalCount: LARGE_RESULT_COUNT
+    }));
+    // Then: 상단 고정 영역이 인풋 행과 안내 문구를 함께 감싸고, 스크롤되는 목록은 밖에 남는다
+    const searchArea = searchAreaOf(el);
+    (0, _vitest.expect)(searchArea?.querySelector('.ncua-postcode-search-modal__search')).not.toBeNull();
+    (0, _vitest.expect)(searchArea?.querySelector('.ncua-postcode-search-modal__result-title')).not.toBeNull();
+    (0, _vitest.expect)(searchArea?.querySelector('.ncua-postcode-search-modal__result-desc')).not.toBeNull();
+    (0, _vitest.expect)(searchArea?.querySelector('.ncua-postcode-search-modal__list')).toBeNull();
   });
   (0, _vitest.it)('totalPage(3) 가 PAGER_WINDOW(10) 이하이므로 점프 버튼은 노출되지 않는다', () => {
     // Given/When: totalCount=45, PAGE_SIZE=15 → totalPage=3
@@ -294,7 +329,8 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     (0, _vitest.expect)(el.querySelector('.ncua-pagination__before')).not.toBeNull();
     (0, _vitest.expect)(el.querySelector('.ncua-pagination__next')).not.toBeNull();
     (0, _vitest.expect)(el.querySelector('.ncua-pagination__last')).not.toBeNull();
-    (0, _vitest.expect)(isCompactTip(el)).toBe(true);
+    (0, _vitest.expect)(tipOf(el)).toBeNull();
+    (0, _vitest.expect)(resultTitleOf(el)).not.toBeNull();
   });
   (0, _vitest.it)('3페이지 버튼을 클릭하면 onPageChange(3) 이 호출된다', () => {
     // Given: 대량 결과가 렌더된 상태에서
@@ -524,8 +560,8 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
   });
 });
 (0, _vitest.describe)('PostcodeSearchModal.Tip — 서브컴포넌트', () => {
-  (0, _vitest.it)('상세 모드는 조합 3종과 예시 주소를 모두 보여준다', () => {
-    // Given/When: 상세 Tip 이 노출되는 초기 상태로 렌더하면
+  (0, _vitest.it)('조합 3종과 예시 주소를 모두 보여준다', () => {
+    // Given/When: Tip 카드가 노출되는 초기 상태로 렌더하면
     const el = render(baseProps());
     // Then: 안내 문구와 3개 조합, 예시 주소가 모두 포함된다
     const tipText = tipOf(el)?.textContent ?? '';
@@ -537,23 +573,8 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     (0, _vitest.expect)(tipText).toContain('지역명(동·리) + 건물명(아파트명)');
     (0, _vitest.expect)(tipText).toContain('예) 구로동 대륭포스트타워8차');
   });
-  (0, _vitest.it)('압축 모드는 조합 3종만 보여주고 예시는 생략한다', () => {
-    // Given/When: 30건 초과 결과로 압축 Tip 을 렌더하면
-    const el = render(baseProps({
-      searchQuery: '판교로',
-      results: makeResults(PAGE_SIZE),
-      totalCount: LARGE_RESULT_COUNT
-    }));
-    // Then: 조합만 한 줄로 남고 예시 주소는 없다
-    const tipText = tipOf(el)?.textContent ?? '';
-    (0, _vitest.expect)(tipText).toContain('아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.');
-    (0, _vitest.expect)(tipText).toContain("'도로명+건물번호', '지역명+지번', '지역명+건물명(아파트명)'");
-    (0, _vitest.expect)(tipText).not.toContain('디지털로26길 43');
-    (0, _vitest.expect)(tipText).not.toContain('구로동 235-3');
-    (0, _vitest.expect)(tipText).not.toContain('구로동 대륭포스트타워8차');
-  });
   (0, _vitest.it)('Tip 아이콘은 하드코딩 SVG 가 아니라 아이콘 슬롯 클래스로 렌더된다', () => {
-    // Given/When: 상세 Tip 을 렌더하면
+    // Given/When: Tip 카드를 렌더하면
     const el = render(baseProps());
     // Then: 지정한 아이콘 클래스를 가진 svg 가 존재한다
     (0, _vitest.expect)(tipOf(el)?.querySelector('svg.ncua-postcode-search-modal__tip-icon')).not.toBeNull();
@@ -563,4 +584,40 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     (0, _vitest.expect)(typeof _PostcodeSearchModal.PostcodeSearchModal.Tip).toBe('function');
     (0, _vitest.expect)(_PostcodeSearchModal.PostcodeSearchModal.Tip.displayName).toBe('PostcodeSearchModal.Tip');
   });
+});
+(0, _vitest.describe)('PostcodeSearchModal — 검색 영역 고정 표시', () => {
+  (0, _vitest.it)('결과가 있어도 스크롤하기 전에는 is-fixed 가 붙지 않는다', () => {
+    // Given/When: 결과를 스크롤하지 않은 상태로 렌더하면
+    const el = render(baseProps({
+      searchQuery: '판교로',
+      results: makeResults(PAGE_SIZE),
+      totalCount: LARGE_RESULT_COUNT
+    }));
+    // Then: 검색 영역이 아직 떠 있지 않으므로 경계선 클래스도 없다
+    (0, _vitest.expect)(isFixedSearchArea(el)).toBe(false);
+  });
+  (0, _vitest.it)('결과를 스크롤하면 is-fixed 가 붙고, 맨 위로 돌아오면 다시 사라진다', () => {
+    // Given: 결과가 렌더된 상태에서
+    const el = render(baseProps({
+      searchQuery: '판교로',
+      results: makeResults(PAGE_SIZE),
+      totalCount: LARGE_RESULT_COUNT
+    }));
+    // When: 본문을 아래로 스크롤하면
+    scrollContent(el, SCROLLED_OFFSET);
+    // Then: 경계선 클래스가 붙는다
+    (0, _vitest.expect)(isFixedSearchArea(el)).toBe(true);
+    // When: 다시 맨 위로 올리면
+    scrollContent(el, SCROLL_TOP);
+    // Then: 경계선 클래스가 사라진다
+    (0, _vitest.expect)(isFixedSearchArea(el)).toBe(false);
+  });
+  (0, _vitest.it)('결과가 없으면 스크롤이 일어나도 is-fixed 가 붙지 않는다', () => {
+    // Given: 초기 상태(결과 없음)로 렌더하고
+    const el = render(baseProps());
+    // When: 본문 스크롤 이벤트가 들어와도
+    scrollContent(el, SCROLLED_OFFSET);
+    // Then: 고정할 대상이 없으므로 클래스는 붙지 않는다
+    (0, _vitest.expect)(isFixedSearchArea(el)).toBe(false);
+  });
 });