feat: update memo resource component

web/src/components/DailyMemo.tsx

@@ -1,5 +1,6 @@
 import * as utils from "../helpers/utils";
 import MemoContent, { DisplayConfig } from "./MemoContent";
+import MemoResources from "./MemoResources";
 import "../less/daily-memo.less";
 
 interface DailyMemo extends Memo {
@@ -28,7 +29,10 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
       <div className="time-wrapper">
         <span className="normal-text">{memo.timeStr}</span>
       </div>
-      <MemoContent content={memo.content} displayConfig={displayConfig} />
+      <div className="memo-container">
+        <MemoContent content={memo.content} displayConfig={displayConfig} />
+        <MemoResources memo={memo} />
+      </div>
       <div className="split-line"></div>
     </div>
   );

web/src/components/MemoEditor.tsx

@@ -126,7 +126,7 @@ const MemoEditor: React.FC = () => {
       if (editMemoId && editMemoId !== UNKNOWN_ID) {
         const prevMemo = memoService.getMemoById(editMemoId ?? UNKNOWN_ID);
 
-        if (prevMemo && prevMemo.content !== content) {
+        if (prevMemo) {
           await memoService.patchMemo({
             id: prevMemo.id,
             content,
@@ -347,11 +347,7 @@ const MemoEditor: React.FC = () => {
           {state.resourceList.map((resource) => {
             return (
               <div key={resource.id} className="resource-container">
-                {resource.type.includes("image") ? (
+                {resource.type.includes("image") ? <Icon.Image className="icon-img" /> : <Icon.FileText className="icon-img" />}
-                  <Icon.Image className="icon-img" onClick={handleUploadFileBtnClick} />
-                ) : (
-                  <Icon.FileText className="icon-img" onClick={handleUploadFileBtnClick} />
-                )}
                 <span className="name-text">{resource.filename}</span>
                 <Icon.X className="close-icon" onClick={() => handleDeleteResource(resource.id)} />
               </div>

web/src/components/MemoResources.tsx

@@ -1,25 +1,40 @@
-import { IMAGE_URL_REG } from "../helpers/marked";
 import Image from "./Image";
+import Icon from "./Icon";
 import "../less/memo-resources.less";
 
 interface Props {
-  className?: string;
   memo: Memo;
 }
 
 const MemoResources: React.FC<Props> = (props: Props) => {
-  const { className, memo } = props;
+  const { memo } = props;
-  const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
+  const imageList = memo.resourceList.filter((resource) => resource.type.includes("image"));
+  const otherResourceList = memo.resourceList.filter((resource) => !resource.type.includes("image"));
+
+  const handlPreviewBtnClick = (resource: Resource) => {
+    const resourceUrl = `${window.location.origin}/o/r/${resource.id}/${resource.filename}`;
+    window.open(resourceUrl);
+  };
 
   return (
     <div className="resource-wrapper">
-      {imageUrls.length > 0 && (
+      {imageList.length > 0 && (
-        <div className={`images-wrapper ${className ?? ""}`}>
+        <div className="images-wrapper">
-          {imageUrls.map((imgUrl, idx) => (
+          {imageList.map((resource) => (
-            <Image className="memo-img" key={idx} imgUrl={imgUrl} />
+            <Image className="memo-img" key={resource.id} imgUrl={`/o/r/${resource.id}/${resource.filename}`} />
           ))}
         </div>
       )}
+      <div className="other-resource-wrapper">
+        {otherResourceList.map((resource) => {
+          return (
+            <div className="other-resource-container" key={resource.id} onClick={() => handlPreviewBtnClick(resource)}>
+              <Icon.FileText className="icon-img" />
+              <span className="name-text">{resource.filename}</span>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };

web/src/less/daily-memo.less

@@ -17,7 +17,11 @@
     @apply mt-px mr-4 w-12 h-7 shrink-0 text-xs leading-6 text-center font-mono rounded-lg bg-gray-100 border-2 border-white text-gray-600 z-10;
   }
 
-  > .memo-content-container {
+  > .memo-container {
-    @apply flex flex-col justify-start items-start w-full overflow-x-hidden p-0 text-base;
+    @apply w-full overflow-x-hidden flex flex-col justify-start items-start;
+
+    > .memo-content-container {
+      @apply flex flex-col justify-start items-start w-full overflow-x-hidden p-0 text-base;
+    }
   }
 }

web/src/less/memo-resources.less

@@ -16,4 +16,20 @@
       }
     }
   }
+
+  > .other-resource-wrapper {
+    @apply w-full flex flex-row justify-start flex-wrap;
+
+    > .other-resource-container {
+      @apply mt-1 mr-1 max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;
+
+      > .icon-img {
+        @apply w-4 h-auto mr-1 text-gray-500;
+      }
+
+      > .name-text {
+        @apply text-gray-500 text-sm max-w-xs truncate font-mono;
+      }
+    }
+  }
 }

web/src/types/modules/memo.d.ts

@@ -6,7 +6,6 @@ interface Memo {
   id: MemoId;
 
   creatorId: UserId;
-  creator: User;
   createdTs: TimeStamp;
   updatedTs: TimeStamp;
   rowStatus: RowStatus;
@@ -14,6 +13,9 @@ interface Memo {
   content: string;
   visibility: Visibility;
   pinned: boolean;
+
+  creator: User;
+  resourceList: Resource[];
 }
 
 interface MemoCreate {