Appearance
Product Price Monitor UI 개선안 v1.0
0. 목적
Product Price Monitor의 목적은 등록한 상품의 전일/당일 가격을 비교해서, 가격 변동 여부를 O/X로 빠르게 확인하고, 필요 없는 상품은 즉시 정리하는 것이다.
핵심 판단 기준은 단순하다.
text
전일 가격과 당일 가격이 다르면 O
전일 가격과 당일 가격이 같으면 X
전일 또는 당일 데이터가 없으면 -
1. 화면 전체 구조
기존 화면 구조는 유지하되, 4번과 5번 영역을 운영용으로 정리한다.
text
1. API 설정
2. 기준 날짜/시간
3. URL 등록
4. 전일/당일 가격 비교 결과 ← 메인 운영 화면
5. 등록 URL 관리 ← 접기/펼치기 보조 관리 화면
운영자는 기본적으로 4번 표만 보고 가격 변동 여부를 판단한다.
5번 등록 URL 관리는 평소에는 접어두고, URL 확인이나 삭제가 필요할 때만 펼친다.
2. 4번 메인 패널
패널명
text
4. 전일/당일 가격 비교 결과
설명 문구
text
등록 상품 전체를 표시하고, 전일 대비 가격 변동 여부를 O/X로 확인합니다.
3. 메인 표 컬럼 최종안
가로 스크롤을 줄이고 한 화면에서 보기 쉽게 하기 위해 컬럼을 최소화한다.
text
선택 | 변동 | 몰 | 상품명 / 메모 | 전일가 | 당일가
제거할 컬럼
text
상태
수집시각
URL
URL 컬럼은 제거하고, 상품명을 클릭하면 상품 페이지가 새 창으로 열리게 한다.
4. 상품명 링크 처리
기존 방식:
text
URL 컬럼의 [열기] 버튼 클릭
변경 방식:
text
상품명 / 메모 클릭 → 상품 페이지 새 창 열기
상품명은 링크 스타일로 표시한다.
text
굵은 글씨
브랜드 컬러
마우스 hover 시 밑줄
5. 몰 컬럼 표시 방식
네이버 계열 몰명은 길기 때문에 2줄로 표시한다.
| 원본 몰명 | 화면 표시 |
|---|---|
| 네이버 브랜드스토어 | 네이버 브랜드스토어 |
| 네이버 스마트스토어 | 네이버 스마트스토어 |
| 무신사 | 무신사 |
| 올리브영 | 올리브영 |
| 쿠팡 | 쿠팡 |
| 기타 | 기타 |
목표는 네이버 몰명이 표 폭을 과하게 차지하지 않게 하는 것이다.
6. 변동 표시 규칙
changeMark 값을 기준으로 표시한다.
text
O = 전일/당일 가격 다름
X = 전일/당일 가격 같음
- = 전일 또는 당일 데이터 부족
7. 가격 변동 강조
가격 변동이 있는 상품은 즉시 눈에 띄어야 한다.
O 행 강조
text
changeMark = O
→ 행 전체 배경색 강조
추천 스타일:
text
연한 붉은색 또는 살구색 배경
왼쪽에 진한 빨간 포인트 라인
가격 색상
가격 변동이 있으면 당일가를 빨간색으로 표시한다.
text
O 행의 당일가 → 빨간색
전일가 → 기본색
이유는 실제 확인해야 하는 값이 오늘 가격이기 때문이다.
8. 삭제 기능
삭제는 두 가지 방식을 모두 지원한다.
A. 선택 삭제
표 상단에 버튼을 둔다.
text
[선택 삭제] [최신 결과 조회]
동작:
text
1. 행 체크박스 선택
2. 선택 삭제 클릭
3. "선택한 N개 상품을 삭제할까요?" 확인
4. 확인 시 DELETE /products/:id 반복 실행
5. 등록 URL 목록과 비교 결과 자동 새로고침
선택된 상품이 없으면 선택 삭제 버튼은 비활성화한다.
B. 행별 즉시 삭제
각 행의 선택 컬럼 안에 삭제 버튼을 둔다.
text
☐
삭제
동작:
text
행별 삭제 클릭
→ "이 상품을 삭제할까요?"
→ 확인 시 해당 상품 1개 삭제
→ 등록 URL 목록과 비교 결과 자동 새로고침
9. 전체 선택 기능
표 헤더의 선택 컬럼에 전체 선택 체크박스를 둔다.
text
☐ 선택
동작:
text
체크 ON → 현재 표시된 전체 행 선택
체크 OFF → 전체 선택 해제
정렬 상태에서도 현재 표시된 행 기준으로 동작한다.
10. 정렬 기능
정렬은 3개만 유지한다.
text
변동 클릭 → O / - / X 정렬
몰 클릭 → 네이버 / 무신사 / 올리브영 / 쿠팡 / 기타 정렬
상품명 클릭 → 가나다순 정렬
전일가/당일가 정렬은 이번 버전에서는 제외한다.
이유:
text
현재 목적은 가격 크기 비교가 아니라 변동 여부 확인이기 때문
11. 4번 표 내부 스크롤
상품 수가 많아지면 페이지 전체가 길어지는 문제를 막기 위해, PC에서는 4번 표 영역에 내부 스크롤을 적용한다.
PC
text
4번 패널 안의 표 영역만 스크롤
페이지 전체는 과하게 길어지지 않음
추천값:
text
max-height: 620px ~ 720px
overflow-y: auto
헤더 고정
내부 스크롤 시 컬럼명이 사라지지 않도록 헤더를 고정한다.
text
선택 | 변동 | 몰 | 상품명 / 메모 | 전일가 | 당일가
모바일
모바일은 카드형이므로 내부 스크롤보다 기존 페이지 스크롤을 유지한다.
text
PC → 내부 스크롤 + 헤더 고정
모바일 → 기존 카드형 + 페이지 스크롤
12. 5번 등록 URL 관리
5번은 삭제하지 않고 접기/펼치기 형태로 전환한다.
접힌 상태
text
▶ 5. 등록 URL 관리 21개
펼친 상태
text
▼ 5. 등록 URL 관리 21개
상품명 / URL / 열기 / 삭제
역할:
text
4번 = 실제 운영 메인 화면
5번 = URL 세부 관리용 보조 패널
평소에는 접어두고 필요할 때만 펼친다.
13. 최종 화면 예시
text
4. 전일/당일 가격 비교 결과 21개
등록 상품 전체를 표시하고, 전일 대비 가격 변동 여부를 O/X로 확인합니다.
[선택 삭제] [최신 결과 조회]
선택 변동 몰 상품명 / 메모 전일가 당일가
☐ 삭제 X 올리브영 페리페라 브이 쉐딩 12,000원 12,000원
☐ 삭제 O 무신사 무지개맨션 오브제 리퀴드 틴트 11,880원 10,900원
☐ 삭제 - 네이버 체크 포인트 - 판매중지/가격변동 테스트 - -
브랜드스토어
O 행은 배경을 강조한다.O 행의 당일가는 빨간색으로 표시한다.
상품명을 클릭하면 상품 URL이 새 창으로 열린다.
14. 작업 순서
text
1. 메인 표 컬럼 축소
2. 상품명 링크 처리
3. 몰 컬럼 네이버 2줄 표시
4. O 행 배경 강조
5. O 행 당일가 빨간색 처리
6. 선택 체크박스 추가
7. 전체선택 체크박스 추가
8. 선택 삭제 버튼 추가
9. 행별 삭제 버튼 추가
10. 4번 표 내부 스크롤 + 헤더 고정
11. 5번 등록 URL 목록 접기/펼치기 처리
12. 빌드
13. 커밋/푸시
14. 도메인 확인
15. 최종 요약
text
메인 표 컬럼:
선택 | 변동 | 몰 | 상품명 / 메모 | 전일가 | 당일가
핵심 기능:
전체선택
선택삭제
행별삭제
상품명 클릭 URL 열기
O 행 배경 강조
O 행 당일가 빨간색
네이버 몰명 2줄 표시
PC 표 내부 스크롤
PC 헤더 고정
5번 등록 URL 목록 접기/펼치기