feat: openStrcat api연걸 및 데이터 연동 #405

RollingPaper42 · Apr 28, 2024 · 5f6232f · 5f6232f
1 parent f2ed99e
commit 5f6232f
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 55 deletions.
diff --git a/src/component/OpenStrcat.tsx b/src/component/OpenStrcat.tsx
@@ -4,38 +4,81 @@ interface Props {
   id: string;
   bgAndBorderColor: string;
   timeTextColor: string;
+  theme: string;
+  contentCount: string;
+  contentTextCount: string;
   title: string;
-  description: string;
-  time: string;
+  lastContentCreatedAt: string;
 }
 
 export default function OpenStrcat({
   id,
   bgAndBorderColor,
   timeTextColor,
   title,
-  description,
-  time,
+  contentCount,
+  contentTextCount,
+  lastContentCreatedAt,
 }: Props) {
+  const truncatedTitle = truncateText(title, 19);
+  const contentText = `${contentCount}개의 마음이 ${contentTextCount}자 이어졌어요!`;
+  const truncatedContentText = truncateText(contentText, 37);
+
   return (
-    <div className="flex-none ">
+    <div className="flex-none">
       <div
         className={`flex w-[150px] h-[192px] px-[16px] pt-[20px] pb-[14px] flex-col rounded-[6px]  justify-between border-[1px] ${bgAndBorderColor}`}
       >
-        <div className="flex flex-col gap-[12px] font-medium">
-          <div className="font-semibold text-[16px] text-white">{title}</div>
-          <div className="font-medium text-[14px] mb-[12px] text-white opacity-70">
-            {description}
+        <div className="flex flex-col gap-[12px]">
+          <div className="h-[40px] font-medium leading-5 text-[16px] tracking-[-0.32px] text-white">
+            {truncatedTitle}
+          </div>
+          <div className="h-[80px] font-medium text-[14px] mb-[12px] text-white opacity-70">
+            {truncatedContentText}
           </div>
         </div>
         <div>
           <div className={`text-[12px] text-right ${timeTextColor}`}>
-            {time}
+            {timeString(lastContentCreatedAt)}
           </div>
         </div>
       </div>
     </div>
   );
 }
 
-const timeString = () => {};
+function truncateText(text: string, maxLength: number) {
+  if (text.length > maxLength) {
+    return text.substring(0, maxLength - 1) + '...';
+  }
+  return text;
+}
+
+const timeString = (date: string) => {
+  const now = new Date();
+  const lastContentCreatedAt = new Date(date);
+  const diff = now.getTime() - lastContentCreatedAt.getTime();
+  const diffSeconds = Math.floor(diff / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+  const diffYears = Math.floor(diffMonths / 12);
+
+  if (diffSeconds < 11 * 60) {
+    return '방금';
+  } else if (diffMinutes < 60) {
+    return `${diffMinutes}분 전`;
+  } else if (diffHours < 24) {
+    return `${diffHours}시간 전`;
+  } else if (diffDays < 7) {
+    return `${diffDays}일 전`;
+  } else if (diffWeeks < 4) {
+    return `${diffWeeks}주 전`;
+  } else if (diffMonths < 12) {
+    return `${diffMonths}개월 전`;
+  } else {
+    return `${diffYears}년 전`;
+  }
+};
diff --git a/src/component/OpenStrcatBoard.tsx b/src/component/OpenStrcatBoard.tsx
@@ -9,56 +9,43 @@ interface Props {
 
 export default function OpenStrcatBoard({ openBoard }: Props) {
   const bgAndBorderColor: Record<string, string> = {
-    'strcat-night': 'bg-strcat-night/50 border-strcat-night',
-    'strcat-peach': 'bg-strcat-peach/50 border-strcat-peach',
-    'strcat-lilac': 'bg-strcat-lilac/50 border-strcat-lilac',
-    'strcat-chris': 'bg-strcat-chris/50 border-strcat-chris',
-    'strcat-mas': 'bg-strcat-mas/50 border-strcat-mas',
-    'strcat-sul': 'bg-strcat-sul/50 border-strcat-sul',
-    'strcat-spring': 'bg-strcat-spring/50 border-strcat-spring',
+    night: 'bg-strcat-night/50 border-strcat-night',
+    peach: 'bg-strcat-peach/50 border-strcat-peach',
+    lilac: 'bg-strcat-lilac/50 border-strcat-lilac',
+    chris: 'bg-strcat-chris/50 border-strcat-chris',
+    mas: 'bg-strcat-mas/50 border-strcat-mas',
+    sul: 'bg-strcat-sul/50 border-strcat-sul',
+    spring: 'bg-strcat-spring/50 border-strcat-spring',
   };
 
   const textColor: Record<string, string> = {
-    'strcat-night': 'text-strcat-night',
-    'strcat-peach': 'text-strcat-peach',
-    'strcat-lilac': 'text-strcat-lilac',
-    'strcat-chris': 'text-white',
-    'strcat-mas': 'text-white',
-    'strcat-sul': 'text-strcat-sul',
-    'strcat-spring': 'text-strcat-spring',
+    night: 'text-strcat-night',
+    peach: 'text-strcat-peach',
+    lilac: 'text-strcat-lilac',
+    chris: 'text-white',
+    mas: 'text-white',
+    sul: 'text-strcat-sul',
+    spring: 'text-strcat-spring',
   };
 
-  const colorList = Array.from(
-    { length: 10 },
-    (_, index) =>
-      bgAndBorderColor[
-        Object.keys(bgAndBorderColor)[
-          index % Object.keys(bgAndBorderColor).length
-        ]
-      ],
-  );
-
-  const textColorList = Array.from(
-    { length: 10 },
-    (_, index) =>
-      textColor[Object.keys(textColor)[index % Object.keys(textColor).length]],
-  );
-
   return (
     <div className="w-full flex flex-row  overflow-x-scroll pt-[14px] gap-[12px]">
       {openBoard.map((item, i) => {
         return (
-          <Link href={`/personal/${item.id}`}>
-            <OpenStrcat
-              key={`${item.id} + ${item.id}`}
-              id={item.id}
-              bgAndBorderColor={`${colorList[i]}`}
-              timeTextColor={`${textColorList[i]}`}
-              title={item.title}
-              description={item.description}
-              time={item.time}
-            />
-          </Link>
+          <div key={'openBoard' + item.title}>
+            <Link href={`/personal/${item.id}`}>
+              <OpenStrcat
+                id={item.id}
+                bgAndBorderColor={`${bgAndBorderColor[item.theme]}`}
+                timeTextColor={`${textColor[item.theme]}`}
+                title={item.title}
+                contentCount={item.contentCount}
+                contentTextCount={item.contentTextCount}
+                lastContentCreatedAt={item.lastContentCreatedAt}
+                theme={item.theme}
+              />
+            </Link>
+          </div>
         );
       })}
     </div>

diff --git a/src/types/openBoard.ts b/src/types/openBoard.ts
@@ -1,6 +1,8 @@
 export interface openBoard {
+  contentCount: string;
+  contentTextCount: string;
   id: string;
+  lastContentCreatedAt: string;
+  theme: string;
   title: string;
-  description: string;
-  time: string;
 }
diff --git a/src/utils/apiInterface.tsx b/src/utils/apiInterface.tsx
@@ -7,7 +7,7 @@ export const axiosGetBoard = (id: string) => {
 };
 
 export const axiosGetPublicBoard = () => {
-  return axios.get(`/api/public`);
+  return axiosInstance.get(`/boards/public`);
 };
 
 export const axiosGetBoardSummaries = (id: string) => {