[조혜진] 반응형 디자인 추가

components/Button/Button.module.scss

@@ -1,12 +1,6 @@
 @import "@/styles/const.scss";
 
-@mixin buttonStyle(
-  $bgColor,
-  $fontColor,
-  $borderColor: $bgColor,
-  $width: 100%,
-  $height: 48px
-) {
+@mixin buttonStyle($bgColor, $fontColor, $borderColor: $bgColor, $width: 100%, $height: 48px) {
   width: $width;
   height: $height;
   text-align: center;
@@ -32,7 +26,7 @@
   @media screen and (max-width: $MOBILE) {
     padding: 8px 0;
 
-    font-size: 12px;
+    font-size: 14px;
     font-weight: 400;
     line-height: 16;
   }

components/NotificationModal/NotificationModal.module.scss

@@ -16,7 +16,7 @@
   background-color: var(--red10);
   box-shadow: 0px 0px 4px 0px rgba(95, 93, 93, 0.26);
 
-  z-index: 10;
+  z-index: 100;
   cursor: auto;
 
   @media (max-width: $MOBILE) {
@@ -45,6 +45,7 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
+  color: var(--black);
 
   @media (max-width: $MOBILE) {
     height: 100%;

components/Pagination/Pagination.types.ts

@@ -4,5 +4,6 @@ export interface PaginationProps {
   postsPerPage: number;
   type: string;
   noticeId?: string;
+  keyword?: string;
   onPageChange?: (page: number) => void;
 }

components/Pagination/index.tsx

@@ -13,6 +13,7 @@ const Pagination: React.FC<PaginationProps> = ({
   postsPerPage,
   type,
   noticeId,
+  keyword,
   onPageChange,
 }) => {
   const router = useRouter();
@@ -25,6 +26,8 @@ const Pagination: React.FC<PaginationProps> = ({
         router.push(`/?page=${page}`);
       } else if (type === "applicant") {
         router.push(`/my-shop/${noticeId}/?page=${page}`);
+      } else if (type === "search") {
+        router.push(`/search?keyword=${keyword}&page=${page}`);
       } else if (type === "profileNotice") {
         if (onPageChange) {
           onPageChange(page);
@@ -70,12 +73,7 @@ const Pagination: React.FC<PaginationProps> = ({
           onClick={() => handlePageChange(currentPage - 1)}
           disabled={currentPage === 1}
         >
-          <Image
-            src="/image/icon/prev_icon.svg"
-            width={20}
-            height={20}
-            alt="이전"
-          />
+          <Image src="/image/icon/prev_icon.svg" width={20} height={20} alt="이전" />
         </button>
       )}
       {renderPageNumbers()}
@@ -85,12 +83,7 @@ const Pagination: React.FC<PaginationProps> = ({
           onClick={() => handlePageChange(currentPage + 1)}
           disabled={currentPage === totalPages}
         >
-          <Image
-            src="/image/icon/next_icon.svg"
-            width={20}
-            height={20}
-            alt="다음"
-          />
+          <Image src="/image/icon/next_icon.svg" width={20} height={20} alt="다음" />
         </button>
       )}
     </div>

components/Profile/Profile.module.scss

@@ -10,6 +10,11 @@
     width: 680px;
     padding: 60px 32px;
   }
+
+  @media (max-width: $MOBILE) {
+    width: 100%;
+    padding: 40px 12px;
+  }
 }
 
 .header {

components/Profile/ProfileView/ProfileView.module.scss

@@ -6,22 +6,24 @@
 }
 
 .profile {
+  width: 100%;
   max-width: 964px;
   margin: 0 auto;
   padding: 60px 0;
   height: 395px;
   display: flex;
+  justify-content: center;
 
   @media (max-width: $TABLET) {
-    width: 680px;
-    // height : ;
     padding: 40px 32px 0;
     flex-direction: column;
   }
 
   @media (max-width: $MOBILE) {
+    width: 375px;
     padding: 40px 12px;
     flex-direction: column;
+    height: auto;
   }
 }
 
@@ -40,7 +42,7 @@
 }
 .info-wrapper {
   width: 70%;
-  height: 100%;
+  height: auto;
   background-color: var(--red10);
   border-radius: 12px;
   padding: 32px;
@@ -52,6 +54,8 @@
   }
 
   @media (max-width: $MOBILE) {
+    width: 100%;
+    padding: 20px;
   }
 }
 .info {
@@ -93,6 +97,7 @@
   height: 100%;
   font-size: 16px;
   font-weight: 400;
+  width: 100%;
   overflow: auto;
 
   &::-webkit-scrollbar {
@@ -104,6 +109,10 @@
     background-color: #7d7986;
     border-radius: 4px;
   }
+
+  @media (max-width: $MOBILE) {
+    overflow: hidden;
+  }
 }
 
 .button-wrapper {

components/Search/index.tsx

@@ -136,7 +136,8 @@ const Search = () => {
           currentPage={currentPage}
           totalPosts={filteredAndSortedNotices.length}
           postsPerPage={postsPerPage}
-          type="notice"
+          keyword={Array.isArray(keyword) ? keyword.join(" ") : keyword}
+          type="search"
         />
       </div>
     </div>

components/Shop/ShopNotice/ShopNotice.module.scss

@@ -75,11 +75,20 @@
   width: 100%;
   transition: transform 0.5s ease;
   justify-items: center;
+
+  @media (max-width: $TABLET) {
+    grid-template-columns: repeat(2, auto);
+    grid-gap: 28px 0;
+  }
 }
 
 .section {
   background-color: var(--gray5);
   width: 100%;
   display: flex;
   justify-content: center;
+
+  @media (max-width: $TABLET) {
+    background: none;
+  }
 }

components/UserApplication/ApplicationEmpty/Empty.module.scss

@@ -9,6 +9,10 @@
   @media (max-width: $TABLET) {
     padding: 60px 32px;
   }
+
+  @media (max-width: $MOBILE) {
+    padding: 80px 12px;
+  }
 }
 
 .header {

components/UserApplication/ApplicationView/View.module.scss

@@ -84,6 +84,10 @@
   > div:nth-of-type(3) {
     width: 200px;
   }
+
+  > div:nth-of-type(4) {
+    width: 200px;
+  }
 }
 
 .list-content {
@@ -126,20 +130,19 @@
   .content-wrap {
     width: 680px;
   }
-  .phone {
-    display: none;
-  }
 
   .list-header,
   .list-content {
     > div:nth-of-type(1) {
       width: 200px;
     }
-    > div:nth-of-type(2) {
-      width: 250px;
+    > div:nth-of-type(2),
+    > div:nth-of-type(3) {
+      display: none;
     }
   }
 }
+
 @media screen and (max-width: $MOBILE) {
   .content-wrap {
     width: 350px;
@@ -150,6 +153,10 @@
     > div:nth-of-type(1) {
       width: 160px;
     }
+    > div:nth-of-type(2),
+    > div:nth-of-type(3) {
+      display: none;
+    }
   }
 
   .notice--head__name {

components/UserApplication/ApplicationView/index.tsx

@@ -1,14 +1,16 @@
+import React, { useState, useCallback, useEffect } from "react";
 import styles from "./View.module.scss";
 import classNames from "classnames/bind";
 import StateButton from "../State";
 import { instance } from "@/utils/instance";
-import { useCallback, useEffect, useState } from "react";
 import { ApplicationItem } from "../Application.types";
 import { calculateEndTime, formatDateTime } from "@/utils/time";
 import { ApplicationStatus } from "../State/State.types";
 import Pagination from "@/components/Pagination";
 import { formatCurrency } from "@/utils/formatCurrency";
 import { getUserId } from "@/utils/jwt";
+import useResize from "@/hooks/useResize";
+import { MOBILE, TABLET } from "@/constants/constants";
 
 const cx = classNames.bind(styles);
 
@@ -18,6 +20,8 @@ const ApplicationView = () => {
   const [totalPosts, setTotalPosts] = useState(0);
   const [hasNext, setHasNext] = useState(false);
   const postsPerPage = 5;
+  const isMobile = useResize(MOBILE);
+  const isTablet = useResize(TABLET);
 
   const getApplicationList = useCallback(async () => {
     const userId = getUserId();
@@ -53,14 +57,14 @@ const ApplicationView = () => {
           <ul className={cx("list-wrap")}>
             <li className={cx("list-header")}>
               <div>가게</div>
-              <div>일자</div>
-              <div>시급</div>
+              <div className={cx({ hidden: isMobile })}>일자</div>
+              <div className={cx({ hidden: isMobile || isTablet })}>시급</div>
               <div>상태</div>
             </li>
             {applicationList.map((application) => (
               <li key={application.item.id} className={cx("list-content")}>
                 <div>{application.item.shop.item.name}</div>
-                <div>
+                <div className={cx({ hidden: isMobile })}>
                   {formatDateTime(application.item.notice.item.startsAt, "time")}~
                   {formatDateTime(
                     calculateEndTime(
@@ -71,7 +75,9 @@ const ApplicationView = () => {
                   )}
                   ({application.item.notice.item.workhour}시간)
                 </div>
-                <div>{formatCurrency(application.item.notice.item.hourlyPay)}원</div>
+                <div className={cx({ hidden: isMobile || isTablet })}>
+                  {formatCurrency(application.item.notice.item.hourlyPay)}원
+                </div>
                 <div>
                   <div className={cx("btn-wrap")}>
                     <StateButton state={application.item.status as ApplicationStatus} />

components/layout/Header/UiButton/UiButton.module.scss

@@ -1,12 +1,13 @@
 .uiButton {
-    min-width: 65px;
-    height: 20px;
-    background-color: transparent;
-    line-height: 20px;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    border: none;
-    cursor: pointer;
+  min-width: 70px;
+  height: 20px;
+  background-color: transparent;
+  line-height: 20px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  border: none;
+  color: var(--black);
+  cursor: pointer;
 }