From 3e92d1c2d47af8663cb8b322372434f4f6b8d547 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 29 Dec 2024 17:19:22 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Refactor:=20=ED=8C=94=EB=A1=9C=EC=9A=B0?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9E=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(follow)/_components/Header.css.ts | 25 --- .../[userId]/(follow)/_components/Header.tsx | 20 -- .../[userId]/(follow)/_components/mockData.ts | 203 ------------------ src/app/user/[userId]/(follow)/follow.css.ts | 6 +- .../user/[userId]/(follow)/followers/page.tsx | 11 +- .../[userId]/(follow)/followings/page.tsx | 11 +- 6 files changed, 19 insertions(+), 257 deletions(-) delete mode 100644 src/app/user/[userId]/(follow)/_components/Header.css.ts delete mode 100644 src/app/user/[userId]/(follow)/_components/Header.tsx delete mode 100644 src/app/user/[userId]/(follow)/_components/mockData.ts diff --git a/src/app/user/[userId]/(follow)/_components/Header.css.ts b/src/app/user/[userId]/(follow)/_components/Header.css.ts deleted file mode 100644 index 588db35b..00000000 --- a/src/app/user/[userId]/(follow)/_components/Header.css.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const header = style({ - width: '100%', - height: '90px', - padding: '27px', - - position: 'sticky', - top: '0', - left: '0', - zIndex: '10', - - display: 'flex', - alignItems: 'center', - - backgroundColor: '#fff', - - borderBottom: '1px solid rgba(0, 0, 0, 0.10)', -}); - -export const headerTitle = style({ - margin: 'auto', - - fontSize: '2rem', -}); diff --git a/src/app/user/[userId]/(follow)/_components/Header.tsx b/src/app/user/[userId]/(follow)/_components/Header.tsx deleted file mode 100644 index aef96b32..00000000 --- a/src/app/user/[userId]/(follow)/_components/Header.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client'; -import { useRouter, useParams } from 'next/navigation'; -import CommonHeader from '@/components/Header/Header'; - -interface HeaderProps { - title: string; -} - -function Header({ title }: HeaderProps) { - const router = useRouter(); - const param = useParams<{ userId: string }>(); - - const handleBackButtonClick = () => { - router.push(`/user/${param?.userId}/mylist`); - }; - - return ; -} - -export default Header; diff --git a/src/app/user/[userId]/(follow)/_components/mockData.ts b/src/app/user/[userId]/(follow)/_components/mockData.ts deleted file mode 100644 index a295a56b..00000000 --- a/src/app/user/[userId]/(follow)/_components/mockData.ts +++ /dev/null @@ -1,203 +0,0 @@ -interface UserProfileType { - id: number; - profileImageUrl: string; - nickname: string; -} - -export const mockFollowers: UserProfileType[] = [ - { - id: 1, - profileImageUrl: 'https://randomuser.me/api/portraits/men/1.jpg', - nickname: 'JohnDoe1', - }, - { - id: 2, - profileImageUrl: 'https://randomuser.me/api/portraits/women/2.jpg', - nickname: 'JaneDoe2', - }, - { - id: 3, - profileImageUrl: 'https://randomuser.me/api/portraits/men/3.jpg', - nickname: 'BobSmith3', - }, - { - id: 4, - profileImageUrl: 'https://randomuser.me/api/portraits/women/4.jpg', - nickname: 'AliceJohnson4', - }, - { - id: 5, - profileImageUrl: 'https://randomuser.me/api/portraits/men/5.jpg', - nickname: 'CharlieBrown5', - }, - { - id: 6, - profileImageUrl: 'https://randomuser.me/api/portraits/women/6.jpg', - nickname: 'EmmaWatson6', - }, - { - id: 7, - profileImageUrl: 'https://randomuser.me/api/portraits/men/7.jpg', - nickname: 'DavidMiller7', - }, - { - id: 8, - profileImageUrl: 'https://randomuser.me/api/portraits/women/8.jpg', - nickname: 'OliviaSmith8', - }, - { - id: 9, - profileImageUrl: 'https://randomuser.me/api/portraits/men/9.jpg', - nickname: 'SophiaJohnson9', - }, - { - id: 10, - profileImageUrl: 'https://randomuser.me/api/portraits/women/10.jpg', - nickname: 'LiamBrown10', - }, - { - id: 11, - profileImageUrl: 'https://randomuser.me/api/portraits/men/11.jpg', - nickname: 'AvaDavis11', - }, - { - id: 12, - profileImageUrl: 'https://randomuser.me/api/portraits/women/12.jpg', - nickname: 'NoahWilliams12', - }, - { - id: 13, - profileImageUrl: 'https://randomuser.me/api/portraits/men/13.jpg', - nickname: 'IsabellaMoore13', - }, - { - id: 14, - profileImageUrl: 'https://randomuser.me/api/portraits/women/14.jpg', - nickname: 'LucasTaylor14', - }, - { - id: 15, - profileImageUrl: 'https://randomuser.me/api/portraits/men/15.jpg', - nickname: 'MiaAnderson15', - }, - { - id: 16, - profileImageUrl: 'https://randomuser.me/api/portraits/women/16.jpg', - nickname: 'EthanThomas16', - }, - { - id: 17, - profileImageUrl: 'https://randomuser.me/api/portraits/men/17.jpg', - nickname: 'AriaMartinez17', - }, - { - id: 18, - profileImageUrl: 'https://randomuser.me/api/portraits/women/18.jpg', - nickname: 'LoganJackson18', - }, - { - id: 19, - profileImageUrl: 'https://randomuser.me/api/portraits/men/19.jpg', - nickname: 'ChloeWhite19', - }, - { - id: 20, - profileImageUrl: 'https://randomuser.me/api/portraits/women/20.jpg', - nickname: 'ElijahHill20', - }, - { - id: 21, - profileImageUrl: 'https://randomuser.me/api/portraits/men/21.jpg', - nickname: 'AbigailCarter21', - }, - { - id: 22, - profileImageUrl: 'https://randomuser.me/api/portraits/women/22.jpg', - nickname: 'CarterLee22', - }, - { - id: 23, - profileImageUrl: 'https://randomuser.me/api/portraits/men/23.jpg', - nickname: 'GraceKing23', - }, - { - id: 24, - profileImageUrl: 'https://randomuser.me/api/portraits/women/24.jpg', - nickname: 'JacksonScott24', - }, - { - id: 25, - profileImageUrl: 'https://randomuser.me/api/portraits/men/25.jpg', - nickname: 'LilyAdams25', - }, - { - id: 26, - profileImageUrl: 'https://randomuser.me/api/portraits/women/26.jpg', - nickname: 'AidenWilson26', - }, - { - id: 27, - profileImageUrl: 'https://randomuser.me/api/portraits/men/27.jpg', - nickname: 'ZoeEvans27', - }, - { - id: 28, - profileImageUrl: 'https://randomuser.me/api/portraits/women/28.jpg', - nickname: 'MasonHall28', - }, - { - id: 29, - profileImageUrl: 'https://randomuser.me/api/portraits/men/29.jpg', - nickname: 'MadisonWard29', - }, - { - id: 30, - profileImageUrl: 'https://randomuser.me/api/portraits/women/30.jpg', - nickname: 'EzraBrooks30', - }, - { - id: 31, - profileImageUrl: 'https://randomuser.me/api/portraits/men/31.jpg', - nickname: 'AveryBennett31', - }, - { - id: 32, - profileImageUrl: 'https://randomuser.me/api/portraits/women/32.jpg', - nickname: 'WyattMiller32', - }, - { - id: 33, - profileImageUrl: 'https://randomuser.me/api/portraits/men/33.jpg', - nickname: 'ScarlettFisher33', - }, - { - id: 34, - profileImageUrl: 'https://randomuser.me/api/portraits/women/34.jpg', - nickname: 'NathanSimmons34', - }, - { - id: 35, - profileImageUrl: 'https://randomuser.me/api/portraits/men/35.jpg', - nickname: 'HannahLopez35', - }, - { - id: 36, - profileImageUrl: 'https://randomuser.me/api/portraits/women/36.jpg', - nickname: 'JackCooper36', - }, - { - id: 37, - profileImageUrl: 'https://randomuser.me/api/portraits/men/37.jpg', - nickname: 'AddisonFoster37', - }, - { - id: 38, - profileImageUrl: 'https://randomuser.me/api/portraits/women/38.jpg', - nickname: 'AndrewMurray38', - }, - { - id: 39, - profileImageUrl: 'https://randomuser.me/api/portraits/men/39.jpg', - nickname: 'Joe', - }, -]; diff --git a/src/app/user/[userId]/(follow)/follow.css.ts b/src/app/user/[userId]/(follow)/follow.css.ts index 648c0fce..ad27ddb9 100644 --- a/src/app/user/[userId]/(follow)/follow.css.ts +++ b/src/app/user/[userId]/(follow)/follow.css.ts @@ -1,10 +1,10 @@ import { style } from '@vanilla-extract/css'; -import { Header } from '@/styles/font.css'; +import * as fonts from '@/styles/font.css'; export const totalMessage = style([ - Header, + fonts.BodyBold, { - padding: '23px 18px', + padding: '1.2rem 1.6rem', }, ]); diff --git a/src/app/user/[userId]/(follow)/followers/page.tsx b/src/app/user/[userId]/(follow)/followers/page.tsx index b5e4ed80..8b855441 100644 --- a/src/app/user/[userId]/(follow)/followers/page.tsx +++ b/src/app/user/[userId]/(follow)/followers/page.tsx @@ -1,8 +1,8 @@ 'use client'; -import { useParams } from 'next/navigation'; +import { useParams, useRouter } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; -import Header from '../_components/Header'; +import Header from '@/components/Header/Header'; import UserList from '../_components/UserList'; import getFollowerList from '@/app/_api/follow/getFollowerList'; @@ -15,8 +15,13 @@ import { useLanguage } from '@/store/useLanguage'; function FollowersPage() { const { language } = useLanguage(); + const router = useRouter(); const param = useParams<{ userId: string }>(); + const handleBackButtonClick = () => { + router.push(`/user/${param?.userId}/mylist`); + }; + const { data: followerList } = useQuery({ queryKey: [QUERY_KEYS.getFollowerList, param?.userId], queryFn: () => getFollowerList(Number(param?.userId)), @@ -24,7 +29,7 @@ function FollowersPage() { return (
-
+
{followerList?.totalCount !== 0 && (
(); + const handleBackButtonClick = () => { + router.push(`/user/${param?.userId}/mylist`); + }; + const { data: followingList } = useQuery({ queryKey: [QUERY_KEYS.getFollowingList], queryFn: () => getFollowingList(Number(param?.userId)), @@ -24,7 +29,7 @@ function FollowingPage() { return (
-
+
{followingList?.followings.length !== 0 && (
Date: Sun, 29 Dec 2024 20:03:46 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Design:=20=ED=8C=94=EB=A1=9C=EC=9B=8C=20?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9E=89=20=EB=AA=A9=EB=A1=9D=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(follow)/_components/UserList.css.ts | 44 ++++++++----------- .../(follow)/_components/UserList.tsx | 33 +++++--------- .../user/[userId]/(follow)/followers/page.tsx | 4 +- .../[userId]/(follow)/followings/page.tsx | 4 +- 4 files changed, 35 insertions(+), 50 deletions(-) diff --git a/src/app/user/[userId]/(follow)/_components/UserList.css.ts b/src/app/user/[userId]/(follow)/_components/UserList.css.ts index d6b922b1..1d742fe7 100644 --- a/src/app/user/[userId]/(follow)/_components/UserList.css.ts +++ b/src/app/user/[userId]/(follow)/_components/UserList.css.ts @@ -1,23 +1,14 @@ import { style } from '@vanilla-extract/css'; -import * as fonts from '@/styles/__font.css'; -import { vars } from '@/styles/__theme.css'; +import * as fonts from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; -export const container = style({ - width: '100%', - padding: '0 18px', - - display: 'flex', - flexDirection: 'column', - rowGap: '12px', -}); - -export const profileContainer = style({ +export const item = style({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', }); -export const wrapper = style({ +export const profile = style({ display: 'flex', alignItems: 'center', columnGap: '12px', @@ -26,28 +17,31 @@ export const wrapper = style({ fontWeight: '600', }); +export const nickname = style([fonts.BodyBold]); + export const button = style([ - fonts.caption, + fonts.LabelBold, { - height: '24px', - padding: '8px 12px', + padding: '0.6rem 1.2rem', display: 'flex', justifyContent: 'center', alignItems: 'center', + color: vars.color.bluegray10, - fontSize: '1.6rem', - color: vars.color.blue, - backgroundColor: '#EBF4FF', - - borderRadius: '50px', + borderRadius: '1.5rem', }, ]); -export const emptyMessage = style({ - marginTop: '69px', +export const container = style({ + width: 'auto', + margin: '8px 16px', + padding: '12px 12px', + borderRadius: '2rem', - fontSize: '1.6rem', + display: 'flex', + flexDirection: 'column', + rowGap: '16px', - textAlign: 'center', + backgroundColor: vars.color.white, }); diff --git a/src/app/user/[userId]/(follow)/_components/UserList.tsx b/src/app/user/[userId]/(follow)/_components/UserList.tsx index dd1d586f..7cacff19 100644 --- a/src/app/user/[userId]/(follow)/_components/UserList.tsx +++ b/src/app/user/[userId]/(follow)/_components/UserList.tsx @@ -12,23 +12,9 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys'; import * as styles from './UserList.css'; import NoDataComponent from '@/components/NoData/NoDataComponent'; -import getFollowerList from '@/app/_api/follow/getFollowerList'; import { userLocale } from '@/app/user/locale'; import { useLanguage } from '@/store/useLanguage'; -// const BUTTON_MESSAGE = { -// ko: { -// delete: '삭제', -// }, -// }; -// -// const EMPTY_MESSAGE = { -// ko: { -// follower: '아직은 팔로워가 없어요', -// following: '아직 팔로우한 사람이 없어요', -// }, -// }; - function DeleteFollowerButton({ userId }: { userId: number }) { const { language } = useLanguage(); const { user } = useUser(); @@ -62,19 +48,19 @@ interface UserProps { isOwner?: boolean; } -function User({ user, button, isOwner }: UserProps) { +function UserItem({ user, button, isOwner }: UserProps) { const router = useRouter(); return ( -
+
{ router.push(`/user/${user.id}/mylist`); }} > - - {user.nickname} + + {user.nickname}
{isOwner ? button : null}
@@ -98,10 +84,15 @@ function UserList({ type, list }: UserListProps) { ) : ( <> - {type === 'following' && list?.map((user: UserProfileType) => )} + {type === 'following' && list?.map((user: UserProfileType) => )} {type === 'follower' && list?.map((user: UserProfileType) => ( - } isOwner={isOwner} /> + } + isOwner={isOwner} + /> ))} )} diff --git a/src/app/user/[userId]/(follow)/followers/page.tsx b/src/app/user/[userId]/(follow)/followers/page.tsx index 8b855441..2c17d980 100644 --- a/src/app/user/[userId]/(follow)/followers/page.tsx +++ b/src/app/user/[userId]/(follow)/followers/page.tsx @@ -30,11 +30,11 @@ function FollowersPage() { return (
- {followerList?.totalCount !== 0 && ( + {/* {followerList?.totalCount !== 0 && (
{`${userLocale[language].total} ${followerList?.totalCount}${userLocale[language].people}`}
- )} + )} */}
); diff --git a/src/app/user/[userId]/(follow)/followings/page.tsx b/src/app/user/[userId]/(follow)/followings/page.tsx index a6362ab8..0cdf38b0 100644 --- a/src/app/user/[userId]/(follow)/followings/page.tsx +++ b/src/app/user/[userId]/(follow)/followings/page.tsx @@ -30,11 +30,11 @@ function FollowingPage() { return (
- {followingList?.followings.length !== 0 && ( + {/* {followingList?.followings.length !== 0 && (
{`${userLocale[language].total} ${followingList?.followings.length}${userLocale[language].people}`}
- )} + )} */}
); From 04a713acb128d30d805572b6bb314c3d07d30808 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 29 Dec 2024 20:36:00 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Feat:=20=EC=82=AD=EC=A0=9C=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EA=B3=B5=EC=9A=A9=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=ED=99=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ListDetailOuter/DeleteModalButton.tsx | 16 +++-------- .../_components/OptionToggleButton.tsx | 28 ++++++++----------- src/components/DeleteModal/DeleteModal.tsx | 25 +++++++++++++++++ 3 files changed, 41 insertions(+), 28 deletions(-) create mode 100644 src/components/DeleteModal/DeleteModal.tsx diff --git a/src/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx b/src/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx index 54c0bda3..3a8e5606 100644 --- a/src/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx +++ b/src/app/list/[listId]/_components/ListDetailOuter/DeleteModalButton.tsx @@ -1,17 +1,15 @@ -import { ReactNode } from 'react'; -import Modal from '@/components/Modal/Modal'; import useBooleanOutput from '@/hooks/useBooleanOutput'; import * as styles from './ModalButtonStyle.css'; import DeleteButton from '/public/icons/trash_can.svg'; import { modalLocale } from '@/app/list/[listId]/locale'; import { useLanguage } from '@/store/useLanguage'; +import DeleteModal from '@/components/DeleteModal/DeleteModal'; -interface DeleteModalProps { - children?: ReactNode; +interface DeleteModalButtonProps { onDelete: () => void; } -export default function DeleteModal({ children, onDelete }: DeleteModalProps) { +export default function DeleteModalButton({ onDelete }: DeleteModalButtonProps) { const { language } = useLanguage(); const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); //모달 열림,닫힘 상태 관리 const handleConfirmButtonClick = () => { @@ -28,13 +26,7 @@ export default function DeleteModal({ children, onDelete }: DeleteModalProps) { {/*✨ 조합한 모달 */} {isOn && ( - - {modalLocale[language].deleteMessage} - {children} - - {modalLocale[language].confirm} - - + )} ); diff --git a/src/app/user/[userId]/_components/OptionToggleButton.tsx b/src/app/user/[userId]/_components/OptionToggleButton.tsx index c074dbaa..f703dcea 100644 --- a/src/app/user/[userId]/_components/OptionToggleButton.tsx +++ b/src/app/user/[userId]/_components/OptionToggleButton.tsx @@ -16,7 +16,7 @@ import toasting from '@/lib/utils/toasting'; import toastMessage from '@/lib/constants/toastMessage'; import { useLanguage } from '@/store/useLanguage'; -import Modal from '@/components/Modal/Modal'; +import DeleteModal from '@/components/DeleteModal/DeleteModal'; interface OptionToggleButtonType { listId: string; @@ -93,21 +93,17 @@ function OptionToggleButton({ listId, userId, isPublicCurrent }: OptionToggleBut
{isModalOpen && ( - - {modalLocale[language].deleteMessage} - { - e.stopPropagation(); - handleModalOff(); - }} - onClick={(e) => { - e.stopPropagation(); - deleteListMutation.mutate(); - }} - > - {modalLocale[language].confirm} - - + { + e.stopPropagation(); + deleteListMutation.mutate(); + }} + handleCancel={(e) => { + e.stopPropagation(); + handleModalOff(); + }} + /> )} ); diff --git a/src/components/DeleteModal/DeleteModal.tsx b/src/components/DeleteModal/DeleteModal.tsx new file mode 100644 index 00000000..19d641fb --- /dev/null +++ b/src/components/DeleteModal/DeleteModal.tsx @@ -0,0 +1,25 @@ +import { MouseEventHandler, ReactNode } from 'react'; +import { useLanguage } from '@/store/useLanguage'; +import { modalLocale } from '@/app/list/[listId]/locale'; +import Modal from '@/components/Modal/Modal'; + +interface DeleteModalProps { + children?: ReactNode; + handleClose: () => void; + handleDelete: MouseEventHandler; + handleCancel: MouseEventHandler; +} + +export default function DeleteModal({ children, handleClose, handleDelete, handleCancel }: DeleteModalProps) { + const { language } = useLanguage(); + + return ( + + {modalLocale[language].deleteMessage} + {children} + + {modalLocale[language].confirm} + + + ); +} From f9533807839af96aa848972c527a13fb3c4acd49 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 29 Dec 2024 20:43:13 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Feature:=20=ED=8C=94=EB=A1=9C=EC=9B=8C=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=99=95=EC=9D=B8=20=EA=B3=BC=EC=A0=95(?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC)=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(follow)/_components/UserList.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/app/user/[userId]/(follow)/_components/UserList.tsx b/src/app/user/[userId]/(follow)/_components/UserList.tsx index 7cacff19..6cb84c61 100644 --- a/src/app/user/[userId]/(follow)/_components/UserList.tsx +++ b/src/app/user/[userId]/(follow)/_components/UserList.tsx @@ -1,24 +1,26 @@ 'use client'; - import { ReactNode } from 'react'; import { useParams, useRouter } from 'next/navigation'; import { useMutation, useQueryClient } from '@tanstack/react-query'; -import UserProfileImage from '@/components/UserProfileImage/UserProfileImage'; import deleteFollower from '@/app/_api/follow/deleteFollower'; +import { userLocale } from '@/app/user/locale'; import { useUser } from '@/store/useUser'; +import { useLanguage } from '@/store/useLanguage'; import { UserProfileType } from '@/lib/types/userProfileType'; import { QUERY_KEYS } from '@/lib/constants/queryKeys'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; +import DeleteModal from '@/components/DeleteModal/DeleteModal'; +import UserProfileImage from '@/components/UserProfileImage/UserProfileImage'; +import NoDataComponent from '@/components/NoData/NoDataComponent'; import * as styles from './UserList.css'; -import NoDataComponent from '@/components/NoData/NoDataComponent'; -import { userLocale } from '@/app/user/locale'; -import { useLanguage } from '@/store/useLanguage'; function DeleteFollowerButton({ userId }: { userId: number }) { const { language } = useLanguage(); const { user } = useUser(); const queryClient = useQueryClient(); + const { handleSetOff, handleSetOn, isOn } = useBooleanOutput(); const deleteUser = useMutation({ mutationKey: [QUERY_KEYS.deleteFollower, userId], @@ -31,14 +33,14 @@ function DeleteFollowerButton({ userId }: { userId: number }) { }); return ( - + <> + + {isOn && ( + deleteUser.mutate()} /> + )} + ); } From 109067de6cd9d35f260f07f77d50a649259cb5e3 Mon Sep 17 00:00:00 2001 From: Seoyoung Date: Sun, 29 Dec 2024 20:47:35 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Design:=20=ED=8C=94=EB=A1=9C=EC=9B=8C=20?= =?UTF-8?q?=ED=8C=94=EB=A1=9C=EC=9E=89=20=EB=AA=A9=EB=A1=9D=20=EC=BB=A4?= =?UTF-8?q?=EC=84=9C=ED=8F=AC=EC=9D=B8=ED=84=B0=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/user/[userId]/(follow)/_components/UserList.css.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/user/[userId]/(follow)/_components/UserList.css.ts b/src/app/user/[userId]/(follow)/_components/UserList.css.ts index 1d742fe7..4b7b1bbd 100644 --- a/src/app/user/[userId]/(follow)/_components/UserList.css.ts +++ b/src/app/user/[userId]/(follow)/_components/UserList.css.ts @@ -15,6 +15,8 @@ export const profile = style({ fontSize: '1.6rem', fontWeight: '600', + + cursor: 'pointer', }); export const nickname = style([fonts.BodyBold]);