[FIX] 툴팁 문구 수정 및 메인페이지 레이아웃 수정 (#344)

src/components/common/ToolTip.tsx

@@ -3,26 +3,23 @@ import { TooltipXIcon } from "@/assets/icon";
 import { Press } from "@/components/common/motion";
 
 interface TooltipProps {
-  used: number;
-  total: number;
+  balance: number;
   onClose: () => void;
   className?: string;
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({ used, total, onClose }) => {
+export const Tooltip: React.FC<TooltipProps> = ({ balance, onClose }) => {
   return (
     <div
       className={
-        "pointer-events-auto relative flex h-11 w-40.25 items-center rounded-[0.625rem] bg-orange-500 text-white shadow-[0_10px_30px_rgba(0,0,0,0.35)]"
+        "pointer-events-auto relative flex h-11 w-fit items-center rounded-[0.625rem] bg-orange-500 text-white shadow-[0_10px_30px_rgba(0,0,0,0.35)]"
       }
       role="status"
       aria-live="polite"
     >
       {/* 본문: 한 줄 고정 + 양끝 정렬 */}
       <div className="font-regular flex h-full w-full items-center justify-between gap-2 px-4 text-[13px] whitespace-nowrap">
-        <span>
-          무료 크레딧 {used}/{total} 사용
-        </span>
+        <span>사용 가능한 크레딧 {balance}개</span>
 
         <Press
           type="button"

src/components/mainPage/ComunityGallarySection/CommunityGallerySection.tsx

@@ -88,8 +88,7 @@ export default function CommunityGallerySection() {
 
       <div
         ref={scrollerRef}
-        className="scrollbar-hide relative flex w-full snap-x snap-mandatory gap-3 overflow-x-auto px-5 pb-4"
-        style={{ scrollPadding: "0 20px" }}
+        className="scrollbar-hide relative flex w-full snap-x snap-mandatory gap-3 overflow-x-auto pb-4"
       >
         {posts.map((post, idx) => (
           <div

src/components/mainPage/Footer.tsx

@@ -14,22 +14,25 @@ const BUSINESS_INFO = [
 
 export default function Footer() {
   return (
-    <footer className="bg-neutral-875 flex flex-col gap-6 px-4 py-10">
-      <FindersLogoFooterIcon className="h-5.75 w-50 text-neutral-700" />
+    // 배경은 화면 끝까지, 안쪽 콘텐츠는 다른 섹션과 같은 박스로 정렬한다.
+    <footer className="bg-neutral-875 w-full py-10">
+      <div className="mx-auto flex w-full max-w-120 flex-col gap-6 px-4 sm:px-6 lg:px-8">
+        <FindersLogoFooterIcon className="h-5.75 w-50 text-neutral-700" />
 
-      <div className="flex gap-3 text-xs leading-[1.26] font-semibold tracking-[-0.24px] text-neutral-300">
-        <Link to="/auth/terms#service">이용약관</Link>
-        <Link to="/auth/terms#privacy">개인정보처리방침</Link>
-      </div>
+        <div className="flex gap-3 text-xs leading-[1.26] font-semibold tracking-[-0.24px] text-neutral-300">
+          <Link to="/auth/terms#service">이용약관</Link>
+          <Link to="/auth/terms#privacy">개인정보처리방침</Link>
+        </div>
 
-      <dl className="flex flex-col gap-1 text-xs leading-[1.26] tracking-[-0.24px] text-neutral-500">
-        {BUSINESS_INFO.map(({ label, value }) => (
-          <div key={label} className="flex gap-4.5">
-            <dt className="w-21 shrink-0">{label}</dt>
-            <dd className="min-w-0">{value}</dd>
-          </div>
-        ))}
-      </dl>
+        <dl className="flex flex-col gap-1 text-xs leading-[1.26] tracking-[-0.24px] text-neutral-500">
+          {BUSINESS_INFO.map(({ label, value }) => (
+            <div key={label} className="flex gap-4.5">
+              <dt className="w-21 shrink-0">{label}</dt>
+              <dd className="min-w-0">{value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
     </footer>
   );
 }

src/components/mainPage/PromotionBanner.tsx

@@ -48,7 +48,7 @@ export default function PromotionBanner() {
       <div
         ref={scrollRef}
         onScroll={handleScroll}
-        className="scrollbar-hide flex w-full snap-x snap-mandatory gap-3 overflow-x-auto px-5"
+        className="scrollbar-hide flex w-full snap-x snap-mandatory gap-3 overflow-x-auto"
       >
         {BANNERS.map((banner) => (
           <Press

src/components/photoRestoration/RestorationFooter.tsx

@@ -19,8 +19,7 @@ interface RestorationFooterProps {
   restoredImageUrl: string | null;
   isGenerating: boolean;
   shouldShowCreditTooltip: boolean;
-  usedFree: number;
-  totalFree: number;
+  creditBalance: number;
   setIsCreditTooltipOpen: (isOpen: boolean) => void;
   handleGenerateClick: () => void;
   handleRegenerateClick: () => void;
@@ -33,8 +32,7 @@ export const RestorationFooter = ({
   restoredImageUrl,
   isGenerating,
   shouldShowCreditTooltip,
-  usedFree,
-  totalFree,
+  creditBalance,
   setIsCreditTooltipOpen,
   handleGenerateClick,
   handleRegenerateClick,
@@ -68,8 +66,7 @@ export const RestorationFooter = ({
               style={{ "--reveal-origin": "50% 100%" } as CSSProperties}
             >
               <Tooltip
-                used={usedFree}
-                total={totalFree}
+                balance={creditBalance}
                 onClose={() => setIsCreditTooltipOpen(false)}
               />
             </div>

src/pages/mainPage/MainPage.tsx

@@ -15,7 +15,12 @@ const SectionWrapper = ({
   id: string;
   children: React.ReactNode;
 }) => (
-  <div data-anchor={id} className="mx-auto w-full max-w-sm">
+  // 스크롤 컨테이너가 w-screen으로 확장돼 있으므로(#347) RootLayout의 콘텐츠 박스를
+  // 여기서 그대로 재현해야 Header와 좌우 정렬이 맞는다.
+  <div
+    data-anchor={id}
+    className="mx-auto w-full max-w-120 px-4 sm:px-6 lg:px-8"
+  >
     {children}
   </div>
 );
@@ -51,7 +56,7 @@ export default function MainPage() {
   useAnchorScroll(scrollRef);
 
   return (
-    <div className="mx-auto flex h-[calc(100dvh-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-full max-w-sm flex-col bg-neutral-900 text-white">
+    <div className="flex h-[calc(100dvh-env(safe-area-inset-top)-env(safe-area-inset-bottom))] w-full flex-col bg-neutral-900 text-white">
       <Header />
       <div
         ref={scrollRef}
@@ -69,9 +74,7 @@ export default function MainPage() {
         <SectionWrapper id="community">
           <CommunityGallerySection />
         </SectionWrapper>
-        <div className="mx-auto w-full max-w-sm">
-          <Footer />
-        </div>
+        <Footer />
       </div>
     </div>
   );

src/pages/photoRestoration/PhotoRestorationPage.tsx

@@ -67,9 +67,6 @@ export default function PhotoRestorationPage() {
     FREE_CREDIT_CAP,
   );
 
-  const totalFree = FREE_CREDIT_CAP;
-  const usedFree = totalFree - creditBalance;
-
   const {
     isGenerating,
     statusMessage,
@@ -329,8 +326,7 @@ export default function PhotoRestorationPage() {
         restoredImageUrl={restoredImageUrl}
         isGenerating={isGenerating}
         shouldShowCreditTooltip={shouldShowCreditTooltip}
-        usedFree={usedFree}
-        totalFree={totalFree}
+        creditBalance={creditBalance}
         setIsCreditTooltipOpen={setIsCreditTooltipOpen}
         handleGenerateClick={handleGenerateClick}
         handleRegenerateClick={handleRegenerateClick}