feat :: 반응형 개선

Team-return · Dec 8, 2023 · b756b87 · b756b87
1 parent e96151c
commit b756b87
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 34 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -41,7 +41,6 @@ html {
 
 body {
   min-height: 100vh;
-  width: 65vw;
   margin: auto;
   padding-top: 68px;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,25 +5,25 @@ import Provider from "@/components/Provider";
 import SEOConfig from "@/components/SEO";
 
 const notoSans = Noto_Sans_KR({
-    weight: ["400", "500", "700"],
-    subsets: ["latin"],
-    display: "swap",
+  weight: ["400", "500", "700"],
+  subsets: ["latin"],
+  display: "swap",
 });
 
 export default function RootLayout({
-    children,
+  children,
 }: {
-    children: React.ReactNode;
+  children: React.ReactNode;
 }) {
-    return (
-        <html>
-            <SEOConfig />
-            <body className={notoSans.className}>
-                <Provider>
-                    <Header />
-                    {children}
-                </Provider>
-            </body>
-        </html>
-    );
+  return (
+    <html>
+      <SEOConfig />
+      <body className={"md:w-[65vw] sm:w-[85vw] " + notoSans.className}>
+        <Provider>
+          <Header />
+          {children}
+        </Provider>
+      </body>
+    </html>
+  );
 }
diff --git a/src/app/recruitments/page.tsx b/src/app/recruitments/page.tsx
@@ -5,8 +5,8 @@ import RecruitmentsCard from "@/components/recruitments/RecruitmentsCard";
 export default function Recruitments() {
   return (
     <div className="w-full my-[68px]">
-      <div className="flex items-center justify-between w-full py-5">
-        <div className="flex gap-[10px] items-center text-h5 leading-h5 font-b">
+      <div className="flex items-center justify-between w-full py-5 md:flex sm:block">
+        <div className="flex gap-[10px] items-center text-h5 leading-h5 font-b sm:mb-4">
           <p>📄 모집의뢰서</p>
         </div>
         <Filter />

diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx
@@ -52,13 +52,15 @@ export default function Banner() {
 
   return (
     <div className="flex flex-col items-center gap-[15px]">
-      <div className="w-screen flex gap-[50px] relative overflow-hidden whitespace-nowrap z-1 ">
+      <div className="w-screen flex gap-[50px] relative overflow-hidden whitespace-nowrap z-1">
         {BannerList.map((item, index) => (
           <div
             key={index}
-            className={`cursor-pointer z-[1] w-[65vw] h-[20vw] inline-block flex-[0_0_auto] relative rounded-[12px] border border-[#E5E5E5] border-solid overflow-hidden curosr-pointer ${
-              index === 0 && "m-[0_0_0_17.5vw]"
-            } ${index === BannerList.length - 1 && "m-[0_17.5vw_0_0]"}`}
+            className={`cursor-pointer z-[1] md:w-[65vw] sm:w-[85vw] md:h-[20vw] sm:h-[27vw] inline-block flex-[0_0_auto] relative rounded-[12px] border border-[#E5E5E5] border-solid overflow-hidden curosr-pointer ${
+              index === 0 && "md:ml-[17.5vw] sm:ml-[7.5vw]"
+            } ${
+              index === BannerList.length - 1 && "md:mr-[17.5vw] sm:mr-[7.5vw]"
+            }`}
             ref={(el: HTMLDivElement) => (BannerRefs.current[index] = el)}
             onClick={() => {
               navigator.push(item.url);
@@ -82,7 +84,7 @@ export default function Banner() {
           />
         ))}
       </div>
-      <div className="w-screen h-[20vw] flex justify-between bg-none items-center absolute px-[8vw]">
+      <div className="w-screen md:h-[20vw] sm:h-[27vw] flex justify-between bg-none items-center absolute px-[8vw]">
         <CircleBtn direction="left" onClick={handleChangePrev} />
         <CircleBtn direction="right" onClick={handleChangeNext} />
       </div>

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -18,7 +18,7 @@ function Header() {
 
   return (
     <div
-      className={`w-screen h-[68px] bg-white flex justify-between shadow-[0_2px_4px_0_rgba(229,229,229,0.2)] items-center fixed top-0 left-0 py-[12px] px-[17.5vw] z-[4]`}
+      className={`w-screen h-[68px] bg-white flex justify-between shadow-[0_2px_4px_0_rgba(229,229,229,0.2)] items-center fixed top-0 left-0 py-[12px] md:px-[17.5vw] sm:px-[7.5vw] z-[4]`}
     >
       <Link href={"/"} prefetch>
         <Image width={80} height={22} src={Logo} alt="joibs_logo" />

diff --git a/src/components/common/TextFiled.tsx b/src/components/common/TextFiled.tsx
@@ -8,7 +8,7 @@ interface PropsType extends React.ComponentProps<"input"> {
   enterEvent?: () => void;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   label?: string;
-  width: string | number;
+  width?: string | number;
   height?: string | number;
 }
 
@@ -23,6 +23,7 @@ function TextFiled({
   height,
   label,
   type = "text",
+  className
 }: PropsType) {
   const [focus, setFocuse] = useState<boolean>(false);
   const [isHidden, setIsHidden] = useState<boolean>(true);
@@ -32,7 +33,12 @@ function TextFiled({
   };
 
   return (
-    <div style={{ width: typeof width === "number" ? width + "px" : width }}>
+    <div
+      style={
+        width ? { width: typeof width === "number" ? width + "px" : width } : {}
+      }
+      className={className}
+    >
       {label && (
         <p className="text-caption text-[#333333] font-m mb-[4px]">{label}</p>
       )}
@@ -79,11 +85,7 @@ function TextFiled({
             className="flex justify-center items-center mr-[14px] cursor-pointer"
             onClick={enterEvent}
           >
-            <Icon
-              icon="Search"
-              size={20}
-              color="gray60"
-            />
+            <Icon icon="Search" size={20} color="gray60" />
           </div>
         )}
       </div>

diff --git a/src/components/recruitments/filter.tsx b/src/components/recruitments/filter.tsx
@@ -61,7 +61,7 @@ function Filter() {
   }));
 
   return (
-    <div className="flex gap-4">
+    <div className="flex justify-end gap-4">
       <DropDown
         title="모집구분"
         items={internDropdownItems}
@@ -86,7 +86,7 @@ function Filter() {
         name="search"
         customType="Search"
         enterEvent={onSearch}
-        width="20vw"
+        className="md:20vw sm:22vw"
       />
     </div>
   );