Skip to content

Feat/liked person modal #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 34 commits into
base: develop
Choose a base branch
from
Open

Feat/liked person modal #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
825005a
feat: LikedPeopleModal 생성 및 게시물 혹은 댓글 좋아요한 사람 불러오는 코드 구현
kimyoungyin Aug 24, 2022
be098f0
feat: ArticleMain에서 postId를 받도록 수정
kimyoungyin Aug 25, 2022
b9740dd
feat: 게시글 좋아요한 사람 모달 끄고 키는 로직 구현
kimyoungyin Aug 25, 2022
f498277
fix: 좋아요한 사람 각각에 key 부여
kimyoungyin Aug 25, 2022
f81eeb8
feat: 좋아요한 사람 0명일 때 대응 구현
kimyoungyin Aug 25, 2022
1bf3d67
feat: 좋아요한 사람 모달 스크롤 제외 레이아웃 구현
kimyoungyin Sep 2, 2022
875dada
feat: username 진하게 처리
kimyoungyin Sep 7, 2022
2e76f36
fix: 모달 켜졌을 떄 밑 부분 스크롤 못하도록 수정
kimyoungyin Sep 7, 2022
9be21cb
feat: 브라우저 크기 735px 전후로 모달 크기 재조정
kimyoungyin Sep 7, 2022
07a8e36
feat: 좋아요 모달 팔로우 버튼도 735px 전후로 변화하도록 구현
kimyoungyin Sep 7, 2022
570eeb6
feat: 좋아요한 사람 모달의 높이 설정
kimyoungyin Sep 7, 2022
0b580e4
feat: 좋아요한 사람 유닛을 분리 후 자신이라면 팔로우 버튼을 보여주지 않도록 구현
kimyoungyin Sep 8, 2022
099121a
feat: 좋아요한 사람 유닛 각각의 버튼에 팔로우, 언팔로우 버튼 구현
kimyoungyin Sep 9, 2022
d125bfc
fix: 필요 없는 state, 모듈 가져오기 제거
kimyoungyin Sep 9, 2022
4f73971
Merge branch 'develop' into feat/likedPersonModal
kimyoungyin Sep 11, 2022
f0a8e27
Merge branch 'develop' into feat/likedPersonModal
kimyoungyin Sep 22, 2022
fa2caf9
refactor: 검색이 용이하도록 LikedPeopleModal 폴더에 index.js를 생성 후 기존 index.tsx를…
kimyoungyin Sep 22, 2022
aab72fa
feat: 키보드 esc 눌러도 모달이 꺼지도록 구현
kimyoungyin Sep 22, 2022
d5eef76
refactor: 필요없는 재사용 컴포넌트 내 key prop 제거
kimyoungyin Sep 22, 2022
fc44b7a
fix: unseOnViews hook을 수화님과 동일하게 변경
kimyoungyin Sep 23, 2022
31af4c5
feat: 맨 끝에서 4번 째 컴포넌트가 view에 나타날 시 인식 후 콘솔처리
kimyoungyin Sep 23, 2022
91e2a73
etc: customAxios 불필요한 console.log 제거
kimyoungyin Sep 23, 2022
b0cd9c7
feat: 첫 렌더링 시 스크롤 가능하도록 구현
kimyoungyin Sep 30, 2022
152335b
feat: 내가 이 게시물을 좋아했다면 맨 위에 자동 표시
kimyoungyin Oct 1, 2022
3b9e6f7
fix: 필요없는 콘솔 제거 및 빠뜨린useEffect deps 추가
kimyoungyin Oct 1, 2022
869cabd
feat: 좋아요한 사람 무한 스크롤 기능 간략 구현
kimyoungyin Oct 3, 2022
474301a
refactor: 내가 좋아한 게시물의 좋아요한사람모달 인 경우 더해줄 데이터 분리
kimyoungyin Oct 3, 2022
ef912c0
Merge branch 'develop' into feat/likedPersonModal
kimyoungyin Nov 8, 2022
68a5d5d
Merge branch 'develop' into feat/likedPersonModal
kimyoungyin Apr 20, 2023
c1db37d
merge: develop 머지 때 수정 사항 반영
kimyoungyin Apr 20, 2023
3bb26d7
refactor: 순수 비동기 함수 컴포넌트 밖으로 빼서 재사용
kimyoungyin Apr 21, 2023
ee1d899
feat: 좋아요한 사람 StoryCircle과 Username에서 HoverModal 연결
kimyoungyin Apr 22, 2023
16b6dcd
fix: Header, LikedPeopleModal, ModalCard의 z-index를 수정하여 보이는 모달의 순서를 수정
kimyoungyin Apr 22, 2023
d073aa8
feat: 댓글 좋아요 버튼에도 좋아요한 사람 모달 연결
kimyoungyin Apr 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/Common/Article/Article.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ const Article = ({
onToggleLike={toggleLikeHandler}
/>
<ArticleMain
postId={article.postId}
followingUserWhoLikesArticle={followingUserWhoLikesArticle}
likesCount={likesCount}
memberImageUrl={article.member.image.imageUrl}
Expand All @@ -131,9 +132,9 @@ const Article = ({
commentsCount={article.postCommentsCount}
mentions={article.mentionsOfContent}
hashtags={article.hashtagsOfContent}
isLiked
likeOptionFlag={article.likeOptionFlag}
comments={article.recentComments}
postId={article.postId}
/>
<ArticleGap postUploadDate={article.postUploadDate} />
{article.commentOptionFlag && (
Expand Down
1 change: 1 addition & 0 deletions src/components/Common/Article/ArticleAlone/LargerArticle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ const LargerArticle = ({ article, isModal = false }: LargerArticleProps) => {
isInLargerArticle={true}
comments={article.comments}
postId={article.postId}
isLiked
/>
</div>
<ArticleMainIcons
Expand Down
27 changes: 26 additions & 1 deletion src/components/Common/Article/ArticleMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { ReactComponent as MoreCommentsButton } from "assets/Svgs/moreComments.s
import { authorizedCustomAxios } from "customAxios";
import { paragraphActions } from "app/store/ducks/paragraph/paragraphSlice";
import Loading from "components/Common/Loading";
import LikedPeopleModal from "components/Common/LikedPeopleModal";

interface StyledMainProps {
isInLargerArticle: boolean;
Expand All @@ -20,6 +21,9 @@ const StyledMain = styled.div<StyledMainProps>`
.articleMain__content {
.article-likeInfo {
margin-bottom: 8px;
&.notZero {
cursor: pointer;
}
span {
font-weight: ${(props) => props.theme.font.bold};
}
Expand Down Expand Up @@ -58,6 +62,7 @@ interface MainProps {
isInLargerArticle?: boolean;
comments: PostType.CommentType[];
postId: number;
isLiked: boolean;
}

const ArticleMain = ({
Expand All @@ -73,6 +78,7 @@ const ArticleMain = ({
isInLargerArticle = false,
comments,
postId,
isLiked,
}: MainProps) => {
// content state
const [isFullText, setIsFullText] = useState(
Expand All @@ -86,6 +92,7 @@ const ArticleMain = ({
comments.length < 10 ? true : false,
);
const [isCommentsFetching, setIsCommentsFetching] = useState(false);
const [isLikedPeopleModalOn, setIsLikedPeopleModalOn] = useState(false);
const dispatch = useAppDispatch();

const isTextLineBreak = useMemo(() => content.includes("\n"), [content]);
Expand Down Expand Up @@ -202,9 +209,27 @@ const ArticleMain = ({
return (
<>
<StyledMain isInLargerArticle={isInLargerArticle}>
{isLikedPeopleModalOn && (
<LikedPeopleModal
onModalOn={() => setIsLikedPeopleModalOn(true)}
onModalOff={() => setIsLikedPeopleModalOn(false)}
modalInfo={{
type: "post",
id: postId,
}}
isLiked={isLiked}
/>
)}
<div className="articleMain__content">
{(likeOptionFlag || myUsername === memberUsername) && (
<div className="article-likeInfo">
<div
className={`article-likeInfo ${
likesCount > 0 ? "notZero" : ""
}`}
onClick={() =>
likesCount > 0 && setIsLikedPeopleModalOn(true)
}
>
<LikeText
followingUserWhoLikesArticle={
followingUserWhoLikesArticle
Expand Down
229 changes: 129 additions & 100 deletions src/components/Common/Article/Comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useAppSelector } from "app/store/Hooks";
import Loading from "components/Common/Loading";
import { ReactComponent as ThreeDots } from "assets/Svgs/threeDots.svg";
import { modalActions } from "app/store/ducks/modal/modalSlice";
import LikedPeopleModal from "components/Common/LikedPeopleModal";

type CommentType = "comment" | "reply" | "recent";

Expand Down Expand Up @@ -126,6 +127,7 @@ const Comment = ({
false,
);
const [isReplyFetching, setIsReplyFetching] = useState(false);
const [isLikedPeopleModalOn, setIsLikedPeopleModalOn] = useState(false);
const [replyPage, setReplyPage] = useState(1);
const replyParentObj = useAppSelector(
({ paragraph }) => paragraph.replyParentObj,
Expand Down Expand Up @@ -209,111 +211,138 @@ const Comment = ({
};

return (
<StyledComment commentType={commentType}>
<div className="comment__main">
{commentType !== "recent" && (
<div className="comment__avatar">
<StoryCircle
type="default"
avatarUrl={commentObj.member.image.imageUrl}
username={commentObj.member.username}
scale={42 / 64}
onMouseEnter={(event) =>
onMouseEnter(event, commentObj.member.username)
}
onMouseLeave={onMouseLeave}
/>
</div>
)}
<div className="comment__middle">
<span>
<Username
onMouseEnter={(event) =>
onMouseEnter(event, commentObj.member.username)
}
onMouseLeave={onMouseLeave}
>
{commentObj.member.username}
</Username>
&nbsp;
<StringFragmentWithMentionOrHashtagLink
str={commentObj.content}
mentions={commentObj.mentionsOfContent}
hashtags={commentObj.hashtagsOfContent}
/>
</span>
<>
{isLikedPeopleModalOn && (
<LikedPeopleModal
modalInfo={{ type: "comment", id: commentObj.id }}
onModalOn={() => setIsLikedPeopleModalOn(true)}
onModalOff={() => setIsLikedPeopleModalOn(false)}
isLiked
/>
)}
<StyledComment commentType={commentType}>
<div className="comment__main">
{commentType !== "recent" && (
<>
<div className="comment__info">
<ArticleGap
postUploadDate={commentObj.uploadDate}
isAboutComment={true}
/>
{likesCount > 0 && (
<button>좋아요 {likesCount}개</button>
)}
<button
onClick={() =>
toggleReplyHandler(commentObj.id)
}
>
{commentObj.id !== replyParentObj?.id
? "답글 달기"
: "답글 취소"}
</button>
{commentObj.member.username === myUsername && ( // '신고' 기능이 없으면 자기 댓글이 아닌 경우에 모달에 보여줄 메뉴가 없어서 아예 버튼 비활성화
<button
className="comment__menu"
onClick={commentMenuBtnClickHandler}
>
<ThreeDots />
</button>
)}
</div>
</>
<div className="comment__avatar">
<StoryCircle
type="default"
avatarUrl={commentObj.member.image.imageUrl}
username={commentObj.member.username}
scale={42 / 64}
onMouseEnter={(event) =>
onMouseEnter(
event,
commentObj.member.username,
)
}
onMouseLeave={onMouseLeave}
/>
</div>
)}
</div>
<div className="comment__popHeartLayout">
<PopHeart
size={12}
isLiked={isLiked}
onToggleLike={commentLikeHandler}
/>
</div>
</div>
{commentType !== "recent" && commentObj.repliesCount > 0 && (
<div className="comment__replyLayout">
<button onClick={replyHandler} disabled={isReplyFetching}>
<div></div>
<div className="comment__middle">
<span>
{isLastReply && isReplyOn
? "답글 숨기기"
: `답글 보기(${
!isReplyOn
? commentObj.repliesCount
: commentObj.repliesCount -
(commentObj.replies?.length || 0)
}개)`}
<Username
onMouseEnter={(event) =>
onMouseEnter(
event,
commentObj.member.username,
)
}
onMouseLeave={onMouseLeave}
>
{commentObj.member.username}
</Username>
&nbsp;
<StringFragmentWithMentionOrHashtagLink
str={commentObj.content}
mentions={commentObj.mentionsOfContent}
hashtags={commentObj.hashtagsOfContent}
/>
</span>
</button>
{isReplyFetching && <Loading size={14} />}
{isReplyOn && commentObj.replies && (
<ul>
{commentObj.replies.map((replyObj) => (
<Comment
parentCommentId={commentObj.id}
key={replyObj.id}
commentType="reply"
commentObj={replyObj}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
))}
</ul>
)}
{commentType !== "recent" && (
<>
<div className="comment__info">
<ArticleGap
postUploadDate={commentObj.uploadDate}
isAboutComment={true}
/>
{likesCount > 0 && (
<button
onClick={() =>
setIsLikedPeopleModalOn(true)
}
>
좋아요 {likesCount}개
</button>
)}
<button
onClick={() =>
toggleReplyHandler(commentObj.id)
}
>
{commentObj.id !== replyParentObj?.id
? "답글 달기"
: "답글 취소"}
</button>
{commentObj.member.username ===
myUsername && ( // '신고' 기능이 없으면 자기 댓글이 아닌 경우에 모달에 보여줄 메뉴가 없어서 아예 버튼 비활성화
<button
className="comment__menu"
onClick={commentMenuBtnClickHandler}
>
<ThreeDots />
</button>
)}
</div>
</>
)}
</div>
<div className="comment__popHeartLayout">
<PopHeart
size={12}
isLiked={isLiked}
onToggleLike={commentLikeHandler}
/>
</div>
</div>
)}
</StyledComment>
{commentType !== "recent" && commentObj.repliesCount > 0 && (
<div className="comment__replyLayout">
<button
onClick={replyHandler}
disabled={isReplyFetching}
>
<div></div>
<span>
{isLastReply && isReplyOn
? "답글 숨기기"
: `답글 보기(${
!isReplyOn
? commentObj.repliesCount
: commentObj.repliesCount -
(commentObj.replies?.length ||
0)
}개)`}
</span>
</button>
{isReplyFetching && <Loading size={14} />}
{isReplyOn && commentObj.replies && (
<ul>
{commentObj.replies.map((replyObj) => (
<Comment
parentCommentId={commentObj.id}
key={replyObj.id}
commentType="reply"
commentObj={replyObj}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
))}
</ul>
)}
</div>
)}
</StyledComment>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/Common/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const HeaderContainer = styled.nav`
top: 0;

width: 100%;
z-index: 101;
z-index: 98;
`;

const HeaderContentsWrapper = styled.div`
Expand Down
Loading