Merge pull request #75 from Moaguide-develop/feat/notification

fix: QA
Moaguide-develop · Oct 15, 2024 · f6f32a9 · f6f32a9
2 parents 7be57e0 + d128f36
commit f6f32a9
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 50 deletions.
diff --git 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;
diff --git 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/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/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
@@ -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;
diff --git 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;
diff --git 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
@@ -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 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

diff --git 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
@@ -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>
   );