개발일지 2026-08-16

오늘은 피아노 학원 플랫폼(엠포레) 전 영역을 손봤다. 관리자(admin) 악보 사용이력 화면 정리, 악보함을 곡→변형(item) 단위로 전환, 학생 연습기록/대시보드 UX 개선, 학원(academy) 일정·휴무일 처리, 그리고 학원 기본정보 권한 정책(본사만 수정) 정리까지. 하루에 24개 커밋이 쌓였다. 주제별로 정리한다.

1. 악보 사용이력 화면 (admin)

관리자에서 악보가 언제/누가/어떤 방식으로 이용됐는지 보는 화면을 다듬었다.

• 화면 신설: 이름 검색 + 이용 횟수 카운팅 + 당일 조회 지원.
• 이용 유형 검색 정리
  • '다운로드' 옵션 제거(더 이상 제공하지 않는 유형).
  • 셀렉트 선택 전에는 '이용 유형' 플레이스홀더를 보여주고, 미선택 시 '전체'로 동작하도록.
  • 셀렉트 라벨을 상시 표시로 바꿔, '전체' 선택 시 값이 빈칸으로 보이던 문제 해결.
• 날짜 검색 UX
  • 날짜 검색을 검색 필터 맨 앞으로 이동(가장 자주 쓰는 조건).
  • 날짜 사이 ~ 구분자를 세로 중앙 정렬로 맞추고, 하단의 불필요한 '확인요청사항' 박스는 제거.

작은 정렬·라벨 이슈들이지만, 검색 화면은 이런 디테일이 실사용 체감을 크게 좌우한다.

2. 악보함: 곡 단위 → 변형(item) 단위 (student + sheets)

기존 악보함은 '곡' 단위로 담겼는데, 실제로는 같은 곡이라도 편성·난이도가 다른 변형(item) 단위로 담아야 학습에 맞았다.

• 악보함 저장 기준을 곡(song) → 변형(item)으로 전환.
• 악보 상세에 '열람하기' 버튼 추가 → 원본 PDF 열람 + VIEW 카운팅 연동.

3. 학생 연습기록 UX (student)

연습기록 입력 흐름을 실제 사용 동선에 맞게 개선했다.

• 연습 곡목 입력에 내 악보함 선택 팝업 추가.
• 곡목을 악보함에서 고르면 편성·난이도까지 함께 자동 입력.
• 이미 값이 있을 때 악보함에서 다시 고르면 기존 값 교체.
• 연습 곡목 선택 버튼 세로 정렬 보정(flex-start→center).
• 연습 기록 추가 모달은 backdrop 클릭으로 닫히지 않도록 강제(팝업 모달 규칙 준수 — 닫기/취소 버튼 또는 ESC로만 닫힘).

4. 학생 대시보드 (student)

• 대시보드 카드를 탭하면 관련 화면으로 바로 이동하도록 연결.
  • 레벨/과제 → 레슨, 다음 레슨 → 예약, 연습 로그 → 연습 탭.
• 공지 표시는 2개 항목으로 축소해 화면을 정돈.
• '다음 레슨' 탭 시, 넘어간 예약 화면에서 해당 날짜를 달력에 자동 선택해 바로 확인/예약이 이어지게 함.

5. 학원 일정·휴무일 (academy)

• 일정(Schedule) 화면에 국가 공휴일을 함께 노출(달력·그리드에 주황 라벨). 학원 휴무일(빨강)과 색으로 구분하고, 겹치는 날은 학원 휴무일을 우선 표시해 중복을 막았다.
• 휴무일 등록 안전장치: 휴무일로 지정하려는 날짜에 예약이 있으면 누가 잡았는지 팝업으로 안내하고 등록을 차단. 취소(CANCELLED)를 제외한 예약/완료/노쇼는 모두 차단 대상.

6. 학원 기본정보 — 본사만 수정 정책 (admin + academy)

가장 신경 쓴 부분. 학원 기본정보는 본사(관리자)에서만 수정하고, 학원(원장) 화면에서는 조회만 가능하도록 권한 경계를 정리했다.

admin: 본사에서 기본정보 전부 수정 가능하게 개방

• 그동안 잠겨 있던 4개 필드(상호/사업자등록번호/대표자명/운영시간)의 '수정 불가' 잠금을 풀어 본사에서 편집 가능하게 했다. (백엔드는 이미 저장을 지원하고 있어 프론트만 개방.)
• 입력 포맷 자동 적용
  • 사업자등록번호: 123-45-67890 형태로 입력 중 자동 하이픈.
  • 대표자 연락처: 010-1234-5678 형태로 입력 중 자동 하이픈.
• 대표자 연락처 유효성 강화: 유선까지 허용하던 검증을 휴대폰 11자리 전용(MOBILE_RE) 으로 엄격화. 인라인 에러 + 저장 시 차단 가드까지 넣어, 잘못된 번호는 저장 자체가 안 되게 했다.

academy: 학원 설정 화면은 조회 전용으로

• 저장 버튼 숨김 처리.
• 상단에 "기본정보 수정은 본사에서만 가능합니다" 안내 배너 추가(자물쇠 아이콘).
• 화면 전체 필드를 읽기전용으로 전환 — RO 플래그 하나로 연락처/표시명/원장/주소/운영시간/로고 업로드/SNS 링크까지 일괄 disabled 처리.
• 주소 검색 버튼 숨김(조회 화면에서는 불필요).

마무리

오늘은 새 기능보다 "누가 무엇을 수정할 수 있는가"라는 권한·정책의 선긋기와, 검색/입력/연습기록 같은 일상 동선의 디테일을 정리한 하루였다. 특히 학원 기본정보를 본사 단일 창구로 모으면서, admin은 편집+검증을 강화하고 academy는 조회 전용으로 명확히 나눈 게 핵심이다. 관련 프론트 변경은 빌드·스캔 후 S3/CloudFront로 배포까지 반영했다.