Merge pull request #38 from boostcampwm-2024/feature/tag-component

✨ feat: 게시글 상세 모달/ 페이지 구현

Author: jungmyunggi

client/package-lock.json

@@ -26,7 +26,8 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-query": "^5.59.20",
     "@tanstack/react-query-devtools": "^5.59.20",
     "avvvatars-react": "^0.4.2",
@@ -39,6 +40,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
+    "react-markdown": "^9.0.3",
     "react-router-dom": "^6.27.0",
     "recharts": "^2.13.3",
     "socket.io-client": "^4.8.1",

client/package.json

@@ -1,8 +1,10 @@
 import { lazy, Suspense, useEffect } from "react";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useLocation } from "react-router-dom";
 
-import LoadingPage from "@/pages/Loading.tsx";
-import NotFound from "@/pages/NotFound";
+import PostDetail from "@/components/common/Card/PostDetail";
+
+import Loading from "@/pages/Loading.tsx";
+import PostDetailPage from "@/pages/PostDetailPage";
 
 import { useMediaQuery } from "@/hooks/common/useMediaQuery";
 
@@ -21,51 +23,67 @@ const queryClient = new QueryClient();
 export default function App() {
   const setIsMobile = useMediaStore((state) => state.setIsMobile);
   const isMobile = useMediaQuery("(max-width: 767px)");
+  const location = useLocation();
+  const state =
+    location.state && location.state.backgroundLocation
+      ? { backgroundLocation: location.state.backgroundLocation }
+      : null;
 
   useEffect(() => {
     console.log(denamuAscii);
   }, []);
 
+  useEffect(() => {
+    if (location.state?.backgroundLocation) {
+      window.history.replaceState({}, document.title, window.location.pathname + window.location.search);
+    }
+  }, [location]);
+
   useEffect(() => {
     setIsMobile(isMobile);
   }, [isMobile]);
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Routes>
+      <Routes location={state?.backgroundLocation || location}>
         <Route
           path="/"
           element={
-            <Suspense fallback={<LoadingPage />}>
+            <Suspense fallback={<Loading />}>
               <Home />
             </Suspense>
           }
         />
         <Route
           path="/admin"
           element={
-            <Suspense fallback={<LoadingPage />}>
+            <Suspense fallback={<Loading />}>
               <Admin />
             </Suspense>
           }
         />
         <Route
           path="/about"
           element={
-            <Suspense fallback={<LoadingPage />}>
+            <Suspense fallback={<Loading />}>
               <AboutService />
             </Suspense>
           }
         />
         <Route
-          path="*"
+          path="/:id"
           element={
-            <Suspense fallback={<LoadingPage />}>
-              <NotFound />
+            <Suspense fallback={<Loading />}>
+              <PostDetailPage />
             </Suspense>
           }
         />
       </Routes>
+      {state?.backgroundLocation && (
+        <Routes>
+          <Route path="/:id" element={<PostDetail />} />
+        </Routes>
+      )}
       <ReactQueryDevtools />
     </QueryClientProvider>
   );

client/src/App.tsx

@@ -11,6 +11,8 @@ export const generateMockPost = (id: number): Post => ({
   author: `작성자 ${(id % 5) + 1}`,
   thumbnail: `https://picsum.photos/640/480?random=${id}`,
   blogPlatform: "etc",
+  summary: "",
+  tag: [],
 });
 
 export const TOTAL_POSTS = Array.from({ length: 100 }, (_, i) => generateMockPost(i + 1));

client/src/api/mocks/data/posts.ts

@@ -1,3 +1,5 @@
+import { POST_MODAL_DATA } from "@/constants/dummyData";
+
 import { TOTAL_POSTS, PAGE_SIZE_POSTS } from "@/api/mocks/data/posts";
 import { mock } from "@/api/mocks/mockSetup";
 
@@ -23,3 +25,11 @@ export const setupPostHandlers = () => {
     ];
   });
 };
