✨ Feat: 댓글 작성 시간 추가 및 이미지 설정 (#136)

[Feat] 상세 페이지 댓글 기능 구현 및 파일 이름 변경

src/pages/FeedPage/FeedComment.jsx

@@ -2,18 +2,26 @@ import React from 'react';
 import styled from 'styled-components';
 import BasicProfile from '../../assets/images/basic-profile-xs.svg';
 
-const FeedComment = ({ data }) => {
+const FeedComment = ({ user, content, image, time }) => {
+
+  const createdTime = () => {
+    const year = time.slice(0, 4) + '년 ';
+    const month = time.slice(5, 7) + '월 ';
+    const date = time.slice(8, 10) + '일';
+    return year + month + date;
+  }
+
   return (
     <Container>
       <div>
-        <img src={BasicProfile} alt="" />
+        <img src={image} alt="유저 프로필 이미지" />
       </div>
       <UserContents>
         <UserInfo>
-          <UserName>김용덕</UserName>
-          <TimeAgo>qwe</TimeAgo>
+          <UserName>{user}</UserName>
+          <TimeAgo>{createdTime()}</TimeAgo>
         </UserInfo>
-        <Contents>qwe</Contents>
+        <Contents>{content}</Contents>
       </UserContents>
     </Container>
   );
@@ -24,7 +32,13 @@ export default FeedComment;
 const Container = styled.div`
   display: flex;
   padding: 15px;
-  box-shadow: inset 0 0 10px red;
+box-shadow: rgba(217, 217, 217, 0.5) 0px 0.1rem 0px;
+img {
+  width: 3.6rem;
+  height: 3.6rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
 `;
 
 const UserContents = styled.div`

src/pages/FeedPage/FeedPage.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import Feed from './Feed';
+import PostPage from '../PostPage/PostPage';
 import TopMainNavHeader from '../../components/Header/TopMainNavHeader';
 import FeedNoUser from './FeedNoUser';
 import TabMenu from '../../components/Footer/TabMenu';
@@ -53,7 +53,7 @@ const FeedPage = () => {
       {!data ? (
         <FeedNoUser />
       ) : (
-        data.map((post, index) => <Feed key={index} data={post} />)
+        data.map((data, index) => <PostPage key={index} data={data} />)
       )}
       <TabMenu />
     </>

src/pages/PostPage/PostDetailPage.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import PostPage from './PostPage';
 import styled from 'styled-components';
-import { getPostDetail, getComment, postComment } from '../../utils/Apis';
+import { getComment, postComment } from '../../utils/Apis';
 import TopListNavHeader from '../../components/Header/TopListNavHeader';
 import FeedComment from '../FeedPage/FeedComment';
 import BasicProfileImg from '../../assets/images/basic-profile-xs.svg';
@@ -15,25 +15,24 @@ const PostPageDetail = () => {
   const location = useLocation();
   const data = location.state?.data;
 
+  /* 댓글 리스트 받아오기 */
   const fetchCommentList = async () => {
       const response = await getComment(postId);
       setCommentData(response.comments); 
-      // 배열 안에, id, content, createdAt, author
   }
 
   const handleInput = (e) => {
-    const inputComment = e.target.value;
-    setInputComment(inputComment);
+    setInputComment(e.target.value);
   };
 
+  /* 댓글 작성 */
   const handleCommentSubmit = async (e) => {
     e.preventDefault();
-
     const response = await postComment(postId, inputComment);
+    setInputComment('');
     fetchCommentList();
   };
 
-
   useEffect(() => {
     if(postId) {
       fetchCommentList();
@@ -64,6 +63,7 @@ const PostPageDetail = () => {
           <CommentInput
             placeholder="댓글을 입력하세요..."
             onChange={handleInput}
+            value={inputComment}
           />
         </StyledComment>
         <PostBtn active={inputComment.trim() !== ''} type="submit">