트렌딩 게시글 UI

src/app/api.ts

@@ -52,13 +52,13 @@ const baseQueryWithReauth = async (
       }
     );
 
-    if (refreshResult.body.token) {
+    if (refreshResult.body?.token) {
       const newAccessToken = refreshResult.body.token;
       api.dispatch(setAccessToken(newAccessToken));
       result = await baseQuery(args, api, extraOptions);
     }
 
-    if (refreshResult.header.code !== 200) {
+    if (refreshResult.header?.code === 400) {
       window.location.href = "/auth";
     }
   }
@@ -119,8 +119,11 @@ export const api = createApi({
       providesTags: [{ type: "LikedProjectIds", id: "LIST" }],
     }),
 
-    getMyAppliedProjects: build.query<{ projectIds: number[] }, null>({
+    getMyAppliedProjects: build.query<number[], null>({
       query: () => "/applies/me",
+      transformResponse: (response: {
+        body: { "me applied projects": number[] };
+      }) => response.body["me applied projects"],
       providesTags: [{ type: "AppliedProjectId", id: "LIST" }],
     }),
 
@@ -379,6 +382,8 @@ export const api = createApi({
 
     getProject: build.query<Project, { id: number }>({
       query: ({ id }) => `/projects/${id}`,
+      transformResponse: (response: { body: { "project get": Project } }) =>
+        response.body["project get"],
       providesTags: (result) =>
         result
           ? [{ type: "Project", id: String(result.projectId) }]

src/components/post/PostCard.tsx

@@ -54,6 +54,8 @@ export default function PostCard({
   const setDeletePost = api.useDeletePostMutation()[0];
   const spoilerControlRef = useRef<HTMLButtonElement>(null);
 
+  const { data: author } = api.useGetUserQuery(post.userId);
+
   const closeSpoilerText = "숨기기";
   const openSpoiler = () => {
     if (
@@ -81,7 +83,7 @@ export default function PostCard({
         <Group position="apart">
           <Group>
             <Link to={`/people/${post.userId}`}>
-              <Avatar src={post.authorAvatar} radius="xl" />
+              <Avatar src={author?.profileImageUrl} radius="xl" />
             </Link>
             <Text>{post.authorName}</Text>
 

src/components/post/TrendingPosts.tsx

@@ -0,0 +1,84 @@
+import {
+  Card,
+  Title,
+  Text,
+  Badge,
+  ScrollArea,
+  Group,
+  Center,
+  Button,
+  useMantineTheme,
+  createStyles,
+  Box,
+} from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { IconHeart } from "@tabler/icons-react";
+import { api } from "app/api";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    backgroundColor: theme.colors.gray[0],
+    marginTop: theme.spacing.xs,
+    marginBottom: theme.spacing.xs,
+    "&:hover": {
+      backgroundColor: theme.colors.gray[2],
+    },
+  },
+}));
+
+const TrendingPosts = () => {
+  const {
+    data: posts,
+    isLoading,
+    isSuccess,
+    isError,
+    error,
+  } = api.useGetRecentPostsQuery("");
+
+  const theme = useMantineTheme();
+
+  const { classes } = useStyles();
+  const mediaQuery = useMediaQuery("(max-width: 1200px)");
+
+  const titleLength = mediaQuery ? 18 : 28;
+
+  return (
+    <Card shadow="sm" padding={!mediaQuery ? "md" : "xs"}>
+      <Title order={5}>Trending</Title>
+
+      {isLoading ? (
+        <Text>Loading...</Text>
+      ) : (
+        posts?.content.slice(0, 5).map((post, i) => (
+          <Link to={`/post/${post.postId}`} style={{ textDecoration: "none" }}>
+            <Card className={classes.card} w="100%" p="xs" h="auto">
+              <Text>
+                {post.title
+                  ? post.title.slice(0, titleLength) +
+                    (post.title.length > titleLength ? "..." : "")
+                  : post.content.slice(0, titleLength) +
+                    (post.content.length > titleLength ? "..." : "")}
+              </Text>
+
+              <Group position="apart">
+                <Text c="gray" fz="xs">
+                  {post.authorName}
+                </Text>
+                <Group spacing={5}>
+                  <IconHeart color="pink" fill="pink" size={16} />
+                  <Text c="gray" fz="xs">
+                    {post.likes || Math.floor((10 / (i + 1)) * 10)}
+                  </Text>
+                </Group>
+              </Group>
+            </Card>
+          </Link>
+        ))
+      )}
+    </Card>
+  );
+};
+
+export default TrendingPosts;

src/components/ui/AsideContent.tsx

@@ -1,5 +1,11 @@
+import TrendingPosts from "components/post/TrendingPosts";
+
 function AsideContent() {
-  return <></>;
+  return (
+    <>
+      <TrendingPosts />
+    </>
+  );
 }
 
 export default AsideContent;

src/pages/ProjectDetail.tsx

@@ -44,10 +44,10 @@ export default function ProjectDetail() {
 
   const { data: appliedProjectIds } = api.useGetMyAppliedProjectsQuery(null);
   const applyProject = api.useApplyProjectMutation()[0];
-  const isApplied = appliedProjectIds?.projectIds.includes(id);
+  const isApplied = appliedProjectIds?.includes(id);
 
   const isLeader = project?.leaderId === myId;
-  const isTeamMember = project?.teamUserIds.includes(myId || "");
+  const isTeamMember = project?.teamUserIds?.includes(myId || "");
   const applicantsIdsQuery = api.useGetApplicantsIdsQuery(
     project?.projectId || 0
   );

src/types/index.ts

@@ -3,7 +3,7 @@ interface Post {
   title: string;
   content: string;
   authorName: string;
-  userId: number;
+  userId: string;
   authorAvatar: string;
   imagesUrl: string[];
   likes: number;