From 825005a13f310b801c2a4c2edf11ebb825384993 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Thu, 25 Aug 2022 00:09:48 +0900 Subject: [PATCH 01/30] =?UTF-8?q?feat:=20LikedPeopleModal=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=ED=98=B9?= =?UTF-8?q?=EC=9D=80=20=EB=8C=93=EA=B8=80=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EB=B6=88=EB=9F=AC=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal.tsx | 102 +++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 src/components/Common/LikedPeopleModal.tsx diff --git a/src/components/Common/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal.tsx new file mode 100644 index 00000000..e8f7770d --- /dev/null +++ b/src/components/Common/LikedPeopleModal.tsx @@ -0,0 +1,102 @@ +import Loading from "components/Common/Loading"; +import { authorizedCustomAxios } from "customAxios"; +import React, { useEffect, useState } from "react"; +import ModalCard from "styles/UI/ModalCard"; + +interface LikedPersonType { + follower: boolean; + following: boolean; + hasStory: boolean; + member: { + hasStory: boolean; + id: number; + image: { + imageUrl: string; + imageType: string; + imageName: string; + imageUUID: string; + }; + name: string; + username: string; + }; +} + +interface PostlikedPeopleDataType { + data: { + content: LikedPersonType[]; + }; +} + +const getLikedPeople = async ( + page: number, + type: "post" | "comment", + id: number, +) => { + const config = { + params: { + page, + size: 10, + }, + }; + try { + const { + data: { + data: { content: arr }, + }, + } = await authorizedCustomAxios.get( + `/${type === "post" ? "posts" : "comments"}/${id}/likes`, + config, + ); + return arr; + } catch (error) { + console.log(error); + return []; + } +}; + +interface LikedPeopleModalProps { + onModalOn: () => void; + onModalOff: () => void; + // 어떤 것에 대한 좋아요 정보인지 객체 형태로 전달받습니다 + modalInfo: { + type: "post" | "comment"; + id: number; + }; +} + +const LikedPeopleModal = ({ + onModalOn, + onModalOff, + modalInfo, +}: LikedPeopleModalProps) => { + const [isLoading, setIsLoading] = useState(true); + const [currentPage, setCurrentPage] = useState(1); + const [likedPeople, setLikedPeople] = useState([]); + + useEffect(() => { + getLikedPeople(1, modalInfo.type, modalInfo.id) + .then((data) => { + setLikedPeople(data); + setCurrentPage((prev) => prev + 1); + }) + .finally(() => setIsLoading(false)); + }, [modalInfo.id, modalInfo.type]); + + return ( + +
좋아요
+
+ {likedPeople.map((personObj) => ( +
{personObj.member.username}
+ ))} +
+ {isLoading && } + + ); +}; + +export default LikedPeopleModal; From be098f0713a7677271b262a98a563bea5bbb7552 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Thu, 25 Aug 2022 19:32:58 +0900 Subject: [PATCH 02/30] =?UTF-8?q?feat:=20ArticleMain=EC=97=90=EC=84=9C=20p?= =?UTF-8?q?ostId=EB=A5=BC=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/Article/Article.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Home/Article/Article.tsx b/src/components/Home/Article/Article.tsx index 5674c5f0..84278e82 100644 --- a/src/components/Home/Article/Article.tsx +++ b/src/components/Home/Article/Article.tsx @@ -133,6 +133,7 @@ const Article = ({ article, isObserving, isLast }: ArticleComponentPros) => { onToggleLike={toggleLikeHandler} /> Date: Fri, 26 Aug 2022 00:01:00 +0900 Subject: [PATCH 03/30] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=ED=95=9C=20=EC=82=AC=EB=9E=8C=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=81=84=EA=B3=A0=20=ED=82=A4=EB=8A=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/Article/ArticleMain.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/Home/Article/ArticleMain.tsx b/src/components/Home/Article/ArticleMain.tsx index 24736703..e362b8c7 100644 --- a/src/components/Home/Article/ArticleMain.tsx +++ b/src/components/Home/Article/ArticleMain.tsx @@ -6,6 +6,7 @@ import { useAppDispatch, useAppSelector } from "app/store/Hooks"; import { modalActions } from "app/store/ducks/modal/modalSlice"; import { getMiniProfile } from "app/store/ducks/modal/modalThunk"; import { loadavg } from "os"; +import LikedPeopleModal from "components/Common/LikedPeopleModal"; const StyledMain = styled.div` padding: 0 16px; @@ -41,6 +42,7 @@ const StyledMain = styled.div` interface MainProps { followingUserWhoLikesArticle: null | string; + postId: number; likesCount: number; memberUsername: string; memberNickname: string; @@ -56,6 +58,7 @@ interface MainProps { const ArticleMain = ({ followingUserWhoLikesArticle, + postId, likesCount, memberUsername, memberNickname, @@ -67,6 +70,7 @@ const ArticleMain = ({ // like state const [isComment1Liked, setIsComment1Liked] = useState(false); // 백엔드에서 이 코멘트 좋아요 한 사람 중 내가 있는지 확인 const [isComment2Liked, setIsComment2Liked] = useState(false); // 백엔드에서 이 코멘트 좋아요 한 사람 중 내가 있는지 확인 + const [isLikedPeopleModalOn, setIsLikedPeopleModalOn] = useState(false); // content state const [isFullText, setIsFullText] = useState(false); const { miniProfile } = useAppSelector(({ modal }) => modal); @@ -153,7 +157,20 @@ const ArticleMain = ({ const getFullText = () => setIsFullText(true); return ( -
+ {isLikedPeopleModalOn && ( + setIsLikedPeopleModalOn(true)} + onModalOff={() => setIsLikedPeopleModalOn(false)} + modalInfo={{ + type: "post", + id: postId, + }} + /> + )} +
setIsLikedPeopleModalOn(true)} + > {followingUserWhoLikesArticle ? (
{/* 임의로 첫 번째 인덱스 선택 */} From f498277c2e1039c40a02a43c735c977b1c19a7c9 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 26 Aug 2022 00:07:33 +0900 Subject: [PATCH 04/30] =?UTF-8?q?fix:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EA=B0=81=EA=B0=81=EC=97=90=20?= =?UTF-8?q?key=20=EB=B6=80=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Common/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal.tsx index e8f7770d..71923ac0 100644 --- a/src/components/Common/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal.tsx @@ -91,7 +91,9 @@ const LikedPeopleModal = ({
좋아요
{likedPeople.map((personObj) => ( -
{personObj.member.username}
+
+ {personObj.member.username} +
))}
{isLoading && } From f81eeb84fef6994ea59d888790e7df6e1b76ecf2 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 26 Aug 2022 00:11:35 +0900 Subject: [PATCH 05/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=200=EB=AA=85=EC=9D=BC=20?= =?UTF-8?q?=EB=95=8C=20=EB=8C=80=EC=9D=91=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/Article/ArticleMain.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Home/Article/ArticleMain.tsx b/src/components/Home/Article/ArticleMain.tsx index e362b8c7..cf34c153 100644 --- a/src/components/Home/Article/ArticleMain.tsx +++ b/src/components/Home/Article/ArticleMain.tsx @@ -12,6 +12,9 @@ const StyledMain = styled.div` padding: 0 16px; .article-likeInfo { margin-bottom: 8px; + &#notZero { + cursor: pointer; + } span { font-weight: ${(props) => props.theme.font.bold}; } @@ -169,7 +172,8 @@ const ArticleMain = ({ )}
setIsLikedPeopleModalOn(true)} + id={likesCount > 0 ? "notZero" : ""} + onClick={() => likesCount > 0 && setIsLikedPeopleModalOn(true)} > {followingUserWhoLikesArticle ? (
From 1bf3d6758aaf751e498343ba28f304ba681cd5ae Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 2 Sep 2022 23:06:48 +0900 Subject: [PATCH 06/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=A0=9C=EC=99=B8=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal.tsx | 107 +++++++++++++++++++-- 1 file changed, 99 insertions(+), 8 deletions(-) diff --git a/src/components/Common/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal.tsx index 71923ac0..604e7de6 100644 --- a/src/components/Common/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal.tsx @@ -1,6 +1,11 @@ +import CloseSVG from "assets/Svgs/CloseSVG"; import Loading from "components/Common/Loading"; +import StoryCircle from "components/Common/StoryCircle"; import { authorizedCustomAxios } from "customAxios"; import React, { useEffect, useState } from "react"; +import styled from "styled-components"; +import theme from "styles/theme"; +import Button from "styles/UI/Button"; import ModalCard from "styles/UI/ModalCard"; interface LikedPersonType { @@ -54,6 +59,53 @@ const getLikedPeople = async ( } }; +const LIkedPeopleModalHeader = styled.div` + position: relative; + display: flex; + align-items: center; + height: 42px; + border-bottom: 1px solid ${(props) => props.theme.color.bd_gray}; + & > h1 { + width: 100%; + text-align: center; + font-size: 16px; + font-weight: ${(props) => props.theme.font.bold}; + } + & > button { + position: absolute; + right: 0; + width: 50px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } +`; + +const LikedPeopleModalMain = styled.div` + height: 100%; + & > .wrapper { + overflow-y: auto; + & > .likedPerson { + padding: 8px 16px; + display: flex; + align-items: center; + height: 60px; + & > div:first-child { + margin-right: 12px; + } + & > div:nth-child(2) { + flex: 1; + & > div:nth-child(2) { + } + } + & > button { + margin-left: 8px; + } + } + } +`; + interface LikedPeopleModalProps { onModalOn: () => void; onModalOff: () => void; @@ -88,14 +140,53 @@ const LikedPeopleModal = ({ onModalOn={onModalOn} onModalOff={onModalOff} > -
좋아요
-
- {likedPeople.map((personObj) => ( -
- {personObj.member.username} -
- ))} -
+ +

좋아요

+ + + +
+ {/* hasStory 2개? */} + {likedPeople.map((personObj) => ( +
+ {}} + onMouseLeave={() => {}} // hoverModal + /> +
+
{personObj.member.username}
+
{personObj.member.name}
+
+ +
+ ))} +
+ {isLoading && } ); From 875dada630a4198e1210a591cf18396793af6559 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Wed, 7 Sep 2022 17:21:53 +0900 Subject: [PATCH 07/30] =?UTF-8?q?feat:=20username=20=EC=A7=84=ED=95=98?= =?UTF-8?q?=EA=B2=8C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Common/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal.tsx index 604e7de6..f38013d0 100644 --- a/src/components/Common/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal.tsx @@ -96,7 +96,8 @@ const LikedPeopleModalMain = styled.div` } & > div:nth-child(2) { flex: 1; - & > div:nth-child(2) { + #username { + font-weight: ${(props) => props.theme.font.bold}; } } & > button { @@ -171,7 +172,9 @@ const LikedPeopleModal = ({ onMouseLeave={() => {}} // hoverModal />
-
{personObj.member.username}
+
+ {personObj.member.username} +
{personObj.member.name}
{personObj.member.name}
- +
))}
From 570eeb63c94637632d87893411a20f5ad888e958 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Wed, 7 Sep 2022 21:12:06 +0900 Subject: [PATCH 11/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EB=AA=A8=EB=8B=AC=EC=9D=98=20?= =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Common/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal.tsx index 18de69be..7149f14d 100644 --- a/src/components/Common/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal.tsx @@ -157,6 +157,7 @@ const LikedPeopleModal = ({ onModalOn={onModalOn} onModalOff={onModalOff} width={isModalWidthSmall ? 260 : 400} + height={400} >

좋아요

From 0b580e49f47fccf103d29ba665080f3914b0619b Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 9 Sep 2022 01:34:13 +0900 Subject: [PATCH 12/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EC=9C=A0=EB=8B=9B=EC=9D=84=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20=ED=9B=84=20=EC=9E=90=EC=8B=A0=EC=9D=B4?= =?UTF-8?q?=EB=9D=BC=EB=A9=B4=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPersonUnit.tsx | 74 +++++++++++++++++++ .../index.tsx} | 61 ++------------- 2 files changed, 80 insertions(+), 55 deletions(-) create mode 100644 src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx rename src/components/Common/{LikedPeopleModal.tsx => LikedPeopleModal/index.tsx} (65%) diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx new file mode 100644 index 00000000..623a1b28 --- /dev/null +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -0,0 +1,74 @@ +import StoryCircle from "components/Common/StoryCircle"; +import React, { useState } from "react"; +import styled from "styled-components"; +import Button from "styles/UI/Button"; +import type { LikedPersonType } from "components/Common/LikedPeopleModal"; +import theme from "styles/theme"; +import { useAppSelector } from "app/store/Hooks"; + +const StyledLikedPersonUnit = styled.div` + padding: 8px 16px; + display: flex; + align-items: center; + height: 60px; + & > div:first-child { + margin-right: 12px; + } + & > div:nth-child(2) { + flex: 1; + #username { + font-weight: ${(props) => props.theme.font.bold}; + } + } + & > button { + margin-left: 8px; + } +`; + +const FollowBtn = styled(Button)<{ isSmall: boolean }>` + width: ${(props) => (props.isSmall ? 64 : 88)}px; +`; + +interface LikedPersonUnitProps { + personObj: LikedPersonType; + isSmall: boolean; +} + +const LikedPersonUnit = ({ personObj, isSmall }: LikedPersonUnitProps) => { + const [isFollowing, setIsFollowing] = useState(personObj.following); + const myUsername = useAppSelector( + (state) => state.auth.userInfo?.memberUsername, + ); + + return ( + + {}} + onMouseLeave={() => {}} // hoverModal + /> +
+
{personObj.member.username}
+
{personObj.member.name}
+
+ {personObj.member.username !== myUsername && ( + + {isFollowing ? "팔로잉" : "팔로우"} + + )} + + ); +}; + +export default LikedPersonUnit; diff --git a/src/components/Common/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/index.tsx similarity index 65% rename from src/components/Common/LikedPeopleModal.tsx rename to src/components/Common/LikedPeopleModal/index.tsx index 7149f14d..401bf950 100644 --- a/src/components/Common/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/index.tsx @@ -1,14 +1,13 @@ import CloseSVG from "assets/Svgs/CloseSVG"; +import LikedPersonUnit from "components/Common/LikedPeopleModal/LikedPersonUnit"; import Loading from "components/Common/Loading"; -import StoryCircle from "components/Common/StoryCircle"; import { authorizedCustomAxios } from "customAxios"; import React, { useEffect, useState } from "react"; import styled from "styled-components"; import theme from "styles/theme"; -import Button from "styles/UI/Button"; import ModalCard from "styles/UI/ModalCard"; -interface LikedPersonType { +export interface LikedPersonType { follower: boolean; following: boolean; hasStory: boolean; @@ -86,31 +85,9 @@ const LikedPeopleModalMain = styled.div` height: 100%; & > .wrapper { overflow-y: auto; - & > .likedPerson { - padding: 8px 16px; - display: flex; - align-items: center; - height: 60px; - & > div:first-child { - margin-right: 12px; - } - & > div:nth-child(2) { - flex: 1; - #username { - font-weight: ${(props) => props.theme.font.bold}; - } - } - & > button { - margin-left: 8px; - } - } } `; -const FollowBtn = styled(Button)<{ isSmall: boolean }>` - width: ${(props) => (props.isSmall ? 64 : 88)}px; -`; - interface LikedPeopleModalProps { onModalOn: () => void; onModalOff: () => void; @@ -176,36 +153,10 @@ const LikedPeopleModal = ({ > {/* hasStory 2개? */} {likedPeople.map((personObj) => ( -
- {}} - onMouseLeave={() => {}} // hoverModal - /> -
-
- {personObj.member.username} -
-
{personObj.member.name}
-
- - {personObj.following ? "팔로잉" : "팔로우"} - -
+ ))}
From 099121a67cc893a416a4d71416786931e7a6693d Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 9 Sep 2022 18:16:29 +0900 Subject: [PATCH 13/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EC=9C=A0=EB=8B=9B=20=EA=B0=81?= =?UTF-8?q?=EA=B0=81=EC=9D=98=20=EB=B2=84=ED=8A=BC=EC=97=90=20=ED=8C=94?= =?UTF-8?q?=EB=A1=9C=EC=9A=B0,=20=EC=96=B8=ED=8C=94=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPersonUnit.tsx | 50 ++++++++++++++++--- .../Common/LikedPeopleModal/index.tsx | 1 + 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index 623a1b28..87a60735 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -4,7 +4,12 @@ import styled from "styled-components"; import Button from "styles/UI/Button"; import type { LikedPersonType } from "components/Common/LikedPeopleModal"; import theme from "styles/theme"; -import { useAppSelector } from "app/store/Hooks"; +import { useAppDispatch, useAppSelector } from "app/store/Hooks"; +import { postFollow, postUnfollow } from "app/store/ducks/home/homThunk"; +import Loading from "components/Common/Loading"; +import { authorizedCustomAxios } from "customAxios"; +import { authAction } from "app/store/ducks/auth/authSlice"; +import { FAIL_TO_REISSUE_MESSAGE } from "utils/constant"; const StyledLikedPersonUnit = styled.div` padding: 8px 16px; @@ -25,8 +30,10 @@ const StyledLikedPersonUnit = styled.div` } `; -const FollowBtn = styled(Button)<{ isSmall: boolean }>` +const FollowBtn = styled(Button)<{ isSmall: boolean; isFollowing?: boolean }>` width: ${(props) => (props.isSmall ? 64 : 88)}px; + border: 1px solid + ${(props) => (props.isFollowing ? props.theme.color.bd_gray : "none")}; `; interface LikedPersonUnitProps { @@ -36,9 +43,32 @@ interface LikedPersonUnitProps { const LikedPersonUnit = ({ personObj, isSmall }: LikedPersonUnitProps) => { const [isFollowing, setIsFollowing] = useState(personObj.following); + const [isFollowLoading, setIsFollowLoading] = useState(false); const myUsername = useAppSelector( (state) => state.auth.userInfo?.memberUsername, ); + const dispatch = useAppDispatch(); + + const followBtnClickHandler = async () => { + try { + setIsFollowLoading(true); + const { + data: { data }, + } = isFollowing + ? await authorizedCustomAxios.delete( + `/${personObj.member.username}/follow`, + ) + : await authorizedCustomAxios.post( + `/${personObj.member.username}/follow`, + ); + setIsFollowing((prev) => !prev); + return data; + } catch (error) { + error === FAIL_TO_REISSUE_MESSAGE && dispatch(authAction.logout()); + } finally { + setIsFollowLoading(false); + } + }; return ( { {personObj.member.username !== myUsername && ( - {isFollowing ? "팔로잉" : "팔로우"} + {isFollowLoading ? ( + + ) : isFollowing ? ( + "팔로잉" + ) : ( + "팔로우" + )} )} diff --git a/src/components/Common/LikedPeopleModal/index.tsx b/src/components/Common/LikedPeopleModal/index.tsx index 401bf950..23f8c5f0 100644 --- a/src/components/Common/LikedPeopleModal/index.tsx +++ b/src/components/Common/LikedPeopleModal/index.tsx @@ -156,6 +156,7 @@ const LikedPeopleModal = ({ ))} From d125bfc435192334af6242869108fcc637ae3983 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 9 Sep 2022 18:42:45 +0900 Subject: [PATCH 14/30] =?UTF-8?q?fix:=20=ED=95=84=EC=9A=94=20=EC=97=86?= =?UTF-8?q?=EB=8A=94=20state,=20=EB=AA=A8=EB=93=88=20=EA=B0=80=EC=A0=B8?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx | 1 - src/components/Common/LikedPeopleModal/index.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index 87a60735..b73c2c2c 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -5,7 +5,6 @@ import Button from "styles/UI/Button"; import type { LikedPersonType } from "components/Common/LikedPeopleModal"; import theme from "styles/theme"; import { useAppDispatch, useAppSelector } from "app/store/Hooks"; -import { postFollow, postUnfollow } from "app/store/ducks/home/homThunk"; import Loading from "components/Common/Loading"; import { authorizedCustomAxios } from "customAxios"; import { authAction } from "app/store/ducks/auth/authSlice"; diff --git a/src/components/Common/LikedPeopleModal/index.tsx b/src/components/Common/LikedPeopleModal/index.tsx index 23f8c5f0..d2885d3f 100644 --- a/src/components/Common/LikedPeopleModal/index.tsx +++ b/src/components/Common/LikedPeopleModal/index.tsx @@ -104,7 +104,6 @@ const LikedPeopleModal = ({ modalInfo, }: LikedPeopleModalProps) => { const [isLoading, setIsLoading] = useState(true); - const [currentPage, setCurrentPage] = useState(1); const [likedPeople, setLikedPeople] = useState([]); const [isModalWidthSmall, setIsModalWidthSmall] = useState( window.innerWidth <= 735, @@ -119,7 +118,6 @@ const LikedPeopleModal = ({ getLikedPeople(1, modalInfo.type, modalInfo.id) .then((data) => { setLikedPeople(data); - setCurrentPage((prev) => prev + 1); }) .finally(() => setIsLoading(false)); return () => { From fa2caf91449a57c5122913dd0fe438080d2bf032 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 23 Sep 2022 02:21:43 +0900 Subject: [PATCH 15/30] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=EC=9D=B4?= =?UTF-8?q?=20=EC=9A=A9=EC=9D=B4=ED=95=98=EB=8F=84=EB=A1=9D=20LikedPeopleM?= =?UTF-8?q?odal=20=ED=8F=B4=EB=8D=94=EC=97=90=20index.js=EB=A5=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=9B=84=20=EA=B8=B0=EC=A1=B4=20index.tsx?= =?UTF-8?q?=EB=A5=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/{index.tsx => LikedPeopleModal.tsx} | 0 src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx | 2 +- src/components/Common/LikedPeopleModal/index.js | 3 +++ 3 files changed, 4 insertions(+), 1 deletion(-) rename src/components/Common/LikedPeopleModal/{index.tsx => LikedPeopleModal.tsx} (100%) create mode 100644 src/components/Common/LikedPeopleModal/index.js diff --git a/src/components/Common/LikedPeopleModal/index.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx similarity index 100% rename from src/components/Common/LikedPeopleModal/index.tsx rename to src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index b73c2c2c..80ea2b39 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -2,7 +2,7 @@ import StoryCircle from "components/Common/StoryCircle"; import React, { useState } from "react"; import styled from "styled-components"; import Button from "styles/UI/Button"; -import type { LikedPersonType } from "components/Common/LikedPeopleModal"; +import type { LikedPersonType } from "components/Common/LikedPeopleModal/LikedPeopleModal"; import theme from "styles/theme"; import { useAppDispatch, useAppSelector } from "app/store/Hooks"; import Loading from "components/Common/Loading"; diff --git a/src/components/Common/LikedPeopleModal/index.js b/src/components/Common/LikedPeopleModal/index.js new file mode 100644 index 00000000..e1cee9bf --- /dev/null +++ b/src/components/Common/LikedPeopleModal/index.js @@ -0,0 +1,3 @@ +import LikedPeopleModal from "components/Common/LikedPeopleModal/LikedPeopleModal"; + +export default LikedPeopleModal; From aab72fa067d5663ab90afadef73adfaad39df6f4 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Fri, 23 Sep 2022 02:30:44 +0900 Subject: [PATCH 16/30] =?UTF-8?q?feat:=20=ED=82=A4=EB=B3=B4=EB=93=9C=20esc?= =?UTF-8?q?=20=EB=88=8C=EB=9F=AC=EB=8F=84=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20?= =?UTF-8?q?=EA=BA=BC=EC=A7=80=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/LikedPeopleModal/LikedPeopleModal.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index d2885d3f..87f99931 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -114,7 +114,12 @@ const LikedPeopleModal = ({ const resizeEventHandler = () => setIsModalWidthSmall(window.innerWidth <= 735); + const keydownEventHandler = (event: KeyboardEvent) => { + event.key === "Escape" && onModalOff(); + }; window.addEventListener("resize", resizeEventHandler); + window.addEventListener("keydown", keydownEventHandler); + getLikedPeople(1, modalInfo.type, modalInfo.id) .then((data) => { setLikedPeople(data); @@ -123,8 +128,9 @@ const LikedPeopleModal = ({ return () => { document.body.style.overflow = "unset"; window.removeEventListener("resize", resizeEventHandler); + window.removeEventListener("keydown", keydownEventHandler); }; - }, [modalInfo.id, modalInfo.type]); + }, [modalInfo.id, modalInfo.type, onModalOff]); return ( Date: Fri, 23 Sep 2022 02:54:44 +0900 Subject: [PATCH 17/30] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=9E=AC=EC=82=AC=EC=9A=A9=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=82=B4=20key=20prop=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index 80ea2b39..18317c53 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -38,6 +38,7 @@ const FollowBtn = styled(Button)<{ isSmall: boolean; isFollowing?: boolean }>` interface LikedPersonUnitProps { personObj: LikedPersonType; isSmall: boolean; + // isFourthFromLast:boolean; } const LikedPersonUnit = ({ personObj, isSmall }: LikedPersonUnitProps) => { @@ -70,10 +71,7 @@ const LikedPersonUnit = ({ personObj, isSmall }: LikedPersonUnitProps) => { }; return ( - + Date: Fri, 23 Sep 2022 23:55:38 +0900 Subject: [PATCH 18/30] =?UTF-8?q?fix:=20unseOnViews=20hook=EC=9D=84=20?= =?UTF-8?q?=EC=88=98=ED=99=94=EB=8B=98=EA=B3=BC=20=EB=8F=99=EC=9D=BC?= =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useOnView.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useOnView.ts b/src/hooks/useOnView.ts index e85aef92..bda5d69e 100644 --- a/src/hooks/useOnView.ts +++ b/src/hooks/useOnView.ts @@ -1,6 +1,6 @@ import { RefObject, useEffect, useMemo, useState } from "react"; -const useOnView = (ref: RefObject | null) => { +const useOnView = (ref: RefObject) => { const [isIntersecting, setIntersecting] = useState(false); const observer = useMemo( @@ -19,7 +19,7 @@ const useOnView = (ref: RefObject | null) => { return () => { observer.disconnect(); }; - }, [observer, ref]); + }, [observer, ref.current]); return isIntersecting; }; From 31af4c57893901027e3ef9c4cc0600e9e37c42a0 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Sat, 24 Sep 2022 00:38:57 +0900 Subject: [PATCH 19/30] =?UTF-8?q?feat:=20=EB=A7=A8=20=EB=81=9D=EC=97=90?= =?UTF-8?q?=EC=84=9C=204=EB=B2=88=20=EC=A7=B8=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EA=B0=80=20view=EC=97=90=20=EB=82=98?= =?UTF-8?q?=ED=83=80=EB=82=A0=20=EC=8B=9C=20=EC=9D=B8=EC=8B=9D=20=ED=9B=84?= =?UTF-8?q?=20=EC=BD=98=EC=86=94=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPeopleModal.tsx | 3 ++- .../LikedPeopleModal/LikedPersonUnit.tsx | 24 +++++++++++++------ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index 87f99931..55770828 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -156,11 +156,12 @@ const LikedPeopleModal = ({ style={{ height: likedPeople.length * 60 + "px" }} > {/* hasStory 2개? */} - {likedPeople.map((personObj) => ( + {likedPeople.map((personObj, index) => ( ))} diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index 18317c53..9fefef47 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -1,14 +1,15 @@ import StoryCircle from "components/Common/StoryCircle"; -import React, { useState } from "react"; +import React, { memo, useEffect, useRef, useState } from "react"; import styled from "styled-components"; import Button from "styles/UI/Button"; -import type { LikedPersonType } from "components/Common/LikedPeopleModal/LikedPeopleModal"; +import { LikedPersonType } from "components/Common/LikedPeopleModal/LikedPeopleModal"; import theme from "styles/theme"; import { useAppDispatch, useAppSelector } from "app/store/Hooks"; import Loading from "components/Common/Loading"; import { authorizedCustomAxios } from "customAxios"; import { authAction } from "app/store/ducks/auth/authSlice"; import { FAIL_TO_REISSUE_MESSAGE } from "utils/constant"; +import useOnView from "hooks/useOnView"; const StyledLikedPersonUnit = styled.div` padding: 8px 16px; @@ -38,17 +39,22 @@ const FollowBtn = styled(Button)<{ isSmall: boolean; isFollowing?: boolean }>` interface LikedPersonUnitProps { personObj: LikedPersonType; isSmall: boolean; - // isFourthFromLast:boolean; + isFourthFromLast: boolean; } -const LikedPersonUnit = ({ personObj, isSmall }: LikedPersonUnitProps) => { +const LikedPersonUnit = ({ + personObj, + isSmall, + isFourthFromLast, +}: LikedPersonUnitProps) => { const [isFollowing, setIsFollowing] = useState(personObj.following); const [isFollowLoading, setIsFollowLoading] = useState(false); const myUsername = useAppSelector( (state) => state.auth.userInfo?.memberUsername, ); const dispatch = useAppDispatch(); - + const unitRef = useRef(null); + const isOnView = useOnView(unitRef); const followBtnClickHandler = async () => { try { setIsFollowLoading(true); @@ -70,8 +76,12 @@ const LikedPersonUnit = ({ personObj, isSmall }: LikedPersonUnitProps) => { } }; + useEffect(() => { + isFourthFromLast && isOnView && console.log("isOnView"); + }, [personObj.member.username, isFourthFromLast, isOnView]); + return ( - + { ); }; -export default LikedPersonUnit; +export default memo(LikedPersonUnit); From 91e2a73c98e98400b3f9cd46e198e2e2400e6baa Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Sat, 24 Sep 2022 00:40:01 +0900 Subject: [PATCH 20/30] =?UTF-8?q?etc:=20customAxios=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20console.log=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/customAxios.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/customAxios.ts b/src/customAxios.ts index 8cfb0be8..68c8bf0b 100644 --- a/src/customAxios.ts +++ b/src/customAxios.ts @@ -17,7 +17,6 @@ export const checkToken = async (config: AxiosRequestConfig) => { authorizedCustomAxios.defaults.headers.common.Authorization.split( " ", )[1]; - console.log(accessToken); const decode = jwt.decode(accessToken); const nowDate = new Date().getTime() / 1000; if (decode.exp < nowDate) { From b0cd9c7e48512629c64f21137cdbfc4409f11338 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Sat, 1 Oct 2022 00:52:29 +0900 Subject: [PATCH 21/30] =?UTF-8?q?feat:=20=EC=B2=AB=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81=20=EC=8B=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index 55770828..f8bdcc31 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -82,9 +82,9 @@ const LIkedPeopleModalHeader = styled.div` `; const LikedPeopleModalMain = styled.div` - height: 100%; + height: calc(100% - 42px); + overflow-y: auto; & > .wrapper { - overflow-y: auto; } `; From 152335b85746c09d9ef9a16625d5db77271fa8be Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Sun, 2 Oct 2022 01:07:11 +0900 Subject: [PATCH 22/30] =?UTF-8?q?feat:=20=EB=82=B4=EA=B0=80=20=EC=9D=B4=20?= =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EB=AC=BC=EC=9D=84=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=ED=96=88=EB=8B=A4=EB=A9=B4=20=EB=A7=A8=20=EC=9C=84=EC=97=90=20?= =?UTF-8?q?=EC=9E=90=EB=8F=99=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPeopleModal.tsx | 31 ++++++++++++++----- src/components/Home/Article/Article.tsx | 1 + src/components/Home/Article/ArticleMain.tsx | 3 ++ 3 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index f8bdcc31..36ba3ece 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -1,3 +1,4 @@ +import { useAppSelector } from "app/store/Hooks"; import CloseSVG from "assets/Svgs/CloseSVG"; import LikedPersonUnit from "components/Common/LikedPeopleModal/LikedPersonUnit"; import Loading from "components/Common/Loading"; @@ -8,17 +9,12 @@ import theme from "styles/theme"; import ModalCard from "styles/UI/ModalCard"; export interface LikedPersonType { - follower: boolean; following: boolean; - hasStory: boolean; member: { hasStory: boolean; id: number; image: { imageUrl: string; - imageType: string; - imageName: string; - imageUUID: string; }; name: string; username: string; @@ -96,13 +92,16 @@ interface LikedPeopleModalProps { type: "post" | "comment"; id: number; }; + isLiked: boolean; } const LikedPeopleModal = ({ onModalOn, onModalOff, modalInfo, + isLiked, }: LikedPeopleModalProps) => { + const userInfo = useAppSelector((state) => state.auth.userInfo); const [isLoading, setIsLoading] = useState(true); const [likedPeople, setLikedPeople] = useState([]); const [isModalWidthSmall, setIsModalWidthSmall] = useState( @@ -122,7 +121,25 @@ const LikedPeopleModal = ({ getLikedPeople(1, modalInfo.type, modalInfo.id) .then((data) => { - setLikedPeople(data); + setLikedPeople( + isLiked && userInfo + ? [ + { + following: false, + member: { + username: userInfo.memberUsername, + name: userInfo.memberName, + hasStory: false, + image: { + imageUrl: userInfo.memberImageUrl, + }, + id: -1, + }, + }, + ...data, + ] + : data, + ); }) .finally(() => setIsLoading(false)); return () => { @@ -132,6 +149,7 @@ const LikedPeopleModal = ({ }; }, [modalInfo.id, modalInfo.type, onModalOff]); + console.log(likedPeople); return ( - {/* hasStory 2개? */} {likedPeople.map((personObj, index) => ( { commentsCount={article.postCommentsCount} mentions={article.mentionsOfContent} hashtags={article.hashtagsOfContent} + isLiked={isLiked} // comments={article.comments} />
{gapText}
diff --git a/src/components/Home/Article/ArticleMain.tsx b/src/components/Home/Article/ArticleMain.tsx index d5ec06c3..aff229d1 100644 --- a/src/components/Home/Article/ArticleMain.tsx +++ b/src/components/Home/Article/ArticleMain.tsx @@ -59,6 +59,7 @@ interface MainProps { }[]; mentions: string[]; hashtags: string[]; + isLiked: boolean; } const ArticleMain = ({ @@ -73,6 +74,7 @@ const ArticleMain = ({ comments, mentions, hashtags, + isLiked, }: MainProps) => { // like state const [isComment1Liked, setIsComment1Liked] = useState(false); // 백엔드에서 이 코멘트 좋아요 한 사람 중 내가 있는지 확인 @@ -183,6 +185,7 @@ const ArticleMain = ({ type: "post", id: postId, }} + isLiked={isLiked} /> )}
Date: Sun, 2 Oct 2022 01:11:22 +0900 Subject: [PATCH 23/30] =?UTF-8?q?fix:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=98=EC=86=94=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F?= =?UTF-8?q?=20=EB=B9=A0=EB=9C=A8=EB=A6=B0useEffect=20deps=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index 36ba3ece..ae069b8d 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -147,9 +147,8 @@ const LikedPeopleModal = ({ window.removeEventListener("resize", resizeEventHandler); window.removeEventListener("keydown", keydownEventHandler); }; - }, [modalInfo.id, modalInfo.type, onModalOff]); + }, [modalInfo.id, modalInfo.type, onModalOff, isLiked, userInfo]); - console.log(likedPeople); return ( Date: Mon, 3 Oct 2022 23:58:41 +0900 Subject: [PATCH 24/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B0=84=EB=9E=B5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPeopleModal.tsx | 17 ++++++++++++++++- .../Common/LikedPeopleModal/LikedPersonUnit.tsx | 6 ++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index ae069b8d..5d06b3a4 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -3,7 +3,7 @@ import CloseSVG from "assets/Svgs/CloseSVG"; import LikedPersonUnit from "components/Common/LikedPeopleModal/LikedPersonUnit"; import Loading from "components/Common/Loading"; import { authorizedCustomAxios } from "customAxios"; -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import styled from "styled-components"; import theme from "styles/theme"; import ModalCard from "styles/UI/ModalCard"; @@ -107,6 +107,7 @@ const LikedPeopleModal = ({ const [isModalWidthSmall, setIsModalWidthSmall] = useState( window.innerWidth <= 735, ); + const [currentPage, setCurrentPage] = useState(1); useEffect(() => { document.body.style.overflow = "hidden"; @@ -149,6 +150,19 @@ const LikedPeopleModal = ({ }; }, [modalInfo.id, modalInfo.type, onModalOff, isLiked, userInfo]); + const getExtraLikedPeople = useCallback(async () => { + try { + const data = await getLikedPeople( + currentPage + 1, + "post", + modalInfo.id, + ); + if (!data.length) return; + setLikedPeople((prev) => [...prev, ...data]); + setCurrentPage((prev) => prev + 1); + } catch (error) {} + }, [modalInfo.id, currentPage]); + return ( ))}
diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index 9fefef47..0ad41ca1 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -40,12 +40,14 @@ interface LikedPersonUnitProps { personObj: LikedPersonType; isSmall: boolean; isFourthFromLast: boolean; + onView: () => void; } const LikedPersonUnit = ({ personObj, isSmall, isFourthFromLast, + onView, }: LikedPersonUnitProps) => { const [isFollowing, setIsFollowing] = useState(personObj.following); const [isFollowLoading, setIsFollowLoading] = useState(false); @@ -77,8 +79,8 @@ const LikedPersonUnit = ({ }; useEffect(() => { - isFourthFromLast && isOnView && console.log("isOnView"); - }, [personObj.member.username, isFourthFromLast, isOnView]); + isFourthFromLast && isOnView && onView(); + }, [isFourthFromLast, isOnView, onView]); return ( From 474301ac86489876642736f78d8f4d4e6614d3ff Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Tue, 4 Oct 2022 00:55:46 +0900 Subject: [PATCH 25/30] =?UTF-8?q?refactor:=20=EB=82=B4=EA=B0=80=20?= =?UTF-8?q?=EC=A2=8B=EC=95=84=ED=95=9C=20=EA=B2=8C=EC=8B=9C=EB=AC=BC?= =?UTF-8?q?=EC=9D=98=20=EC=A2=8B=EC=95=84=EC=9A=94=ED=95=9C=EC=82=AC?= =?UTF-8?q?=EB=9E=8C=EB=AA=A8=EB=8B=AC=20=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20?= =?UTF-8?q?=EB=8D=94=ED=95=B4=EC=A4=84=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPeopleModal.tsx | 47 ++++++++++++------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index 5d06b3a4..c2b45c84 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -3,7 +3,7 @@ import CloseSVG from "assets/Svgs/CloseSVG"; import LikedPersonUnit from "components/Common/LikedPeopleModal/LikedPersonUnit"; import Loading from "components/Common/Loading"; import { authorizedCustomAxios } from "customAxios"; -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; import theme from "styles/theme"; import ModalCard from "styles/UI/ModalCard"; @@ -108,6 +108,24 @@ const LikedPeopleModal = ({ window.innerWidth <= 735, ); const [currentPage, setCurrentPage] = useState(1); + const myLikedPersonModalData: LikedPersonType | null = useMemo( + () => + userInfo + ? { + following: false, + member: { + username: userInfo.memberUsername, + name: userInfo.memberName, + hasStory: false, + image: { + imageUrl: userInfo.memberImageUrl, + }, + id: -1, + }, + } + : null, + [userInfo], + ); useEffect(() => { document.body.style.overflow = "hidden"; @@ -123,22 +141,8 @@ const LikedPeopleModal = ({ getLikedPeople(1, modalInfo.type, modalInfo.id) .then((data) => { setLikedPeople( - isLiked && userInfo - ? [ - { - following: false, - member: { - username: userInfo.memberUsername, - name: userInfo.memberName, - hasStory: false, - image: { - imageUrl: userInfo.memberImageUrl, - }, - id: -1, - }, - }, - ...data, - ] + isLiked && myLikedPersonModalData + ? [myLikedPersonModalData, ...data] : data, ); }) @@ -148,7 +152,14 @@ const LikedPeopleModal = ({ window.removeEventListener("resize", resizeEventHandler); window.removeEventListener("keydown", keydownEventHandler); }; - }, [modalInfo.id, modalInfo.type, onModalOff, isLiked, userInfo]); + }, [ + modalInfo.id, + modalInfo.type, + onModalOff, + isLiked, + userInfo, + myLikedPersonModalData, + ]); const getExtraLikedPeople = useCallback(async () => { try { From c1db37d1e37f6103afbc4b2a73de64b8248375af Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Thu, 20 Apr 2023 23:21:58 +0900 Subject: [PATCH 26/30] =?UTF-8?q?merge:=20develop=20=EB=A8=B8=EC=A7=80=20?= =?UTF-8?q?=EB=95=8C=20=EC=88=98=EC=A0=95=20=EC=82=AC=ED=95=AD=20=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Article/Article.tsx | 2 +- .../Article/ArticleAlone/LargerArticle.tsx | 1 + src/components/Common/Article/ArticleMain.tsx | 27 ++++++++++++++++++- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/components/Common/Article/Article.tsx b/src/components/Common/Article/Article.tsx index 6a4d623b..dd907694 100644 --- a/src/components/Common/Article/Article.tsx +++ b/src/components/Common/Article/Article.tsx @@ -132,7 +132,7 @@ const Article = ({ commentsCount={article.postCommentsCount} mentions={article.mentionsOfContent} hashtags={article.hashtagsOfContent} - isLiked={isLiked} + isLiked likeOptionFlag={article.likeOptionFlag} comments={article.recentComments} /> diff --git a/src/components/Common/Article/ArticleAlone/LargerArticle.tsx b/src/components/Common/Article/ArticleAlone/LargerArticle.tsx index 0716eef6..065126be 100644 --- a/src/components/Common/Article/ArticleAlone/LargerArticle.tsx +++ b/src/components/Common/Article/ArticleAlone/LargerArticle.tsx @@ -161,6 +161,7 @@ const LargerArticle = ({ article, isModal = false }: LargerArticleProps) => { isInLargerArticle={true} comments={article.comments} postId={article.postId} + isLiked /> ` .articleMain__content { .article-likeInfo { margin-bottom: 8px; + &.notZero { + cursor: pointer; + } span { font-weight: ${(props) => props.theme.font.bold}; } @@ -58,6 +62,7 @@ interface MainProps { isInLargerArticle?: boolean; comments: PostType.CommentType[]; postId: number; + isLiked: boolean; } const ArticleMain = ({ @@ -73,6 +78,7 @@ const ArticleMain = ({ isInLargerArticle = false, comments, postId, + isLiked, }: MainProps) => { // content state const [isFullText, setIsFullText] = useState( @@ -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]); @@ -202,9 +209,27 @@ const ArticleMain = ({ return ( <> + {isLikedPeopleModalOn && ( + setIsLikedPeopleModalOn(true)} + onModalOff={() => setIsLikedPeopleModalOn(false)} + modalInfo={{ + type: "post", + id: postId, + }} + isLiked={isLiked} + /> + )}
{(likeOptionFlag || myUsername === memberUsername) && ( -
+
0 ? "notZero" : "" + }`} + onClick={() => + likesCount > 0 && setIsLikedPeopleModalOn(true) + } + > Date: Fri, 21 Apr 2023 23:54:28 +0900 Subject: [PATCH 27/30] =?UTF-8?q?refactor:=20=EC=88=9C=EC=88=98=20?= =?UTF-8?q?=EB=B9=84=EB=8F=99=EA=B8=B0=20=ED=95=A8=EC=88=98=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=96=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B9=BC=EC=84=9C=20=EC=9E=AC=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPeopleModal.tsx | 111 +++++++++--------- 1 file changed, 57 insertions(+), 54 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index c2b45c84..be160489 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -3,7 +3,7 @@ import CloseSVG from "assets/Svgs/CloseSVG"; import LikedPersonUnit from "components/Common/LikedPeopleModal/LikedPersonUnit"; import Loading from "components/Common/Loading"; import { authorizedCustomAxios } from "customAxios"; -import React, { useCallback, useEffect, useMemo, useState } from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import theme from "styles/theme"; import ModalCard from "styles/UI/ModalCard"; @@ -31,6 +31,9 @@ const getLikedPeople = async ( page: number, type: "post" | "comment", id: number, + setLoading: (state: boolean) => void, + setArr: (arr: LikedPersonType[]) => void, + increasePage: () => void, ) => { const config = { params: { @@ -38,6 +41,7 @@ const getLikedPeople = async ( size: 10, }, }; + setLoading(true); try { const { data: { @@ -47,10 +51,12 @@ const getLikedPeople = async ( `/${type === "post" ? "posts" : "comments"}/${id}/likes`, config, ); - return arr; + setArr(arr); + increasePage(); } catch (error) { console.log(error); - return []; + } finally { + setLoading(false); } }; @@ -84,6 +90,27 @@ const LikedPeopleModalMain = styled.div` } `; +const getInitialLikedPeople = ( + userInfo: AuthType.UserInfo | null, + isLiked: boolean, +): LikedPersonType[] => + userInfo && isLiked + ? [ + { + following: false, + member: { + username: userInfo.memberUsername, + name: userInfo.memberName, + hasStory: false, + image: { + imageUrl: userInfo.memberImageUrl, + }, + id: -1, + }, + }, + ] + : []; + interface LikedPeopleModalProps { onModalOn: () => void; onModalOff: () => void; @@ -102,30 +129,14 @@ const LikedPeopleModal = ({ isLiked, }: LikedPeopleModalProps) => { const userInfo = useAppSelector((state) => state.auth.userInfo); - const [isLoading, setIsLoading] = useState(true); - const [likedPeople, setLikedPeople] = useState([]); + const [isLoading, setIsLoading] = useState(true); // axios 요청 중인가? + const [likedPeople, setLikedPeople] = useState( + getInitialLikedPeople(userInfo, isLiked), + ); const [isModalWidthSmall, setIsModalWidthSmall] = useState( window.innerWidth <= 735, ); const [currentPage, setCurrentPage] = useState(1); - const myLikedPersonModalData: LikedPersonType | null = useMemo( - () => - userInfo - ? { - following: false, - member: { - username: userInfo.memberUsername, - name: userInfo.memberName, - hasStory: false, - image: { - imageUrl: userInfo.memberImageUrl, - }, - id: -1, - }, - } - : null, - [userInfo], - ); useEffect(() => { document.body.style.overflow = "hidden"; @@ -138,41 +149,20 @@ const LikedPeopleModal = ({ window.addEventListener("resize", resizeEventHandler); window.addEventListener("keydown", keydownEventHandler); - getLikedPeople(1, modalInfo.type, modalInfo.id) - .then((data) => { - setLikedPeople( - isLiked && myLikedPersonModalData - ? [myLikedPersonModalData, ...data] - : data, - ); - }) - .finally(() => setIsLoading(false)); + getLikedPeople( + currentPage, + modalInfo.type, + modalInfo.id, + setIsLoading, + (arr) => setLikedPeople((prev) => [...prev, ...arr]), + () => setCurrentPage((prev) => prev + 1), + ); return () => { document.body.style.overflow = "unset"; window.removeEventListener("resize", resizeEventHandler); window.removeEventListener("keydown", keydownEventHandler); }; - }, [ - modalInfo.id, - modalInfo.type, - onModalOff, - isLiked, - userInfo, - myLikedPersonModalData, - ]); - - const getExtraLikedPeople = useCallback(async () => { - try { - const data = await getLikedPeople( - currentPage + 1, - "post", - modalInfo.id, - ); - if (!data.length) return; - setLikedPeople((prev) => [...prev, ...data]); - setCurrentPage((prev) => prev + 1); - } catch (error) {} - }, [modalInfo.id, currentPage]); + }, [modalInfo.id, modalInfo.type, onModalOff]); return ( + getLikedPeople( + currentPage, + modalInfo.type, + modalInfo.id, + setIsLoading, + (arr) => + setLikedPeople((prev) => [ + ...prev, + ...arr, + ]), + () => setCurrentPage((prev) => prev + 1), + ) + } /> ))}
From ee1d89986b37591f66e4b88103d4502401653df9 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Sat, 22 Apr 2023 23:56:52 +0900 Subject: [PATCH 28/30] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=82=AC=EB=9E=8C=20StoryCircle=EA=B3=BC=20Usernam?= =?UTF-8?q?e=EC=97=90=EC=84=9C=20HoverModal=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LikedPeopleModal/LikedPersonUnit.tsx | 36 +++++++++++++++---- 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx index 0ad41ca1..9260f63e 100644 --- a/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPersonUnit.tsx @@ -10,6 +10,9 @@ import { authorizedCustomAxios } from "customAxios"; import { authAction } from "app/store/ducks/auth/authSlice"; import { FAIL_TO_REISSUE_MESSAGE } from "utils/constant"; import useOnView from "hooks/useOnView"; +import { getMiniProfile } from "app/store/ducks/modal/modalThunk"; +import { modalActions } from "app/store/ducks/modal/modalSlice"; +import Username from "components/Common/Username"; const StyledLikedPersonUnit = styled.div` padding: 8px 16px; @@ -21,9 +24,6 @@ const StyledLikedPersonUnit = styled.div` } & > div:nth-child(2) { flex: 1; - #username { - font-weight: ${(props) => props.theme.font.bold}; - } } & > button { margin-left: 8px; @@ -82,6 +82,25 @@ const LikedPersonUnit = ({ isFourthFromLast && isOnView && onView(); }, [isFourthFromLast, isOnView, onView]); + const mouseEnterHandler = async ( + event: React.MouseEvent, + ) => { + if (!event) return; + const { top, bottom, left } = + event.currentTarget.getBoundingClientRect(); + await dispatch( + getMiniProfile({ + memberUsername: personObj.member.username, + modalPosition: { top, bottom, left }, + }), + ); + }; + + const mouseLeaveHandler = () => { + dispatch(modalActions.mouseNotOnHoverModal()); + setTimeout(() => dispatch(modalActions.checkMouseOnHoverModal()), 500); + }; + return ( {}} - onMouseLeave={() => {}} // hoverModal + onMouseEnter={mouseEnterHandler} + onMouseLeave={mouseLeaveHandler} />
-
{personObj.member.username}
+ + {personObj.member.username} +
{personObj.member.name}
{personObj.member.username !== myUsername && ( From 16b6dcd4ee34ad4c6faafad125160f41ff5a7883 Mon Sep 17 00:00:00 2001 From: kimyoungyin Date: Sun, 23 Apr 2023 00:10:16 +0900 Subject: [PATCH 29/30] =?UTF-8?q?fix:=20Header,=20LikedPeopleModal,=20Moda?= =?UTF-8?q?lCard=EC=9D=98=20z-index=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=98?= =?UTF-8?q?=EC=97=AC=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=EC=9D=98=20=EC=88=9C=EC=84=9C=EB=A5=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Header/Header.tsx | 2 +- src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx | 1 + src/styles/UI/ModalCard/ModalCard.tsx | 6 +++++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Common/Header/Header.tsx b/src/components/Common/Header/Header.tsx index 5f942a39..9a708892 100644 --- a/src/components/Common/Header/Header.tsx +++ b/src/components/Common/Header/Header.tsx @@ -20,7 +20,7 @@ const HeaderContainer = styled.nav` top: 0; width: 100%; - z-index: 101; + z-index: 98; `; const HeaderContentsWrapper = styled.div` diff --git a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx index be160489..36c0981e 100644 --- a/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx +++ b/src/components/Common/LikedPeopleModal/LikedPeopleModal.tsx @@ -167,6 +167,7 @@ const LikedPeopleModal = ({ return ( ` position: fixed; top: 0; left: 0; - z-index: 999; + z-index: ${(props) => props.zIndex || 999}; display: flex; align-items: center; justify-content: center; @@ -94,6 +95,7 @@ interface ModalProps { minWidth?: number; minHeight?: number; isArticle?: boolean; + zIndex?: number; } const ModalCard = ({ @@ -110,6 +112,7 @@ const ModalCard = ({ minHeight, minWidth, isArticle = false, + zIndex, }: ModalProps) => { const modalRef = useRef() as React.MutableRefObject; const isUpperThanHalfPosition = useMemo( @@ -153,6 +156,7 @@ const ModalCard = ({ maxHeight={maxHeight} minWidth={minWidth} minHeight={minHeight} + zIndex={zIndex} > {isWithCancelBtn && } Date: Sun, 23 Apr 2023 22:49:42 +0900 Subject: [PATCH 30/30] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=A2=8B?= =?UTF-8?q?=EC=95=84=EC=9A=94=20=EB=B2=84=ED=8A=BC=EC=97=90=EB=8F=84=20?= =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=ED=95=9C=20=EC=82=AC=EB=9E=8C=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Common/Article/Comment.tsx | 229 ++++++++++++---------- 1 file changed, 129 insertions(+), 100 deletions(-) diff --git a/src/components/Common/Article/Comment.tsx b/src/components/Common/Article/Comment.tsx index 994dd250..3aead9ff 100644 --- a/src/components/Common/Article/Comment.tsx +++ b/src/components/Common/Article/Comment.tsx @@ -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"; @@ -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, @@ -209,111 +211,138 @@ const Comment = ({ }; return ( - -
- {commentType !== "recent" && ( -
- - onMouseEnter(event, commentObj.member.username) - } - onMouseLeave={onMouseLeave} - /> -
- )} -
- - - onMouseEnter(event, commentObj.member.username) - } - onMouseLeave={onMouseLeave} - > - {commentObj.member.username} - -   - - + <> + {isLikedPeopleModalOn && ( + setIsLikedPeopleModalOn(true)} + onModalOff={() => setIsLikedPeopleModalOn(false)} + isLiked + /> + )} + +
{commentType !== "recent" && ( - <> -
- - {likesCount > 0 && ( - - )} - - {commentObj.member.username === myUsername && ( // '신고' 기능이 없으면 자기 댓글이 아닌 경우에 모달에 보여줄 메뉴가 없어서 아예 버튼 비활성화 - - )} -
- +
+ + onMouseEnter( + event, + commentObj.member.username, + ) + } + onMouseLeave={onMouseLeave} + /> +
)} -
-
- -
-
- {commentType !== "recent" && commentObj.repliesCount > 0 && ( -
- - {isReplyFetching && } - {isReplyOn && commentObj.replies && ( -
    - {commentObj.replies.map((replyObj) => ( - - ))} -
- )} + {commentType !== "recent" && ( + <> +
+ + {likesCount > 0 && ( + + )} + + {commentObj.member.username === + myUsername && ( // '신고' 기능이 없으면 자기 댓글이 아닌 경우에 모달에 보여줄 메뉴가 없어서 아예 버튼 비활성화 + + )} +
+ + )} +
+
+ +
- )} - + {commentType !== "recent" && commentObj.repliesCount > 0 && ( +
+ + {isReplyFetching && } + {isReplyOn && commentObj.replies && ( +
    + {commentObj.replies.map((replyObj) => ( + + ))} +
+ )} +
+ )} + + ); };