BuildingHub 2
오늘 한 일
전날까지 공개 사이트에 시간을 다 써서 관리자는 기능만 도는 상태였다. 숫자와 표는 있는데 그 자리에서 처리할 방법이 없었다.
목록에서 바로 처리
승인 대기 표의 각 행에 승인·반려·상세를 붙였다. 승인은 사유가 필요 없어 목록에서 끝나고, 반려는 신청자에게 이유가 전달돼야 하므로 사유를 받는다. 상세는 예약 관리 화면의 서랍을 그대로 재사용한다.
검색과 필터
예약 검색·상태 필터를 화면에 붙였다. API는 처음부터 있었는데 쓸 길이 없었다. 검색은 날짜를 넘어 전체에서 찾는다. “그 회사 예약이 언제였지”가 검색의 실제 쓰임이라 하루치 안에서만 찾는 검색은 쓸모가 적다.
목록 접기
입주사 14곳·매장 16곳이 전부 펼쳐져 있어 편집 화면이 스크롤만 길었다. 접힌 줄은 52px, 펼치면 237px이다. 갤러리처럼 사진이 주인공인 목록은 접힌 줄에 썸네일을 함께 보여준다. 글자만 보면 어느 줄이 어느 사진인지 알 수 없다.
브라우저 기본 팝업 제거
window.confirm·prompt를 쓰던 여섯 곳을 자체 대화상자로 바꿨다. 공개 사이트의 예약 취소도 화면 안 폼으로 바꿨다.
시드 이미지 출처 기록
이미지를 어디서 가져왔냐는 질문에 저장소만 봐서는 답할 수 없었다. 21장 전부의 출처를 되찾아 기록하고, 사람이 읽는 목록을 자동 생성해 배포에도 함께 올라가게 했다.
막힌 부분
저작권 회피가 전제인데 증명 수단이 없었다
문제. 이미지 목록에는 슬롯 이름·해시 id·크기만 있고 어디서 왔는지가 없었다. CC0 라 표기 의무는 없지만, 저작권 문제를 피하려고 시작한 일에서 출처를 못 대면 앞뒤가 맞지 않는다. 남에게 보여줄 물건이라 더 그렇다.
원인. 받을 때 출처를 기록하는 단계를 넣지 않았다. 라이선스만 확인하고 파일만 챙겼다.
- 해결: 임시 폴더에 남아 있던 원본의 바이트 해시를 검색 결과와 대조해 21장을 전부 되찾았다. 목록에 제목·라이선스·제공처·원본 주소를 채우고, 출처 없는 항목이 있으면 시드가 멈추게 했다
- 남은 한계: 그 임시 폴더가 지워졌으면 추적이 불가능했다. 다음부터는 받는 자리에서 함께 적는다
테스트가 만든 데이터가 데모 화면에 쌓여 있었다
문제. 문의 관리 화면에 같은 이름의 문의가 열세 건 쌓여 있었다. 전부 스모크 테스트가 만든 것이다.
- 원인: 초기화 스크립트가
inquiries테이블을 지우지 않았다. 다른 테이블은 지우는데 이것만 빠졌다 - 해결: 지우는 목록에 넣고, 답변 전후를 섞은 현실적인 문의 다섯 건을 기본 데이터로 넣었다. 문의 화면이 비어 있으면 기능이 없는 것처럼 보인다
자리표시자 하나가 세 배로 커졌다
문제. 접힌 줄에 넣은 썸네일 자리표시자가 38px이어야 하는데 98px이었다. 줄 전체가 124px로 부풀었다.
원인. 자리표시자에 empty라는 클래스를 붙였는데, 전역에 같은 이름의 빈 상태 스타일이 있었다. 그쪽 padding: 48px 0이 그대로 먹었다.
/* 전역 유틸 — 빈 상태 안내문 */
.empty { padding: 48px 0; text-align: center; }- 해결: 모디파이어 이름에 블록 이름을 붙였다(
list-item-thumb-none) - 남은 교훈: 흔한 단어를 클래스로 쓰면 전역과 부딪힌다. 눈으로는 “좀 크네” 정도라 재야 잡힌다
결과가 없는데 통과하던 검사
문제. 상태 필터 검사가 늘 통과했다. 실제로는 결과가 0건이었다.
// 빈 배열에서 every는 참이다. 결과가 없으면 조용히 통과한다.
check("상태 필터", statuses.every((t) => t === "취소"));- 해결: 건수도 함께 본다. 결과가 0이면 필터가 통했는지 알 수 없다
- 같이 고친 것: “접힌 줄이 64px 미만” 같은 픽셀 단정도 여백만 바꾸면 깨진다. “접은 것이 펼친 것보다 확실히 짧은가”로 바꿔 의도한 성질을 재게 했다
휴대폰 폭에서 관리자 표의 제목이 세로로 쪼개졌다
“회의실”이 회/의/실 세 줄로 접혔다. 공개 사이트 표는 멀쩡했는데 그쪽은 열이 적어서다.
- 원인: 열이 많은 표는 폭이 모자라면 칸이 눌리고, 눌린 칸 안에서 글자가 세로로 접힌다
- 해결: 표의 최소 폭을 620px로 지키고 가로 스크롤로 밀어 보게 했다. 좁은 화면에서 열이 많은 표는 줄여서 다 보이게 하는 것보다 미는 편이 낫다
토요일에만 깨지는 검사
문제. 브라우저 검사가 실패했는데 앱은 멀쩡했다. 회의실은 평일만 운영해서 주말에는 슬롯이 전부 비활성이고 기본 데이터도 없다.
- 원인: 검사가 “평일에 돌린다”고 가정했다
- 해결: 날짜에 의존하는 검사는 평일로 옮겨 놓고 시작한다. 돌리는 시점에 결과가 달라지면 그건 검사가 아니다
다음에 할 일
- 회의실 좌석 배치도
- 업로드 이미지 자동 리사이즈·WebP 변환
- 사업자등록증 첨부
- 관리자 조작 이력
- 예약 승인·반려 안내 메일 발송
- 공개 배포