fix: 특정 기기에서 레이아웃이 꽉 차지 못하는 문제 개선

src/components/header/Header.tsx

@@ -8,22 +8,20 @@ type HeaderProps = {
   title?: string;
   showPreviousIcon?: boolean;
   showShareIcon?: boolean;
-  children?: ReactNode;
 };
 
 const Header = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = true,
-  children
+  showShareIcon = true
 }: HeaderProps) => {
   const { pathname } = useLocation();
   const { isLoggedIn } = useAuthStore();
   const isHomepage = pathname === "/";
 
   return (
     <>
-      <div className="fixed z-50 w-[360px] bg-white md:w-[375px] lg:w-[500px]">
+      <header className="fixed z-50 w-full bg-white lg:w-[500px]">
         {isHomepage ? (
           <MainHeader isLoggedIn={isLoggedIn} />
         ) : (
@@ -33,9 +31,7 @@ const Header = ({
             showShareIcon={showShareIcon}
           />
         )}
-      </div>
-
-      <div className="pt-14">{children}</div>
+      </header>
     </>
   );
 };

src/components/header/MainHeader.tsx

@@ -11,7 +11,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
   };
 
   return (
-    <header className="flex h-[56px] w-full items-center justify-between bg-white pl-5">
+    <div className="flex h-[56px] w-full items-center justify-between bg-white px-5">
       <Link to="/" className="flex items-center">
         <img
           src="/public/icon/mbtipslogo.svg"
@@ -32,7 +32,7 @@ const MainHeader = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
           onClick={handleNavigate}
         />
       )}
-    </header>
+    </div>
   );
 };
 

src/components/header/SubHeader.tsx

