QA: 수정된 레이아웃 반영 (#190)

* refactor: 수정된 레이아웃 반영

* refactor: 전역 레이아웃 스타일 하나로 통일

Author: seueooo

app/(main)/layout.tsx

@@ -1,10 +1,10 @@
-import { mainLayout } from "@/shared/styles/base/global.css";
+import { maxWidth } from "@/shared/styles/base/global.css";
 import NavbarMain from "@/shared/ui/navbar/navbar-main";
 import type { ReactNode } from "react";
 
 const MainLayout = ({ children }: { children: ReactNode }) => {
   return (
-    <div className={mainLayout}>
+    <div className={maxWidth}>
       <NavbarMain />
       {children}
     </div>

app/(sub)/capsule-detail/[invite-code]/[id]/page.css.ts

@@ -5,7 +5,9 @@ export const container = style({
   display: "flex",
   flexDirection: "column",
   gap: "1.6rem",
-  margin: "0 1.6rem",
+  margin: "0 auto",
+  maxWidth: "90rem",
+  padding: "0 1.6rem",
 });
 
 export const textHighlight = style({

app/(sub)/capsule-detail/[invite-code]/[id]/page.tsx

@@ -121,24 +121,25 @@ const CapsuleDetailPage = () => {
           );
         }}
       />
-      <RevealMotion>
-        <InfoTitle
-          title={result.title}
-          participantCount={result.participantCount}
-          joinLettersCount={result.letterCount}
-        />
-      </RevealMotion>
-      <CapsuleImage imageUrl={result.beadVideoUrl} />
-      <div className={styles.container}>
-        <RevealMotion delay={0.8}>
-          {result.subtitle && <CaptionSection description={result.subtitle} />}
+      
+        <RevealMotion>
+          <InfoTitle
+            title={result.title}
+            participantCount={result.participantCount}
+            joinLettersCount={result.letterCount}
+          />
         </RevealMotion>
-        <RevealMotion delay={1.2}>
-          <OpenInfoSection openAt={formatDateTime(result.openAt)} />
-        </RevealMotion>
-      </div>
-      <ResponsiveFooter capsuleData={data} isLoggedIn={isLoggedIn} />
-      {result.status !== "WRITABLE" && <InfoToast status={result.status} />}
+        <CapsuleImage imageUrl={result.beadVideoUrl} />
+        <div className={styles.container}>
+          <RevealMotion delay={0.8}>
+            {result.subtitle && <CaptionSection description={result.subtitle} />}
+          </RevealMotion>
+          <RevealMotion delay={1.2}>
+            <OpenInfoSection openAt={formatDateTime(result.openAt)} />
+          </RevealMotion>
+        </div>
+        <ResponsiveFooter capsuleData={data} isLoggedIn={isLoggedIn} />
+        {result.status !== "WRITABLE" && <InfoToast status={result.status} />}
     </>
   );
 };

app/(sub)/capsule-detail/_components/responsive-footer/responsive-footer.css.ts

@@ -11,9 +11,10 @@ export const container = style({
   ...screen.md({
     position: "fixed",
     bottom: "7rem",
-    width: "calc(80rem - 3.4rem)",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: "calc(90rem - 3.4rem)",
     flexDirection: "row",
-    margin: "0 1.7rem",
     padding: "1.2rem 1.2rem 1.2rem 2.4rem",
     background: themeVars.color.gradient.darkgray_op,
   }),

shared/styles/base/global.css.ts

@@ -48,11 +48,6 @@ export const globalLayout = style({
 });
 
 export const maxWidth = style({
-  maxWidth: "800px",
-  width: "100%",
-});
-
-export const mainLayout = style({
   maxWidth: "1200px",
   width: "100%",
 });

shared/ui/navbar/navbar-detail/navbar-detail.css.ts

@@ -12,7 +12,7 @@ export const container = style({
   left: "50%",
   transform: "translateX(-50%)",
   width: "100%",
-  maxWidth: "80rem",
+  maxWidth: "120rem",
 });
 
 export const iconButton = style({