통용 관례 적용을 되돌리고(64b5dee) 디자인팀 회신대로 한다 — 목록의 기본은 시안대로 가운데,
제목 열(가맹점명·업체명·메뉴명·제목·콘텐츠명·질문·금지 키워드·코드명·학생명·이벤트/구분)과
긴 글 열(주소·설명·코드설명·질문내용·키워드·이메일)만 align=start로 왼쪽에 둔다. 머리칸은
본문 열을 따른다.
Co-Authored-By: Claude Opus 5
시안(tbl-basic·tbl-list)의 가운데 기본 대신 A List Apart·Material·Carbon·GOV.UK가 공통으로
쓰는 규칙을 따른다(사용자 확정, 되돌리기 쉽게 별도 브랜치).
- FoxTable list·basic의 기본 정렬을 start로. form은 이미 start.
- 비교하는 숫자(포인트·가격·메뉴 건수·정렬순서·메뉴순번)는 end.
- 이미지·체크박스·아이콘·펼침 토글·관리 버튼·알약 배지는 center. 관리 열은 화면마다
start/center/end로 갈리던 것을 center로 통일.
- 식별값(번호·학년/반/번호)·날짜·상태 표시(글자)는 기본(왼쪽) — 기존 center 지정을 뺀다.
- 머리칸은 본문 열 정렬을 따른다(FoxListContainer가 이미 같은 align을 준다).
Co-Authored-By: Claude Opus 5
백엔드 insert에 @RequestBody가 붙었는데(MngrCntntsQuizApiController) 우리는 여전히 form으로
보내고 있어 등록이 HttpMediaTypeNotSupportedException으로 실패했다. 수정과 같은 JSON으로
통일하고 form 경로를 지운다. 쇼츠·만화 insert는 아직 어노테이션이 없어 그대로 form이다.
노출 문구 필드도 실제 계약으로 맞춘다 — answerMessageList(가칭)가 아니라 descrList이고
칸이 cntntsQuizDescr 하나뿐이다. 코드가 아니라 문구 자체를 싣는다: 학습자 앱이 이 값을
그대로 말풍선에 띄운다(CmmBotChatServiceImpl). 코드를 골랐으면 그 코드명이, 기타면 직접
적은 값이 저장된다.
단건 조회가 descrList를 돌려주므로 수정 화면이 저장된 문구를 되살린다. 코드명과 맞는 것이
있으면 그 코드로, 없으면 기타 + 직접 입력으로 돌린다.
Co-Authored-By: Claude Opus 5
공통코드 QUIZ_ANSWER로 O·X 선택지를 조회하던 것을 되돌린다(f2af4f2). 정답여부는 화면
고정값이고, 코드로 받는 것은 각 줄의 「사용자에게 노출할 문구」뿐이다 — O는 QUIZ_ANSWER_O,
X는 QUIZ_ANSWER_X로 목록이 서로 다르다.
Co-Authored-By: Claude Opus 5
@fox 목록 표는 셀을 이미 text-align: center로 두는데, FoxButtonGroup이 블록 레벨 flex라
셀 폭을 채우고 기본값이 justify-content: flex-start다. 그래서 align="center"를 준 두 화면
(관리자 회원·관리자 메뉴)만 가운데였고 나머지는 왼쪽에 붙어 있었다.
- 행 관리 묶음 다섯 곳에 align="center"를 준다(콘텐츠·꾸미기아이템·게시판·포인트기준·공통코드).
- 시스템 메뉴는 자체 flex div를 쓰고 있어 다른 화면과 같은 FoxButtonGroup으로 바꾼다.
- 가맹점은 묶음 없이 span에 aria-label만 있었다. FoxButtonGroup으로 감싸고 가맹점명을
각 버튼 라벨에 넣는다 — 비의미 요소의 aria-label보다 확실하게 읽힌다(공통코드와 같은 방식).
버튼 하나뿐인 칸(금칙어·포인트 적립)은 손대지 않았다. FoxIconButton이 inline-flex라
셀의 text-align만으로 이미 가운데다(실측 0px).
Co-Authored-By: Claude Opus 5
O와 X의 문구 목록이 서로 달라 그룹이 둘로 갈린다 — QUIZ_ANSWER_O · QUIZ_ANSWER_X.
정답 코드명을 접미로 붙여 그룹 이름을 만들므로, 정답 선택지가 늘어도 그룹만 등록하면
화면은 손대지 않는다.
기타는 코드가 아니라 직접 입력을 여는 자리라 프론트가 목록 뒤에 붙이고, 고르면 사용자가
적은 문구가 전송된다. 서버 검증도 하드코딩 표 대신 같은 그룹을 조회해 대조한다.
Co-Authored-By: Claude Opus 5
검색어를 넣으면 목록이 통째로 죽고 있었다. 백엔드 조건이 이름이 바뀌기 전 컬럼
(QUIZ_ANSWER·QUIZ_QUESTION)을 보고 있어 SQL 오류가 난다. 값을 보내지 않고 화면에서도
감춘다.
난이도도 같이 감춘다 — 백엔드가 searchLevelCd를 받기만 하고 조건에 쓰지 않아 골라도
목록이 그대로였다.
둘 다 SQL이 고쳐지면 되살리면 된다.
Co-Authored-By: Claude Opus 5
지금까지는 정답으로 고른 쪽만 문구를 정할 수 있었고(나머지 줄은 비활성) 한 벌만
나갔다. 두 줄 모두 항상 편집할 수 있게 하고 둘 다 전송한다 — 정답이 아닌 쪽에도
보여 줄 문구가 필요하다.
정답 라디오는 그대로 둔다. 어느 쪽이 정답인지는 여전히 그것이 정한다.
백엔드가 아직 이 필드를 모른다(작업 중). 지금 보내도 폼은 미지의 파라미터를, JSON은
미지의 속성을 버리므로 조용히 무시된다. 이름이 확정되면 QUIZ_ANSWER_MESSAGE_FIELD
한 곳만 고치면 된다.
Co-Authored-By: Claude Opus 5
백엔드 요청 VO에서 quizTitle·quizPoint가 사라지고 keywordList가 들어왔다.
- 키워드는 쉼표로 이은 문자열 대신 목록으로 읽고 보낸다. 항목마다 설명을 갖는데
입력 칸은 공용 키워드 필드에 이미 있었고, 읽을 때만 유실되고 있었다(사용자 확정).
- 포인트는 저장되지 않으므로 숨김 칸과 폼 값에서 뺀다(사용자 확정). 되돌릴 문자열이
없어진 keywordsFromText도 함께 지운다.
Co-Authored-By: Claude Opus 5
백엔드가 콘텐츠 키를 cntntsSn -> cntntsId로, 퀴즈 필드를 quiz* -> cntntsQuiz*로
바꿨다(퀴즈 식별자도 quizSn -> cntntsId). 우리 쪽은 응답에서 옛 이름을 찾다 던지고
있어 금융쇼츠·4컷만화·금융OX퀴즈 목록이 전부 열리지 않는 상태였다.
누적포인트 목록 검색도 searchUserId -> searchLoginId로 바뀌어 맞춘다.
라우트 폴더 이름도 함께 바꿨다 — 동적 세그먼트라 주소에는 값만 나가므로 URL은
그대로다.
Co-Authored-By: Claude Opus 5
Tailwind가 프로젝트에서 빠진 뒤에도 클래스만 남아 아무 스타일도 받지 못하던 자리들이
있었고, 전역 스피너는 만들어만 두고 어디서도 호출하지 않았다. 두 손질이 같은 파일들을
건드려 한 커밋으로 둔다.
Tailwind 제거:
- components/ui의 옛 Tailwind 레이어 16개 삭제. 그중 field·icon-button만 실제로 쓰여
각각 FoxTextArea·FoxFormLabel과 @fox 아이콘 버튼 마크업으로 옮기고 지웠다.
- error.tsx 다섯 곳이 같은 모양이라 PageError로 모은다(PageLoading과 같은 이유).
- 홈·Empty 레이아웃·게시판 첨부 링크는 module.scss로, 행 관리 버튼 묶음은 FoxButtonGroup로.
- 테마 토글은 FoxIconButton을 쓰지 못한다 — label이 필수라 aria-label이 늘 붙고, 그러면
테마별로 바뀌는 안쪽 글자를 스크린리더가 읽지 못한다. @fox 아이콘 버튼의 마크업 계약을
그대로 따라 같은 스타일을 받게 했다.
스피너 호출:
- useBlockingAction — 스피너를 켠 채 도는 transition. 삭제처럼 확인 얼럿이 닫힌 뒤
진행돼 표시가 행 아이콘 하나뿐이던 자리 11곳에 붙였다. 버튼이 스스로 "저장 중"을
보여주는 자리(중복확인·주소검색·엑셀 업로드)는 그대로 뒀다.
- 스피너 막도 토스트와 같은 이유로 popover(top layer)에 얹는다 — 모달 안에서 시작한
동작도 덮어야 한다.
- loading.tsx를 (basic) 한 곳으로 모은다. 다섯 화면에만 있던 것을 모든 하위 화면이
받도록 하고, 새 화면을 추가해도 자동으로 따라오게 한다.
Co-Authored-By: Claude Opus 5
백엔드가 중복 로그인 감지를 넣으면서, 내 토큰이 밀리면 이후 모든 요청이
403 + code 905(만료된 토큰입니다)로 떨어진다(JwtAuthenticationFilter).
어느 화면·어느 API에서 걸리든 같은 결말이어야 해서 backendFetch 한 곳에서
처리한다.
- 905/904를 받으면 /logout/revoked로 보낸다. 렌더 중에는 쿠키를 지울 수 없어
라우트 핸들러에서 세션을 파기하고 /login으로 안내와 함께 되돌린다.
- redirect()는 예외로 던져지므로 Server Action의 catch가 삼키면 안 된다.
저장소를 호출하는 catch에 unstable_rethrow를 넣어 통과시킨다.
- 그 경로는 쿠키가 이미 없어도 지나가야 안내가 유지돼 proxy 공개 경로에 넣는다.
Co-Authored-By: Claude Opus 5
영상 id는 조회에서 채워 hidden input에 실려 있었지만 FoxFileUpload에
defaultFiles를 넘기지 않아 칸이 늘 비어 보였다. 어떤 영상이 붙어 있는지
알 수 없어 매번 다시 올려야 하는 것처럼 보였다.
조회 응답의 fileList[].orgnlFileNm을 함께 실어 와 그 이름을 그린다.
이름이 없으면 "등록된 영상"으로 대신한다.
Co-Authored-By: Claude Opus 5
저장할 때 키워드를 쉼표로 이어 quizTitle 한 칸에 넣으므로, 수정 화면을 열면 키워드가
전부 비어 있었다. 제목을 쉼표로 갈라 줄을 채운다.
설명은 저장 경로에 자리가 없어 되살릴 수 없다(사용자 확정) — 키워드만 채워지고 설명은
빈 칸으로 열린다. 백엔드가 키워드 목록을 받게 되면 이 변환은 필요 없어진다.
Co-Authored-By: Claude Opus 5
기획에 다시 들어갔다. a96f729를 그대로 되돌린다 — 폼 칸, 값 타입, 검증, 액션의 폼
읽기, 목록의 키워드 열, 검색 대상, 그리고 quizTitle을 키워드로 만드는 저장까지
원래대로다. 보존용으로 넣었던 hidden title은 함께 빠진다.
This reverts commit a96f729.
Co-Authored-By: Claude Opus 5
기획에서 빠진 항목이다. 폼 칸, 값 타입, 검증, 액션의 폼 읽기, 목록의 키워드 열,
검색 대상까지 함께 걷어낸다. 쇼츠·만화의 키워드는 그대로다.
QUIZ_TITLE은 지우지 않는다 — 키워드를 담던 칸이지만 수정 SQL이
`QUIZ_TITLE = #{quizTitle}`로 무조건 덮어써서 안 보내면 값이 지워진다. 조회해 온
값을 hidden으로 실어 그대로 돌려보낸다(quizPoint와 같은 처리).
Co-Authored-By: Claude Opus 5
백엔드 UPDATE가 `QUIZ_POINT = #{quizPoint}`로 무조건 덮어쓰는데 화면이 그 값을 보내지 않아,
퀴즈를 한 번 수정하면 포인트가 NULL이 됐다. 기획에 입력 칸이 없는 값이라 화면에는 두지 않고
hidden으로 실어 그대로 돌려보낸다.
값이 없을 때는 키 자체를 빼서 보낸다 — 빈 문자열을 보내면 INT 컬럼에 ''가 들어간다.
확인(임시 프로브): 수정은 `quizPoint:"10"`이 실리고, 등록은 그 키가 빠진다.
Co-Authored-By: Claude Opus 5
"등록은 잘 된다"는 것이 문제였다. 영상 업로드가 413으로 실패해도 화면은 오류만 띄우고 저장
버튼은 그대로 눌렸다. 영상은 필수 항목이 아니라 검증도 통과하고, `videoFileId`가 빈 값인 채로
저장돼 **영상 없는 콘텐츠가 조용히 만들어졌다.** 사용자에게는 정상 등록으로 보인다.
고른 영상이 끝내 올라가지 않으면 그 사실을 `videoUploadFailed`로 실어 보내고 Server Action이
저장을 막는다 — 업로드 중(`videoUploading`)을 막던 것과 같은 방식이다. 파일을 지우면 플래그와
오류가 함께 풀려 영상 없이 저장하려는 의도는 그대로 통한다.
413 메시지 자체는 정확하다(재실측: 2MB·6MB 모두 nginx 413). 인프라 상향 전까지는 이 경로로
영상을 올릴 수 없고, 그 사실이 저장 시점에 드러나는 편이 낫다.
확인: 100MB 초과 선택 → 오류 + `videoUploadFailed=1` + `videoFileId` 빈 값,
삭제 → 플래그·오류 모두 해제.
Co-Authored-By: Claude Opus 5
