200 front task 그룹 피드 클릭 시 상세 정보 및 댓글 구현

src/components/Common/Feed/Feed.jsx

@@ -1,17 +1,20 @@
 import React, { useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
+import FeedDetailModal from "@/components/Common/Feed/FeedDetailModal/FeedDetailModal";
 import FeedOption from "@/components/Common/Feed/FeedOption";
 import {
 	CrownIcon,
 	CommentIcon,
 	EmptyHeartIcon,
 	FillHeartIcon,
 } from "@/constants/iconConstants";
+import { UI_TYPE } from "@/constants/uiConstants";
 import {
 	cancelLikeGroupPost,
 	likeGroupPost,
 } from "@/features/post/post-service";
+import { openFeedDetailModal } from "@/features/ui/ui-slice";
 import useOutsideClick from "@/hooks/useOutsideClick";
 import { useTimeStamp } from "@/hooks/useTimeStamp";
 
@@ -20,6 +23,7 @@ import {
 	TopDiv,
 	InfoDiv,
 	BottomDiv,
+	ContentDiv,
 	IconDiv,
 	IconItemButton,
 } from "./Feed.styles";
@@ -28,6 +32,7 @@ const Feed = ({ post, groupId, leaderName }) => {
 	const dispatch = useDispatch();
 
 	const { user } = useSelector((state) => state.auth);
+	const { openedModal } = useSelector((state) => state.ui);
 
 	const [isPostLiked, setIsPostLiked] = useState(post.isLiked);
 	const [postLikesCount, setPostLikesCount] = useState(post.likesCount);
@@ -59,7 +64,9 @@ const Feed = ({ post, groupId, leaderName }) => {
 		}
 	};
 
-	const handleLikeClick = () => {
+	const handleLikeClick = (e) => {
+		e.stopPropagation();
+
 		if (!isPostLiked) {
 			setIsPostLiked(true);
 			setPostLikesCount((prev) => prev + 1);
@@ -72,14 +79,20 @@ const Feed = ({ post, groupId, leaderName }) => {
 	};
 
 	return (
-		<FeedArticle key={post.postId}>
+		<FeedArticle
+			key={post.postId}
+			onClick={() => dispatch(openFeedDetailModal(post.postId))}
+		>
 			{user.nickname === post.author && (
 				<FeedOption
 					postId={post.postId}
 					groupId={groupId}
 					optionMenuRef={optionMenuRef}
 					isOptionOpen={isOptionOpen}
-					handleOptionClick={() => setIsOptionOpen((prev) => !prev)}
+					handleOptionClick={(e) => {
+						e.stopPropagation();
+						setIsOptionOpen((prev) => !prev);
+					}}
 				/>
 			)}
 			<TopDiv>
@@ -93,7 +106,10 @@ const Feed = ({ post, groupId, leaderName }) => {
 				</InfoDiv>
 			</TopDiv>
 			<BottomDiv>
-				<p>{post.content}</p>
+				<ContentDiv>
+					<p>{post.content}</p>
+				</ContentDiv>
+
 				<IconDiv>
 					<IconItemButton onClick={handleLikeClick}>
 						{isPostLiked ? <FillHeartIcon /> : <EmptyHeartIcon />}
@@ -105,6 +121,21 @@ const Feed = ({ post, groupId, leaderName }) => {
 					</IconItemButton>
 				</IconDiv>
 			</BottomDiv>
+
+			{openedModal === UI_TYPE.FEED_DETAIL_MODAL(post.postId) && (
+				<FeedDetailModal
+					groupId={groupId}
+					postId={post.postId}
+					author={post.author}
+					authorImage={post.authorImage}
+					content={post.content}
+					createdAt={useTimeStamp(post.createdAt)}
+					likeCount={postLikesCount}
+					isPostLiked={isPostLiked}
+					leaderName={leaderName}
+					handleLikeClick={handleLikeClick}
+				/>
+			)}
 		</FeedArticle>
 	);
 };

src/components/Common/Feed/Feed.styles.js

@@ -7,6 +7,7 @@ export const FeedArticle = styled.article`
 	border: 1px solid ${({ theme: { colors } }) => colors.btn_02};
 	padding: 24px 18px;
 	position: relative;
+	cursor: pointer;
 `;
 
 export const OptionDiv = styled.div`
@@ -19,6 +20,7 @@ export const OptionDiv = styled.div`
 export const OptionMenuDiv = styled.div`
 	position: absolute;
 	z-index: 2;
+	right: 0;
 
 	& > ul > li {
 		width: 60px;
@@ -78,7 +80,9 @@ export const BottomDiv = styled.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
+`;
 
+export const ContentDiv = styled.div`
 	& > p {
 		color: ${({ theme: { colors } }) => colors.text_03};
 		font-size: ${({ theme: { typography } }) => typography.size.s1};

src/components/Common/Feed/FeedComment/FeedComment.jsx

@@ -0,0 +1,56 @@
+import React, { useState, useRef } from "react";
+import { useSelector } from "react-redux";
+
+import {
+	CommentDiv,
+	CommentContentDiv,
+} from "@/components/Common/Feed/FeedComment/FeedComment.style";
+import FeedOption from "@/components/Common/Feed/FeedOption";
+import useOutsideClick from "@/hooks/useOutsideClick";
+import { useTimeStamp } from "@/hooks/useTimeStamp";
+
+const FeedComment = ({
+	commentId,
+	postId,
+	groupId,
+	author,
+	authorImage,
+	updatedAt,
+	content,
+	handleEditCommentClick,
+}) => {
+	const { user } = useSelector((state) => state.auth);
+
+	const [isOptionOpen, setIsOptionOpen] = useState(false);
+
+	const optionMenuRef = useRef();
+
+	useOutsideClick(optionMenuRef, () => setIsOptionOpen(false));
+
+	return (
+		<CommentDiv>
+			<img src={authorImage} alt="profileImg" />
+			<CommentContentDiv>
+				<h3>{author}</h3>
+				<h4>{useTimeStamp(updatedAt)}</h4>
+				<p>{content}</p>
+			</CommentContentDiv>
+
+			{user.nickname === author && (
+				<FeedOption
+					postId={postId}
+					groupId={groupId}
+					optionMenuRef={optionMenuRef}
+					isOptionOpen={isOptionOpen}
+					handleOptionClick={() => setIsOptionOpen((prev) => !prev)}
+					isComment
+					commentId={commentId}
+					content={content}
+					handleEditCommentClick={handleEditCommentClick}
+				/>
+			)}
+		</CommentDiv>
+	);
+};
+
+export default FeedComment;

src/components/Common/Feed/FeedComment/FeedComment.style.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const CommentDiv = styled.div`
+	padding: 24px 0;
+	display: flex;
+	gap: 10px;
+	border-bottom: 1px solid #d9d9d9;
+	position: relative;
+
+	& > img {
+		width: 58px;
+		height: 58px;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+`;
+
+export const CommentContentDiv = styled.div`
+	& > h3 {
+		font-size: 14px;
+		font-weight: ${({ theme: { typography } }) => typography.weight.medium};
+		color: ${({ theme: { colors } }) => colors.text_01};
+	}
+
+	& > h4 {
+		font-size: 12px;
+		font-weight: ${({ theme: { typography } }) => typography.weight.medium};
+		color: ${({ theme: { colors } }) => colors.text_02};
+		margin-top: 6px;
+	}
+
+	& > p {
+		font-size: 12px;
+		color: ${({ theme: { colors } }) => colors.text_03};
+		margin-top: 12px;
+	}
+`;

src/components/Common/Feed/FeedDetailModal/FeedDetailModal.jsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import FeedOption from "@/components/Common/Feed/FeedOption";
+import BaseModal from "@/components/Common/Modal/BaseModal";
+import {
+	CrownIcon,
+	CommentIcon,
+	EmptyHeartIcon,
+	FillHeartIcon,
+} from "@/constants/iconConstants";
+import {
+	getComments,
+	postComment,
+	putComment,
+} from "@/features/comment/comment-service";
+import useOutsideClick from "@/hooks/useOutsideClick";
+
+import {
+	ContainerDiv,
+	FeedDiv,
+	ProfileDiv,
+	ContentDiv,
+	CommentDiv,
+	CommentInputDiv,
+	CommentInputContentDiv,
+} from "./FeedDetailModal.style";
+import { IconDiv, IconItemButton } from "../Feed.styles";
+import FeedComment from "../FeedComment/FeedComment";
+
+const FeedDetailModal = ({
+	groupId,
+	postId,
+	author,
+	authorImage,
+	content,
+	createdAt,
+	likeCount,
+	isPostLiked,
+	leaderName,
+	handleLikeClick,
+}) => {
+	const dispatch = useDispatch();
+
+	const { comments } = useSelector((state) => state.comment);
+	const { user } = useSelector((state) => state.auth);
+
+	const [isOptionOpen, setIsOptionOpen] = useState(false);
+
+	const [commentContent, setCommentContent] = useState("");
+	const [commentId, setCommentId] = useState(0);
+	const [commentBtnText, setCommentBtnText] = useState("등록하기");
+
+	const optionMenuRef = useRef();
+
+	useOutsideClick(optionMenuRef, () => setIsOptionOpen(false));
+
+	const handleEditCommentClick = (editCommentId, prevContent) => {
+		setCommentId(editCommentId);
+		setCommentContent(prevContent);
+		setCommentBtnText("수정하기");
+	};
+
+	const handleCommentButton = () => {
+		if (commentBtnText === "등록하기") {
+			dispatch(postComment({ groupId, postId, content: commentContent }));
+			setCommentContent("");
+		} else {
+			dispatch(
+				putComment({ groupId, postId, commentId, content: commentContent }),
+			);
+			setCommentBtnText("등록하기");
+			setCommentContent("");
+			setCommentId(0);
+		}
+	};
+
+	useEffect(() => {
+		dispatch(getComments({ groupId, postId }));
+	}, []);
+
+	return (
+		<BaseModal>
+			<ContainerDiv>
+				<FeedDiv>
+					<ProfileDiv>
+						<img src={authorImage} alt="profileImg" />
+						<h3>
+							{author}
+							{author === leaderName && <CrownIcon />}
+						</h3>
+
+						{user.nickname === author && (
+							<FeedOption
+								postId={postId}
+								groupId={groupId}
+								optionMenuRef={optionMenuRef}
+								isOptionOpen={isOptionOpen}
+								handleOptionClick={() => setIsOptionOpen((prev) => !prev)}
+							/>
+						)}
+					</ProfileDiv>
+					<ContentDiv>
+						<p>{content}</p>
+						<span>{createdAt}</span>
+						<IconDiv>
+							<IconItemButton onClick={handleLikeClick}>
+								{isPostLiked ? <FillHeartIcon /> : <EmptyHeartIcon />}
+								<span>{likeCount}</span>
+							</IconItemButton>
+							<IconItemButton>
+								<CommentIcon />
+								<span>{comments.length}</span>
+							</IconItemButton>
+						</IconDiv>
+					</ContentDiv>
+				</FeedDiv>
+
+				<CommentDiv>
+					{comments.length !== 0 &&
+						comments.map((commentInfo) => (
+							<FeedComment
+								key={commentInfo.commentId}
+								commentId={commentInfo.commentId}
+								author={commentInfo.author}
+								authorImage={commentInfo.authorImage}
+								updatedAt={commentInfo.updatedAt}
+								content={commentInfo.content}
+								postId={postId}
+								groupId={groupId}
+								handleEditCommentClick={handleEditCommentClick}
+							/>
+						))}
+				</CommentDiv>
+
+				<CommentInputDiv>
+					<img src={authorImage} alt="profileImg" />
+					<CommentInputContentDiv>
+						<h3>{author}</h3>
+						<textarea
+							placeholder="댓글을 입력하세요"
+							value={commentContent}
+							onChange={(e) => setCommentContent(e.target.value)}
+						/>
+						<button type="button" onClick={handleCommentButton}>
+							{commentBtnText}
+						</button>
+					</CommentInputContentDiv>
+				</CommentInputDiv>
+			</ContainerDiv>
+		</BaseModal>
+	);
+};
+
+export default FeedDetailModal;