add: 스프린트5 반응형 미디어 쿼리 적용

package.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/Footer/Footer.module.css

@@ -13,15 +13,31 @@
   line-height: 19.09px;
   display: flex;
   justify-content: space-between;
+  position: relative;
+  /* Tablet 스타일: 744px 이상 ~ 1199px 이하 */
+  @media (min-width: 744px) and (max-width: 1199.98px) {
+    padding: 0 24px;
+  }
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    padding: 0 24px;
+  }
 }
 
 .copy {
-  color: #9CA3AF;
+  color: #9ca3af;
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    padding: 0 24px;
+    position: absolute;
+    left: 0;
+    bottom: -33px;
+  }
 }
 
 .info {
   width: 145px;
-  color: #E5E7EB;
+  color: #e5e7eb;
   display: flex;
   justify-content: space-between;
 }
@@ -38,4 +54,4 @@
 
 .sns > span {
   cursor: pointer;
-}
+}

src/components/Main/Main.module.css

@@ -1,17 +1,31 @@
 .main {
-  padding: 26px 200px;
+  /* padding: 26px 200px; */
+  padding: 26px 0;
   color: #111827;
 }
 
 .container {
   margin: 0 auto;
-  width: 1118px;
-}
 
-.bestItem {
+  /* PC 스타일: 1200px 이상 */
+  @media (min-width: 1200px) {
+    width: 1118px;
+  }
+
+  /* Tablet 스타일: 744px 이상 ~ 1199px 이하 */
+  @media (min-width: 744px) and (max-width: 1199.98px) {
+    width: 696px;
+  }
+
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    width: 100%;
+    max-width: 344px;
+  }
 }
 
 .title {
+  white-space: nowrap;
   font-weight: 700;
   font-size: 2rem;
   margin-bottom: 16px;
@@ -25,6 +39,8 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 24px;
+  flex-wrap: wrap;
+  position: relative;
 }
 
 .toolBox {
@@ -46,6 +62,16 @@
   font-weight: 400;
   font-size: 1.6rem;
   padding: 0 39px 0 13px;
+  /* Tablet 스타일: 744px 이상 ~ 1199px 이하 */
+  @media (min-width: 744px) and (max-width: 1199.98px) {
+    width: 242px;
+    font-size: 1.4rem;
+  }
+
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    max-width: 288px;
+  }
 }
 
 .searchLogo {
@@ -68,6 +94,12 @@
   border-radius: 8px;
   font-size: 1.6rem;
   cursor: pointer;
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    position: absolute;
+    top: 0;
+    right: 45px;
+  }
 }
 
 .select {
@@ -76,4 +108,14 @@
   border-radius: 8px;
   padding: 0 20px;
   font-size: 1.6rem;
+
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    width: 42px;
+    border-radius: 12px;
+    -webkit-appearance: none; /* Safari와 Chrome */
+    -moz-appearance: none; /* Firefox */
+    appearance: none; /* 나머지 브라우저 */
+    background: url(../../assets/images/ic_sort.png) no-repeat center / 24px;
+  }
 }

src/components/Nav/Nav.js

@@ -1,19 +1,30 @@
 import React from 'react';
 import styles from './Nav.module.css'
 import logo from '../../assets/images/logo.png'
+import avatar from '../../assets/images/user_profile.png'
 
 function Nav() {
+  const isLoggedIn = false; // true 또는 false로 각각 바꿔보며 확인
+
   return (
     <div className={styles.nav}>
+      <div className={styles.gnb}>
         <div className={styles.logo}>
           <img src={logo} alt="로고" className={styles.logoImg} />
-            <div className={styles.logoTitle}>판다마켓</div>
+          <div className={styles.logoTitle}>판다마켓</div>
         </div>
         <ul className={styles.ul}>
           <li className={styles.li}>자유게시판</li>
           <li className={styles.li}>중고마켓</li>
         </ul>
+        {isLoggedIn ? (
+          <div className={styles.avatar}>
+            <img src={avatar} alt="유저 프로필" />
+          </div>
+        ) : (
           <div className={styles.login}>로그인</div>
+        )}
+      </div>
     </div>
   );
 }