@@ -56,7 +56,7 @@ const SubHeader = ({
 
   return (
     <>
-      <header className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
+      <div className="relative flex h-[56px] w-full items-center justify-between border-b border-gray-100 bg-white">
         {showPreviousIcon && (
           <img
             src="/public/icon/arrow_left.svg"
@@ -85,7 +85,7 @@ const SubHeader = ({
             />
           </button>
         )}
-      </header>
+      </div>
 
       {isLeaveChatModalOpen && (
         <ActionConfirmModal

src/components/modal/TermsAndPrivacyModal.tsx

@@ -7,34 +7,34 @@ const TermsAndPrivacyModal = ({
   closeModal
 }: {
   mode: "terms" | "privacy";
-  closeModal: ()=>void;
+  closeModal: () => void;
 }) => {
   const title = mode === "terms" ? "이용약관" : "개인정보처리방침";
-  const description =
-    mode === "terms"
-      ? TERMS
-      : PRIVACY;
+  const description = mode === "terms" ? TERMS : PRIVACY;
 
-      const handleOuterClick = () => {
-        closeModal()
-      }
+  const handleOuterClick = () => {
+    closeModal();
+  };
 
-      const handleInnerClick = (e:MouseEvent) => {
-        e.stopPropagation();
-      }
+  const handleInnerClick = (e: MouseEvent) => {
+    e.stopPropagation();
+  };
 
   return (
-    <div className="inset-0 fixed flex items-center justify-center z-50 bg-black/50" onClick={handleOuterClick}>
-    <div className="relative rounded-lg flex flex-col items-center w-[360px] h-[476px] bg-white px-[45px] py-[25px] overflow-scroll " onClick={handleInnerClick}>
-      <h1 className="font-bold text-2xl ">{title}</h1>
-      <p className="mt-[30px] whitespace-pre-wrap">{description}</p>
-      <button
-        onClick={closeModal}
-        className="absolute top-6 right-4"
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={handleOuterClick}
+    >
+      <div
+        className="relative flex h-[476px] w-[360px] flex-col items-center overflow-scroll rounded-lg bg-white px-[45px] py-[25px] "
+        onClick={handleInnerClick}
       >
-        <img src="/icon/close.svg" alt="닫기 버튼" width={22} height={22} />
-      </button>
-    </div>
+        <h1 className="text-2xl font-bold ">{title}</h1>
+        <p className="mt-[30px] whitespace-pre-wrap">{description}</p>
+        <button onClick={closeModal} className="absolute top-6 right-4">
+          <img src="/icon/close.svg" alt="닫기 버튼" width={22} height={22} />
+        </button>
+      </div>
     </div>
   );
 };

src/index.css

@@ -29,18 +29,14 @@ body {
 }
 
 main {
-  @media screen and (min-width: 360px) {
-    background-color: white;
-    font-size: 14px;
-    width: 360px;
-  }
-  @media screen and (min-width: 375px) {
-    font-size: 16px;
-    width: 375px;
-  }
+  margin-top: 56px;
+  background-color: white;
+  font-size: 14px;
+  width: 100vh;
+  max-width: 500px;
+
   @media screen and (min-width: 500px) {
     font-size: 16px;
-    width: 500px;
   }
 }
 

src/pages/Chat.tsx

@@ -143,8 +143,8 @@ const Chat = () => {
         <meta property="twitter:description" content={`${mbti}와의 대화창`} />
       </Helmet>
 
-      <div className="flex h-screen w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
-        <Header title={chatTitle} showShareIcon={false}/>
+      <div className="flex h-screen w-full flex-col bg-white lg:w-[500px]">
+        <Header title={chatTitle} showShareIcon={false} />
 
         <div className="flex-1 space-y-4 overflow-y-auto px-[20px] pt-6">
           <IntroGuide />

src/pages/Content.tsx

@@ -68,7 +68,7 @@ const Content = () => {
         />
       </Helmet>
 
-      <div className="flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+      <div className="flex w-full flex-col bg-white lg:w-[500px]">
         <Header title="콘텐츠" />
 
         <div className="flex flex-col gap-[36px] px-5 py-5">

src/pages/Home.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Helmet } from "react-helmet";
 import type { AxiosResponse } from "axios";
 import { authInstance } from "@/api/axios";
 import { VirtualFriend } from "@/types/virtualFreind";
@@ -10,7 +11,6 @@ import ChatStartButton from "@/components/button/ChatStartButton";
 import Header from "@/components/header/Header";
 import useAuthStore from "@/store/useAuthStore";
 import ProfileContainer from "@/components/ProfileContainer";
-import { Helmet } from "react-helmet";
 
 const Home = () => {
   const navigate = useNavigate();
@@ -41,37 +41,35 @@ const Home = () => {
         <meta property="twitter:description" content="홈" />
       </Helmet>
 
-      <div className="flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
-        <Header />
-        <main>
-          <section aria-label="콘텐츠 배너">
-            <Banner />
-          </section>
-          <section className="mt-5 w-full" aria-label="빠른 대화">
-            <div className="w-full px-[20px] py-[13px]">
-              <SubTitle mode="빠른대화" />
-            </div>
-            <div className="px-5 py-3">
-              <ChatStartButton mode={"go-fast"} />
-            </div>
-          </section>
-          <section aria-label="친구 목록">
-            <div className="w-full px-[20px] py-[21px]">
-              <SubTitle mode="친구목록" />
-            </div>
-            <div className="flex justify-center pb-[127px]">
-              {isLoggedIn && virtualFreindList.length > 0 ? (
-                <ProfileContainer
-                  list={virtualFreindList}
-                  setVirtualFriendList={setVirtualFriendList}
-                />
-              ) : (
-                <StrokeBanner />
-              )}
-            </div>
-          </section>
-        </main>
-      </div>
+      <Header />
+      <main>
+        <section aria-label="콘텐츠 배너">
+          <Banner />
+        </section>
+        <section className="mt-5 w-full" aria-label="빠른 대화">
+          <div className="w-full px-[20px] py-[13px]">
+            <SubTitle mode="빠른대화" />
+          </div>
+          <div className="flex justify-center px-5 py-3">
+            <ChatStartButton mode={"go-fast"} />
+          </div>
+        </section>
+        <section aria-label="친구 목록">
+          <div className="w-full px-[20px] py-[21px]">
+            <SubTitle mode="친구목록" />
+          </div>
+          <div className="flex justify-center pb-[127px]">
+            {isLoggedIn && virtualFreindList.length > 0 ? (
+              <ProfileContainer
+                list={virtualFreindList}
+                setVirtualFriendList={setVirtualFriendList}
+              />
+            ) : (
+              <StrokeBanner />
+            )}
+          </div>
+        </section>
+      </main>
     </>
   );
 };

src/pages/MbtiTestQuestions.tsx

@@ -45,7 +45,7 @@ const MbtiTestQuestions = () => {
           />
         </Helmet>
 
-        <div className="flex flex-col sm:w-[360px] md:w-[375px] lg:w-[500px]">
+        <div className="flex w-full flex-col lg:w-[500px]">
           <Header title="상대방 MBTI 유추 테스트" />
           <main className="flex h-full flex-col items-center justify-center bg-white whitespace-pre-wrap ">
             <span className="text-lg font-medium text-gray-500">

src/pages/MbtiTestResult.tsx

@@ -6,7 +6,6 @@ import RestartButton from "@/components/button/RestartButton";
 import ChatStartButton from "@/components/button/ChatStartButton";
 import useLayoutSize from "@/hooks/useLayoutSize";
 import Header from "@/components/header/Header";
-import { useParams } from "react-router-dom";
 
 const MbtiTestResult = () => {
   const { mbti } = useParams();
@@ -46,7 +45,7 @@ const MbtiTestResult = () => {
         />
       </Helmet>
 
-      <div className="flex h-[1008px] flex-col sm:w-[360px] md:w-[375px] lg:w-[500px]">
+      <div className="flex h-[1008px] w-full flex-col lg:w-[500px]">
         <Header title="결과" showShareIcon={false} />
         <main className="flex h-screen w-full flex-grow flex-col items-center bg-white px-5 py-5">
           <img

src/pages/MyInfo.tsx

@@ -72,7 +72,7 @@ const MyInfo = () => {
   }
 
   return (
-    <div className="relative flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+    <div className="relative flex w-full  flex-col bg-white lg:w-[500px]">
       <Header title="내 정보" showShareIcon={false} />
 
       <ul className="mt-[10px] flex flex-col justify-between gap-[20px]">

src/pages/SelectInfo.tsx

@@ -250,7 +250,7 @@ const SelectInfo = () => {
         />
       </Helmet>
 
-      <div className="flex w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+      <div className="flex w-full flex-col bg-white lg:w-[500px]">
         <Header title={headerTitle} showShareIcon={false} />
 
         <div className="mx-auto w-[320px]">