diff --git a/src/components/Common/Feed/Feed.jsx b/src/components/Common/Feed/Feed.jsx
index 0b843b7ef..22ab281f0 100644
--- a/src/components/Common/Feed/Feed.jsx
+++ b/src/components/Common/Feed/Feed.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 import FeedOption from "@/components/Common/Feed/FeedOption";
 import {
@@ -12,6 +13,7 @@ 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,11 +22,12 @@ import {
 	TopDiv,
 	InfoDiv,
 	BottomDiv,
+	ContentDiv,
 	IconDiv,
 	IconItemButton,
 } from "./Feed.styles";
 
-const Feed = ({ post, groupId, leaderName }) => {
+const Feed = ({ post, groupId, leaderId, isGroupPage }) => {
 	const dispatch = useDispatch();
 
 	const { user } = useSelector((state) => state.auth);
@@ -35,6 +38,8 @@ const Feed = ({ post, groupId, leaderName }) => {
 
 	const optionMenuRef = useRef();
 
+	const navigate = useNavigate();
+
 	useOutsideClick(optionMenuRef, () => setIsOptionOpen(false));
 
 	const likeClick = async () => {
@@ -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,23 @@ const Feed = ({ post, groupId, leaderName }) => {
 	};
 
 	return (
-		<FeedArticle key={post.postId}>
+		<FeedArticle
+			onClick={() =>
+				isGroupPage
+					? dispatch(openFeedDetailModal(post.postId))
+					: navigate(`/group/${groupId}`)
+			}
+		>
 			{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>
@@ -87,13 +103,18 @@ const Feed = ({ post, groupId, leaderName }) => {
 				<InfoDiv>
 					<h3>
 						{post.author}
-						{post.author === leaderName && <CrownIcon />}
+
+						{/* 게시글 작성자 id 비교 필요 */}
+						{post.author === leaderId && <CrownIcon />}
 					</h3>
 					<h4>{useTimeStamp(post.createdAt)}</h4>
 				</InfoDiv>
 			</TopDiv>
 			<BottomDiv>
-				<p>{post.content}</p>
+				<ContentDiv>
+					<p>{post.content}</p>
+				</ContentDiv>
+
 				<IconDiv>
 					<IconItemButton onClick={handleLikeClick}>
 						{isPostLiked ? <FillHeartIcon /> : <EmptyHeartIcon />}
diff --git a/src/components/Common/Feed/Feed.styles.js b/src/components/Common/Feed/Feed.styles.js
index fdf89e464..feb103c9e 100644
--- a/src/components/Common/Feed/Feed.styles.js
+++ b/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;
@@ -35,6 +37,12 @@ export const OptionMenuDiv = styled.div`
 			border-bottom: none;
 			color: ${({ theme: { colors } }) => colors.text_01};
 		}
+
+		& > button {
+			width: 100%;
+			height: 100%;
+			text-align: center;
+		}
 	}
 `;
 
@@ -78,7 +86,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};
diff --git a/src/components/Common/Feed/FeedComment/FeedComment.jsx b/src/components/Common/Feed/FeedComment/FeedComment.jsx
new file mode 100644
index 000000000..55b2eef67
--- /dev/null
+++ b/src/components/Common/Feed/FeedComment/FeedComment.jsx
@@ -0,0 +1,110 @@
+import React, { useState, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+	CommentDiv,
+	CommentContentDiv,
+	EditContentDiv,
+	ButtonDiv,
+} from "@/components/Common/Feed/FeedComment/FeedComment.style";
+import FeedOption from "@/components/Common/Feed/FeedOption";
+import { putComment } from "@/features/comment/comment-service";
+import useOutsideClick from "@/hooks/useOutsideClick";
+import { useTimeStamp } from "@/hooks/useTimeStamp";
+
+const FeedComment = ({
+	commentId,
+	postId,
+	groupId,
+	author,
+	authorImage,
+	updatedAt,
+	content,
+}) => {
+	const dispatch = useDispatch();
+
+	const { user } = useSelector((state) => state.auth);
+
+	const [isOptionOpen, setIsOptionOpen] = useState(false);
+	const [newContent, setNewContent] = useState(content);
+	const [isEdit, setIsEdit] = useState(false);
+
+	const optionMenuRef = useRef();
+	const commentBoxRef = useRef(null);
+
+	useOutsideClick(optionMenuRef, () => setIsOptionOpen(false));
+
+	const handleEditCommentMenuClick = () => {
+		commentBoxRef.current.scrollIntoView({
+			behavior: "smooth",
+			block: "center",
+		});
+
+		setIsOptionOpen(false);
+		setIsEdit(true);
+	};
+
+	const handleEditComment = () => {
+		dispatch(
+			putComment({
+				groupId,
+				postId,
+				commentId,
+				content: newContent,
+			}),
+			setIsEdit(false),
+		);
+	};
+
+	return (
+		<CommentDiv>
+			<img src={authorImage} alt="profileImg" />
+			<CommentContentDiv ref={commentBoxRef}>
+				<h3>{author}</h3>
+				<h4>{useTimeStamp(updatedAt)}</h4>
+
+				{isEdit ? (
+					<EditContentDiv>
+						<textarea
+							value={newContent}
+							onChange={(e) => setNewContent(e.target.value)}
+						/>
+						<ButtonDiv>
+							<button
+								type="button"
+								className="cancelBtn"
+								onClick={() => setIsEdit(false)}
+							>
+								취소
+							</button>
+							<button
+								type="submit"
+								disabled={content === newContent}
+								onClick={handleEditComment}
+							>
+								수정
+							</button>
+						</ButtonDiv>
+					</EditContentDiv>
+				) : (
+					<p>{content}</p>
+				)}
+			</CommentContentDiv>
+
+			{user.nickname === author && (
+				<FeedOption
+					postId={postId}
+					groupId={groupId}
+					optionMenuRef={optionMenuRef}
+					isOptionOpen={isOptionOpen}
+					handleOptionClick={() => setIsOptionOpen((prev) => !prev)}
+					isComment
+					commentId={commentId}
+					handleEditCommentClick={handleEditCommentMenuClick}
+				/>
+			)}
+		</CommentDiv>
+	);
+};
+
+export default FeedComment;
diff --git a/src/components/Common/Feed/FeedComment/FeedComment.style.js b/src/components/Common/Feed/FeedComment/FeedComment.style.js
new file mode 100644
index 000000000..776465050
--- /dev/null
+++ b/src/components/Common/Feed/FeedComment/FeedComment.style.js
@@ -0,0 +1,93 @@
+import styled from "styled-components";
+
+export const CommentDiv = styled.div`
+	padding: 24px 0;
+	display: flex;
+	gap: 10px;
+	border-bottom: 1px solid #d9d9d9;
+	position: relative;
+
+	&:last-of-type {
+		border-bottom: none;
+	}
+
+	& > img {
+		width: 58px;
+		height: 58px;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+`;
+
+export const CommentContentDiv = styled.div`
+	width: 100%;
+
+	& > 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;
+	}
+`;
+
+export const EditContentDiv = styled.div`
+	display: flex;
+	flex-direction: column;
+
+	& > textarea {
+		margin-top: 10px;
+		height: 80px;
+		resize: none;
+		border: 1px solid ${({ theme: { colors } }) => colors.text_01};
+		outline: none;
+		border-radius: 10px;
+		padding: 10px 18px;
+		font-family: Inter;
+		font-size: 12px;
+		color: ${({ theme: { colors } }) => colors.text_03};
+		width: 100%;
+	}
+`;
+
+export const ButtonDiv = styled.div`
+	display: flex;
+	gap: 10px;
+	align-self: flex-end;
+
+	& > button {
+		margin-top: 20px;
+		align-self: flex-end;
+		width: 102px;
+		height: 40px;
+		background-color: ${({ theme: { colors } }) => colors.primary};
+		color: ${({ theme: { colors } }) => colors.white};
+		text-align: center;
+		font-size: 14px;
+		font-weight: ${({ theme: { typography } }) => typography.weight.medium};
+		border-radius: 5px;
+		cursor: pointer;
+
+		&:disabled {
+			cursor: not-allowed;
+			background-color: ${({ theme: { colors } }) => colors.btn_02};
+		}
+
+		&.cancelBtn {
+			background-color: ${({ theme: { colors } }) => colors.white};
+			color: ${({ theme: { colors } }) => colors.primary};
+			border: 1px solid ${({ theme: { colors } }) => colors.primary_light};
+		}
+	}
+`;
diff --git a/src/components/Common/Feed/FeedDetailModal/FeedDetailModal.jsx b/src/components/Common/Feed/FeedDetailModal/FeedDetailModal.jsx
new file mode 100644
index 000000000..cbd378c5b
--- /dev/null
+++ b/src/components/Common/Feed/FeedDetailModal/FeedDetailModal.jsx
@@ -0,0 +1,169 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import FeedOption from "@/components/Common/Feed/FeedOption";
+import FormModal from "@/components/Common/Modal/FormModal/FormModal";
+import {
+	CrownIcon,
+	CommentIcon,
+	EmptyHeartIcon,
+	FillHeartIcon,
+} from "@/constants/iconConstants";
+import { getComments, postComment } from "@/features/comment/comment-service";
+import { resetComments } from "@/features/comment/comment-slice";
+import {
+	getGroupPostInfo,
+	cancelLikeGroupPost,
+	likeGroupPost,
+} from "@/features/post/post-service";
+import { resetPostInfo } from "@/features/post/post-slice";
+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, leaderId }) => {
+	const dispatch = useDispatch();
+
+	const { comments } = useSelector((state) => state.comment);
+	const { user } = useSelector((state) => state.auth);
+	const { feedDetailModalId } = useSelector((state) => state.ui);
+	const { postInfo } = useSelector((state) => state.post);
+
+	const [isOptionOpen, setIsOptionOpen] = useState(false);
+	const [commentContent, setCommentContent] = useState("");
+
+	const optionMenuRef = useRef();
+
+	useOutsideClick(optionMenuRef, () => setIsOptionOpen(false));
+
+	const handleLikeClick = () => {
+		if (!postInfo.post.isLiked) {
+			dispatch(
+				likeGroupPost({ postGroupId: groupId, postId: postInfo.post.postId }),
+			);
+		} else {
+			dispatch(
+				cancelLikeGroupPost({
+					postGroupId: groupId,
+					postId: postInfo.post.postId,
+				}),
+			);
+		}
+	};
+
+	const handleAddComment = () => {
+		dispatch(
+			postComment({
+				groupId,
+				postId: feedDetailModalId,
+				content: commentContent,
+			}),
+		);
+		setCommentContent("");
+	};
+
+	useEffect(() => {
+		dispatch(getComments({ groupId, postId: feedDetailModalId }));
+		dispatch(getGroupPostInfo({ groupId, postId: feedDetailModalId }));
+
+		return () => {
+			dispatch(resetComments());
+			dispatch(resetPostInfo());
+		};
+	}, []);
+
+	if (!postInfo) {
+		return <div>로딩중...</div>;
+	}
+
+	return (
+		<FormModal isEmpty={commentContent.trim() === ""}>
+			<ContainerDiv>
+				<FeedDiv>
+					<ProfileDiv>
+						<img
+							src={postInfo.post.authorImage}
+							alt={`${postInfo.post.author}님의 프로필 이미지`}
+						/>
+						<h3>
+							{postInfo.post.author}
+							{/* 코멘트 작성자 id 필요 */}
+							{postInfo.post.author === leaderId && <CrownIcon />}
+						</h3>
+
+						{postInfo.post.isMine && (
+							<FeedOption
+								postId={feedDetailModalId}
+								groupId={groupId}
+								optionMenuRef={optionMenuRef}
+								isOptionOpen={isOptionOpen}
+								handleOptionClick={() => setIsOptionOpen((prev) => !prev)}
+							/>
+						)}
+					</ProfileDiv>
+					<ContentDiv>
+						<p>{postInfo.post.content}</p>
+						<span>날짜 추가 예정</span>
+						<IconDiv>
+							<IconItemButton onClick={handleLikeClick}>
+								{postInfo.post.isLiked ? <FillHeartIcon /> : <EmptyHeartIcon />}
+								<span>{postInfo.post.likesCount}</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={postInfo.post.postId}
+								groupId={groupId}
+							/>
+						))}
+				</CommentDiv>
+
+				<CommentInputDiv>
+					<img src={user.profileImage} alt="profileImg" />
+					<CommentInputContentDiv>
+						<h3>{user.nickname}</h3>
+						<textarea
+							placeholder="댓글을 입력하세요"
+							value={commentContent}
+							onChange={(e) => setCommentContent(e.target.value)}
+						/>
+						<button
+							type="submit"
+							disabled={commentContent === ""}
+							onClick={handleAddComment}
+						>
+							등록
+						</button>
+					</CommentInputContentDiv>
+				</CommentInputDiv>
+			</ContainerDiv>
+		</FormModal>
+	);
+};
+
+export default FeedDetailModal;
diff --git a/src/components/Common/Feed/FeedDetailModal/FeedDetailModal.style.js b/src/components/Common/Feed/FeedDetailModal/FeedDetailModal.style.js
new file mode 100644
index 000000000..432842fbf
--- /dev/null
+++ b/src/components/Common/Feed/FeedDetailModal/FeedDetailModal.style.js
@@ -0,0 +1,117 @@
+import styled from "styled-components";
+
+export const ContainerDiv = styled.div`
+	margin-top: 20px;
+	padding: 0 34px;
+	max-height: 728px;
+`;
+
+export const FeedDiv = styled.div`
+	padding-bottom: 24px;
+	border-bottom: 1px solid ${({ theme: { colors } }) => colors.text_03};
+	position: relative;
+`;
+
+export const ProfileDiv = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 10px;
+
+	& > img {
+		width: 58px;
+		height: 58px;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+
+	& > h3 {
+		font-weight: ${({ theme: { typography } }) => typography.weight.medium};
+		color: ${({ theme: { colors } }) => colors.text_01};
+
+		& > svg {
+			margin-left: 4px;
+		}
+	}
+`;
+
+export const ContentDiv = styled.div`
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	& > p {
+		margin-top: 20px;
+		font-size: 18px;
+		color: ${({ theme: { colors } }) => colors.text_01};
+		width: 1020px;
+	}
+`;
+
+export const CommentDiv = styled.div`
+	max-height: 322px;
+	overflow-y: scroll;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+`;
+
+export const CommentInputDiv = styled.div`
+	padding-top: 24px;
+	display: flex;
+	gap: 10px;
+	border-top: 1px solid ${({ theme: { colors } }) => colors.text_03};
+
+	& > img {
+		width: 58px;
+		height: 58px;
+		border-radius: 50%;
+		object-fit: cover;
+	}
+`;
+
+export const CommentInputContentDiv = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	& > h3 {
+		font-size: 14px;
+		font-weight: ${({ theme: { typography } }) => typography.weight.medium};
+		color: ${({ theme: { colors } }) => colors.text_01};
+	}
+
+	& > textarea {
+		margin-top: 10px;
+		height: 120px;
+		resize: none;
+		border: 1px solid ${({ theme: { colors } }) => colors.text_01};
+		outline: none;
+		border-radius: 10px;
+		padding: 10px 18px;
+		font-family: Inter;
+		font-size: 12px;
+		color: ${({ theme: { colors } }) => colors.text_03};
+	}
+
+	& > button {
+		margin-top: 20px;
+		align-self: flex-end;
+		width: 132px;
+		height: 40px;
+		background-color: ${({ theme: { colors } }) => colors.primary};
+		color: ${({ theme: { colors } }) => colors.white};
+		text-align: center;
+		font-size: 14px;
+		font-weight: ${({ theme: { typography } }) => typography.weight.medium};
+		border-radius: 5px;
+		cursor: pointer;
+
+		&:disabled {
+			cursor: not-allowed;
+			background-color: ${({ theme: { colors } }) => colors.btn_02};
+		}
+	}
+`;
diff --git a/src/components/Common/Feed/FeedOption.jsx b/src/components/Common/Feed/FeedOption.jsx
index aa926c4cc..934f7f73a 100644
--- a/src/components/Common/Feed/FeedOption.jsx
+++ b/src/components/Common/Feed/FeedOption.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useDispatch } from "react-redux";
 
 import { OptionThreeDotIcon } from "@/constants/iconConstants";
+import { deleteComment } from "@/features/comment/comment-service";
 import { deleteGroupPost } from "@/features/post/post-service";
 
 import { OptionDiv, OptionMenuDiv } from "./Feed.styles";
@@ -12,13 +13,20 @@ const FeedOption = ({
 	optionMenuRef,
 	isOptionOpen,
 	handleOptionClick,
+	isComment,
+	commentId,
+	handleEditCommentClick,
 }) => {
 	const dispatch = useDispatch();
 
-	const deletePost = () => {
+	const handleDeletePost = () => {
 		dispatch(deleteGroupPost({ postGroupId: groupId, postId }));
 	};
 
+	const handleDeleteComment = () => {
+		dispatch(deleteComment({ groupId, postId, commentId }));
+	};
+
 	return (
 		<OptionDiv ref={optionMenuRef}>
 			<OptionThreeDotIcon onClick={handleOptionClick} />
@@ -27,10 +35,18 @@ const FeedOption = ({
 				<OptionMenuDiv>
 					<ul>
 						<li>
-							<button type="button">수정</button>
+							<button
+								type="button"
+								onClick={isComment && handleEditCommentClick}
+							>
+								수정
+							</button>
 						</li>
 						<li>
-							<button type="button" onClick={deletePost}>
+							<button
+								type="button"
+								onClick={isComment ? handleDeleteComment : handleDeletePost}
+							>
 								삭제
 							</button>
 						</li>
diff --git a/src/components/Common/GroupModal/GroupDelegateModal/GroupDelegateModal.jsx b/src/components/Common/GroupModal/GroupDelegateModal/GroupDelegateModal.jsx
index c7c0452e4..46a247fd6 100644
--- a/src/components/Common/GroupModal/GroupDelegateModal/GroupDelegateModal.jsx
+++ b/src/components/Common/GroupModal/GroupDelegateModal/GroupDelegateModal.jsx
@@ -25,7 +25,7 @@ const SelectBox = ({ name, isSelected, onClick }) => (
 	</SelectBoxLi>
 );
 
-const GroupDelegateModal = ({ groupInfo, groupMembers }) => {
+const GroupDelegateModal = ({ groupInfo }) => {
 	const dispatch = useDispatch();
 
 	const navigate = useNavigate();
@@ -33,6 +33,7 @@ const GroupDelegateModal = ({ groupInfo, groupMembers }) => {
 	const [selectedMemberId, setSelectedMemberId] = useState(null);
 
 	const groupDetailInfo = groupInfo.information.group;
+	const groupMembers = groupInfo.information.memberInfo;
 
 	const memberList = groupMembers.filter(
 		(info) => info.userId !== groupDetailInfo.leader,
diff --git a/src/components/Common/GroupModal/GroupModalTrigger/GroupModalTrigger.jsx b/src/components/Common/GroupModal/GroupModalTrigger/GroupModalTrigger.jsx
new file mode 100644
index 000000000..64a6d3194
--- /dev/null
+++ b/src/components/Common/GroupModal/GroupModalTrigger/GroupModalTrigger.jsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useSearchParams } from "react-router-dom";
+
+import FeedDetailModal from "@/components/Common/Feed/FeedDetailModal/FeedDetailModal";
+import DeleteMemberWarningModal from "@/components/Common/GroupModal/DeleteMemberWarningModal/DeleteMemberWarningModal";
+import GroupDelegateModal from "@/components/Common/GroupModal/GroupDelegateModal/GroupDelegateModal";
+import GroupDeleteModal from "@/components/Common/GroupModal/GroupDeleteModal/GroupDeleteModal";
+import GroupExitModal from "@/components/Common/GroupModal/GroupExitModal/GroupExitModal";
+import GroupJoinModal from "@/components/Common/GroupModal/GroupJoinModal/GroupJoinModal";
+import MemberModal from "@/components/Group/GroupMember/MemberModal/MemberModal";
+import MemberRequestModal from "@/components/Group/GroupMember/MemberModal/MemberRequestModal";
+import { UI_TYPE } from "@/constants/uiConstants";
+
+const GroupModalTrigger = ({
+	groupId,
+	leaderId,
+	groupInfo,
+	groupMemberList,
+	groupRequestMemberList,
+}) => {
+	const { openedModal } = useSelector((state) => state.ui);
+
+	const [searchParams] = useSearchParams();
+
+	const inviteLink = searchParams.get("invite");
+
+	return (
+		<>
+			{openedModal === UI_TYPE.JOIN_GROUP && (
+				<GroupJoinModal inviteLink={inviteLink} />
+			)}
+
+			{openedModal === UI_TYPE.FEED_DETAIL_MODAL && (
+				<FeedDetailModal groupId={groupId} leaderId={leaderId} />
+			)}
+
+			{openedModal === UI_TYPE.EXIT_GROUP && <GroupExitModal />}
+
+			{openedModal === UI_TYPE.DELETE_GROUP && (
+				<GroupDeleteModal groupInfo={groupInfo} />
+			)}
+
+			{openedModal === UI_TYPE.DELETE_MEMBER_WARNING_MODAL && (
+				<DeleteMemberWarningModal groupId={groupId} />
+			)}
+
+			{openedModal === UI_TYPE.MEMBER_MODAL && (
+				<MemberModal memberList={groupMemberList} />
+			)}
+
+			{openedModal === UI_TYPE.MEMBER_REQUEST_MODAL && (
+				<MemberRequestModal
+					requestMemberList={groupRequestMemberList}
+					groupId={groupId}
+				/>
+			)}
+
+			{openedModal === UI_TYPE.DELEGATE_GROUP && (
+				<GroupDelegateModal groupInfo={groupInfo} />
+			)}
+		</>
+	);
+};
+
+export default GroupModalTrigger;
diff --git a/src/components/Group/GroupFeed/GroupFeed.jsx b/src/components/Group/GroupFeed/GroupFeed.jsx
index f430ffc34..2d1fedf9b 100644
--- a/src/components/Group/GroupFeed/GroupFeed.jsx
+++ b/src/components/Group/GroupFeed/GroupFeed.jsx
@@ -9,7 +9,7 @@ import { getGroupAllPosts } from "@/features/post/post-service";
 
 import { FeedSection } from "./GroupFeed.styles";
 
-const GroupFeed = ({ groupId, leaderName }) => {
+const GroupFeed = ({ groupId, leaderId }) => {
 	const dispatch = useDispatch();
 
 	const { allGroupPosts, allGroupPostsIsEnd } = useSelector(
@@ -45,8 +45,9 @@ const GroupFeed = ({ groupId, leaderName }) => {
 				<Feed
 					key={post.postId}
 					post={post}
-					leaderName={leaderName}
+					leaderId={leaderId}
 					groupId={groupId}
+					isGroupPage
 				/>
 			))}
 			<ScrollBottom onView={handleOnView} />
diff --git a/src/components/Group/GroupManagement/GroupManagementProfile/GroupManagementProfile.jsx b/src/components/Group/GroupManagement/GroupManagementProfile/GroupManagementProfile.jsx
index 1a73ec994..350f159e0 100644
--- a/src/components/Group/GroupManagement/GroupManagementProfile/GroupManagementProfile.jsx
+++ b/src/components/Group/GroupManagement/GroupManagementProfile/GroupManagementProfile.jsx
@@ -1,10 +1,7 @@
 import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
-import GroupDeleteModal from "@/components/Common/GroupModal/GroupDeleteModal/GroupDeleteModal";
-import GroupExitModal from "@/components/Common/GroupModal/GroupExitModal/GroupExitModal";
 import ToggleButton from "@/components/Common/ToggleButton/ToggleButton";
-import { UI_TYPE } from "@/constants/uiConstants";
 import {
 	changeGroupPublicOption,
 	updateGroupProfile,
@@ -30,8 +27,6 @@ import {
 const GroupManagementProfile = ({ groupInfo }) => {
 	const dispatch = useDispatch();
 
-	const { openedModal } = useSelector((state) => state.ui);
-
 	const { groupId, isPublicGroup } = groupInfo.information.group;
 	const memberLength = groupInfo.information.memberInfo.length;
 
@@ -133,7 +128,7 @@ const GroupManagementProfile = ({ groupInfo }) => {
 			</SaveButtonDiv>
 			<DividerHr />
 			<BottomButtonDiv>
-				{memberLength > 1 && (
+				{memberLength < 2 && (
 					<ExitButton onClick={() => dispatch(openExitGroupModal())}>
 						그룹 나가기
 					</ExitButton>
@@ -142,10 +137,6 @@ const GroupManagementProfile = ({ groupInfo }) => {
 					그룹 삭제
 				</DeleteButton>
 			</BottomButtonDiv>
-			{openedModal === UI_TYPE.EXIT_GROUP && <GroupExitModal />}
-			{openedModal === UI_TYPE.DELETE_GROUP && (
-				<GroupDeleteModal groupInfo={groupInfo} />
-			)}
 		</>
 	);
 };
diff --git a/src/components/Group/GroupManagement/GroupMemberManagement/GroupMemberManagement.jsx b/src/components/Group/GroupManagement/GroupMemberManagement/GroupMemberManagement.jsx
index 52c027e57..dc558c86c 100644
--- a/src/components/Group/GroupManagement/GroupMemberManagement/GroupMemberManagement.jsx
+++ b/src/components/Group/GroupManagement/GroupMemberManagement/GroupMemberManagement.jsx
@@ -1,12 +1,10 @@
 import React, { useState, useRef } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 
-import DeleteMemberWarningModal from "@/components/Common/GroupModal/DeleteMemberWarningModal/DeleteMemberWarningModal";
 import { ACCESS_LEVEL_DATA } from "@/constants/accessConstants";
 import { InfoIcon, AccessArrowIcon } from "@/constants/iconConstants";
-import { UI_TYPE } from "@/constants/uiConstants";
 import { changeAccessLevel } from "@/features/group/group-service";
 import { openDeleteMemberWarningModal } from "@/features/ui/ui-slice";
 import useOutsideClick from "@/hooks/useOutsideClick";
@@ -33,8 +31,6 @@ const groupMemberManagementTitleData = [
 const GroupMemberManagement = ({ groupId, memberList }) => {
 	const dispatch = useDispatch();
 
-	const { openedModal } = useSelector((state) => state.ui);
-
 	const [isAccessInfoOpen, setIsAccessInfoOpen] = useState(false);
 	const [isCommentListOpen, setIsCommentListOpen] = useState(false);
 
@@ -177,9 +173,6 @@ const GroupMemberManagement = ({ groupId, memberList }) => {
 							<span>
 								<button
 									type="button"
-									// onClick={() => {
-									// 	deleteMember(memberInfo.member.userId);
-									// }}
 									onClick={() =>
 										dispatch(openDeleteMemberWarningModal(memberInfo))
 									}
@@ -190,9 +183,6 @@ const GroupMemberManagement = ({ groupId, memberList }) => {
 						</MemberLi>
 					</MemberUl>
 				))}
-			{openedModal === UI_TYPE.DELETE_MEMBER_WARNING_MODAL && (
-				<DeleteMemberWarningModal groupId={groupId} />
-			)}
 		</>
 	);
 };
diff --git a/src/components/Group/GroupMember/MemberList.jsx b/src/components/Group/GroupMember/MemberList.jsx
index 67fc2bb3e..0678fc732 100644
--- a/src/components/Group/GroupMember/MemberList.jsx
+++ b/src/components/Group/GroupMember/MemberList.jsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { CrownIcon } from "@/constants/iconConstants";
-import { UI_TYPE } from "@/constants/uiConstants";
 import { openMemberModal } from "@/features/ui/ui-slice";
 
 import {
@@ -12,13 +11,10 @@ import {
 	MemberMoreSpan,
 	MemberUl,
 } from "./GroupMember.Shared.styles";
-import MemberModal from "./MemberModal/MemberModal";
 
 const MemberList = ({ leaderId, groupMemberList }) => {
 	const dispatch = useDispatch();
 
-	const { openedModal } = useSelector((state) => state.ui);
-
 	return (
 		<MemberInnerDiv>
 			<MemberTitleDiv>
@@ -41,10 +37,6 @@ const MemberList = ({ leaderId, groupMemberList }) => {
 					</li>
 				))}
 			</MemberUl>
-
-			{openedModal === UI_TYPE.MEMBER_MODAL && (
-				<MemberModal memberList={groupMemberList} />
-			)}
 		</MemberInnerDiv>
 	);
 };
diff --git a/src/components/Group/GroupMember/MemberRequestList.jsx b/src/components/Group/GroupMember/MemberRequestList.jsx
index b807edfef..4c1dc01c9 100644
--- a/src/components/Group/GroupMember/MemberRequestList.jsx
+++ b/src/components/Group/GroupMember/MemberRequestList.jsx
@@ -1,8 +1,7 @@
 import React from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 
 import { RequestCheckIcon, RequestCloseIcon } from "@/constants/iconConstants";
-import { UI_TYPE } from "@/constants/uiConstants";
 import {
 	approveGroupJoin,
 	rejectGroupJoin,
@@ -17,13 +16,10 @@ import {
 	MemberUl,
 } from "./GroupMember.Shared.styles";
 import { ButtonDiv, ButtonInnerDiv } from "./GroupMember.styles";
-import MemberRequestModal from "./MemberModal/MemberRequestModal";
 
 const MemberRequestList = ({ groupId, groupRequestMemberList }) => {
 	const dispatch = useDispatch();
 
-	const { openedModal } = useSelector((state) => state.ui);
-
 	const approveRequest = (userId) => {
 		dispatch(approveGroupJoin({ groupId, userId }));
 	};
@@ -73,13 +69,6 @@ const MemberRequestList = ({ groupId, groupRequestMemberList }) => {
 						</li>
 					))}
 				</MemberUl>
-
-				{openedModal === UI_TYPE.MEMBER_REQUEST_MODAL && (
-					<MemberRequestModal
-						requestMemberList={groupRequestMemberList}
-						groupId={groupId}
-					/>
-				)}
 			</MemberInnerDiv>
 			<hr />
 		</>
diff --git a/src/components/Group/GroupProfile/GroupProfileButton.jsx b/src/components/Group/GroupProfile/GroupProfileButton.jsx
index 01db6be4c..a49d6e14f 100644
--- a/src/components/Group/GroupProfile/GroupProfileButton.jsx
+++ b/src/components/Group/GroupProfile/GroupProfileButton.jsx
@@ -1,10 +1,8 @@
 import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
-import GroupDelegateModal from "@/components/Common/GroupModal/GroupDelegateModal/GroupDelegateModal";
 import { AddIcon } from "@/constants/iconConstants";
-import { UI_TYPE } from "@/constants/uiConstants";
 import { changeRequestGroupJoin } from "@/features/group/group-service";
 import { openDelegateGroupModal } from "@/features/ui/ui-slice";
 
@@ -25,8 +23,6 @@ const GroupProfileButton = ({
 }) => {
 	const dispatch = useDispatch();
 
-	const { openedModal } = useSelector((state) => state.ui);
-
 	const navigate = useNavigate();
 
 	const [isGroupInviteLinkOpen, setIsGroupInviteLinkOpen] = useState(false);
@@ -57,13 +53,6 @@ const GroupProfileButton = ({
 						그룹장 위임
 					</ProfileWhiteButton>
 				)}
-
-				{openedModal === UI_TYPE.DELEGATE_GROUP && (
-					<GroupDelegateModal
-						groupInfo={groupInfo}
-						groupMembers={groupInfo.information.memberInfo}
-					/>
-				)}
 			</ProfileButtonDiv>
 		);
 	}
diff --git a/src/constants/uiConstants.js b/src/constants/uiConstants.js
index 08080c0e3..b6633d992 100644
--- a/src/constants/uiConstants.js
+++ b/src/constants/uiConstants.js
@@ -12,6 +12,7 @@ export const UI_TYPE = {
 	MEMBER_REQUEST_MODAL: "MEMBER_REQUEST_MODAL",
 	MEMBER_MODAL: "MEMBER_MODAL",
 	DELETE_MEMBER_WARNING_MODAL: "DELETE_MEMBER_WARNING_MODAL",
+	FEED_DETAIL_MODAL: `FEED_DETAIL_MODAL`,
 };
 
 export const SCHEDULE_MODAL_TYPE = {
diff --git a/src/features/comment/comment-service.js b/src/features/comment/comment-service.js
new file mode 100644
index 000000000..91fa77c21
--- /dev/null
+++ b/src/features/comment/comment-service.js
@@ -0,0 +1,65 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+
+import commonThunk from "../commonThunk";
+
+export const getComments = createAsyncThunk(
+	"comment/getComments",
+	async ({ groupId, postId }, thunkAPI) => {
+		const data = await commonThunk(
+			{
+				method: "GET",
+				url: `/api/group/${groupId}/post/${postId}/comment`,
+				successCode: 200,
+			},
+			thunkAPI,
+		);
+		return data;
+	},
+);
+
+export const postComment = createAsyncThunk(
+	"comment/postComment",
+	async ({ groupId, postId, content }, thunkAPI) => {
+		const data = await commonThunk(
+			{
+				method: "POST",
+				url: `/api/group/${groupId}/post/${postId}/comment`,
+				data: { content },
+				successCode: 201,
+			},
+			thunkAPI,
+		);
+		return data;
+	},
+);
+
+export const deleteComment = createAsyncThunk(
+	"comment/deleteComment",
+	async ({ groupId, postId, commentId }, thunkAPI) => {
+		const data = await commonThunk(
+			{
+				method: "DELETE",
+				url: `/api/group/${groupId}/post/${postId}/comment/${commentId}`,
+				successCode: 204,
+			},
+			thunkAPI,
+		);
+		return data;
+	},
+);
+
+export const putComment = createAsyncThunk(
+	"comment/putComment",
+	async ({ groupId, postId, commentId, content }, thunkAPI) => {
+		const data = await commonThunk(
+			{
+				method: "PUT",
+				url: `/api/group/${groupId}/post/${postId}/comment/${commentId}`,
+				data: { content },
+				successCode: 200,
+			},
+			thunkAPI,
+		);
+		return data;
+	},
+);
diff --git a/src/features/comment/comment-slice.js b/src/features/comment/comment-slice.js
new file mode 100644
index 000000000..61c9acf45
--- /dev/null
+++ b/src/features/comment/comment-slice.js
@@ -0,0 +1,49 @@
+import { toast } from "react-toastify";
+
+import { createSlice } from "@reduxjs/toolkit";
+
+import {
+	getComments,
+	deleteComment,
+	putComment,
+	postComment,
+} from "./comment-service";
+
+const initialState = {
+	comments: [],
+};
+
+const commentSlice = createSlice({
+	name: "comment",
+	initialState,
+	reducers: {
+		resetComments: (state) => {
+			state.comments = [];
+		},
+	},
+	extraReducers: (builder) => {
+		builder
+			.addCase(getComments.fulfilled, (state, { payload }) => {
+				state.comments = payload.comment;
+			})
+			.addCase(postComment.fulfilled, (state, { payload }) => {
+				state.comments.push(payload);
+			})
+			.addCase(deleteComment.fulfilled, (state, { meta: { arg } }) => {
+				state.comments = state.comments.filter(
+					(prev) => prev.commentId !== arg.commentId,
+				);
+				toast.success("댓글이 삭제되었습니다.");
+			})
+			.addCase(putComment.fulfilled, (state, { payload }) => {
+				state.comments[
+					state.comments.findIndex((el) => el.commentId === payload.commentId)
+				].content = payload.content;
+				toast.success("댓글이 수정되었습니다.");
+			});
+	},
+});
+
+export const { resetComments } = commentSlice.actions;
+
+export default commentSlice.reducer;
diff --git a/src/features/post/post-slice.js b/src/features/post/post-slice.js
index baa92ef07..27d849b4b 100644
--- a/src/features/post/post-slice.js
+++ b/src/features/post/post-slice.js
@@ -32,6 +32,9 @@ const postSlice = createSlice({
 			state.allGroupPostslastRecordId = 0;
 			state.allGroupPostsIsEnd = false;
 		},
+		resetPostInfo: (state) => {
+			state.postInfo = null;
+		},
 	},
 	extraReducers: (bulider) => {
 		bulider
@@ -61,9 +64,13 @@ const postSlice = createSlice({
 				}
 			})
 			.addCase(likeGroupPost.fulfilled, (state) => {
+				state.postInfo.post.likesCount += 1;
+				state.postInfo.post.isLiked = true;
 				state.isLoading = false;
 			})
 			.addCase(cancelLikeGroupPost.fulfilled, (state) => {
+				state.postInfo.post.likesCount -= 1;
+				state.postInfo.post.isLiked = false;
 				state.isLoading = false;
 			})
 			.addCase(deleteGroupPost.fulfilled, (state, { meta: { arg: id } }) => {
@@ -105,6 +112,6 @@ const postSlice = createSlice({
 	},
 });
 
-export const { resetPostStateForGroupPage } = postSlice.actions;
+export const { resetPostStateForGroupPage, resetPostInfo } = postSlice.actions;
 
 export default postSlice.reducer;
diff --git a/src/features/ui/ui-slice.js b/src/features/ui/ui-slice.js
index 420799c69..5155a453c 100644
--- a/src/features/ui/ui-slice.js
+++ b/src/features/ui/ui-slice.js
@@ -4,6 +4,7 @@ import { SCHEDULE_MODAL_TYPE, UI_TYPE } from "@/constants/uiConstants";
 
 const initialState = {
 	openedModal: null,
+	feedDetailModalId: null,
 	scheduleModalMode: SCHEDULE_MODAL_TYPE.CREATE,
 	scheduleModalId: null,
 	isLoading: true,
@@ -94,6 +95,10 @@ const uiSlice = createSlice({
 			state.warningModalUserInfo = payload;
 			state.openedModal = UI_TYPE.DELETE_MEMBER_WARNING_MODAL;
 		},
+		openFeedDetailModal: (state, { payload }) => {
+			state.feedDetailModalId = payload;
+			state.openedModal = UI_TYPE.FEED_DETAIL_MODAL;
+		},
 		closeModal: () => {
 			return initialState;
 		},
@@ -124,6 +129,7 @@ export const {
 	openMemberModal,
 	openMemberRequestModal,
 	openDeleteMemberWarningModal,
+	openFeedDetailModal,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;
diff --git a/src/pages/GroupPage/GroupPage.jsx b/src/pages/GroupPage/GroupPage.jsx
index 3b35c883c..166ff89cb 100644
--- a/src/pages/GroupPage/GroupPage.jsx
+++ b/src/pages/GroupPage/GroupPage.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useParams, useNavigate, useSearchParams } from "react-router-dom";
 
-import GroupJoinModal from "@/components/Common/GroupModal/GroupJoinModal/GroupJoinModal";
+import GroupModalTrigger from "@/components/Common/GroupModal/GroupModalTrigger/GroupModalTrigger";
 import GroupFeed from "@/components/Group/GroupFeed/GroupFeed";
 import SecretFeed from "@/components/Group/GroupFeed/SecretFeed";
 import UploadFeed from "@/components/Group/GroupFeed/UploadFeed";
@@ -11,7 +11,6 @@ import GroupMember from "@/components/Group/GroupMember/GroupMember";
 import GroupProfile from "@/components/Group/GroupProfile/GroupProfile";
 import GroupTitle from "@/components/Group/GroupTitle/GroupTitle";
 import { TAB_KEY, TAB_PARAM } from "@/constants/tabConstants";
-import { UI_TYPE } from "@/constants/uiConstants";
 import {
 	getGroupInfo,
 	getGroupMemberList,
@@ -31,8 +30,6 @@ const GroupPage = () => {
 		(state) => state.group,
 	);
 
-	const { openedModal } = useSelector((state) => state.ui);
-
 	const [isLoading, setIsLoading] = useState(true);
 	const [isManaging, setIsManaging] = useState(false);
 
@@ -42,8 +39,6 @@ const GroupPage = () => {
 
 	const groupId = Number(param.id);
 
-	const inviteLink = searchParams.get("invite");
-
 	useEffect(() => {
 		dispatch(getGroupMemberList(groupId));
 		dispatch(getGroupRequestMemberList(groupId));
@@ -81,7 +76,6 @@ const GroupPage = () => {
 
 	const { isPublicGroup } = groupInfo.information.group;
 	const leaderId = groupInfo.information.leaderInfo.userId;
-	const leaderName = groupInfo.information.leaderInfo.nickname;
 	const isGroupLeader = groupInfo.accessLevel === "owner";
 	const isGroupMember = groupInfo.accessLevel !== null;
 	const isGroupRequest =
@@ -113,19 +107,23 @@ const GroupPage = () => {
 						<FeedDiv>
 							{isGroupMember && <UploadFeed />}
 							<GroupTitle />
-							<GroupFeed groupId={groupId} leaderName={leaderName} />
+							<GroupFeed groupId={groupId} leaderId={leaderId} />
 						</FeedDiv>
 					)}
 
 					{isGroupMember && (
 						<GroupMember groupId={groupId} leaderId={leaderId} />
 					)}
-
-					{openedModal === UI_TYPE.JOIN_GROUP && (
-						<GroupJoinModal inviteLink={inviteLink} />
-					)}
 				</>
 			)}
+
+			<GroupModalTrigger
+				groupId={groupId}
+				leaderId={leaderId}
+				groupInfo={groupInfo}
+				groupMemberList={groupMemberList}
+				groupRequestMemberList={groupRequestMemberList}
+			/>
 		</GroupMain>
 	);
 };
diff --git a/src/store/index.js b/src/store/index.js
index c09c3cea9..37589d5a2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,6 +1,7 @@
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
 
 import authReducer from "@/features/auth/auth-slice.js";
+import commentReducer from "@/features/comment/comment-slice";
 import groupReducer from "@/features/group/group-slice.js";
 import postReducer from "@/features/post/post-slice";
 import scheduleReducer from "@/features/schedule/schedule-slice.js";
@@ -14,6 +15,7 @@ const rootReducer = combineReducers({
 	ui: uiReducer,
 	user: userReducer,
 	post: postReducer,
+	comment: commentReducer,
 });
 
 export const setupStore = (preloadedState) => {