feat: 프로필 이미지 연동 추가

hyundai-autoever-first-project-team3 · Oct 24, 2024 · 6456ddf · 6456ddf
1 parent 66228d2
commit 6456ddf
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/src/components/common/Card.jsx b/src/components/common/Card.jsx
@@ -11,6 +11,7 @@ const Card = ({
   writerNickname,
   likeCount = 0,
   onClick,
+  writerProfile,
 }) => {
   // 날짜 가공
   const formattedDate = new Date(createdAt).toLocaleDateString("ko-KR", {
@@ -42,7 +43,7 @@ const Card = ({
       <div className="flex flex-row justify-between items-center py-2 px-2">
         <div className="flex flex-row gap-2 items-center">
           <img
-            src="https://avatars.githubusercontent.com/u/89841486?v=4"
+            src={writerProfile}
             alt="profile"
             className="w-8 h-8 rounded-full object-contain"
           />

diff --git a/src/components/postdetail/InfoBar.jsx b/src/components/postdetail/InfoBar.jsx
@@ -3,16 +3,21 @@ import { Button } from "@mui/material";
 import FavoriteIcon from "@mui/icons-material/Favorite";
 import { useAuth } from "../../hooks/useAuth";
 
-
 const InfoBar = ({
-  id,
-  createdAt,
+  writerId,
+  userId,
   updatedAt,
   writerNickname,
   likeCount = 0,
-  onClick,
-  thumbnailImage,
 }) => {
+  const formattedDate = new Date(updatedAt).toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  const { isLoggedIn } = useAuth();
+  const isEqual = writerId === userId;
 
   return (
     <div>
@@ -25,19 +30,23 @@ const InfoBar = ({
         </div>
         <div>
           {/* 로그인 여부에 따라 버튼 노출 달라짐 */}
-          <div className="flex">
-            <Button variant="outlined">삭제</Button>
-            <Button variant="outlined">수정</Button>
-          </div>
-          <Button
-            size="medium"
-            variant="outlined"
-            color="#eee"
-            startIcon={<FavoriteIcon sx={{ color: "#F20789" }} />}
-            sx={{ borderRadius: "1rem" }}
-          >
-            {likeCount}
-          </Button>
+          {isLoggedIn && isEqual ? (
+            <div className="flex">
+              <Button variant="outlined">삭제</Button>
+              <Button variant="outlined">수정</Button>
+            </div>
+          ) : (
+            <Button
+              size="medium"
+              variant="outlined"
+              color="#eee"
+              startIcon={<FavoriteIcon sx={{ color: "#F20789" }} />}
+              sx={{ borderRadius: "1rem" }}
+              disabled={!isLoggedIn}
+            >
+              {likeCount}
+            </Button>
+          )}
         </div>
       </div>
     </div>

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -45,6 +45,7 @@ const MainPage = () => {
                 likeCount={item.likeCount}
                 createdAt={item.createdAt}
                 writerNickname={item.writerNickname}
+                writerProfile={item.writerProfileImage}
                 onClick={() => {
                   console.log("dd");
                   navigate(`/posts/${item.tilId}`);
@@ -59,7 +60,7 @@ const MainPage = () => {
               <ChallengeCard
                 key={item.id}
                 algorithm={item.algorithm}
-                viewCount={item.viewCount}
+                viewCount={item.views}
                 createdAt={item.createdAt}
               />
             ))}

diff --git a/src/pages/PostDetailPage.jsx b/src/pages/PostDetailPage.jsx
@@ -40,6 +40,8 @@ const PostDetailPage = () => {
           {postsDetail?.til.title}
         </h1>
         <InfoBar
+          userId={postsDetail?.memberWriterDto.id}
+          writerId={postsDetail?.til.memberId}
           updatedAt={postsDetail?.til.updatedAt}
           likeCount={postsDetail?.likeCounts}
           writerNickname={postsDetail?.memberWriterDto.nickname}