Merge pull request #86 from FinFellows/feat/#61

금융 배우자 UI 완료
FinFellows · Jan 18, 2024 · dc0d124 · dc0d124
2 parents cc1d4cb + a41380f
commit dc0d124
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 63 deletions.
diff --git a/src/api/eduApi.ts b/src/api/eduApi.ts
@@ -35,11 +35,9 @@ export const postEduApi = async ({ title, content }: { title: string; content: s
   });
 
   if (res.ok) {
-    const data = await res.json();
-    console.log('[✅postEduApi API Data]', data);
+    return res;
   }
-
-  return res;
+  throw new Error('postEduApi error');
 };
 
 export const deleteEduApi = async (id: number): Promise<Response> => {

diff --git a/src/app/(learn)/educations/page.tsx b/src/app/(learn)/educations/page.tsx
@@ -20,13 +20,7 @@ const Educations: any = () => {
     <div className='w-auto h-full flex items-center justify-center'>
       <div className='flex flex-col items-center justify-center '>
         <StudyToggle2 activeToggle={activeToggle} toggleFn={handleToggleChange} href={''} />
-        {activeToggle === 0 ? (
-          <div className='flex-flow'>
-            <Education />
-          </div>
-        ) : (
-          <NewsList />
-        )}
+        {activeToggle === 0 ? <Education /> : <NewsList />}
         <ManageBtns>
           {/* TODO: 글 작성하는 api 연결 (createFn) */}
           <ContentsCreateBtn createFn={postEduApi} />

diff --git a/src/app/(learn)/news/page.tsx b/src/app/(learn)/news/page.tsx
@@ -12,13 +12,7 @@ const LearnWithUs: any = () => {
   return (
     <div className='w-auto h-full flex flex-col items-center justify-center'>
       <StudyToggle2 activeToggle={activeToggle} toggleFn={handleToggleChange} href={''} />
-      {activeToggle === 0 ? (
-        <div className='flex-flow'>
-          <Education />
-        </div>
-      ) : (
-        <NewsList />
-      )}
+      {activeToggle === 0 ? <Education /> : <NewsList />}
     </div>
   );
 };

diff --git a/src/components/molecules/Education/EducationList.tsx b/src/components/molecules/Education/EducationList.tsx
@@ -49,7 +49,6 @@ export type TEducationsApiResponse = {
   empty: boolean;
 };
 const Education = () => {
-  console.log(user.getAccessToken());
   const slateCompiler = new SlateCompiler();
   const [EducationData, setEducationData] = useState<TEducation[] | undefined>([]);
 
@@ -72,14 +71,17 @@ const Education = () => {
       const data = await getEducationsData(`size=8&page=${pageNum}`);
       if (data) {
         setPageTotalNum(data.totalPages);
-
         setEducationData(data.content);
       }
     } catch (error) {
       console.error('Error fetching bankListFetchData:', error);
     }
   };
 
+  const onHeartClick = (id: number, bookmarked: boolean) => {
+    // TODO: 북마크 api 연결 @이가은
+  };
+
   useEffect(() => {
     fetchData();
   }, [pageNum]);
@@ -107,26 +109,25 @@ const Education = () => {
                 </div>
               </div>
             </Link>
-            <div className='flex bg-[#CDE7DA] h-[71px] tablet:h-79 desktop:h-92 p-10 pt-[25px] gap-[25px] dark:bg-[#343434] '>
+            <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='w-[240px] desktop:w-[340px] tablet:w-[290px] text-typoPrimary text-[12px] tablet:text-[14px] desktop:text-[16px] desktop:paragraph-medium dark:text-[#D6D6D6]'>
-                  {/* {truncateText(slateCompiler.toPlainText(JSON.parse(i.content)), 59)} */}
+                <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>
-              <div
-                className='h-29 w-29 tablet:h-32 tablet:w-32 desktop:h-37 desktop:w-37'
+              <button
                 onClick={(event) => {
                   event.stopPropagation();
-                  // onHeartClick(i.id, i.bookmarked);
+                  onHeartClick(i.id, i.bookmarked);
                 }}
               >
                 {i.bookmarked ? <Clickheart2 /> : <Heartdefault />}
-              </div>
+              </button>
             </div>
           </div>
         ))}

diff --git a/src/components/molecules/News/NewsList.tsx b/src/components/molecules/News/NewsList.tsx
@@ -72,48 +72,36 @@ const NewsList = () => {
         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]'
+          <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'
           >
-            <Link
-              key={i.id}
-              href={{
-                pathname: `news/${i.id}`,
-              }}
-            >
-              <div className='bg-[#6C6C6C] w-87 h-full tablet:w-[112px] desktop:w-[167px] border-border-02 rounded-l-[10px]  '></div>
-            </Link>
-            <div className='flex justify-evenly '>
-              <Link
-                key={i.id}
-                href={{
-                  pathname: `/news/${i.id}`,
-                }}
-              >
-                <div className='flex-col bg-secondary px-12 w-[210px] tablet:w-[300px] desktop:w-[630px] 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 tablet:h-26 desktop:h-29 desktop:w-600 overflow-hidden text-ellipsis whitespace-nowrap'>
-                      <EditorRenderer contents={i.content} />
-                    </div>
-                    <div className='pb-10'>{dateOnly}</div>
+            <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=' tablet:h-26 desktop:h-29 overflow-hidden text-ellipsis whitespace-nowrap'>
+                    <EditorRenderer contents={i.content} />
                   </div>
+                  <div className='pb-10'>{dateOnly}</div>
                 </div>
-              </Link>
-              <p
+              </div>
+              <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} />

diff --git a/src/components/templates/editor/editor.tsx b/src/components/templates/editor/editor.tsx
@@ -35,8 +35,6 @@ export default function Editor({
   if (mode === 'edit' && (!title || !content || !id)) {
     throw new Error('edit 모드에서는 title, content, id를 필수로 넘겨주세요');
   }
-  console.log('제목이다.', title);
-  console.log('내용이다.', content);
 
   const initialValue: Descendant[] = [
     {

diff --git a/src/libs/editor/slateCompiler.ts b/src/libs/editor/slateCompiler.ts
@@ -68,9 +68,17 @@ class SlateCompiler {
     }
   }
 
-  // toPlainText(node: Descendant[]) {
-  //   return node.map((n) => Node.string(n)).join('\n');
-  // }
+  toPlainText(node: Descendant[]) {
+    return node.map((n) => this.toPlainTextChild(n)).join(' ');
+  }
+
+  toPlainTextChild(node: CustomElement | CustomText): string {
+    if (Text.isText(node)) {
+      return node.text;
+    }
+
+    return node.children.map((n) => this.toPlainTextChild(n)).join(' ');
+  }
 }
 
 export default SlateCompiler;