fix: 샘플 문제집 — 미리보기 안내 삭제 + 문제 번호 스크롤바 추가

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/app/exams/sample-ebook/[id]/page.tsx

@@ -692,6 +692,28 @@ function EbookViewer({ id, title, grade, problems }: EbookViewerProps) {
         />
       </BookSpreadWrapper>
 
+      {/* 문제 번호 스크롤바 */}
+      <ProblemScrollNav>
+        {problems.map((p, idx) => {
+          const isActive = idx === pageIndex;
+          const isSolved = revealed[p.number] ?? false;
+          const isRegistered = registeredProblems.has(p.number);
+          return (
+            <ProblemChip
+              key={p.number}
+              type="button"
+              $active={isActive}
+              $solved={isSolved}
+              $registered={isRegistered}
+              onClick={() => goTo(idx)}
+              aria-label={`${p.number}번 문제`}
+            >
+              {p.number}
+            </ProblemChip>
+          );
+        })}
+      </ProblemScrollNav>
+
       {/* 페이지 네비게이션 */}
       <PageNav>
         <NavButton
@@ -726,23 +748,6 @@ function EbookViewer({ id, title, grade, problems }: EbookViewerProps) {
         </NavButton>
       </PageNav>
 
-      <ViewerDivider />
-
-      {/* B2B 비전 안내 */}
-      <InfoBox>
-        <InfoIcon>
-          <Icon name="info" size={18} />
-        </InfoIcon>
-        <InfoContent>
-          <InfoTitle>미리보기 안내</InfoTitle>
-          <InfoDesc>
-            이 ebook 은 향후 B2B 종이책 QR 연동 기능의 미리보기야. 실제 출시 시
-            종이책 표지 QR 을 스캔하면 이렇게 펼쳐지고, 틀린 문제는 자동으로
-            망각곡선 복습 큐에 등록돼.
-          </InfoDesc>
-        </InfoContent>
-      </InfoBox>
-
       {tagPromptFor && (
         <TagPrompt
           studyLogId={tagPromptFor.studyLogId}
@@ -1265,6 +1270,57 @@ const SubjectAssistSelect = styled.select`
   outline: none;
 `;
 
+// ── 문제 스크롤바 ─────────────────────────────────────────────────────────
+
+const ProblemScrollNav = styled.div`
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  padding: 4px 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar { display: none; }
+`;
+
+const ProblemChip = styled.button<{ $active: boolean; $solved: boolean; $registered: boolean }>`
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+  border: 2px solid ${({ $active, $registered }) =>
+    $active
+      ? theme.color.brandIndigo
+      : $registered
+      ? 'rgba(34, 197, 94, 0.5)'
+      : 'transparent'};
+  background: ${({ $active, $solved, $registered }) =>
+    $active
+      ? 'rgba(79, 70, 229, 0.25)'
+      : $registered
+      ? 'rgba(34, 197, 94, 0.12)'
+      : $solved
+      ? 'rgba(255, 255, 255, 0.08)'
+      : 'rgba(255, 255, 255, 0.04)'};
+  color: ${({ $active, $registered }) =>
+    $active
+      ? theme.color.textBright
+      : $registered
+      ? theme.color.success
+      : theme.color.textSub};
+
+  &:hover {
+    background: rgba(79, 70, 229, 0.15);
+    color: ${theme.color.textBright};
+  }
+`;
+
 // ── 네비게이션 스타일 ───────────────────────────────────────────────────────
 
 const PageNav = styled.div`
@@ -1300,35 +1356,3 @@ const ProgressText = styled.span`
   white-space: nowrap;
 `;
 
-const InfoBox = styled(Card)`
-  display: flex;
-  align-items: flex-start;
-  gap: ${theme.space.md};
-  background: rgba(56, 189, 248, 0.06);
-  border-color: rgba(56, 189, 248, 0.25);
-`;
-
-const InfoIcon = styled.div`
-  color: ${theme.color.info};
-  flex-shrink: 0;
-  padding-top: 2px;
-`;
-
-const InfoContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-const InfoTitle = styled.span`
-  font-size: 13px;
-  font-weight: 700;
-  color: ${theme.color.textBright};
-`;
-
-const InfoDesc = styled.p`
-  font-size: 13px;
-  line-height: 1.7;
-  color: ${theme.color.textSub};
-  margin: 0;
-`;