Fix:금융 뉴스 상세페이지 북마크 수정

FinFellows · Jan 19, 2024 · 935dab8 · 935dab8
2 parents d70ea04 + 3877351
commit 935dab8
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 125 deletions.
diff --git a/src/app/(learn)/educations/[id]/page.tsx b/src/app/(learn)/educations/[id]/page.tsx
@@ -5,25 +5,56 @@ import EducationContent from '@/components/molecules/Education/EducationContent'
 import ContentsEditBtn from '@/components/molecules/manage/ContentsEditBtn';
 import ContentsDeleteBtn from '@/components/molecules/manage/ContentsDeleteBtn';
 import ManageBtns from '@/components/molecules/manage/ManageBtns';
-import { TEducation } from '@/components/molecules/Education/EducationList';
-import { useEffect, useState } from 'react';
-import { getEducationIdApi } from '@/api/education/educationDetailApi';
-
-import { testApi, testApiEditor } from '@/api/testApi';
 import useEduDetail from '@/hooks/useEduDetail';
 import { deleteEduApi, patchEduApi } from '@/api/eduApi';
+import { postEducationBookmarkApi, deleteEducationBookmarkApi } from '@/api/bookmarkApi';
+import WithLoginModal from '@/components/templates/login/WithLoginModal';
+import { useEffect, useState } from 'react';
 
 const Education = ({ params }: { params: { id: number } }) => {
   const { eduData } = useEduDetail(params.id);
+  const [isLiked, setIsLiked] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    if (eduData) {
+      setIsLiked(eduData.bookmarked);
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eduData]);
+
+  const onHeartClick = async (id: number, isLiked: boolean | undefined) => {
+    try {
+      let apiResult;
+      if (isLiked) {
+        apiResult = await deleteEducationBookmarkApi(id, 'EDU_CONTENT');
+      } else {
+        apiResult = await postEducationBookmarkApi(id, 'EDU_CONTENT');
+      }
+      if (apiResult !== undefined) {
+        setIsLiked(!isLiked);
+      } else {
+        setShowModal(true);
+      }
+    } catch (error) {
+      console.error('Error fetching bankBookmark:', error);
+    }
+  };
 