+
+export const mockDetailPost = (feedId: number) => {
+  POST_MODAL_DATA.data.id = feedId;
+  console.log(feedId);
+  mock.onGet(`/feed/${feedId}`).reply(() => {
+    return [200, POST_MODAL_DATA];
+  });
+};

client/src/api/mocks/handlers/posts.ts

@@ -1,7 +1,7 @@
 import { BLOG } from "@/constants/endpoints";
 
 import { axiosInstance } from "@/api/instance";
-import { InfiniteScrollResponse, LatestPostsApiResponse, Post } from "@/types/post";
+import { InfiniteScrollResponse, LatestPostsApiResponse, Post, PostDetailType } from "@/types/post";
 
 export const posts = {
   latest: async (params: { limit: number; lastId: number }): Promise<InfiniteScrollResponse<Post>> => {
@@ -17,4 +17,8 @@ export const posts = {
       lastId: response.data.data.lastId,
     };
   },
+  detail: async (postId: number): Promise<PostDetailType> => {
+    const response = await axiosInstance.get<PostDetailType>(`${BLOG.POST}/detail/${postId}`);
+    return response.data;
+  },
 };

client/src/api/services/posts.ts

@@ -27,7 +27,7 @@ export function OpenChat() {
   return (
     <button
       onClick={toggleSidebar}
-      className="fixed text-white bottom-[14.5rem] right-7 bg-[#3498DB] hover:bg-[#2980B9] !rounded-full p-3"
+      className="fixed text-white bottom-[14.5rem] right-7 bg-[#3498DB] hover:bg-[#2980B9] !rounded-full p-3 side-btn"
     >
       <MessageCircleMore size={25} />
     </button>

client/src/components/chat/ChatButton.tsx

@@ -0,0 +1,25 @@
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+type AvatarType = {
+  author: string;
+  className: string;
+  blogPlatform: string;
+};
+
+export default function PostAvatar({ author, className, blogPlatform }: AvatarType) {
+  const isValidPlatform = (platform: string): boolean => {
+    const validPlatforms = ["tistory", "velog", "medium"];
+    return validPlatforms.includes(platform);
+  };
+  const authorInitial = author?.charAt(0)?.toUpperCase() || "?";
+
+  return (
+    <Avatar className="h-8 w-8 ring-2 ring-background cursor-pointer">
+      {isValidPlatform(blogPlatform) ? (
+        <img src={`https://denamu.site/files/${blogPlatform}-icon.svg`} alt={author} className={className} />
+      ) : (
+        <AvatarFallback className="text-xs bg-slate-200">{authorInitial}</AvatarFallback>
+      )}
+    </Avatar>
+  );
+}

client/src/components/common/Card/PostAvatar.tsx

@@ -1,6 +1,6 @@
-import { Card, MCard } from "@/components/ui/card";
+import { useNavigate, useLocation } from "react-router-dom";
 
-import { usePostCardActions } from "@/hooks/common/usePostCardActions";
+import { Card, MCard } from "@/components/ui/card";
 
 import { PostCardContent } from "./PostCardContent";
 import { PostCardImage } from "./PostCardImage";
@@ -19,13 +19,17 @@ export const PostCard = ({ post, className }: PostCardProps) => {
 };
 
 const DesktopCard = ({ post, className }: PostCardProps) => {
-  const { handlePostClick } = usePostCardActions(post);
+  const navigate = useNavigate();
+  const location = useLocation();
 
+  const openPostDetail = (modalUrl: string) => {
+    navigate(modalUrl, { state: { backgroundLocation: location } });
+  };
   return (
     <Card
-      onClick={handlePostClick}
+      onClick={() => openPostDetail(`/${post.id}`)}
       className={cn(
-        "h-[240px] group shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5 border-none rounded-xl cursor-pointer",
+        "h-[270px] group shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-0.5 border-none rounded-xl cursor-pointer",
         className
       )}
     >
@@ -35,11 +39,11 @@ const DesktopCard = ({ post, className }: PostCardProps) => {
   );
 };
 const MobileCard = ({ post, className }: PostCardProps) => {
-  const { handlePostClick } = usePostCardActions(post);
+  const navigate = useNavigate();
 
   return (
     <MCard
-      onClick={handlePostClick}
+      onClick={() => navigate(`/${post.id}`)}
       className={cn("aspect-[5/3] transition-all duration-300 flex flex-col gap-2", className)}
     >
       <PostCardImage thumbnail={post.thumbnail} alt={post.title} />

client/src/components/common/Card/PostCard.tsx

@@ -1,78 +1,61 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import PostAvatar from "@/components/common/Card/PostAvatar";
+import PostTag from "@/components/common/Card/PostTag";
 import { CardContent } from "@/components/ui/card";
 
 import { formatDate } from "@/utils/date";
 
 import { useMediaStore } from "@/store/useMediaStore";
 import { Post } from "@/types/post";
 
-const isValidPlatform = (platform: string): boolean => {
-  const validPlatforms = ["tistory", "velog", "medium"];
-  return validPlatforms.includes(platform);
-};
 interface PostCardContentProps {
   post: Post;
 }
 
 export const PostCardContent = ({ post }: PostCardContentProps) => {
   const isMobile = useMediaStore((state) => state.isMobile);
-
   return isMobile ? <MobileCardContent post={post} /> : <DesktopCardContent post={post} />;
 };
 
 const MobileCardContent = ({ post }: PostCardContentProps) => {
-  const authorInitial = post.author?.charAt(0)?.toUpperCase() || "?";
-
   return (
     <CardContent className="p-0">
       <div className="flex items-center ml-4 mb-3 gap-3">
-        <Avatar className="h-8 w-8 ring-2 ring-background cursor-pointer">
-          {isValidPlatform(post.blogPlatform) ? (
-            <img
-              src={`https://denamu.site/files/${post.blogPlatform}-icon.svg`}
-              alt={post.author}
-              className="w-full h-full"
-            />
-          ) : (
-            <AvatarFallback className="text-xs bg-slate-200">{authorInitial}</AvatarFallback>
-          )}
-        </Avatar>
+        <PostAvatar
+          blogPlatform={post.blogPlatform}
+          className="h-8 w-8 ring-2 ring-background cursor-pointer"
+          author={post.author}
+        />
         <p className="font-bold text-sm">{post.author}</p>
       </div>
       <div className="px-4 pb-4">
         <p className="h-[48px] font-bold text-md group-hover:text-primary transition-colors line-clamp-2">
           {post.title}
         </p>
+        {post.tag && <PostTag tags={post.tag} />}
+
         <p className="text-[12px] text-gray-400 pt-2">{formatDate(post.createdAt)}</p>
       </div>
     </CardContent>
   );
 };
 
 const DesktopCardContent = ({ post }: PostCardContentProps) => {
-  const authorInitial = post.author?.charAt(0)?.toUpperCase() || "?";
-
   return (
     <CardContent className="p-0">
-      <div className="relative -mt-6 ml-4 mb-3">
-        <Avatar className="h-8 w-8 ring-2 ring-background cursor-pointer">
-          {isValidPlatform(post.blogPlatform) ? (
-            <img
-              src={`https://denamu.site/files/${post.blogPlatform}-icon.svg`}
-              alt={post.author}
-              className="w-full h-full"
-            />
-          ) : (
-            <AvatarFallback className="text-xs bg-slate-200">{authorInitial}</AvatarFallback>
-          )}
-        </Avatar>
+      <div className="relative -mt-4 ml-4 mb-3">
+        <PostAvatar
+          blogPlatform={post.blogPlatform}
+          className="h-8 w-8 ring-2 ring-background cursor-pointer"
+          author={post.author}
+        />
       </div>
       <div className="px-4 pb-4">
         <p className="font-bold text-xs text-gray-400 pb-1 line-clamp-1">{post.author}</p>
         <p className="h-[40px] font-bold text-sm group-hover:text-primary transition-colors line-clamp-2">
           {post.title}
         </p>
         <p className="text-[10px] text-gray-400 pt-2">{formatDate(post.createdAt)}</p>
+        {post.tag && <PostTag tags={post.tag} />}
       </div>
     </CardContent>
   );