Chore/72 study refactor

src/app/(quiz)/quiz/[quizSetId]/play/page.tsx

@@ -107,7 +107,6 @@ export default function QuizPlayPage() {
         })),
       });
 
-      // setLastSubmit(submitRes as any);
       setLastSubmit(submitRes);
       router.push(`/quiz/${naverArticleId}/result`);
     } catch {

src/app/(quiz)/quiz/[quizSetId]/result/next/page.tsx

@@ -4,75 +4,114 @@ import Image from "next/image";
 import { useRouter, useParams } from "next/navigation";
 import { useState } from "react";
 
+import { NewCategoryBottomSheet } from "@/components/study/NewCategoryBottomSheet";
+import {
+  saveNewsToStorage,
+  getStorageFoldersByItemId,
+} from "@/lib/api/storage";
+
 import NextActionCard from "@/components/quiz/NextActionCard";
 
+type Category = {
+  category_id: number;
+  name: string;
+};
+
+const ARCHIVE_CATEGORIES: Category[] = [{ category_id: 0, name: "기본 폴더" }];
+
 export default function QuizNextActionPage() {
   const router = useRouter();
   const params = useParams<{ quizSetId: string }>();
+
+  const newsId = params.quizSetId; // 뉴스 ID로 사용
   const quizSetId = Number(params.quizSetId);
 
-  const [sheetOpen, setSheetOpen] = useState(false);
+  const [isSaved, setIsSaved] = useState(false);
+  const [isSaveBottomSheetOpen, setIsSaveBottomSheetOpen] = useState(false);
+
+  // 폴더 선택 시 저장
+  const handleSelectCategory = async (categoryId: number | null) => {
+    if (!newsId || categoryId === null) return;
+
+    try {
+      const articleId = parseInt(newsId, 10);
+
+      await saveNewsToStorage(articleId, [categoryId]);
+
+      const response = await getStorageFoldersByItemId(articleId, "NEWS");
+      setIsSaved(response.data.length > 0);
+
+      setIsSaveBottomSheetOpen(false);
+    } catch (err) {
+      console.error("저장 실패:", err);
+      setIsSaveBottomSheetOpen(false);
+    }
+  };
 
   return (
     <div className="min-h-screen bg-bg-100">
-      <div className="min-h-screen">
-        <main className="px-6 pb-10 pt-14">
-          {/* 캐릭터 */}
-          <div className="mx-auto flex w-full max-w-[260px] justify-center">
-            <Image
-              src="/quiz/character-shopping.svg"
-              alt=""
-              width={170}
-              height={170}
-              className="h-[170px] w-[170px] object-contain"
-              priority
-            />
-          </div>
-
-          {/* 타이틀 */}
-          <h1 className="mt-0 text-center text-h3 font-semibold text-primary-30">
-            다음 할 일을 골라보세요!
-          </h1>
-
-          {/* 옵션 4개 */}
-          <div className="flex flex-col items-center mt-8 space-y-4">
-            <NextActionCard
-              iconSrc="/quiz/icon-bookmark.svg"
-              title="뉴스 저장하기"
-              desc="방금 본 뉴스와 퀴즈를 보관해요."
-              onClick={() => setSheetOpen(true)}
-            />
-
-            <NextActionCard
-              iconSrc="/quiz/icon-word.svg"
-              title="다른 퀴즈로 계속하기"
-              desc="퀴즈를 통해 내용을 이해해보세요."
-              badgeText="최대 +50점"
-              iconScale={1.4}
-              onClick={() => {
-                router.push(`/quiz/${quizSetId}`);
-              }}
-            />
-
-            <NextActionCard
-              iconSrc="/quiz/icon-book.svg"
-              title="학습으로 이동하기"
-              desc="다른 기사도 읽어보세요."
-              iconScale={1.4}
-              onClick={() => router.push("/study")}
-            />
-
-            <NextActionCard
-              iconSrc="/quiz/icon-box.svg"
-              title="보관함으로 이동하기"
-              desc="저장한 항목들을 확인해보세요."
-              onClick={() => router.push("/archive")}
-            />
-          </div>
-        </main>
-
-        {/* 바텀시트 추가 예정*/}
-      </div>
+      <main className="px-6 pb-10 pt-14">
+        {/* 캐릭터 */}
+        <div className="mx-auto flex w-full max-w-[260px] justify-center">
+          <Image
+            src="/quiz/character-shopping.svg"
+            alt=""
+            width={170}
+            height={170}
+            className="h-[170px] w-[170px] object-contain"
+            priority
+          />
+        </div>
+
+        {/* 타이틀 */}
+        <h1 className="text-center text-h3 font-semibold text-primary-30">
+          다음 할 일을 골라보세요!
+        </h1>
+
+        {/* 옵션 */}
+        <div className="mt-8 flex flex-col items-center space-y-4">
+          <NextActionCard
+            iconSrc="/quiz/icon-bookmark.svg"
+            title="뉴스 저장하기"
+            desc="방금 본 뉴스와 퀴즈를 보관해요."
+            onClick={() => setIsSaveBottomSheetOpen(true)}
+          />
+
+          <NextActionCard
+            iconSrc="/quiz/icon-word.svg"
+            title="다른 퀴즈로 계속하기"
+            desc="퀴즈를 통해 내용을 이해해보세요."
+            badgeText="최대 +50점"
+            iconScale={1.4}
+            onClick={() => router.push(`/quiz/${quizSetId}`)}
+          />
+
+          <NextActionCard
+            iconSrc="/quiz/icon-book.svg"
+            title="학습으로 이동하기"
+            desc="다른 기사도 읽어보세요."
+            iconScale={1.4}
+            onClick={() => router.push("/study")}
+          />
+
+          <NextActionCard
+            iconSrc="/quiz/icon-box.svg"
+            title="보관함으로 이동하기"
+            desc="저장한 항목들을 확인해보세요."
+            onClick={() => router.push("/archive")}
+          />
+        </div>
+      </main>
+
+      {/* 보관함 저장 바텀시트 */}
+      <NewCategoryBottomSheet
+        open={isSaveBottomSheetOpen}
+        onOpenChange={setIsSaveBottomSheetOpen}
+        categories={ARCHIVE_CATEGORIES}
+        onSelectCategory={handleSelectCategory}
+        onAddNewCategory={() => {}}
+        itemId={newsId ? parseInt(newsId, 10) : undefined}
+      />
     </div>
   );
 }

src/app/study/[id]/page.tsx

@@ -91,26 +91,20 @@ export default function NewsDetailPage() {
     setIsSaveBottomSheetOpen(true);
   };
 
-  // 기사 저장용 핸들러
-  const handleSelectCategory = async (categoryId: number | null) => {
-    if (!newsId || categoryId === null) {
-      return;
-    }
-
-    try {
-      // 선택한 폴더에 뉴스 저장 API 호출
-      const articleId = parseInt(newsId, 10);
-      await saveNewsToStorage(articleId, [categoryId]);
-      // 저장 후 저장된 폴더 목록 다시 조회하여 북마크 상태 업데이트
+  // 기사 저장/삭제 완료 후 북마크 상태 업데이트
+  const handleToggleComplete = async () => {
+    const articleId = parseInt(newsId, 10);
+    if (!isNaN(articleId)) {
       await fetchSavedFolders(articleId);
-      setIsSaveBottomSheetOpen(false);
-    } catch (err) {
-      console.error("뉴스 저장 실패:", err);
-      // 에러 발생 시에도 바텀시트는 닫음 (사용자 경험을 위해)
-      setIsSaveBottomSheetOpen(false);
     }
   };
 
+  // 기사 저장용 핸들러 (호환성 유지, 실제로는 NewCategoryBottomSheet에서 처리)
+  const handleSelectCategory = async (categoryId: number | null) => {
+    // NewCategoryBottomSheet에서 내부적으로 처리하므로 여기서는 아무것도 하지 않음
+    // 필요시 추가 로직 구현 가능
+  };
+
   const handleAddNewCategory = () => {
     // TODO: 새 카테고리 추가 기능 구현
     console.log("새 카테고리 추가");
@@ -461,7 +455,9 @@ export default function NewsDetailPage() {
         categories={ARCHIVE_CATEGORIES}
         onSelectCategory={handleSelectCategory}
         onAddNewCategory={handleAddNewCategory}
+        onToggleComplete={handleToggleComplete}
         itemId={newsId ? parseInt(newsId, 10) : undefined}
+        folderType="NEWS"
       />
 
       {/* 단어 설명 카드 */}

src/components/Button.tsx

@@ -1,47 +1,29 @@
-'use client';
-
-import React from 'react';
+"use client";
 
 interface ButtonProps {
   text: string;
   onClick: () => void;
   disabled?: boolean;
+  className?: string;
 }
 
-export default function Button({ 
-  text, 
-  onClick, 
-  disabled = false 
+export default function Button({
+  text,
+  onClick,
+  disabled = false,
+  className = "",
 }: ButtonProps) {
   return (
-    <div 
-      style={{
-        position: 'absolute',
-        bottom: '34px',
-        left: '20px',
-        right: '20px',
-      }}
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`
+        w-full h-[60px] rounded-xl text-b1 text-gray-10 transition-colors
+        ${disabled ? "bg-primary-20" : "bg-primary-50"}
+        ${className}
+      `}
     >
-      <button
-        onClick={onClick}
-        disabled={disabled}
-        style={{
-          width: '100%',
-          height: '60px',
-          borderRadius: '12px',
-          backgroundColor: disabled 
-            ? 'var(--color-primary-20, #C5BBFB)' 
-            : 'var(--color-primary-50, #5C54F5)',
-          color: 'var(--color-gray-10)',
-          fontSize: '16px',
-          fontWeight: 500,
-          cursor: disabled ? 'not-allowed' : 'pointer',
-          border: 'none',
-          transition: 'all 0.3s ease',
-        }}
-      >
-        {text}
-      </button>
-    </div>
+      {text}
+    </button>
   );
-}
+}