Refactor : Box컴포넌트를 Stack컴포넌트로 대체

potenday-project · Nov 26, 2023 · a617df6 · a617df6
1 parent 2374786
commit a617df6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 45 deletions.
diff --git a/client/src/components/post/PostCard.tsx b/client/src/components/post/PostCard.tsx
@@ -52,7 +52,7 @@ const PostCard = ({
   const openPostDetailPage = useOpenPostDetailPage();
   const hasImage = useMemo(() => postAttachUrls.length !== 0, [postAttachUrls]);
 
-  const searchContext = useContext(postcardContext)
+  const searchContext = useContext(postcardContext);
 
   const { mutate: likeHandler } = useLikePostMutation(searchContext);
   const { mutate: unLikeHandler } = useUnLikePostMutation(searchContext);
@@ -73,21 +73,18 @@ const PostCard = ({
       </Link>
       <Box sx={{ width: "100%" }}>
         {/* Header */}
-        <Box
+        <Stack
           data-testid="mui-header"
-          sx={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            px: 0,
-          }}
+          direction="row"
+          justifyContent="space-between"
+          px={0}
         >
           <Stack
             direction="row"
             gap={1}
             sx={{
               height: 24,
-              alignItems:'center'
+              alignItems: "center",
             }}
           >
             {/* 타이틀 */}
@@ -106,7 +103,7 @@ const PostCard = ({
           </Stack>
 
           {isMyPost && <PostCardOptionDropdown postId={postNo} />}
-        </Box>
+        </Stack>
 
         {alcoholName && (
           <AlcoleNameTag alcoholName={alcoholName} alcoholType={alcoholType} />

diff --git a/client/src/components/post/PostCardList.tsx b/client/src/components/post/PostCardList.tsx
@@ -6,7 +6,7 @@ import useGetPostListInfiniteQuery, {
 } from "@/queries/post/useGetPostListInfiniteQuery";
 import { useInView } from "react-intersection-observer";
 import { useEffect } from "react";
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Stack } from "@mui/material";
 import { useMemo } from "react";
 import Image from "next/image";
 import NoResult from "@/assets/images/noResult.png";
@@ -48,16 +48,9 @@ function PostCardList(props: UseGetPostListQueryInterface) {
         )}
       {isSuccess && !hasResult && (
         // 검색결과 없을 시
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            py: 8,
-          }}
-        >
+        <Stack justifyContent="center" alignItems="center" py={8}>
           <Image src={NoResult} alt="no result alert" />
-        </Box>
+        </Stack>
       )}
       {/* 로딩창 */}
       {isFetchingNextPage || isLoading ? (

diff --git a/client/src/components/post/PostDetail.tsx b/client/src/components/post/PostDetail.tsx
@@ -16,13 +16,17 @@ const PostDetail = ({ postNo, initialData }: PostDetailInterface) => {
     headers: { Authorization: getTokenFromLocalStorage() },
   });
   //FIXME 포스트의 좋아요갯수가 업데이트 되지않음
-  return data ? (
+  return (
     <>
-      <PostCard {...data} />
-      <PostCommentList postNo={postNo} />
+      {data ? (
+        <>
+          <PostCard {...data} />
+          <PostCommentList postNo={postNo} />
+        </>
+      ) : (
+        <CircularProgress />
+      )}
     </>
-  ) : (
-    <CircularProgress />
   );
 };
 export default PostDetail;
diff --git a/client/src/components/user/info/UserInfoCard.tsx b/client/src/components/user/info/UserInfoCard.tsx
@@ -1,7 +1,7 @@
 "use client";
 import UserAvatar from "@/components/user/info/UserAvatar";
 import FollowUserBtn from "@/components/user/info/FollowUserBtn";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography } from "@mui/material";
 import { UserInfoInterface } from "@/types/user/userInfoInterface";
 import useUserInfoQuery from "@/queries/user/useUserInfoQuery";
 import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage";
@@ -43,48 +43,36 @@ const UserInfo = ({ initialData, userId }: Props) => {
   } = data;
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        flexDirection: "column",
-        gap: 1,
-      }}
-    >
+    <Stack alignItems="center" gap={1}>
       <UserAvatar
         src={profileImages[0]?.attachUrl}
         fallback={id}
         sx={{ width: "56px", height: "56px" }}
       />
-      <Box sx={RowWrapperSX}>
+      <Stack direction="row" gap={1}>
         <Typography color="primary.main" fontWeight="bold">
           {nickname}
         </Typography>
         <Typography color="text.secondary">@{id}</Typography>
-      </Box>
+      </Stack>
       <Box sx={{ height: 48 }}>
         <Typography color="text.secondary">
           {introduction ?? "자기소개가 없습니다"}
         </Typography>
       </Box>
-      <Box sx={RowWrapperSX}>
+      <Stack direction="row" gap={1}>
         <Typography fontWeight="bold">{followerCount}</Typography>
         <Typography color="text.secondary">팔로워</Typography>
         <Typography fontWeight="bold">{followingCount}</Typography>
         <Typography color="text.secondary">팔로잉</Typography>
-      </Box>
+      </Stack>
       {isMyProfile ? (
         <Button fullWidth>설정</Button>
       ) : (
-        <FollowUserBtn userId={userId} isFollowing={isFollowing} fullWidth/>
+        <FollowUserBtn userId={userId} isFollowing={isFollowing} fullWidth />
       )}
-    </Box>
+    </Stack>
   );
 };
 
-const RowWrapperSX = {
-  display: "flex",
-  gap: 1,
-};
-
 export default UserInfo;