Merge pull request #154 from Umc8th-Snack/feat/article-responsive-sizing/#153

[Feat] 기사페이지 반응형 수정

Author: sooloin

src/index.css

@@ -39,6 +39,9 @@
     --text-36px-semibold: 36px;
     --text-36px-semibold--font-weight: 600;
 
+    --text-32px-semibold: 32px;
+    --text-32px-semibold--font-weight: 600;
+
     --text-28px-semibold: 28px;
     --text-28px-semibold--font-weight: 600;
 
@@ -51,6 +54,9 @@
     --text-18px-semibold: 18px;
     --text-18px-semibold--font-weight: 600;
 
+    --text-16px-semibold: 16px;
+    --text-16px-semibold--font-weight: 600;
+
     /* medium */
     --text-36px-medium: 36px;
     --text-36px-medium--font-weight: 500;

src/layout/ArticleLayout.tsx

@@ -10,15 +10,17 @@ interface ArticleLayoutProps {
 const ArticleLayout = ({ children, sidebarContent }: ArticleLayoutProps) => {
     return (
         <div className="px-6 py-6">
-            <div className="mx-auto grid max-w-[1100px] grid-cols-[720px_264px] gap-30">
+            <div className="mx-auto grid max-w-[1100px] grid-cols-[100%] lg:grid-cols-[70%_30%]">
                 <div>
-                    <div className="flex flex-col gap-4 px-6 py-6">{children}</div>
+                    <div className="flex flex-col gap-4 pb-4 lg:px-6 lg:py-6">{children}</div>
                 </div>
 
                 {/* Sidebar */}
                 <aside className="mt-8">
-                    <div className="sticky top-15">
-                        {sidebarContent || <RelatedArticleList onClose={() => {}} articleId={0} />}
+                    <div className="sticky top-15 flex lg:justify-end">
+                        <div className="w-full lg:w-auto">
+                            {sidebarContent || <RelatedArticleList onClose={() => {}} articleId={0} />}
+                        </div>
                     </div>
                 </aside>
             </div>

src/layout/MainLayout.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router-dom';
 
-import Navbar from '@/shared/components/Navbar/Navbar';
+import Navbar from '@/shared/components/navbar/Navbar';
 
 const MainLayout = () => {
     return (

src/pages/article/ArticlePage.tsx

@@ -9,6 +9,7 @@ import RelatedArticleList from '@/pages/article/components/RelatedArticleList/Re
 import SummarizedNewsContainer from '@/pages/article/components/SummarizedNewsContainer/SummarizedNewsContainer';
 import type { ArticleDetail } from '@/pages/article/types/article';
 import LoadingFallback from '@/routes/LoadingFallback';
+import FloatingMemoButton from '@/shared/components/button/FloatingMemoButton';
 import MemoPad from '@/shared/components/modal/MemoPad/MemoPad';
 
 const ArticlePage = () => {
@@ -83,19 +84,25 @@ const ArticlePage = () => {
                         />
                     </div>
                 )}
-                <div className="pt-8">
+                <div className="pt-4">
                     <AccordionTestPage articleId={articleId} />
                 </div>
             </ArticleLayout>
 
             {/* 메모장 오버레이 */}
             {isMemoPadOpen && articleId && (
-                <div className="fixed top-0 right-0 z-50 px-18 py-18">
-                    <div className="mt-20">
+                <div
+                    className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 md:top-0 md:right-0 md:items-start md:justify-end md:bg-transparent md:p-4 md:px-18 md:py-18"
+                    onClick={() => setIsMemoPadOpen(false)}
+                >
+                    <div className="sm:mt-20" onClick={(e) => e.stopPropagation()}>
                         <MemoPad articleId={articleId} />
                     </div>
                 </div>
             )}
+
+            {/* Floating 메모장 버튼 (lg 미만에서만 표시) */}
+            <FloatingMemoButton onClick={() => setIsMemoPadOpen(!isMemoPadOpen)} isActive={isMemoPadOpen} />
         </>
     );
 };

src/pages/article/QuizCommentaryPage.tsx

@@ -9,6 +9,7 @@ import QuizCommentary from '@/pages/article/components/Quiz/QuizCommentary';
 import RelatedArticleList from '@/pages/article/components/RelatedArticleList/RelatedArticleList';
 import { useQuizCommentary } from '@/pages/article/hooks/useQuizCommentary';
 import LoadingFallback from '@/routes/LoadingFallback';
+import FloatingMemoButton from '@/shared/components/button/FloatingMemoButton';
 import MemoPad from '@/shared/components/modal/MemoPad/MemoPad';
 
 const QuizCommentaryPage = () => {
@@ -80,12 +81,18 @@ const QuizCommentaryPage = () => {
 
             {/* 메모장 오버레이 */}
             {isMemoPadOpen && articleId && (
-                <div className="fixed top-0 right-0 z-50 px-18 py-8">
-                    <div className="mt-20">
+                <div
+                    className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 md:top-0 md:right-0 md:items-start md:justify-end md:bg-transparent md:p-4 md:px-18 md:py-18"
+                    onClick={() => setIsMemoPadOpen(false)}
+                >
+                    <div className="sm:mt-20" onClick={(e) => e.stopPropagation()}>
                         <MemoPad articleId={articleId} />
                     </div>
                 </div>
             )}
+
+            {/* Floating 메모장 버튼 (lg 미만에서만 표시) */}
+            <FloatingMemoButton onClick={() => setIsMemoPadOpen(!isMemoPadOpen)} isActive={isMemoPadOpen} />
         </>
     );
 };

src/pages/article/components/Accordion/Accordion.tsx

@@ -26,16 +26,16 @@ const Accordion = ({
             <div className="mb-4">
                 <div className="flex items-center justify-between">
                     <div className="flex items-center space-x-2">
-                        <SnackIcon />
-                        <h3 className="text-24px-semibold">{title}</h3>
+                        <SnackIcon className="h-7 w-7 md:h-9 md:w-9" />
+                        <h3 className="text-20px-semibold md:text-24px-semibold">{title}</h3>
                     </div>
                     {onReport && (
                         <button type="button" onClick={onReport} className="rounded-[8px] p-1 hover:bg-black/5">
                             <ReportIcon className="text-black-70 h-[24px] w-[24px] cursor-pointer" />
                         </button>
                     )}
                 </div>
-                <p className="text-14px-medium text-black-50 mt-1">
+                <p className="text-14px-medium md:text-16px-medium text-black-50 mt-1">
                     {isQuiz ? '기사를 다 읽으셨군요! 퀴즈를 풀러 가볼까요?' : '이 기사의 핵심 어휘들을 살펴보아요.'}
                 </p>
             </div>

src/pages/article/components/ArticleHeader.tsx

@@ -29,7 +29,7 @@ function ArticleHeader({
                             href={originalLink}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="text-20px-medium text-black-70 decoration-black-70 inline-block max-w-[525px] truncate align-bottom underline decoration-[0.5px] underline-offset-5"
+                            className="text-18px-medium md:text-20px-medium text-black-70 decoration-black-70 inline-block max-w-[525px] truncate align-bottom underline decoration-[0.5px] underline-offset-5"
                             title={originalLink}
                         >
                             원문링크

src/pages/article/components/GlossaryQuiz.tsx

@@ -68,9 +68,9 @@ const GlossaryQuiz = ({ articleId }: GlossaryQuizProps) => {
     console.log('========================');
 
     return (
-        <div className="min-h-screen">
+        <div className="lg:min-h-screen">
             <div className="mx-auto max-w-4xl">
-                <div className="grid grid-cols-2 gap-8">
+                <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
                     <div className="space-y-4">
                         <Accordion
                             title="용어집"

src/pages/article/components/Quiz/QuizCommentary.tsx

@@ -1,7 +1,6 @@
 import QuizHeader from '@/pages/article/components/Quiz/QuizHeader';
 import QuizQuestionItem from '@/pages/article/components/Quiz/QuizQuestionItem';
 import QuizResultMessage from '@/pages/article/components/Quiz/QuizResultMessage';
-import { SCROLL_CONFIG } from '@/pages/article/constants/quiz';
 import { useQuizScroll } from '@/pages/article/hooks/useQuizScroll';
 
 interface Question {
@@ -24,17 +23,17 @@ function QuizCommentary({ questions, totalQuestions, correctAnswers }: QuizComme
     });
 
     return (
-        <div className="border-main-30 w-full rounded-[30px] border-[3px] bg-white p-8 shadow-sm">
+        <div className="border-main-30 w-full rounded-[20px] border-[3px] bg-white px-4 pt-4 pb-4 md:px-6 md:pt-6 md:pb-6 lg:px-[30px] lg:pt-[30px] lg:pb-[28px]">
             <QuizHeader />
 
             {/* 스크롤 가능한 콘텐츠 영역 */}
-            <div ref={scrollRef} className={`${SCROLL_CONFIG.MAX_HEIGHT} overflow-y-auto p-2`}>
+            <div ref={scrollRef} className="p-2 lg:max-h-140 lg:overflow-y-auto">
                 {/* 문제별 해설 */}
                 {questions.map((question) => (
                     <QuizQuestionItem key={question.id} question={question} />
                 ))}
 
-                {/* 결과 메시지 (스크롤 시 나타남) */}
+                {/* 결과 메시지 (lg 미만에서는 즉시 표시, lg 이상에서는 스크롤 시 표시) */}
                 <QuizResultMessage
                     totalQuestions={totalQuestions}
                     correctAnswers={correctAnswers}

src/pages/article/components/Quiz/QuizHeader.tsx

@@ -5,10 +5,10 @@ import RectangleIcon from '@/shared/assets/Rectangle105.svg?react';
 const QuizHeader = () => {
     return (
         <>
-            <div className="flex items-center justify-between pb-6">
+            <div className="flex items-center justify-between pb-4 lg:pb-6">
                 <div className="flex items-center gap-2">
-                    <RectangleIcon />
-                    <h1 className="text-28px-semibold">해설</h1>
+                    <RectangleIcon className="h-5 w-5 md:h-7 md:w-7" />
+                    <h1 className="text-20px-semibold md:text-28px-semibold relative">해설</h1>
                 </div>
             </div>
             <div className="border-black-30 mb-4 border-t" />