[이진우] 홈페이지 미디어 쿼리 작성(1/2)

components/buttons/Button.module.css

@@ -340,8 +340,25 @@
   border: 1px solid var(--gray-100);
 }
 
+.mobile-filter {
+  display: none;
+  width: 35px;
+  height: 35px;
+  box-sizing: border-box;
+  border: 1px solid var(--gray-100);
+  background-color: var(--black);
+  background-image: url("../../public/filter-icon.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 /* Tablet view */
 @media (min-width: 744px) and (max-width: 1199px) {
+  .thin-main-440px-60px {
+    width: 342px;
+    height: 60px;
+  }
+
   .thin-black-440px-60px {
     width: 277px;
     height: 55px;
@@ -371,6 +388,11 @@
 
 /* Mobile view */
 @media (max-width: 743px) {
+  .thin-main-440px-60px {
+    width: 345px;
+    height: 55px;
+  }
+
   .thin-black-440px-60px {
     width: 277px;
     height: 55px;
@@ -398,4 +420,8 @@
     font-weight: 700;
     font-size: 0.75rem;
   }
+
+  .mobile-filter {
+    display: block;
+  }
 }

components/cards/info/GradeCategory.module.css

@@ -6,72 +6,95 @@
 
 .medium > .common {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--main);
 }
 
 .medium > .rare {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--blue);
 }
 
 .medium > .super-rare {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--purple);
 }
 
 .medium > .legendary {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--pink);
 }
 
 .medium > .bar {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--gray-400);
 }
 
 .medium > .category {
   font-size: 1.5rem;
-  font-weight: 700px;
+  font-weight: 700;
   color: var(--gray-300);
 }
 
 .small > .common {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--main);
 }
 
 .small > .rare {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--blue);
 }
 
 .small > .super-rare {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--purple);
 }
 
 .small > .legendary {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--pink);
 }
 
 .small > .bar {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--gray-400);
 }
 
 .small > .category {
   font-size: 1rem;
-  font-weight: 400px;
+  font-weight: 300;
   color: var(--gray-300);
 }
+
+@media (min-width: 375px) and (max-width: 743px) {
+  .small > .common {
+    font-size: 0.625rem;
+  }
+
+  .small > .rare {
+    font-size: 0.625rem;
+  }
+
+  .small > .super-rare {
+    font-size: 0.625rem;
+    text-wrap: nowrap;
+  }
+
+  .small > .legendary {
+    font-size: 0.625rem;
+  }
+
+  .small > .category {
+    font-size: 0.625rem;
+  }
+}

components/inputs/Input.module.css

@@ -151,7 +151,25 @@
 }
 
 @media (min-width: 744px) and (max-width: 1199px) {
+  .container-search {
+    width: 200px;
+    height: 45px;
+  }
+
+  .vector {
+    width: 17.42px;
+    height: 17.42px;
+  }
 }
 
 @media (min-width: 375px) and (max-width: 743px) {
+  .container-search {
+    width: 345px;
+    height: 45px;
+  }
+
+  .vector {
+    width: 22px;
+    height: 22px;
+  }
 }

components/modal/ModalContainer.module.css

@@ -12,6 +12,8 @@
 }
 
 .container {
+  width: 560px;
+  height: 375px;
   position: relative;
   background-color: var(--gray-500);
   border-radius: 2px;

components/nav/Nav.js

@@ -1,15 +1,15 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import { useRouter } from 'next/router';
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
 
-import mainLogo from '@/public/logo.svg';
-import listIcon from '@/public/nav-list.svg';
-import styles from './Nav.module.css';
-import Loggedin from './Loggedin';
-import NonLogin from './NonLogin';
-import useAuthStore from '@/store/useAuthStore';
-import { usePostSignout } from '@/lib/reactQuery/useAuth';
+import mainLogo from "@/public/logo.svg";
+import listIcon from "@/public/nav-list.svg";
+import styles from "./Nav.module.css";
+import Loggedin from "./Loggedin";
+import NonLogin from "./NonLogin";
+import useAuthStore from "@/store/useAuthStore";
+import { usePostSignout } from "@/lib/reactQuery/useAuth";
 
 export default function Nav() {
   const router = useRouter();
@@ -36,21 +36,21 @@ export default function Nav() {
   return (
     // 로그인과 회원가입 부분에 Nav가 안보이게 하기 위해
     // pathname을 이용하여 다른 style이 적용되게 했습니다.
-    <div>
+    <div className={styles["header"]}>
       <header
-        className={`${styles['nav']} ${
-          router.pathname === '/auth/signin' ||
-          router.pathname === '/auth/signup'
-            ? styles['nav-none']
-            : ''
+        className={`${styles["nav"]} ${
+          router.pathname === "/auth/signin" ||
+          router.pathname === "/auth/signup"
+            ? styles["nav-none"]
+            : ""
         }`}
       >
-        <div className={styles['container']}>
-          <div className={styles['list']} onClick={handleMobileUserDrop}>
+        <div className={styles["container"]}>
+          <div className={styles["list"]} onClick={handleMobileUserDrop}>
             <Image src={listIcon} alt="list-icon" />
           </div>
           <Link href="/">
-            <Image src={mainLogo} className={styles['logo']} alt="logo" />
+            <Image src={mainLogo} className={styles["logo"]} alt="logo" />
           </Link>
           {user ? (
             <Loggedin

components/nav/Nav.module.css

@@ -1,9 +1,17 @@
-.nav {
+.header {
   position: sticky;
   top: 0;
   z-index: 10;
-  width: 100%;
   height: 80px;
+  width: 100%;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
   background-color: var(--black);
 }
 
@@ -15,8 +23,9 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1200px;
-  margin: 27px auto;
+  width: 100%;
+  max-width: 1480px;
+  margin: auto;
 }
 
 .list {
@@ -25,6 +34,10 @@
 
 /* Tablet view */
 @media (min-width: 744px) and (max-width: 1199px) {
+  .header {
+    height: 70px;
+  }
+
   .container {
     max-width: 664px;
   }
@@ -37,6 +50,10 @@
 
 /* Mobile view */
 @media (max-width: 743px) {
+  .header {
+    height: 60px;
+  }
+
   .container {
     max-width: 375px;
   }

pages/index.js

@@ -56,6 +56,10 @@ export default function Home() {
     setSellMyCard(!sellMyCard);
   };
 
+  const handleFilterClick = () => {
+    // need filter modal
+  };
+
   if (isLoading)
     return (
       <div className={styles["home-container"]}>
@@ -155,6 +159,10 @@ export default function Home() {
               />
             </div>
           </div>
+          <div
+            className={styles["home-main-container-nav-mobile-divider"]}
+          ></div>
+          <Button style={"mobile-filter"} onClick={handleFilterClick} />
           <Dropdown
             placeholder={"낮은 가격순"}
             style={"180"}
@@ -187,6 +195,13 @@ export default function Home() {
           <CardSell myGalleryModalClick={myGalleryModalClick} />
         </ModalContainer>
       )}
+      <div className={styles["home-sell-container"]}>
+        <Button
+          text={"나의 포토카드 판매하기"}
+          style={"thin-main-440px-60px"}
+          onClick={myGalleryModalClick}
+        />
+      </div>
     </div>
   );
 }