From c059dc32a54817bfaf24252b7b19e57f108dfddf Mon Sep 17 00:00:00 2001 From: Seoyoung Min Date: Thu, 27 Mar 2025 21:13:15 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Refactor:=ED=8C=94=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B3=B5=EC=9A=A9=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=9D=B4=EB=8F=99(=EC=B6=94?= =?UTF-8?q?=EC=B2=9C=EB=A6=AC=EC=8A=A4=ED=84=B0>=EA=B3=B5=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_components/RecommendedUsers.css.ts | 21 ---------------- .../(home)/_components/RecommendedUsers.tsx | 2 +- src/app/user/locale.ts | 5 ++-- .../FollowButton/FollowButton.css.ts | 24 +++++++++++++++++++ .../FollowButton}/FollowButton.tsx | 3 ++- 5 files changed, 29 insertions(+), 26 deletions(-) create mode 100644 src/components/FollowButton/FollowButton.css.ts rename src/{app/(home)/_components => components/FollowButton}/FollowButton.tsx (98%) diff --git a/src/app/(home)/_components/RecommendedUsers.css.ts b/src/app/(home)/_components/RecommendedUsers.css.ts index 40d5c692..1caeefa6 100644 --- a/src/app/(home)/_components/RecommendedUsers.css.ts +++ b/src/app/(home)/_components/RecommendedUsers.css.ts @@ -78,24 +78,3 @@ export const recommendUserNickname = style({ fontWeight: 400, letterSpacing: '-0.28px', }); - -export const followButtonDefault = style({ - width: 'auto', - height: 'auto', - padding: '4px 6px', - - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - - backgroundColor: '#3D95FF', - borderRadius: '20px', - color: vars.color.white, - fontSize: '1.2rem', - fontWeight: '400', -}); - -export const followButtonFollowing = style({ - backgroundColor: vars.color.white, - color: '#8599AD', -}); diff --git a/src/app/(home)/_components/RecommendedUsers.tsx b/src/app/(home)/_components/RecommendedUsers.tsx index 78b64f41..a995d44c 100644 --- a/src/app/(home)/_components/RecommendedUsers.tsx +++ b/src/app/(home)/_components/RecommendedUsers.tsx @@ -7,7 +7,7 @@ import { useQuery } from '@tanstack/react-query'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import getRecommendedUsers from '@/app/_api/home/getRecommendedUsers'; import { useUser } from '@/store/useUser'; -import FollowButton from './FollowButton'; +import FollowButton from '@/components/FollowButton/FollowButton'; import { UserProfileType } from '@/lib/types/userProfileType'; import fallbackProfile from '/public/images/fallback_profileImage.webp'; diff --git a/src/app/user/locale.ts b/src/app/user/locale.ts index bcbc5aa0..2042602c 100644 --- a/src/app/user/locale.ts +++ b/src/app/user/locale.ts @@ -5,16 +5,15 @@ export const userLocale = { follower: '아직은 팔로워가 없어요', following: '아직 팔로우한 사람이 없어요', }, + follow: '팔로우', follower: '팔로워', following: '팔로잉', + cancelFollow: '팔로우 취소', total: '총', people: '명', myList: '마이 리스트', collaboList: '콜라보 리스트', noListMessage: '해당 카테고리에 아직 리스트가 없어요', - cancelFollow: '팔로우 취소', - follow: '팔로우', - confirm: '확인', goToMypage: '마이페이지로 이동하기', profileImageAlt: '프로필 이미지', diff --git a/src/components/FollowButton/FollowButton.css.ts b/src/components/FollowButton/FollowButton.css.ts new file mode 100644 index 00000000..b268645b --- /dev/null +++ b/src/components/FollowButton/FollowButton.css.ts @@ -0,0 +1,24 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const followButtonDefault = style({ + width: 'auto', + height: 'auto', + padding: '4px 6px', + + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + backgroundColor: vars.color.blue, + borderRadius: '20px', + color: vars.color.white, + fontSize: '1.2rem', + fontWeight: '400', +}); + +export const followButtonFollowing = style({ + backgroundColor: vars.color.white, + color: vars.color.bluegray8, + border: `0.5px solid ${vars.color.bluegray8}`, +}); diff --git a/src/app/(home)/_components/FollowButton.tsx b/src/components/FollowButton/FollowButton.tsx similarity index 98% rename from src/app/(home)/_components/FollowButton.tsx rename to src/components/FollowButton/FollowButton.tsx index 4aa4e339..b05d6d13 100644 --- a/src/app/(home)/_components/FollowButton.tsx +++ b/src/components/FollowButton/FollowButton.tsx @@ -11,7 +11,6 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { UserType } from '@/lib/types/userProfileType'; import toasting from '@/lib/utils/toasting'; import toastMessage, { MAX_FOLLOWING } from '@/lib/constants/toastMessage'; -import * as styles from './RecommendedUsers.css'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import Modal from '@/components/Modal/Modal'; @@ -19,6 +18,8 @@ import LoginModal from '@/components/login/LoginModal'; import { useLanguage } from '@/store/useLanguage'; import { commonLocale } from '@/components/locale'; +import * as styles from './FollowButton.css'; + interface FollowButtonProps { isFollowing: boolean; onClick: () => void; From c6b7483980638143bf866530130c2acdf2291324 Mon Sep 17 00:00:00 2001 From: Seoyoung Min Date: Thu, 27 Mar 2025 21:13:36 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Refactor:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8C=94=EB=A1=9C=EC=9E=89=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EA=B3=B5=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ListDetailOuter/ListInformation.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx index 3da8bbb0..39369ae8 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx @@ -31,7 +31,7 @@ import * as styles from './ListInformation.css'; import * as modalStyles from '@/components/Modal/ModalButton.css'; import LockIcon from '/public/icons/ver3/lock.svg'; import VisibilityIcon from '/public/icons/ver3/visibility.svg'; -import FollowButton from '@/app/user/[userId]/_components/FollowButton'; +import FollowButton from '@/components/FollowButton/FollowButton'; import getBottomSheetOptionList from '@/app/list/[listId]/_components/ListDetailInner/getBottomSheetOptionList'; import ModalPortal from '@/components/modal-portal'; import BottomSheet from '@/components/BottomSheet/BottomSheet'; @@ -79,9 +79,9 @@ function ListInformation() { const router = useRouter(); const { onClickMoveToPage } = useMoveToPage(); const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); - const [isFollowed, setIsFollowed] = useState(true); const [sheetOptionList, setSheetOptionList] = useState([]); const [isSheetActive, setSheetActive] = useState(false); + const [isFollowed, setIsFollowed] = useState(false); //zustand로 관리하는 user정보 불러오기 const { user } = useUser(); @@ -209,7 +209,17 @@ function ListInformation() {
{list?.ownerNickname}
-
{userId !== list?.ownerId && }
+ {/*isFollowed={list?.isFollowing}로 변경해야함 */} +
+ {userId && userId !== list?.ownerId && ( + setIsFollowed(!isFollowed)} + userId={userId} + targetId={list?.ownerId} + /> + )} +
{/* TODO: 콜라보레이터 기능 주석 */} {/*
*/} {/* */} From 38336edd3a06594a805c9ef43856cad85ab8eb83 Mon Sep 17 00:00:00 2001 From: Seoyoung Min Date: Sun, 27 Apr 2025 18:56:24 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20ui=20?= =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(home)/_components/RecommendedUsers.tsx | 2 +- .../ListDetailOuter/ListInformation.tsx | 47 +++++++++---------- src/components/FollowButton/FollowButton.tsx | 47 +++++++++---------- src/lib/types/listType.ts | 1 + 4 files changed, 44 insertions(+), 53 deletions(-) diff --git a/src/app/(home)/_components/RecommendedUsers.tsx b/src/app/(home)/_components/RecommendedUsers.tsx index a995d44c..e8a3e368 100644 --- a/src/app/(home)/_components/RecommendedUsers.tsx +++ b/src/app/(home)/_components/RecommendedUsers.tsx @@ -128,7 +128,7 @@ function UserRecommendListItem({ data, handleScrollToRight, userId }: UserRecomm
{data.nickname}
- + ); diff --git a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx index 39369ae8..ecdb72d1 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/ListInformation.tsx @@ -55,23 +55,25 @@ const convertToCommentType = (data: NewestCommentType): CommentType => ({ isDeleted: false, // 💡 기본값 false 설정 }); -// const NewestComment = ({ data }: { data: NewestCommentType }) => { -// return ( -//
-// {}} -// activeNickname={''} -// handleSetCommentId={() => {}} -// handleSetComment={() => {}} -// listId={11} -// commentId={22} -// // currentUserInfo={id: number,nickname: string description?: string profileImageUrl?: string backgroundImageUrl?: string followerCount: number followingCount: number isFollowed: boolean isOwner: boolean} -// handleEdit={() => {}} -// /> -//
-// ); -// }; +` +const NewestComment = ({ data }: { data: NewestCommentType }) => { + return ( +
+ {}} + activeNickname={''} + handleSetCommentId={() => {}} + handleSetComment={() => {}} + listId={11} + commentId={22} + // currentUserInfo={id: number,nickname: string description?: string profileImageUrl?: string backgroundImageUrl?: string followerCount: number followingCount: number isFollowed: boolean isOwner: boolean} + handleEdit={() => {}} + /> +
+ ); +}; +`; function ListInformation() { const { language } = useLanguage(); @@ -81,7 +83,6 @@ function ListInformation() { const { isOn, handleSetOn, handleSetOff } = useBooleanOutput(); const [sheetOptionList, setSheetOptionList] = useState([]); const [isSheetActive, setSheetActive] = useState(false); - const [isFollowed, setIsFollowed] = useState(false); //zustand로 관리하는 user정보 불러오기 const { user } = useUser(); @@ -91,10 +92,10 @@ function ListInformation() { data: list, error, isError, + refetch, } = useQuery({ queryKey: [QUERY_KEYS.getListDetail, params?.listId], queryFn: () => getListDetail(Number(params?.listId)), - enabled: !!params?.listId, retry: 0, }); @@ -209,15 +210,9 @@ function ListInformation() {
{list?.ownerNickname}
- {/*isFollowed={list?.isFollowing}로 변경해야함 */}
{userId && userId !== list?.ownerId && ( - setIsFollowed(!isFollowed)} - userId={userId} - targetId={list?.ownerId} - /> + )}
{/* TODO: 콜라보레이터 기능 주석 */} diff --git a/src/components/FollowButton/FollowButton.tsx b/src/components/FollowButton/FollowButton.tsx index b05d6d13..485068e0 100644 --- a/src/components/FollowButton/FollowButton.tsx +++ b/src/components/FollowButton/FollowButton.tsx @@ -9,9 +9,9 @@ import getUserOne from '@/app/_api/user/getUserOne'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import { UserType } from '@/lib/types/userProfileType'; +import { useUser } from '@/store/useUser'; import toasting from '@/lib/utils/toasting'; import toastMessage, { MAX_FOLLOWING } from '@/lib/constants/toastMessage'; - import useBooleanOutput from '@/hooks/useBooleanOutput'; import Modal from '@/components/Modal/Modal'; import LoginModal from '@/components/login/LoginModal'; @@ -21,41 +21,32 @@ import { commonLocale } from '@/components/locale'; import * as styles from './FollowButton.css'; interface FollowButtonProps { - isFollowing: boolean; - onClick: () => void; + isFollowed: boolean; + onClick?: () => void; userId: number; - targetId: number; } -function FollowButton({ isFollowing, onClick, userId, targetId }: FollowButtonProps) { - const { language } = useLanguage(); +function FollowButton({ isFollowed, onClick, userId }: FollowButtonProps) { const queryClient = useQueryClient(); + const { language } = useLanguage(); + const { user: userMe } = useUser(); const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); const { data: userMeData } = useQuery({ - queryKey: [QUERY_KEYS.userOne, userId], - queryFn: () => getUserOne(userId), - enabled: !!userId, - retry: 1, + queryKey: [QUERY_KEYS.userOne, userMe.id], + queryFn: () => getUserOne(userMe.id as number), + enabled: !!userMe.id, }); const followUserMutation = useMutation({ - mutationKey: [isFollowing ? QUERY_KEYS.deleteFollow : QUERY_KEYS.follow, targetId], - mutationFn: isFollowing ? () => deleteFollowUser(targetId) : () => createFollowUser(targetId), + mutationKey: [isFollowed ? QUERY_KEYS.deleteFollow : QUERY_KEYS.follow, userId], + mutationFn: isFollowed ? () => deleteFollowUser(userId) : () => createFollowUser(userId), onMutate: async () => { await queryClient.cancelQueries({ queryKey: [QUERY_KEYS.userOne, userId] }); const previousFollower: UserType | undefined = queryClient.getQueryData([QUERY_KEYS.userOne, userId]); if (!previousFollower) return; - const nextData = { - ...previousFollower, - isFollowed: !isFollowing, - followerCount: isFollowing ? previousFollower.followerCount - 1 : previousFollower.followerCount + 1, - }; - - queryClient.setQueryData([QUERY_KEYS.userOne, userId], nextData); - return { previousFollower }; }, onError: (error: AxiosError, userId: number, context) => { @@ -68,27 +59,31 @@ function FollowButton({ isFollowing, onClick, userId, targetId }: FollowButtonPr queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.userOne, userId], }); + queryClient.invalidateQueries({ + queryKey: [QUERY_KEYS.getListDetail], + }); }, }); - const handleFollowUser = (isFollowing: boolean) => () => { - if (!isFollowing) { + const handleFollowUser = (isFollowed: boolean) => () => { + if (!isFollowed) { if (userMeData && userMeData?.followingCount >= MAX_FOLLOWING) { toasting({ type: 'warning', txt: toastMessage[language].limitFollow }); return; } } followUserMutation.mutate(userId); - onClick(); + if (onClick) onClick(); }; return ( <> {isOn && ( diff --git a/src/lib/types/listType.ts b/src/lib/types/listType.ts index eb120024..2696a088 100644 --- a/src/lib/types/listType.ts +++ b/src/lib/types/listType.ts @@ -112,6 +112,7 @@ export interface ListDetailType { items: ItemType[]; isCollected: boolean; isPublic: boolean; + isFollowing: boolean; backgroundPalette: BACKGROUND_COLOR_PALETTE_TYPE; backgroundColor: string; collectCount: number;