Merge branch 'master' of https://github.com/FinFellows/web into feat/#2

FinFellows · Jan 18, 2024 · d70ea04 · d70ea04
2 parents 8d24c55 + 91f039e
commit d70ea04
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 51 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
@@ -9,6 +9,7 @@ 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 = () => {
   const [activeToggle, setActiveToggle] = useState(0); // 초기 값을 0으로 설정
@@ -20,19 +21,11 @@ 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 />
-        )}
-        <div className=''>
-          <ManageBtns>
-            {/* TODO: 글 작성하는 api 연결 (createFn) */}
-            <ContentsCreateBtn createFn={postNewsApi} />
-          </ManageBtns>
-        </div>
+        {activeToggle === 0 ? <Education /> : <NewsList />}
+        <ManageBtns>
+          {/* TODO: 글 작성하는 api 연결 (createFn) */}
+          <ContentsCreateBtn createFn={postEduApi} />
+        </ManageBtns>
       </div>
     </div>
   );

diff --git a/src/app/(learn)/news/page.tsx b/src/app/(learn)/news/page.tsx
@@ -15,13 +15,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
@@ -12,6 +12,7 @@ import { deleteEducationBookmarkApi, postEducationBookmarkApi } from '@/api/book
 import useUser from '@/hooks/useUser';
 import SlateCompiler from '@/libs/editor/slateCompiler';
 import { user } from '@/class/user';
+import truncateText from '@/utils/truncateText';
 
 export type TEducation = {
   id: number;
@@ -49,37 +50,29 @@ export type TEducationsApiResponse = {
   empty: boolean;
 };
 const Education = () => {
-  console.log(user.getAccessToken());
   const slateCompiler = new SlateCompiler();
   const [EducationData, setEducationData] = useState<TEducation[] | undefined>([]);
 
   //페이지
   const [pageNum, setPageNum] = useState(0); //현재 페이지
   const [pageTotalNum, setPageTotalNum] = useState(0); //총 페이지 수
 
-  const truncateText = (text: string, maxLength: number) => {
-    if (text.length <= maxLength) {
-      return text;
-    } else {
-      let truncatedText = text.slice(0, maxLength) + '...';
-      let modifiedText = truncatedText.slice(0, 29) + '\n' + truncatedText.slice(29);
-      return modifiedText;
-    }
-  };
-
   const fetchData = async () => {
     try {
       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 +100,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/templates/chatbot/index.tsx b/src/components/templates/chatbot/index.tsx
@@ -39,7 +39,7 @@ export default function Chatbot() {
     return (
       <button
         onClick={() => setShowChatbot(false)}
-        className='fixed z-chatbot right-25 bottom-25 flex justify-center items-center border-2 border-solid border-main rounded-full bg-white w-40 h-40 tablet:w-62 tablet:h-62'
+        className='fixed z-chatbot right-25 bottom-25 flex justify-center items-center border-2 border-solid border-main rounded-full bg-white w-40 h-40 tablet:w-56 tablet:h-56 desktop:w-62 desktop:h-62'
       >
         <CloseIcon width={'43'} height={closeIconSize} />
       </button>
@@ -57,7 +57,7 @@ export default function Chatbot() {
       {!showChatbot && (
         <button
           onClick={() => setShowChatbot(true)}
-          className='fixed right-25 bottom-25 outline-none border-2 border-solid border-main rounded-full bg-white w-40 h-40 tablet:w-62 tablet:h-62'
+          className='fixed right-25 bottom-25 outline-none border-2 border-solid border-main rounded-full bg-white w-40 h-40 tablet:w-56 tablet:h-56 desktop:w-62 desktop:h-62 dark:bg-secondary'
         >
           <Image src={GoldtoriIcon} alt='금토리 아이콘' fill sizes='62px' />
         </button>

diff --git a/src/components/templates/editor/EditorRenderer.tsx b/src/components/templates/editor/EditorRenderer.tsx
@@ -12,7 +12,7 @@ export default function EditorRenderer({
     <div
       dangerouslySetInnerHTML={{ __html: html }}
       {...props}
-      className={cls(props.className ?? '', 'prose max-w-full')}
+      className={cls(props.className ?? '', 'prose max-w-full dark:text-white')}
     >
       {props.children}
     </div>

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;
diff --git a/src/utils/truncateText.ts b/src/utils/truncateText.ts
@@ -0,0 +1,8 @@
+const truncateText = (text: string, maxLength: number) => {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.slice(0, maxLength) + '...';
+};
+
+export default truncateText;