-  const onHeartClick = async (id: number, bookmarked: boolean, contentType: 'EDU_CONTENT') => {};
   return eduData ? (
-    <div className='flex items-center justify-center mt-[-70px] '>
+    <div className='flex items-center justify-center desktop:-mt-70'>
+      {showModal && (
+        <WithLoginModal
+          closeFn={() => {
+            setShowModal(false);
+          }}
+        />
+      )}
       <div className='flex-col flex'>
         <EducationHeadLine
           title={eduData.title}
-          bookmarked={eduData.bookmarked}
-          onHeartClick={() => onHeartClick(params.id, eduData.bookmarked, 'EDU_CONTENT')}
+          bookmarked={isLiked}
+          onHeartClick={() => onHeartClick(params.id, isLiked)}
         />
         {eduData && <EducationContent content={eduData.content} />}
         <ManageBtns>

diff --git a/src/app/(learn)/educations/page.tsx b/src/app/(learn)/educations/page.tsx
@@ -1,14 +1,11 @@
 'use client';
 import React, { useState } from 'react';
-import Link from 'next/link';
 import Education from '@/components/molecules/Education/EducationList';
 import NewsList from '@/components/molecules/News/NewsList';
 import StudyToggle2 from '@/components/atom/toggle/StudyToggle2';
 import ManageBtns from '@/components/molecules/manage/ManageBtns';
 import ContentsCreateBtn from '@/components/molecules/manage/ContentsCreateBtn';
-import { testApiEditor } from '@/api/testApi';
-import useUser from '@/hooks/useUser';
-import { postNewsApi } from '@/api/newsApi';
+
 import { postEduApi } from '@/api/eduApi';
 
 const Educations: any = () => {

diff --git a/src/components/molecules/Education/EducationContent.tsx b/src/components/molecules/Education/EducationContent.tsx
@@ -1,15 +1,17 @@
 'use client';
+
 import EditorRenderer from '@/components/templates/editor/EditorRenderer';
-import { useSearchParams } from 'next/navigation';
+
 type TEducationContentProps = {
   content: string;
 };
+
 const EducationContent: React.FC<TEducationContentProps> = ({ content }) => {
   return (
     <div>
-      <div className='mb-39 tablet:mb-56 desktop:mb-[300px]'>
-        <div className='w-342 border-2 border-border02 rounded-[20px] py-[270px] tablet:w-[438px] desktop:w-[855px] dark:bg-[#343434] dark:border-[#343434]'>
-          <div className='px-[20px] mt-[-250px] paragraph-small tablet:paragraph-medium desktop:paragraph-large text-justify dark:text-[#D6D6D6] '>
+      <div className='mb-39 tablet:mb-56 desktop:mb-80'>
+        <div className='w-342 border-2 border-border02 rounded-10 desktop:rounded-20 py-[270px] tablet:w-[438px] desktop:w-[855px] dark:bg-[#343434] dark:border-[#343434]'>
+          <div className='px-20 mt-[-250px] paragraph-small tablet:paragraph-medium desktop:paragraph-large text-justify dark:text-[#D6D6D6] '>
             <EditorRenderer contents={content} />
           </div>
         </div>

diff --git a/src/components/molecules/Education/EducationHeadLine.tsx b/src/components/molecules/Education/EducationHeadLine.tsx
@@ -1,10 +1,8 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
 import Heartdefault from '../../../public/icons/grayheart2.svg';
 import Glasses_goldtorihalf from '../../../public/icons/glasses_goldtorihalf.svg';
 import Heartclick from '@/public/icons/clickheart2.svg';
-import { useState } from 'react';
 
 type TEducationHeadLineProps = {
   title: string;
@@ -14,20 +12,24 @@ type TEducationHeadLineProps = {
 
 const EducationHeadLine: React.FC<TEducationHeadLineProps> = ({ title, bookmarked, onHeartClick }) => {
   return (
-    <div className='flex-col flex py-10'>
-      <div className='w-68 h-81 ml-[270px] mt-[-5px] tablet:w-87 tablet:h-104 tablet:ml-[350px] desktop:w-178 desktop:h-153 desktop:ml-[680px]'>
-        <Glasses_goldtorihalf />
-      </div>
-      <div className='w-342 flex px-15 py-20 mt-[-37px] border-2 border-border02 rounded-[20px] tablet:py-20 tablet:px-15 tablet:w-[438px] tablet:mt-[-49px] desktop:w-[855px] desktop:mt-[-39px] desktop:py-20 dark:bg-[#343434] dark:border-[#343434]'>
-        <div className='w-300 desktop:w-[760px] tablet:w-400 tablet:pt-5 font-bold tablet:heading-medium desktop:heading-xxl dark:text-[#D6D6D6] desktop:pb-[10px] desktop:pl-5'>
+    <div className='flex-col flex mb-8 tablet:mb-10 desktop:mb-20'>
+      <Glasses_goldtorihalf className='w-68 h-81 tablet:w-87 tablet:h-104 desktop:w-178 desktop:h-153 ml-auto' />
+      <div className='flex justify-between relative items-center z-toggle -mt-20 tablet:-mt-25 desktop:-mt-18 w-342 p-12 tablet:p-17 border-2 border-border02 rounded-10 desktop:rounded-20 tablet:py-20 tablet:px-15 tablet:w-438 desktop:w-855 desktop:px-48 desktop:py-52 bg-secondary dark:bg-dark-secondary dark:border-[#343434]'>
+        <div className='w-300 tablet:w-400 desktop:w-760 heading-small tablet:heading-medium desktop:heading-xxl dark:text-[#D6D6D6]'>
           {title}
         </div>
-        <p
-          className='z-5 h-26 w-26 mr-5 pb-10 tablet:h-33  tablet:w-33 desktop:h-37 desktop:w-37 desktop:mt-12'
-          onClick={onHeartClick}
+        <button
+          onClick={(event) => {
+            event.stopPropagation();
+            onHeartClick();
+          }}
         >
-          {bookmarked ? <Heartclick /> : <Heartdefault />}
-        </p>
+          {bookmarked ? (
+            <Heartclick className='w-25 h-25 tablet:w-33 tablet:h-33 desktop:w-37 desktop:h-37' />
+          ) : (
+            <Heartdefault className='w-25 h-25 tablet:w-33 tablet:h-33 desktop:w-37 desktop:h-37' />
+          )}
+        </button>
       </div>
     </div>
   );

diff --git a/src/components/molecules/Education/EducationList.tsx b/src/components/molecules/Education/EducationList.tsx
@@ -1,17 +1,15 @@
 'use client';
-import Link from 'next/link';
 // Education 컴포넌트
 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
 import Heartdefault from '../../../public/icons/grayheart2.svg';
 import ModifiedGlasses_goldtori from '../../../public/icons/modifiedglasses_goldtori.svg';
 import Clickheart2 from '@/public/icons/clickheart2.svg';
 import { getEducationsData } from '@/api/education/educationApi';
 import Pagination from '@/components/molecules/pagination/Pagination';
 import { deleteEducationBookmarkApi, postEducationBookmarkApi } from '@/api/bookmarkApi';
-
-import useUser from '@/hooks/useUser';
 import SlateCompiler from '@/libs/editor/slateCompiler';
-import { user } from '@/class/user';
+import WithLoginModal from '@/components/templates/login/WithLoginModal';
 import truncateText from '@/utils/truncateText';
 
 export type TEducation = {
@@ -49,9 +47,12 @@ export type TEducationsApiResponse = {
   numberOfElements: number;
   empty: boolean;
 };
+
 const Education = () => {
+  const router = useRouter();
   const slateCompiler = new SlateCompiler();
-  const [EducationData, setEducationData] = useState<TEducation[] | undefined>([]);
+  const [educationData, setEducationData] = useState<TEducation[] | undefined>([]);
+  const [showModal, setShowModal] = useState(false);
 
   //페이지
   const [pageNum, setPageNum] = useState(0); //현재 페이지
@@ -69,55 +70,69 @@ const Education = () => {
     }
   };
 
-  const onHeartClick = (id: number, bookmarked: boolean) => {
-    // TODO: 북마크 api 연결 @이가은
+  const onHeartClick = async (id: number, bookmarked: boolean) => {
+    try {
+      let apiResult;
+      if (bookmarked) {
+        apiResult = await deleteEducationBookmarkApi(id, 'EDU_CONTENT');
+      } else {
+        apiResult = await postEducationBookmarkApi(id, 'EDU_CONTENT');
+      }
+      if (apiResult !== undefined) {
+        setEducationData(educationData?.map((item) => (item.id === id ? { ...item, bookmarked: !bookmarked } : item)));
+      } else {
+        setShowModal(true);
+      }
+    } catch (error) {
+      console.error('Error fetching bankBookmark:', error);
+    }
   };
 
   useEffect(() => {
     fetchData();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pageNum]);
 
   return (
     <div className='desktop:py-39 tablet:py-26 py-20'>
-      <div className='tablet:flex tablet:flex-wrap tablet:w-[430px] desktop:w-[890px] desktop:flex-wrap desktop:flex '>
-        {EducationData?.map((i, index) => (
+      {showModal && (
+        <WithLoginModal
+          closeFn={() => {
+            setShowModal(false);
+          }}
+        />
+      )}
+      <div className='tablet:flex tablet:flex-wrap tablet:w-430 desktop:w-890 desktop:flex-wrap desktop:flex'>
+        {educationData?.map((i) => (
           <div
             key={i.id}
-            className='flex-col tablet:ml-20 w-[336px] my-12 desktop:w-[425px] tablet:w-371 desktop:my-10 border-2 border-mainLevel100 border-color-[#EAEAEA] rounded-lg dark:border-[#383838]'
+            onClick={() => router.push(`/educations/${i.id}`)}
+            className='flex-col tablet:ml-20 w-336 my-12 desktop:w-425 tablet:w-371 desktop:my-10 rounded-lg cursor-pointer'
           >
-            <Link
-              key={i.id}
-              href={{
-                pathname: `/educations/${i.id}`,
-              }}
-            >
-              <div className='flex-wrap  w-full flex h-[163px] tablet:h-180 desktop:h-[210px] bg-mainLevel300 border-mainLevel300 hover:bg-mainLevel500 dark:bg-[#383838] dark:hover:bg-[#6B6B6B]'>
-                <h2 className='heading-large desktop:text-29 tablet:text-29 tablet:w-260 desktop:w-260 text-typoTertiary font-bold p-[10px] flex-wrap w-200'>
-                  {i.title}
-                </h2>
-                <div className='absolute w-168 h-135 ml-[170px] tablet:w-186 tablet:h-150 tablet:ml-[195px] tablet:mt-[48.5px] mt-[44.3px] desktop:ml-[220px] desktop:mt-[58px] desktop:w-216 desktop:h-173'>
-                  <ModifiedGlasses_goldtori />
-                </div>
+            <div className='flex-wrap rounded-t-lg w-full flex h-163 tablet:h-180 desktop:h-210 bg-mainLevel300 hover:bg-mainLevel500 dark:bg-[#383838] dark:hover:bg-[#6B6B6B]'>
+              <h2 className='heading-large desktop:text-29 tablet:text-29 tablet:w-260 desktop:w-260 text-typoTertiary font-bold flex-wrap w-200 p-18 desktop:p-22'>
+                {i.title}
+              </h2>
+              <div className='absolute w-168 h-135 ml-170 tablet:w-186 tablet:h-150 tablet:ml-195 tablet:mt-48 mt-44 desktop:ml-220 desktop:mt-58 desktop:w-216 desktop:h-173'>
+                <ModifiedGlasses_goldtori />
+              </div>
+            </div>
+            <div className='flex justify-between rounded-b-lg bg-[#CDE7DA] h-71 tablet:h-79 desktop:h-92 gap-25 dark:bg-[#343434] overflow-hidden'>
+              <div className='text-typoPrimary pt-18 pl-18 desktop:pt-22 desktop:pl-22 text-12 tablet:text-14 desktop:text-16 desktop:paragraph-medium dark:text-[#D6D6D6]'>
+                {truncateText(slateCompiler.toPlainText(JSON.parse(i.content)), 50)}
               </div>
-            </Link>
-            <div className='flex py-20 px-8 bg-[#CDE7DA] h-[71px] tablet:h-79 desktop:h-92 p-10 pt-[25px] gap-[25px] dark:bg-[#343434] overflow-hidden'>
-              <Link
-                key={i.id}
-                href={{
-                  pathname: `/education/${i.id}`,
-                }}
-              >
-                <div className='text-typoPrimary text-12 tablet:text-14 desktop:text-16 desktop:paragraph-medium dark:text-[#D6D6D6]'>
-                  {truncateText(slateCompiler.toPlainText(JSON.parse(i.content)), 50)}
-                </div>
-              </Link>
               <button
+                className='mr-13 tablet:mr-18'
                 onClick={(event) => {
                   event.stopPropagation();
                   onHeartClick(i.id, i.bookmarked);
                 }}
               >
-                {i.bookmarked ? <Clickheart2 /> : <Heartdefault />}
+                {i.bookmarked ? (
+                  <Clickheart2 className='w-29 h-29 tablet:w-32 tablet:h-32 desktop:w-37 desktop:h-37' />
+                ) : (
+                  <Heartdefault className='w-29 h-29 tablet:w-32 tablet:h-32 desktop:w-37 desktop:h-37' />
+                )}
               </button>
             </div>
           </div>

diff --git a/src/components/molecules/Education/dummydata.json b/src/components/molecules/Education/dummydata.json
diff --git a/src/components/molecules/News/NewsList.tsx b/src/components/molecules/News/NewsList.tsx
@@ -15,12 +15,11 @@ import { postNoticeApi } from '@/api/noticeApi';
 import ContentsCreateBtn from '../manage/ContentsCreateBtn';
 import ManageBtns from '../manage/ManageBtns';
 import EditorRenderer from '@/components/templates/editor/EditorRenderer';
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-import NewsImage from '@/public/icons/newsthumbnail/Untitled.jpeg';
+import SlateCompiler from '@/libs/editor/slateCompiler';
+import truncateText from '@/utils/truncateText';
+
 const NewsList = () => {
-  const { user } = useUser();
-  const router = useRouter();
+  const slateCompiler = new SlateCompiler();
   const [NewsListData, setNewsListData] = useState<TNews[] | undefined>([]);
   const [showModal, setShowModal] = useState(false);
   //페이지
@@ -70,51 +69,40 @@ const NewsList = () => {
             setShowModal(false);
           }}
         />
-      )}{' '}
-      {NewsListData?.map((i) => {
+      )}
+      {NewsListData?.map((i, index) => {
         let date = new Date(i.created_at);
         let dateOnly = date.toISOString().split('T')[0];
         return (
-          <div
-            key={i.id}
-            className='flex w-full mb-10 border-2 border-color-[#D6D6D6] rounded-[10px] border-border02 hover:border-main hover:border-2 dark:bg-[#343434] dark:border-[#383838]'
-            onClick={() => router.push(`/news/${i.id}`)}
+          <Link
+            key={index}
+            href={{
+              pathname: `news/${i.id}`,
+            }}
+            className='flex w-full mb-10 border-2 border-color-[#D6D6D6] rounded-[10px] border-border02 hover:border-main hover:border-2 dark:bg-[#343434] dark:border-[#383838] cursor-pointer'
           >
-            <div className=' border-border-02  '>
-              <Image
-                src={NewsImage}
-                width='500'
-                height='500'
-                className='w-87 tablet:w-[112px] desktop:w-[167px] h-full rounded-l-[10px]'
-                alt={'뉴스썸네일'}
-              />
-            </div>
-            <div className='flex justify-between items-center'>
-              <div className='flex-col bg-secondary px-12 w-[210px] tablet:w-[300px] desktop:w-[630px] dark:bg-[#343434]'>
+            <div className='flex justify-between w-full px-20 py-10'>
+              <div className='flex-col bg-secondary px-12  dark:bg-[#343434]'>
                 <h2 className='heading-small tablet:heading-medium desktop:heading-xl font-bold mt-[5px] pb-14 dark:text-[#D6D6D6]'>
                   {i.title}
                 </h2>
                 <div className='text-typoSecondary paragraph-small tablet:paragraph-medium desktop:paragraph-large'>
-                  <div className='w-150 tablet:w-180 h-25 tablet:h-26 desktop:h-29 desktop:w-578 overflow-hidden text-ellipsis whitespace-nowrap'>
-                    <EditorRenderer contents={i.content} />
-                  </div>
-                  <div className='pb-10 text-typoSecondary paragraph-small tablet:paragraph-medium desktop:paragraph-large'>
-                    {dateOnly}
-                  </div>
+                  {truncateText(slateCompiler.toPlainText(JSON.parse(i.content)), 50)}
+
+                  <div className='pb-10'>{dateOnly}</div>
                 </div>
               </div>
-
-              <p
-                className='h-[26px] w-[26px] tablet:h-33 tablet:w-33 desktop:w-37 tablet:ml-[-15px] desktop:h-37'
+              <button
+                className='mt-28 h-[26px] w-[26px] tablet:h-33 tablet:w-33 desktop:w-37 tablet:ml-[-15px] tablet:mt-35 desktop:h-37 desktop:mt-[50px]'
                 onClick={(event) => {
                   event.stopPropagation();
                   onHeartClick(i.id, i.bookmarked);
                 }}
               >
                 {i.bookmarked ? <Heartclick /> : <Heartdefault />}
-              </p>
+              </button>
             </div>
-          </div>
+          </Link>
         );
       })}
       <Pagination pageNum={pageNum} pageTotalNum={pageTotalNum} setPageNum={setPageNum} />