fix: w-[360px] w-[375px]와 같이 500px이하일 때 고정 px 부여하는 코드 모두 삭제

Author: junjeeong

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,6 +29,7 @@ body {
 }
 
 main {
+  padding-top: 56px;
   background-color: white;
   font-size: 14px;
   width: 100vh;

src/pages/Chat.tsx

@@ -135,7 +135,7 @@ const Chat = () => {
   };
 
   return (
-    <div className="flex h-screen w-[360px] flex-col bg-white md:w-[375px] lg:w-[500px]">
+    <div className="flex h-screen w-full flex-col bg-white lg:w-[500px]">
       <Header title={chatTitle} />
 
       <div className="flex-1 space-y-4 overflow-y-auto px-[20px] pt-6">

src/pages/Content.tsx

@@ -33,7 +33,7 @@ const Content = () => {
   };
 
   return (
-    <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/MbtiTestQuestions.tsx

@@ -26,7 +26,7 @@ const MbtiTestQuestions = () => {
     const content: content = TEST_QNA[Number(currentPage) - 1];
 
     return (
-      <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

@@ -19,7 +19,7 @@ const MbtiTestResult = () => {
   if (!result) return <div>404 error occured</div>;
 
   return (
-    <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

@@ -227,7 +227,7 @@ const SelectInfo = () => {
   };
 
   return (
-    <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]">