From 65defa9d04999b6992d5792deea8b38697ffa696 Mon Sep 17 00:00:00 2001 From: "DESKTOP-EHH0K4D\\SnowRang" Date: Tue, 29 Oct 2024 12:02:50 +0900 Subject: [PATCH 1/3] feat : add media query in home page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 홈페이지에 미디어 쿼리 작성(미완) 참고 : 모바일 상태에서 필터 버튼 클릭 시 팝업처럼 생성되는 필터링 선택영역. 모달로 작성 중 --- components/buttons/Button.module.css | 16 +++ .../cards/info/GradeCategory.module.css | 12 +- components/inputs/Input.module.css | 18 +++ components/modal/ModalContainer.module.css | 15 +++ components/nav/Nav.js | 40 +++---- components/nav/Nav.module.css | 25 ++++- pages/index.js | 8 ++ public/filter-icon.svg | 3 + styles/Home.module.css | 103 +++++++++++++++++- 9 files changed, 208 insertions(+), 32 deletions(-) create mode 100644 public/filter-icon.svg diff --git a/components/buttons/Button.module.css b/components/buttons/Button.module.css index 766fba3..535d5ec 100644 --- a/components/buttons/Button.module.css +++ b/components/buttons/Button.module.css @@ -340,8 +340,24 @@ border: 1px solid var(--gray-100); } +.mobile-filter { + 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; diff --git a/components/cards/info/GradeCategory.module.css b/components/cards/info/GradeCategory.module.css index 937b040..b74aea8 100644 --- a/components/cards/info/GradeCategory.module.css +++ b/components/cards/info/GradeCategory.module.css @@ -42,36 +42,36 @@ .small > .common { font-size: 1rem; - font-weight: 400px; + font-weight: 400; color: var(--main); } .small > .rare { font-size: 1rem; - font-weight: 400px; + font-weight: 400; color: var(--blue); } .small > .super-rare { font-size: 1rem; - font-weight: 400px; + font-weight: 400; color: var(--purple); } .small > .legendary { font-size: 1rem; - font-weight: 400px; + font-weight: 400; color: var(--pink); } .small > .bar { font-size: 1rem; - font-weight: 400px; + font-weight: 400; color: var(--gray-400); } .small > .category { font-size: 1rem; - font-weight: 400px; + font-weight: 400; color: var(--gray-300); } diff --git a/components/inputs/Input.module.css b/components/inputs/Input.module.css index bd0b1e3..0afbf58 100644 --- a/components/inputs/Input.module.css +++ b/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; + } } diff --git a/components/modal/ModalContainer.module.css b/components/modal/ModalContainer.module.css index c5eab53..162b46c 100644 --- a/components/modal/ModalContainer.module.css +++ b/components/modal/ModalContainer.module.css @@ -12,6 +12,8 @@ } .container { + width: 560px; + height: 375px; position: relative; background-color: var(--gray-500); border-radius: 2px; @@ -25,3 +27,16 @@ top: 30px; cursor: pointer; } + +@media (min-width: 744px) and (max-width: 1199px) { + .container { + width: 400px; + height: 291px; + } +} +@media (min-width: 375px) and (max-width: 743px) { + .container { + width: 345px; + height: 291px; + } +} diff --git a/components/nav/Nav.js b/components/nav/Nav.js index 1cdd6d1..41f8226 100644 --- a/components/nav/Nav.js +++ b/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이 적용되게 했습니다. -
+
-
-
+
+
list-icon
- logo + logo {user ? ( { + // need filter modal + }; + if (isLoading) return (
@@ -155,6 +159,10 @@ export default function Home() { />
+
+
); } diff --git a/styles/Home.module.css b/styles/Home.module.css index 550e648..732dbc4 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -64,6 +64,10 @@ margin: 60px auto; } +.home-sell-container { + display: none; +} + @media (min-width: 744px) and (max-width: 1199px) { .home-container { width: 704px; @@ -154,4 +158,12 @@ grid-gap: 5px; margin-top: 20px; } + + .home-sell-container { + position: sticky; + bottom: 15px; + z-index: 9; + margin: 0 auto; + display: block; + } }