Feature: 팔로워 팔로잉 페이지 디자인 수정 및 확인 기능 추가

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 && (
-        <Modal handleModalClose={handleSetOff}>
-          <Modal.Title>{modalLocale[language].deleteMessage}</Modal.Title>
-          {children}
-          <Modal.Button onCancel={handleSetOff} onClick={handleConfirmButtonClick}>
-            {modalLocale[language].confirm}
-          </Modal.Button>
-        </Modal>
+        <DeleteModal handleClose={handleSetOff} handleDelete={handleConfirmButtonClick} handleCancel={handleSetOff} />
       )}
     </>
   );

src/app/user/[userId]/(follow)/_components/UserList.css.ts

@@ -1,53 +1,49 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/__font.css';
-import { vars } from '@/styles/__theme.css';
-
-export const container = style({
-  width: '100%',
-  padding: '0 18px',
+import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
 
-  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',
 
   fontSize: '1.6rem',
   fontWeight: '600',
+
+  cursor: 'pointer',
 });
 
+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,
 });

src/app/user/[userId]/(follow)/_components/UserList.tsx

@@ -1,38 +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 * as styles from './UserList.css';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+import DeleteModal from '@/components/DeleteModal/DeleteModal';
+import UserProfileImage from '@/components/UserProfileImage/UserProfileImage';
 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: '아직 팔로우한 사람이 없어요',
-//   },
-// };
+import * as styles from './UserList.css';
 
 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],
@@ -45,14 +33,14 @@ function DeleteFollowerButton({ userId }: { userId: number }) {
   });
 
   return (
-    <button
-      className={styles.button}
-      onClick={() => {
-        deleteUser.mutate();
-      }}
-    >
-      {userLocale[language].delete}
-    </button>
+    <>
+      <button className={styles.button} onClick={handleSetOn}>
+        {userLocale[language].delete}
+      </button>
+      {isOn && (
+        <DeleteModal handleClose={handleSetOff} handleCancel={handleSetOff} handleDelete={() => deleteUser.mutate()} />
+      )}
+    </>
   );
 }
 
@@ -62,19 +50,19 @@ interface UserProps {
   isOwner?: boolean;
 }
 
-function User({ user, button, isOwner }: UserProps) {
+function UserItem({ user, button, isOwner }: UserProps) {
   const router = useRouter();
 
   return (
-    <div className={styles.profileContainer}>
+    <div className={styles.item}>
       <div
-        className={styles.wrapper}
+        className={styles.profile}
         onClick={() => {
           router.push(`/user/${user.id}/mylist`);
         }}
       >
-        <UserProfileImage src={user.profileImageUrl} size={50} />
-        {user.nickname}
+        <UserProfileImage src={user.profileImageUrl} size={40} />
+        <span className={styles.nickname}>{user.nickname}</span>
       </div>
       {isOwner ? button : null}
     </div>
@@ -98,10 +86,15 @@ function UserList({ type, list }: UserListProps) {
         <NoDataComponent message={userLocale[language].empty[type]} />
       ) : (
         <>
-          {type === 'following' && list?.map((user: UserProfileType) => <User key={user.id} user={user} />)}
+          {type === 'following' && list?.map((user: UserProfileType) => <UserItem key={user.id} user={user} />)}
           {type === 'follower' &&
             list?.map((user: UserProfileType) => (
-              <User key={user.id} user={user} button={<DeleteFollowerButton userId={user.id} />} isOwner={isOwner} />
+              <UserItem
+                key={user.id}
+                user={user}
+                button={<DeleteFollowerButton userId={user.id} />}
+                isOwner={isOwner}
+              />
             ))}
         </>
       )}