chore: add memo detail page

web/src/components/MemoCardDialog.tsx

@@ -1,4 +1,3 @@
-import copy from "copy-to-clipboard";
 import { useState, useEffect, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { editorStateService, memoService, userService } from "../services";
@@ -116,14 +115,13 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
     setMemo(memo);
   }, []);
 
-  const handleCopyMemoLinkBtnClick = () => {
+  const handleGotoMemoLinkBtnClick = () => {
     if (memo.visibility === "PRIVATE") {
       toastHelper.error(t("message.private-only"));
       return;
     }
 
-    copy(`${window.location.origin}/explore?memoId=${memo.id}`);
-    toastHelper.success(t("message.copied"));
+    window.open(`/m/${memo.id}`);
   };
 
   const handleEditMemoBtnClick = () => {
@@ -169,8 +167,8 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
           <div className="btns-container">
             <Only when={!userService.isVisitorMode()}>
               <>
-                <button className="btn edit-btn" onClick={handleCopyMemoLinkBtnClick}>
-                  <Icon.Link className="icon-img" />
+                <button className="btn edit-btn" onClick={handleGotoMemoLinkBtnClick}>
+                  <Icon.ExternalLink className="icon-img" />
                 </button>
                 <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
                   <Icon.Edit3 className="icon-img" />

web/src/helpers/api.ts

@@ -73,6 +73,10 @@ export function getMemoList(memoFind?: MemoFind) {
   return axios.get<ResponseObject<Memo[]>>(`/api/memo?${queryList.join("&")}`);
 }
 
+export function getMemoById(id: MemoId) {
+  return axios.get<ResponseObject<Memo>>(`/api/memo/${id}`);
+}
+
 export function createMemo(memoCreate: MemoCreate) {
   return axios.post<ResponseObject<Memo>>("/api/memo", memoCreate);
 }

web/src/pages/Explore.tsx

@@ -5,7 +5,6 @@ import { Link, useNavigate } from "react-router-dom";
 import { memoService, userService } from "../services";
 import { isNullorUndefined } from "../helpers/utils";
 import { useAppSelector } from "../store";
-import useQuery from "../hooks/useQuery";
 import useLoading from "../hooks/useLoading";
 import Only from "../components/common/OnlyWhen";
 import MemoContent from "../components/MemoContent";
@@ -19,7 +18,6 @@ interface State {
 const Explore = () => {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
-  const query = useQuery();
   const user = useAppSelector((state) => state.user.user);
   const location = useAppSelector((state) => state.location);
   const [state, setState] = useState<State>({
@@ -35,18 +33,8 @@ const Explore = () => {
     }
 
     memoService.fetchAllMemos().then((memos) => {
-      let filteredMemos = memos;
-
-      const memoId = Number(query.get("memoId"));
-      if (memoId && !isNaN(memoId)) {
-        filteredMemos = filteredMemos.filter((memo) => {
-          return memo.id === memoId;
-        });
-      }
-
       setState({
-        ...state,
-        memos: filteredMemos,
+        memos,
       });
       loadingState.setFinish();
     });

web/src/pages/MemoDetail.tsx

@@ -0,0 +1,91 @@
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { memoService, userService } from "../services";
+import { UNKNOWN_ID } from "../helpers/consts";
+import { isNullorUndefined } from "../helpers/utils";
+import { useAppSelector } from "../store";
+import useLoading from "../hooks/useLoading";
+import Only from "../components/common/OnlyWhen";
+import MemoContent from "../components/MemoContent";
+import MemoResources from "../components/MemoResources";
+import "../less/explore.less";
+
+interface State {
+  memo: Memo;
+}
+
+const MemoDetail = () => {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const params = useParams();
+  const user = useAppSelector((state) => state.user.user);
+  const location = useAppSelector((state) => state.location);
+  const [state, setState] = useState<State>({
+    memo: {
+      id: UNKNOWN_ID,
+    } as Memo,
+  });
+  const loadingState = useLoading();
+
+  useEffect(() => {
+    const { host } = userService.getState();
+    if (isNullorUndefined(host)) {
+      navigate("/auth");
+      return;
+    }
+
+    const memoId = Number(params.memoId);
+    if (memoId && !isNaN(memoId)) {
+      memoService.fetchMemoById(memoId).then((memo) => {
+        setState({
+          memo,
+        });
+        loadingState.setFinish();
+      });
+    }
+  }, [location]);
+
+  return (
+    <section className="page-wrapper explore">
+      <div className="page-container">
+        <div className="page-header">
+          <div className="title-container">
+            <img className="logo-img" src="/logo-full.webp" alt="" />
+          </div>
+          <div className="action-button-container">
+            <Only when={!loadingState.isLoading}>
+              {user ? (
+                <Link to="/" className="btn">
+                  <span className="icon">🏠</span> {t("common.back-to-home")}
+                </Link>
+              ) : (
+                <Link to="/auth" className="btn">
+                  <span className="icon">👉</span> {t("common.sign-in")}
+                </Link>
+              )}
+            </Only>
+          </div>
+        </div>
+        {!loadingState.isLoading && (
+          <main className="memos-wrapper">
+            <div className="memo-container">
+              <div className="memo-header">
+                <span className="time-text">{dayjs(state.memo.createdTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
+                <span className="split-text">by</span>
+                <a className="name-text" href={`/u/${state.memo.creator.id}`}>
+                  {state.memo.creator.name}
+                </a>
+              </div>
+              <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
+              <MemoResources memo={state.memo} />
+            </div>
+          </main>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default MemoDetail;

web/src/router/index.tsx

@@ -3,6 +3,7 @@ import { userService } from "../services";
 import Auth from "../pages/Auth";
 import Explore from "../pages/Explore";
 import Home from "../pages/Home";
+import MemoDetail from "../pages/MemoDetail";
 
 const router = createBrowserRouter([
   {
@@ -42,6 +43,17 @@ const router = createBrowserRouter([
       }
     },
   },
+  {
+    path: "/m/:memoId",
+    element: <MemoDetail />,
+    loader: async () => {
+      try {
+        await userService.initialState();
+      } catch (error) {
+        // do nth
+      }
+    },
+  },
 ]);
 
 export default router;

web/src/services/memoService.ts

@@ -57,6 +57,13 @@ const memoService = {
     return archivedMemos;
   },
 
+  fetchMemoById: async (memoId: MemoId) => {
+    const { data } = (await api.getMemoById(memoId)).data;
+    const memo = convertResponseModelMemo(data);
+
+    return memo;
+  },
+
   getMemoById: (memoId: MemoId) => {
     for (const m of memoService.getState().memos) {
       if (m.id === memoId) {