From 0262309c5868b1d90958be964bdc77a761a6e78a Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Tue, 15 Oct 2024 15:54:18 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=EA=B2=B0=EA=B3=BC?=
 =?UTF-8?q?=201=EC=9C=84=20ml-0.12rem=EA=B0=92=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C,=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/search/SearchRank.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/search/SearchRank.tsx b/src/components/search/SearchRank.tsx
index 933a0db..e3bf5fd 100644
--- a/src/components/search/SearchRank.tsx
+++ b/src/components/search/SearchRank.tsx
@@ -26,10 +26,11 @@ const SearchRank = ({ setKeyWord }: SearchRankType) => {
           {data?.map((item: RealtimeRankType, i: number) => (
             <li key={i} className="flex gap-3 items-center">
               <div
-                className={`${i < 3 ? 'text-normal text-body6 ' : 'text-gray400 text-body6'}`}>
+                className={`${i < 3 ? 'text-normal text-body6 ' : 'text-gray400 text-body6'}`}
+                style={{ marginLeft: item.rank === 1 ? '0.12rem' : '0' }}>
                 {item.rank}위
               </div>
-              <div className="flex-1 text-body2 text-black truncate">{item.keyword}</div>
+              <div className="flex-1 text-body2 text-black truncate" onClick={() => handleClick(item.keyword)}>{item.keyword}</div>
               {/* todo : 돋보기 누르면 그대로 검색 쿼리에 keyword가 들어가게하기 */}
               <div className="w-6 h-6 rounded-full bg-gray100 flex items-center justify-center cursor-pointer">
                 <img

From 410b2ba22fcd6a3be2964ce2988d1dfedd52e208 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Tue, 15 Oct 2024 20:12:02 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/page.tsx                | 15 +++++++++++++--
 src/components/find/FindPassword.tsx   | 23 ++++++++++++-----------
 src/components/home/RealtimeRank.tsx   |  5 ++++-
 src/components/mypage/MypageHeader.tsx | 21 +++++++--------------
 src/components/search/SearchIndex.tsx  |  4 ++--
 src/components/search/SearchRank.tsx   |  2 +-
 6 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 0444854..f4302fa 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -7,12 +7,23 @@ import MypageMenu from '@/components/mypage/MypageMenu';
 import { logout } from '@/service/auth';
 import { useAuthStore } from '@/store/userAuth.store';
 import { getCookie, removeCookie } from '@/utils/cookie';
+import { axiosInstance } from '@/service/axiosInstance';
+import { useQuery } from '@tanstack/react-query';
 
 const Mypage = () => {
   const router = useRouter();
   const { isLoggedIn, setIsLoggedIn } = useAuthStore();
   const [loading, setLoading] = useState(true);
 
+  const fetchBookmarks = async () => {
+    const { data } = await axiosInstance.get('https://api.moaguide.com/user/bookmark');
+    return data;
+  };
+
+  const {
+    data: bookmarks,
+  } = useQuery({ queryKey: ['bookmarks'], queryFn: fetchBookmarks });
+
   useEffect(() => {
     if (!isLoggedIn) {
       router.push('/');
@@ -46,7 +57,7 @@ const Mypage = () => {
   return (
     <div className="min-h-[calc(100dvh-134.5px)] flex flex-col sm:min-h-[calc(100vh-60px)] sm:mb-0 w-[90%] mx-auto sm:max-w-[640px]">
       <header>
-        <MypageHeader />
+        <MypageHeader bookmarks={bookmarks} />
       </header>
       <nav>
         <MypageMenu />
@@ -61,4 +72,4 @@ const Mypage = () => {
   );
 };
 
-export default Mypage;
+export default Mypage;
\ No newline at end of file
diff --git a/src/components/find/FindPassword.tsx b/src/components/find/FindPassword.tsx
index 3ee9afa..05dd482 100644
--- a/src/components/find/FindPassword.tsx
+++ b/src/components/find/FindPassword.tsx
@@ -187,7 +187,7 @@ const FindPassword = () => {
 
           <div className="mt-[28px]">
             <div className="text-body3">인증번호</div>
-            <div className="flex items-center mt-2 pb-4">
+            <div className="flex items-center mt-2">
               <input
                 ref={inputRef}
                 value={verificationCode}
@@ -280,7 +280,7 @@ const FindPassword = () => {
 
             <div className="mt-10">
               <div className="text-body3">새 비밀번호</div>
-              <div className="flex flex-col items-center mt-2">
+              <div className="flex flex-col items-center">
               <input 
                 type="password" 
                 placeholder="비밀번호 입력"
@@ -293,31 +293,32 @@ const FindPassword = () => {
                   <p className="w-full mr-auto text-[#6E6F73] text-xs mt-2">영문, 숫자, 특수문자 포함 8-20자로 입력해주세요.</p>
                 )}
                 {password && passwordValid === false && (
-                  <p className="w-full mr-auto  text-red-500 text-xs mt-2">비밀번호 양식에 맞지 않습니다.</p>
+                  <p className="w-full mr-auto  text-error text-xs mt-2">비밀번호 양식에 맞지 않습니다.</p>
                 )}
                 {passwordValid === true && (
-                  <p className="w-full mr-auto text-blue-500 text-xs mt-2">사용 가능한 비밀번호입니다.</p>
+                  <p className="w-full mr-auto text-success text-xs mt-2">사용 가능한 비밀번호입니다.</p>
                 )}
               </div>
             </div>
 
             <div className="mt-[28px]">
               <div className="text-body3">비밀번호 확인</div>
-              <div className="flex flex-col items-center mt-2">
+              <div className="flex flex-col items-center">
                 <input 
                   type="password" 
                   placeholder="비밀번호 재입력"
                   value={confirmPassword}
+                  disabled={!passwordValid} 
                   onChange={handleConfirmPasswordChange}
                   className={`w-full mt-4 px-4 py-[14px] bg-bg rounded-[12px] outline-none text-body2 
                   ${password ? (passwordMatch ? 'outline-success' : 'focus:outline-normal') : ''}`}
                 />
-                 <div className="w-full mr-auto mt-1 min-h-[25px]">
-                  {passwordMatch === false && (
-                    <p className="w-full mr-auto text-red-500 text-xs">비밀번호가 일치하지 않습니다.</p>
+                <div className="w-full mr-auto min-h-[25px]">
+                  {confirmPassword && passwordMatch === false && (
+                    <p className="w-full mr-auto text-error text-xs mt-2">비밀번호가 일치하지 않습니다.</p>
                   )}
-                  {passwordMatch === true && (
-                    <p className="w-full mr-auto text-blue-500 text-xs">비밀번호가 일치합니다.</p>
+                  {confirmPassword && passwordMatch === true && (
+                    <p className="w-full mr-auto text-success text-xs mt-2">비밀번호가 일치합니다.</p>
                   )}
                 </div>
               </div>
@@ -332,7 +333,7 @@ const FindPassword = () => {
           transition={{ duration: 0.5 }}
           className="w-[90%] sm:w-full max-w-[340px] mx-auto"
         >
-        {passwordMatch ? (
+        {passwordValid && passwordMatch ? (
           <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white cursor-pointer mt-0 sm:mt-[40px] mb-[20px] sm:mb-0" onClick={handlePasswordReset}>
             비밀번호 재설정
           </div>
diff --git a/src/components/home/RealtimeRank.tsx b/src/components/home/RealtimeRank.tsx
index 1215b32..be08b51 100644
--- a/src/components/home/RealtimeRank.tsx
+++ b/src/components/home/RealtimeRank.tsx
@@ -30,7 +30,10 @@ const RealtimeRank = () => {
                   className={`${i < 3 ? 'text-normal text-body6 ' : 'text-gray400 text-body6'}`}>
                   {item.rank}위
                 </div>
-                <div className="flex-1 text-body2 text-black truncate">
+                <div className="flex-1 text-body2 text-black truncate cursor-pointer" onClick={() => {
+                    setKeyword(item.keyword);
+                    router.push('/search');
+                  }}>
                   {item.keyword}
                 </div>
 
diff --git a/src/components/mypage/MypageHeader.tsx b/src/components/mypage/MypageHeader.tsx
index 5176e4d..5e73b3a 100644
--- a/src/components/mypage/MypageHeader.tsx
+++ b/src/components/mypage/MypageHeader.tsx
@@ -1,23 +1,16 @@
-import { axiosInstance } from '@/service/axiosInstance';
-import { useMemberStore } from '@/store/user.store';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import React from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useMemberStore } from '@/store/user.store';
+
+interface MypageHeaderProps {
+  bookmarks: number;
+}
 
-const MypageHeader = () => {
+const MypageHeader = ({ bookmarks }: MypageHeaderProps) => {
   const { member } = useMemberStore();
   const router = useRouter();
 
-  const fetchBookmarks = async () => {
-    const { data } = await axiosInstance.get('https://api.moaguide.com/user/bookmark');
-    return data;
-  };
-
-  const {
-    data: bookmarks,
-  } = useQuery({ queryKey: ['bookmarks'], queryFn: fetchBookmarks });
-
   return (
     <div className="flex flex-col gap-[28px] pb-5 border-b border-gray100">
       <div className="w-full flex justify-between items-center">
@@ -55,4 +48,4 @@ const MypageHeader = () => {
   );
 };
 
-export default MypageHeader;
+export default MypageHeader;
\ No newline at end of file
diff --git a/src/components/search/SearchIndex.tsx b/src/components/search/SearchIndex.tsx
index 20ac3a5..0597610 100644
--- a/src/components/search/SearchIndex.tsx
+++ b/src/components/search/SearchIndex.tsx
@@ -59,11 +59,11 @@ const SearchIndex = () => {
           />
           {keyWord && (
             <div onClick={handleClear} className="cursor-pointer mr-3">
-              <img src="/images/search/xcircle.svg" alt="" />
+              <img src="/images/search/xcircle.svg" alt="close" />
             </div>
           )}
           <div>
-            <img src="/images/search/search_icon.svg" alt="" />
+            <img src="/images/search/search_icon.svg" alt="search" className='cursor-pointer'/>
           </div>
         </div>
       </div>
diff --git a/src/components/search/SearchRank.tsx b/src/components/search/SearchRank.tsx
index e3bf5fd..9fbbea5 100644
--- a/src/components/search/SearchRank.tsx
+++ b/src/components/search/SearchRank.tsx
@@ -30,7 +30,7 @@ const SearchRank = ({ setKeyWord }: SearchRankType) => {
                 style={{ marginLeft: item.rank === 1 ? '0.12rem' : '0' }}>
                 {item.rank}위
               </div>
-              <div className="flex-1 text-body2 text-black truncate" onClick={() => handleClick(item.keyword)}>{item.keyword}</div>
+              <div className="flex-1 text-body2 text-black truncate cursor-pointer" onClick={() => handleClick(item.keyword)}>{item.keyword}</div>
               {/* todo : 돋보기 누르면 그대로 검색 쿼리에 keyword가 들어가게하기 */}
               <div className="w-6 h-6 rounded-full bg-gray100 flex items-center justify-center cursor-pointer">
                 <img

From 400092dd8807faeea59f301958e35ac5a5a191f7 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Tue, 15 Oct 2024 20:43:41 +0900
Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EC=B5=9C=EC=8B=A0=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=88=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B9=84=EC=9C=A8=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A7=80=20=EB=B0=8F=20=EC=8A=A4=EC=BC=88=EB=A0=88?=
 =?UTF-8?q?=ED=86=A4=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/MainReportItem.tsx          |  2 +-
 src/components/recentlyIssue/BestNewsItem.tsx   | 17 ++++++++---------
 src/components/signup/Step3.tsx                 |  1 +
 .../skeleton/BestNewsItemSkeleton.tsx           | 17 +++++++++--------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/home/MainReportItem.tsx b/src/components/home/MainReportItem.tsx
index 8487f7d..f56a9b4 100644
--- a/src/components/home/MainReportItem.tsx
+++ b/src/components/home/MainReportItem.tsx
@@ -11,7 +11,7 @@ const MainReportItem = ({ category, title, date, link, description, imageLink }:
   };
 
   return (
-    <div className="mt-5 pb-5 border-b border-gray100 flex items-center gap-5 cursor-pointer"  onClick={handleClick}>
+    <div className="pb-5 border-b border-gray100 flex items-center gap-5 cursor-pointer"  onClick={handleClick}>
       {/* 왼쪽 */}
       <div className="flex-1 flex flex-col gap-3">
         <div className="p-[6px] rounded-[4px] bg-bg text-caption3 text-gray400 max-w-max">
diff --git a/src/components/recentlyIssue/BestNewsItem.tsx b/src/components/recentlyIssue/BestNewsItem.tsx
index ac738ca..92fb6fd 100644
--- a/src/components/recentlyIssue/BestNewsItem.tsx
+++ b/src/components/recentlyIssue/BestNewsItem.tsx
@@ -1,10 +1,10 @@
 import type { MainNews } from '@/types/homeComponentsType';
-
 import { formatCategory } from '@/utils/formatCategory';
 import { format, parseISO } from 'date-fns';
 import Link from 'next/link';
 import React from 'react';
 import Image from 'next/image';
+
 interface BestNewsItemType {
   item: MainNews;
   rank: number;
@@ -13,14 +13,14 @@ interface BestNewsItemType {
 const BestNewsItem = ({ item, rank }: BestNewsItemType) => {
   return (
     <Link href={item.link} target="_blank">
-      <div className="flex flex-col  gap-4 cursor-pointer mt-5 sm:mt-0">
-        <div className="relative">
+      <div className="flex flex-col gap-4 cursor-pointer mt-5 sm:mt-0">
+        <div className="relative w-full" style={{ aspectRatio: '320 / 176' }}>  
           <Image
             src={item.imgUrl}
             alt="img"
-            width={336}
-            height={186}
-            className="w-full  rounded-[12px] object-cover"
+            layout="fill"  
+            objectFit="cover" 
+            className="rounded-[12px]"
           />
         </div>
         <img
@@ -29,12 +29,11 @@ const BestNewsItem = ({ item, rank }: BestNewsItemType) => {
           className="absolute mt-1 ml-1"
         />
         <div className="sm:text-title2 text-title1 text-gray600 w-full">{item.title}</div>
-        <div className="flex items-center justify-between ">
+        <div className="flex items-center justify-between">
           <div className="text-body4 sm:text-body7 text-gray400">
             {formatCategory(item.category)}
           </div>
           <div className="text-body4 sm:text-body7 text-gray300">
-            {' '}
             {format(parseISO(item.date), 'yyyy.MM.dd')}
           </div>
         </div>
@@ -43,4 +42,4 @@ const BestNewsItem = ({ item, rank }: BestNewsItemType) => {
   );
 };
 
-export default BestNewsItem;
+export default BestNewsItem;
\ No newline at end of file
diff --git a/src/components/signup/Step3.tsx b/src/components/signup/Step3.tsx
index c28c6ce..9cd1ab0 100644
--- a/src/components/signup/Step3.tsx
+++ b/src/components/signup/Step3.tsx
@@ -97,6 +97,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate, email }) => {
             type="password" 
             placeholder="비밀번호 재입력"
             value={confirmPassword}
+            disabled={!passwordValid} 
             onChange={handleConfirmPasswordChange}
             className={`w-full mt-4 px-4 py-[14px] bg-bg rounded-[12px] outline-none text-body2 
             ${confirmPassword ? (passwordMatch ? 'outline-success' : 'focus:outline-normal') : ''}`}
diff --git a/src/components/skeleton/BestNewsItemSkeleton.tsx b/src/components/skeleton/BestNewsItemSkeleton.tsx
index 460bf64..34b56b2 100644
--- a/src/components/skeleton/BestNewsItemSkeleton.tsx
+++ b/src/components/skeleton/BestNewsItemSkeleton.tsx
@@ -2,15 +2,16 @@ import React from 'react';
 
 const BestNewsItemSkeleton = () => {
   return (
-    <div className="flex flex-col gap-4 cursor-pointer animate-pulse mt-5 sm:mt-0">
-      <div className="relative">
-        <div className="w-[350px] h-[186px] sm:w-[336px] sm:h-[186px] bg-gray-300 rounded-[12px]" />
+    <div className="w-full flex flex-col gap-4 cursor-pointer animate-pulse mt-5 sm:mt-0">
+      <div className='flex-1'>
+      <div className="relative mb-4">
+        <div className="h-[186px] bg-gray-300 rounded-[12px]" />
+      </div>
+      <div className="w-full h-[24px] bg-gray-300 rounded-md mb-4" />
+      <div className="w-full flex items-center justify-between ">
+        <div className="w-1/4 h-[18px] bg-gray-300 rounded-md" />
+        <div className="w-1/4 h-[18px] bg-gray-300 rounded-md" />
       </div>
-
-      <div className="w-[348px] sm:w-[313px] h-[24px] bg-gray-300 rounded-md" />
-      <div className="flex items-center justify-between ">
-        <div className="w-[100px] h-[18px] bg-gray-300 rounded-md" />
-        <div className="w-[80px] h-[18px] bg-gray-300 rounded-md" />
       </div>
     </div>
   );