fix: FM_SLD 레이아웃 깨짐 수정 (#87)

src/components/feedback/ReactionButtons.tsx

@@ -36,32 +36,38 @@ export default function ReactionButtons({
   const total = reactions.length;
   const containerClass = isGrid
     ? `grid grid-cols-2 gap-2 justify-items-center ${className ?? ''}`
-    : `flex gap-2 ${showLabel ? 'flex-wrap' : 'flex-nowrap'} ${className ?? ''}`;
+    : `flex gap-1 ${showLabel ? 'flex-wrap' : 'flex-nowrap'} ${className ?? ''}`;
 
   return (
     <div className={containerClass}>
       {reactions.map((reaction, index) => {
         const config = REACTION_CONFIG[reaction.type];
         const isLastOdd = isGrid && total % 2 === 1 && index === total - 1;
+        const baseBtn =
+          'flex items-center justify-between px-2 py-2 rounded-full border transition text-body-m focus-visible:outline-2 focus-visible:outline-main';
+
+        const widthClass = showLabel ? 'w-42.25' : 'w-auto flex-1';
 
         return (
           <button
             key={reaction.type}
             onClick={() => onToggleReaction(reaction.type)}
-            className={`flex items-center justify-between w-42.25 px-3 py-2 rounded-full border transition text-body-m focus-visible:outline-2 focus-visible:outline-main ${buttonClassName ?? ''} ${
+            className={`${baseBtn} ${widthClass} rounded-full border transition text-body-m focus-visible:outline-2 focus-visible:outline-main ${buttonClassName ?? ''} ${
               isLastOdd ? 'col-span-2 justify-self-start' : ''
             } ${
               reaction.active
                 ? 'bg-gray-900 border-main-variant1 text-main-variant2 text-body-m-bold'
                 : 'bg-gray-200 border-gray-400 text-black hover:border-gray-600'
             }`}
           >
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
               <span>{config.emoji}</span>
               {showLabel && <span className="whitespace-nowrap">{config.label}</span>}
             </div>
 
-            <span className={reaction.active ? 'font-semibold' : ''}>
+            <span
+              className={`tabular-nums text-right min-w-0 ${reaction.active ? 'font-body-m' : ''}`}
+            >
               {reaction.count > 0 ? formatReactionCount(reaction.count) : ''}
             </span>
           </button>

src/pages/FeedbackSlidePage.tsx

@@ -147,8 +147,9 @@ export default function FeedbackSlidePage() {
         </aside>
       </div>
 
+      {/** 모바일 뷰 */}
       <div className="flex md:hidden flex-1 flex-col bg-gray-100">
-        <div className="py-2 px-4 pt-4">
+        <div className="py-2 pt-4">
           {currentSlide ? (
             <div className="flex items-center justify-center">
               <img
@@ -181,8 +182,8 @@ export default function FeedbackSlidePage() {
             reactions={reactions.length > 0 ? reactions : createDefaultReactions()}
             onToggleReaction={toggleReaction}
             showLabel={false}
-            className="w-full flex-nowrap justify-between"
-            buttonClassName="flex-1 min-w-0"
+            className="w-full flex-wrap justify-between"
+            buttonClassName="min-w-[3.5rem]"
           />
         </div>
 
@@ -199,10 +200,10 @@ export default function FeedbackSlidePage() {
             aria-controls={panelIds.script}
             onClick={() => setMobileTab('script')}
             className={`flex-1 py-3 text-body-m-bold transition-colors ${
-              mobileTab === 'script' ? 'text-main border-b border-main-variant1' : 'text-gray-600'
+              mobileTab === 'script' ? 'text-main border-b-2 border-main-variant1' : 'text-gray-600'
             }`}
           >
-            스크립트
+            대본
           </button>
           <button
             role="tab"
@@ -211,20 +212,22 @@ export default function FeedbackSlidePage() {
             aria-controls={panelIds.comment}
             onClick={() => setMobileTab('comment')}
             className={`flex-1 py-3 text-body-m-bold transition-colors ${
-              mobileTab === 'comment' ? 'text-main border-b border-main-variant1' : 'text-gray-600'
+              mobileTab === 'comment'
+                ? 'text-main border-b-2 border-main-variant1'
+                : 'text-gray-600'
             }`}
           >
             댓글 {comments.length > 0 && `${comments.length}`}
           </button>
         </div>
 
-        <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className="flex-1 min-h-0 flex flex-col">
           {mobileTab === 'script' ? (
             <div
               id={panelIds.script}
               role="tabpanel"
               aria-labelledby={tabIds.script}
-              className="px-4 py-4"
+              className="px-4 py-4 overflow-y-auto"
             >
               <SlideTitle fallbackTitle={`슬라이드 ${slideIndex + 1}`} />
               <div className="mt-3 bg-gray-200 rounded-lg px-4 py-3 h-48 overflow-y-auto">
@@ -241,9 +244,9 @@ export default function FeedbackSlidePage() {
               id={panelIds.comment}
               role="tabpanel"
               aria-labelledby={tabIds.comment}
-              className="flex flex-col min-h-full"
+              className="flex flex-col min-h-0 h-full"
             >
-              <div className="flex-1">
+              <div className="flex-1 min-h-0 overflow-y-auto">
                 <CommentList
                   comments={comments}
                   onAddReply={addReply}
@@ -252,7 +255,7 @@ export default function FeedbackSlidePage() {
                   isLoading={isLoading}
                 />
               </div>
-              <div className="sticky bottom-0 border-t border-gray-200 bg-gray-100 px-4 py-3">
+              <div className="shrink-0 border-t border-gray-200 bg-gray-100 px-4 py-3">
                 <CommentInput
                   value={commentDraft}
                   onChange={setCommentDraft}