From 82283ed21ee73abf3303481f39e54a5060b97e84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=95=9C=EB=82=98?= <dlgkssk0209@gmail.com>
Date: Sun, 2 Mar 2025 22:41:37 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(DEVING-55):=20=EB=AA=A8=EC=9E=84=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=AC=B4=ED=95=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/meeting/components/MeetingList.tsx | 229 +++++++++++----------
 src/hooks/common/useMediaQuery.ts          |   4 +-
 2 files changed, 119 insertions(+), 114 deletions(-)

diff --git a/src/app/meeting/components/MeetingList.tsx b/src/app/meeting/components/MeetingList.tsx
index d858868..7e46348 100644
--- a/src/app/meeting/components/MeetingList.tsx
+++ b/src/app/meeting/components/MeetingList.tsx
@@ -139,125 +139,130 @@ const MeetingList = () => {
       {data?.pages[0].content.length === 0 && <NoResultsMeeting />}
 
       {/* 모임 리스트 웹뷰 */}
-
-      <div className="hidden flex-col md:hidden lg:flex">
-        {data?.pages.map((page, pageIndex) => (
-          <div key={pageIndex}>
-            {page.content.map((meeting: SearchMeeting) => {
-              return (
-                <HorizonCard
-                  onClick={handleMoveDetailPage}
-                  key={meeting.meetingId}
-                  meetingId={meeting.meetingId}
-                  category={translateCategoryNameToKor(categoryStr)}
-                  title={meeting.meetingTitle}
-                  thumbnailUrl={meeting.thumbnail}
-                  location={meeting.location}
-                  isLike={meeting.isLike}
-                  total={meeting.maxMember}
-                  value={meeting.memberCount}
-                  likesCount={meeting.likesCount}
-                  skills={meeting.meetingSkillArray}
-                >
-                  <MeetingExtraInfo
-                    lastMeetingRef={
-                      page.nextCursor === meeting.meetingId
-                        ? lastMeetingRef
-                        : null
-                    }
-                    name={meeting.name}
-                    startDate={meeting.startDate}
+      {breakpoint === 'desktop' && (
+        <div className="hidden flex-col md:hidden lg:flex">
+          {data?.pages.map((page, pageIndex) => (
+            <div key={pageIndex}>
+              {page.content.map((meeting: SearchMeeting) => {
+                return (
+                  <HorizonCard
+                    onClick={handleMoveDetailPage}
+                    key={meeting.meetingId}
                     meetingId={meeting.meetingId}
-                    variant="desktop"
-                  />
-                </HorizonCard>
-              );
-            })}
-          </div>
-        ))}
-      </div>
+                    category={translateCategoryNameToKor(categoryStr)}
+                    title={meeting.meetingTitle}
+                    thumbnailUrl={meeting.thumbnail}
+                    location={meeting.location}
+                    isLike={meeting.isLike}
+                    total={meeting.maxMember}
+                    value={meeting.memberCount}
+                    likesCount={meeting.likesCount}
+                    skills={meeting.meetingSkillArray}
+                  >
+                    <MeetingExtraInfo
+                      lastMeetingRef={
+                        page.nextCursor === meeting.meetingId
+                          ? lastMeetingRef
+                          : null
+                      }
+                      name={meeting.name}
+                      startDate={meeting.startDate}
+                      meetingId={meeting.meetingId}
+                      variant="desktop"
+                    />
+                  </HorizonCard>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      )}
 
       {/* 모임 리스트 테블릿뷰 */}
-      <div className="hidden flex-col md:flex lg:hidden">
-        {data?.pages.map((page, pageIndex) => (
-          <div key={pageIndex}>
-            {page.content.map((meeting: SearchMeeting) => {
-              return (
-                <HorizonCard
-                  onClick={handleMoveDetailPage}
-                  className="items-center"
-                  key={meeting.meetingId}
-                  meetingId={meeting.meetingId}
-                  category={translateCategoryNameToKor(categoryStr)}
-                  title={meeting.meetingTitle}
-                  thumbnailUrl={meeting.thumbnail}
-                  thumbnailHeight={160}
-                  thumbnailWidth={160}
-                  location={meeting.location}
-                  isLike={meeting.isLike}
-                  likesCount={meeting.likesCount}
-                  total={meeting.maxMember}
-                  value={meeting.memberCount}
-                  skills={meeting.meetingSkillArray}
-                >
-                  <MeetingExtraInfo
-                    lastMeetingRef={
-                      page.nextCursor === meeting.meetingId
-                        ? lastMeetingRef
-                        : null
-                    }
-                    name={meeting.name}
-                    startDate={meeting.startDate}
+      {breakpoint === 'tablet' && (
+        <div className="hidden flex-col md:flex lg:hidden">
+          {data?.pages.map((page, pageIndex) => (
+            <div key={pageIndex}>
+              {page.content.map((meeting: SearchMeeting) => {
+                return (
+                  <HorizonCard
+                    onClick={handleMoveDetailPage}
+                    className="items-center"
+                    key={meeting.meetingId}
                     meetingId={meeting.meetingId}
-                    variant="tablet"
-                  />
-                </HorizonCard>
-              );
-            })}
-          </div>
-        ))}
-      </div>
+                    category={translateCategoryNameToKor(categoryStr)}
+                    title={meeting.meetingTitle}
+                    thumbnailUrl={meeting.thumbnail}
+                    thumbnailHeight={160}
+                    thumbnailWidth={160}
+                    location={meeting.location}
+                    isLike={meeting.isLike}
+                    likesCount={meeting.likesCount}
+                    total={meeting.maxMember}
+                    value={meeting.memberCount}
+                    skills={meeting.meetingSkillArray}
+                  >
+                    <MeetingExtraInfo
+                      lastMeetingRef={
+                        page.nextCursor === meeting.meetingId
+                          ? lastMeetingRef
+                          : null
+                      }
+                      name={meeting.name}
+                      startDate={meeting.startDate}
+                      meetingId={meeting.meetingId}
+                      variant="tablet"
+                    />
+                  </HorizonCard>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      )}
 
       {/* 모임 리스트 모바일뷰 */}
-      <div className="flex flex-col items-center md:hidden lg:hidden">
-        {data?.pages.map((page, pageIndex) => (
-          <div key={pageIndex}>
-            {page.content.map((meeting: SearchMeeting) => {
-              return (
-                <VerticalCard
-                  onClick={handleMoveDetailPage}
-                  className="h-[380px]"
-                  thumbnailHeight={160}
-                  thumbnailWidth={311}
-                  category={translateCategoryNameToKor(categoryStr)}
-                  key={meeting.meetingId}
-                  meetingId={meeting.meetingId}
-                  title={meeting.meetingTitle}
-                  thumbnailUrl={meeting.thumbnail}
-                  location={meeting.location}
-                  isLike={meeting.isLike}
-                  likesCount={meeting.likesCount}
-                  total={meeting.maxMember}
-                  value={meeting.memberCount}
-                  skills={meeting.meetingSkillArray}
-                >
-                  <MeetingExtraInfo
-                    lastMeetingRef={
-                      page.nextCursor === meeting.meetingId
-                        ? lastMeetingRef
-                        : null
-                    }
-                    name={meeting.name}
-                    startDate={meeting.startDate}
+      {breakpoint === 'mobile' && (
+        <div className="flex flex-col items-center md:hidden lg:hidden">
+          {data?.pages.map((page, pageIndex) => (
+            <div key={pageIndex}>
+              {page.content.map((meeting: SearchMeeting) => {
+                return (
+                  <VerticalCard
+                    onClick={handleMoveDetailPage}
+                    className="h-[380px]"
+                    thumbnailHeight={160}
+                    thumbnailWidth={311}
+                    category={translateCategoryNameToKor(categoryStr)}
+                    key={meeting.meetingId}
                     meetingId={meeting.meetingId}
-                    variant="mobile"
-                  />
-                </VerticalCard>
-              );
-            })}
-          </div>
-        ))}
-      </div>
+                    title={meeting.meetingTitle}
+                    thumbnailUrl={meeting.thumbnail}
+                    location={meeting.location}
+                    isLike={meeting.isLike}
+                    likesCount={meeting.likesCount}
+                    total={meeting.maxMember}
+                    value={meeting.memberCount}
+                    skills={meeting.meetingSkillArray}
+                  >
+                    <MeetingExtraInfo
+                      lastMeetingRef={
+                        page.nextCursor === meeting.meetingId
+                          ? lastMeetingRef
+                          : null
+                      }
+                      name={meeting.name}
+                      startDate={meeting.startDate}
+                      meetingId={meeting.meetingId}
+                      variant="mobile"
+                    />
+                  </VerticalCard>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/hooks/common/useMediaQuery.ts b/src/hooks/common/useMediaQuery.ts
index 6549b8f..f63387e 100644
--- a/src/hooks/common/useMediaQuery.ts
+++ b/src/hooks/common/useMediaQuery.ts
@@ -9,9 +9,9 @@ const useMediaQuery = () => {
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
-      if (width < 376) {
+      if (width > 376 && width <= 745) {
         setBreakpoint('mobile');
-      } else if (width < 745) {
+      } else if (width > 745 && width <= 1024) {
         setBreakpoint('tablet');
       } else {
         setBreakpoint('desktop');

From cc8dbab8a6083f1f07e34325bfad6f4f509039e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=95=9C=EB=82=98?= <dlgkssk0209@gmail.com>
Date: Sun, 2 Mar 2025 23:03:40 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat(DEVING-55):=20mypage=20=EB=A7=81?=
 =?UTF-8?q?=ED=81=AC=20url=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/meeting/components/MeetingList.tsx |  2 +-
 src/components/common/Header.tsx           | 10 +++++++---
 src/hooks/common/useMediaQuery.ts          |  4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/meeting/components/MeetingList.tsx b/src/app/meeting/components/MeetingList.tsx
index 7e46348..56e0c1a 100644
--- a/src/app/meeting/components/MeetingList.tsx
+++ b/src/app/meeting/components/MeetingList.tsx
@@ -140,7 +140,7 @@ const MeetingList = () => {
 
       {/* 모임 리스트 웹뷰 */}
       {breakpoint === 'desktop' && (
-        <div className="hidden flex-col md:hidden lg:flex">
+        <div className="flex-col sm:hidden lg:flex">
           {data?.pages.map((page, pageIndex) => (
             <div key={pageIndex}>
               {page.content.map((meeting: SearchMeeting) => {
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 687f1d9..9526b59 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -3,6 +3,7 @@
 import Logo from '@/assets/icon/logo.svg';
 import Profile from '@/assets/icon/profile.svg';
 import { removeAccessToken } from '@/lib/serverActions';
+import { translateCategoryNameToKor } from '@/util/searchFilter';
 import { Menu } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -52,7 +53,7 @@ const AfterLogin = ({ userInfo }: { userInfo: IUserInfo }) => {
     {
       value: 'mypage',
       label: '마이페이지',
-      onSelect: () => router.push('/my-page'),
+      onSelect: () => router.push('/mypage'),
     },
     {
       value: 'logout',
@@ -135,7 +136,7 @@ const MobileAfterLogin = ({ userInfo }: { userInfo: IUserInfo }) => {
       </div>
       <Link
         className="typo-head4 p-[16px] text-Cgray400 hover:text-Cgray500"
-        href="/my-page"
+        href="/mypage"
       >
         마이페이지
       </Link>
@@ -158,7 +159,10 @@ const NavLinks = ({ isMobile }: { isMobile?: boolean }) => {
       className={`${!isMobile ? 'hidden items-center text-Cgray700 lg:flex' : 'text-Cgray400'}`}
     >
       {navigation.map((item) => (
-        <li className="typo-head4 p-[16px]" key={item.label}>
+        <li
+          className={`typo-head4 p-[16px] ${category && translateCategoryNameToKor(categoryStr) === item.label && 'text-white'}`}
+          key={item.label}
+        >
           <Link
             href={item.href}
             className={`${isMobile ? 'hover:text-Cgray500' : 'hover:text-white'}`}
diff --git a/src/hooks/common/useMediaQuery.ts b/src/hooks/common/useMediaQuery.ts
index f63387e..df4a74e 100644
--- a/src/hooks/common/useMediaQuery.ts
+++ b/src/hooks/common/useMediaQuery.ts
@@ -11,9 +11,9 @@ const useMediaQuery = () => {
       const width = window.innerWidth;
       if (width > 376 && width <= 745) {
         setBreakpoint('mobile');
-      } else if (width > 745 && width <= 1024) {
+      } else if (width > 745 && width <= 1020) {
         setBreakpoint('tablet');
-      } else {
+      } else if (width > 1020) {
         setBreakpoint('desktop');
       }
     };