From c30e2f4fe6a75c719de2637e0272f014d3f83c34 Mon Sep 17 00:00:00 2001
From: LSJ <j44s11@naver.com>
Date: Sat, 16 Nov 2024 21:46:24 +0900
Subject: [PATCH] perf

---
 components/atoms/Avatar.tsx                   |   6 +-
 components/atoms/BasicAvatar.tsx              |   2 +-
 components/atoms/InfoCard.tsx                 |   2 +-
 components/molecules/OrganizerBar.tsx         |   1 +
 components/molecules/ProfileDetailBlock.tsx   |   8 +-
 components/molecules/UserComment.tsx          |   1 +
 components/molecules/UserCommentInput.tsx     |   1 +
 components/molecules/UserItem.tsx             |   8 +-
 .../molecules/cards/ProfileCommentCard.tsx    |   8 +-
 .../molecules/groups/InviteUserGroups.tsx     |   8 +-
 components/molecules/headers/FeedHeader.tsx   |   8 +-
 .../imageSliderType/ImageSliderMember.tsx     |   8 +-
 design/attendance/AttendanceBar.tsx           |  97 ----------
 design/attendance/AttendanceModal.tsx         | 165 ------------------
 hooks/groupStudy/queries.ts                   |  12 +-
 hooks/user/queries.ts                         |   6 +-
 modals/RecentJoinUserPopUp.tsx                |   2 +-
 modals/pop-up/LastWeekAttendPopUp.tsx         |   1 +
 modals/profile/ProfileCardModal.tsx           |   1 +
 .../gather/detail/GatherParticipation.tsx     |  18 +-
 pageTemplates/group/GroupMine.tsx             |   2 -
 pageTemplates/group/detail/GroupOrganizer.tsx |   7 +-
 pageTemplates/member/MemberMyProfile.tsx      |   1 +
 pageTemplates/notice/NoticeChat.tsx           |   1 +
 pageTemplates/profile/DetailInfo.tsx          |  46 +++--
 .../profile/profileOverview/ProfileInfo.tsx   |   8 +-
 pageTemplates/ranking/RankingMembers.tsx      |   1 +
 pageTemplates/ranking/RankingOverview.tsx     |   1 +
 .../user/userOverview/UserOverView.tsx        |   1 +
 pages/chat/[uid].tsx                          |   1 +
 pages/designs/studyAttendance.tsx             |  24 ---
 pages/member/[location]/[category].tsx        |   8 +-
 pages/member/[location]/detail.tsx            |   8 +-
 pages/profile/[userId].tsx                    |  30 ++--
 pages/user/alphabet.tsx                       |   1 +
 stories/designs/attendanceModal.stories.ts    |  26 ---
 36 files changed, 139 insertions(+), 390 deletions(-)
 delete mode 100644 design/attendance/AttendanceBar.tsx
 delete mode 100644 design/attendance/AttendanceModal.tsx
 delete mode 100644 pages/designs/studyAttendance.tsx
 delete mode 100644 stories/designs/attendanceModal.stories.ts

diff --git a/components/atoms/Avatar.tsx b/components/atoms/Avatar.tsx
index 3ee657168..99171739e 100644
--- a/components/atoms/Avatar.tsx
+++ b/components/atoms/Avatar.tsx
@@ -16,6 +16,7 @@ interface IAvatar {
   sizeLength?: number;
   avatar?: IAvatarProp;
   uid?: string;
+  userId?: string;
   isPriority?: boolean;
   shadowAvatar?: number;
   isLink?: boolean;
@@ -28,6 +29,7 @@ function AvatarComponent({
   avatar,
   uid,
   isPriority,
+  userId,
   shadowAvatar,
   isLink = true,
 }: IAvatar) {
@@ -128,12 +130,12 @@ function AvatarComponent({
 
   return (
     <>
-      {!isLink ? (
+      {!isLink || !userId ? (
         <Box>
           <AvatarComponent />
         </Box>
       ) : (
-        <Link href={`/profile/${uid}`} style={{ outline: "none" }}>
+        <Link href={`/profile/${userId}`} style={{ outline: "none" }}>
           <AvatarComponent />
         </Link>
       )}
diff --git a/components/atoms/BasicAvatar.tsx b/components/atoms/BasicAvatar.tsx
index 690979025..2f992c60b 100644
--- a/components/atoms/BasicAvatar.tsx
+++ b/components/atoms/BasicAvatar.tsx
@@ -12,7 +12,7 @@ function BasicAvatar() {
 
   return (
     <Box onClick={onClick}>
-      <Avatar image="" avatar={{ type: 0, bg: 9 }} size="md" isLink={false} />
+      <Avatar  image="" avatar={{ type: 0, bg: 9 }} size="md" isLink={false} />
     </Box>
   );
 }
diff --git a/components/atoms/InfoCard.tsx b/components/atoms/InfoCard.tsx
index d79343d8b..c011440f9 100644
--- a/components/atoms/InfoCard.tsx
+++ b/components/atoms/InfoCard.tsx
@@ -25,7 +25,7 @@ export default function InfoCard({
   return (
     <CardContainer>
       {leftComponent && <Box mr="16px">{leftComponent}</Box>}
-      <Avatar image={image} size="md" isLink={isLink} />
+      <Avatar  image={image} size="md" isLink={isLink} />
       <UserInfoContainer>
         <UserNameBadgeContainer>
           <span>{name}</span>
diff --git a/components/molecules/OrganizerBar.tsx b/components/molecules/OrganizerBar.tsx
index c1abe0e68..e040aec9a 100644
--- a/components/molecules/OrganizerBar.tsx
+++ b/components/molecules/OrganizerBar.tsx
@@ -24,6 +24,7 @@ function OrganizerBar({ organizer, createdAt, children, isAdminOpen }: Organizer
           <AboutIcon size="md" />
         ) : (
           <Avatar
+            userId={organizer._id}
             avatar={organizer.avatar}
             uid={organizer.uid}
             image={organizer.profileImage}
diff --git a/components/molecules/ProfileDetailBlock.tsx b/components/molecules/ProfileDetailBlock.tsx
index fba8deb03..a95532f32 100644
--- a/components/molecules/ProfileDetailBlock.tsx
+++ b/components/molecules/ProfileDetailBlock.tsx
@@ -46,7 +46,13 @@ function ProfileDetailBlock({ user, attendInfo }: ProfileDetailBlockProps) {
           pr={2}
           borderRight="var(--border-main)"
         >
-          <Avatar uid={user.uid} avatar={user?.avatar} image={user.profileImage} size="md" />
+          <Avatar
+            userId={user._id}
+            uid={user.uid}
+            avatar={user?.avatar}
+            image={user.profileImage}
+            size="md"
+          />
           <Box>{user.name}</Box>
         </Flex>
         <Flex direction="column" flex={1}>
diff --git a/components/molecules/UserComment.tsx b/components/molecules/UserComment.tsx
index 02c782139..d91665e41 100644
--- a/components/molecules/UserComment.tsx
+++ b/components/molecules/UserComment.tsx
@@ -144,6 +144,7 @@ function UserComment({
         <Flex justify="center" alignSelf="flex-start" mr={2}>
           <Avatar
             size="mds"
+            userId={user._id}
             avatar={user.avatar}
             image={user.profileImage}
             uid={user.uid}
diff --git a/components/molecules/UserCommentInput.tsx b/components/molecules/UserCommentInput.tsx
index 8de105aff..a3191fd13 100644
--- a/components/molecules/UserCommentInput.tsx
+++ b/components/molecules/UserCommentInput.tsx
@@ -74,6 +74,7 @@ function UserCommentInput({
             <Avatar
               isLink={false}
               size="mds"
+              userId={user._id}
               uid={user.uid}
               avatar={user.avatar}
               image={user.profileImage}
diff --git a/components/molecules/UserItem.tsx b/components/molecules/UserItem.tsx
index bc777fa23..1ecb95696 100644
--- a/components/molecules/UserItem.tsx
+++ b/components/molecules/UserItem.tsx
@@ -22,7 +22,13 @@ export function UserItem({ user, children }: IUserItem) {
   };
   return (
     <MemberItem key={user.uid} onClick={() => onClickProfile(user)}>
-      <Avatar image={user.profileImage} avatar={user.avatar} uid={user.uid} size="sm" />
+      <Avatar
+        userId={user._id}
+        image={user.profileImage}
+        avatar={user.avatar}
+        uid={user.uid}
+        size="sm"
+      />
       <UserOverview>
         <span>{user?.name}</span>
         <div>{user.comment}</div>
diff --git a/components/molecules/cards/ProfileCommentCard.tsx b/components/molecules/cards/ProfileCommentCard.tsx
index 377370ab7..e547945a1 100644
--- a/components/molecules/cards/ProfileCommentCard.tsx
+++ b/components/molecules/cards/ProfileCommentCard.tsx
@@ -52,7 +52,13 @@ export default function ProfileCommentCard({
       <Flex py={3} align="center" borderBottom="var(--border)">
         {leftComponent && <Box mr="16px">{leftComponent}</Box>}
         {user ? (
-          <Avatar image={user.profileImage} size="md" avatar={user.avatar} uid={user.uid} />
+          <Avatar
+            userId={user._id}
+            image={user.profileImage}
+            size="md"
+            avatar={user.avatar}
+            uid={user.uid}
+          />
         ) : (
           <BasicAvatar />
         )}
diff --git a/components/molecules/groups/InviteUserGroups.tsx b/components/molecules/groups/InviteUserGroups.tsx
index a3e830842..91a4fb990 100644
--- a/components/molecules/groups/InviteUserGroups.tsx
+++ b/components/molecules/groups/InviteUserGroups.tsx
@@ -13,7 +13,13 @@ export default function InviteUserGroups({ users, inviteUser }: IInviteUserGroup
     <Grid mt="20px" templateColumns="repeat(3,1fr)" gap="12px">
       {users?.map((who, idx) => (
         <Flex key={idx} justify="center" align="center">
-          <Avatar image={who.profileImage} avatar={who.avatar} uid={who.uid} size="md" />
+          <Avatar
+            userId={who._id}
+            image={who.profileImage}
+            avatar={who.avatar}
+            uid={who.uid}
+            size="md"
+          />
           <Flex direction="column" ml="8px">
             <Box>{who.name}</Box>
             <Button colorScheme="mint" size="xs" onClick={() => inviteUser(who)}>
diff --git a/components/molecules/headers/FeedHeader.tsx b/components/molecules/headers/FeedHeader.tsx
index 896f82bd4..ab93460ca 100644
--- a/components/molecules/headers/FeedHeader.tsx
+++ b/components/molecules/headers/FeedHeader.tsx
@@ -12,7 +12,13 @@ function FeedHeader({ writer = ABOUT_USER_SUMMARY, date }: IFeedHeader) {
   return (
     <Layout>
       <Profile>
-        <Avatar image={writer?.profileImage} avatar={writer?.avatar} uid={writer?.uid} size="smd" />
+        <Avatar
+          userId={writer._id}
+          image={writer?.profileImage}
+          avatar={writer?.avatar}
+          uid={writer?.uid}
+          size="smd"
+        />
         <div>
           <Writer>{writer.name}</Writer>
           <span>{date}</span>
diff --git a/components/organisms/imageSlider/imageSliderType/ImageSliderMember.tsx b/components/organisms/imageSlider/imageSliderType/ImageSliderMember.tsx
index 89ed21942..233b3a3d0 100644
--- a/components/organisms/imageSlider/imageSliderType/ImageSliderMember.tsx
+++ b/components/organisms/imageSlider/imageSliderType/ImageSliderMember.tsx
@@ -41,7 +41,13 @@ function ImageSliderMember({ imageContainer }: IImageSliderMember) {
           <SwiperSlide key={index}>
             <MemberItem>
               <ProfileWrapper onClick={() => onClickUser(user)}>
-                <Avatar image={user.profileImage} avatar={user.avatar} uid={user.uid} size="sm" />
+                <Avatar
+                  userId={user._id}
+                  image={user.profileImage}
+                  avatar={user.avatar}
+                  uid={user.uid}
+                  size="sm"
+                />
               </ProfileWrapper>
               <span>{user?.name}</span>
               {isBirth && (
diff --git a/design/attendance/AttendanceBar.tsx b/design/attendance/AttendanceBar.tsx
deleted file mode 100644
index 85140c81d..000000000
--- a/design/attendance/AttendanceBar.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Badge, Progress } from "@chakra-ui/react";
-import { useState } from "react";
-import styled from "styled-components";
-
-import { BADGE_COLOR_MAPPINGS, BADGE_INFO } from "../../constants/serviceConstants/badgeConstants";
-import { SCHEME_TO_COLOR } from "../../constants/styles";
-import BadgeInfoModal from "../../modals/store/badgeInfoModal/BadgeInfoModal";
-
-interface IAttendanceBar {
-  myScore: number;
-  hasQuestion?: boolean;
-}
-
-function AttendanceBar({ myScore, hasQuestion = true }: IAttendanceBar) {
-  const userBadge = { badge: "아메리카노", nextBadge: "망고" };
-
-  const [isBadgeModal, setIsBadgeModal] = useState(false);
-
-  const { badge, nextBadge } = userBadge;
-
-  const badgeColor = BADGE_COLOR_MAPPINGS[userBadge.badge];
-
-  const getBadgePoint = () => {
-    for (let i = 0; i < BADGE_INFO.length; i++) {
-      const badgeInfo = BADGE_INFO[i];
-      if (badgeInfo.badge === nextBadge) {
-        return {
-          nextBadgePoint: badgeInfo.minScore,
-          badgeGap: badgeInfo.minScore - BADGE_INFO[i - 1].minScore,
-        };
-      }
-    }
-  };
-  const { nextBadgePoint, badgeGap } = getBadgePoint() || {};
-
-  return (
-    <>
-      <Layout>
-        <Grade>
-          <div>
-            <Badge fontSize="14px" marginRight="var(--gap-2)" colorScheme={badgeColor}>
-              {badge}
-            </Badge>
-            <BadgeName color={SCHEME_TO_COLOR[badgeColor] || badgeColor}>{myScore}점</BadgeName>
-            {hasQuestion && (
-              <IconWrapper onClick={() => setIsBadgeModal(true)}>
-                <i className="fa-light fa-question-circle fa-sm" />
-              </IconWrapper>
-            )}
-          </div>
-          {nextBadge && (
-            <div>
-              <BadgeName color={BADGE_COLOR_MAPPINGS[nextBadge]}>{nextBadgePoint}점</BadgeName>
-              <Badge fontSize="14px" colorScheme={BADGE_COLOR_MAPPINGS[nextBadge]} marginLeft="6px">
-                {nextBadge}
-              </Badge>
-            </div>
-          )}
-        </Grade>
-        <Progress
-          value={(1 - (nextBadgePoint - myScore) / badgeGap) * 100}
-          height="12px"
-          colorScheme="mint"
-          hasStripe
-        />
-      </Layout>
-
-      {isBadgeModal && <BadgeInfoModal setIsModal={setIsBadgeModal} />}
-    </>
-  );
-}
-
-const Layout = styled.div`
-  margin-bottom: var(--gap-3);
-`;
-const Grade = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: var(--gap-3);
-  align-items: center;
-  > div {
-    display: flex;
-    align-items: center;
-  }
-`;
-
-const BadgeName = styled.span<{ color: string }>`
-  color: ${(props) => props.color};
-  font-weight: 600;
-`;
-
-const IconWrapper = styled.button`
-  font-size: 14px;
-  margin-left: var(--gap-2);
-`;
-
-export default AttendanceBar;
diff --git a/design/attendance/AttendanceModal.tsx b/design/attendance/AttendanceModal.tsx
deleted file mode 100644
index 646f27fac..000000000
--- a/design/attendance/AttendanceModal.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import dayjs from "dayjs";
-import styled from "styled-components";
-
-import Avatar from "../../components/atoms/Avatar";
-import { PopOverIcon } from "../../components/Icons/PopOverIcon";
-import { IFooterOptions, ModalLayout } from "../../modals/Modals";
-import { DispatchBoolean } from "../../types/hooks/reactTypes";
-import AttendanceBar from "./AttendanceBar";
-
-interface AttendanceModalProps {
-  type: 1 | 2;
-  setIsModal?: DispatchBoolean;
-}
-
-function AttendanceModal({ type, setIsModal }: AttendanceModalProps) {
-  const today = dayjs();
-  const firstDayOfMonth = today.startOf("month");
-  const differenceInDays = today.diff(firstDayOfMonth, "day");
-  const weekNumber = Math.floor(differenceInDays / 7) + 1;
-
-  const footerOptions: IFooterOptions = {
-    main: {},
-    isFull: true,
-  };
-
-  return (
-    <>
-      <ModalLayout
-        title={`${dayjs().month() + 1}월 2주차 주간 체크`}
-        headerOptions={{}}
-        footerOptions={footerOptions}
-        setIsModal={setIsModal}
-      >
-        <ScoreBarWrapper>
-          <AttendanceBar myScore={17} />
-          <span>임시 달성시 +10 포인트, 거북이 아바타 해금!</span>
-        </ScoreBarWrapper>
-        <ProfileWrapper>
-          <span>이승주 {type === 1 ? "(동아리원)" : "(수습멤버)"}</span>
-          <ImageWrapper>
-            <Avatar image="" size="md" />
-          </ImageWrapper>
-        </ProfileWrapper>
-        <Container>
-          <Info>
-            <Item>
-              <span>{weekNumber}주차 스터디 투표</span>
-              <span>2 회</span>
-            </Item>
-            <Item>
-              <span>{weekNumber}주차 스터디 출석</span>
-              <span>2 회</span>
-            </Item>
-            <Item>
-              <div style={{ display: "flex" }}>
-                <span>이번 달 스터디 점수</span>
-                <PopOverIcon
-                  title="월간 스터디 점수"
-                  text="최소 1점을 넘어야합니다. 출석을 기준으로 정규 스터디는 1회당 1점, 개인, FREE 스터디는 2회당 1점입니다."
-                />
-              </div>
-              <span>40 점</span>
-            </Item>
-            <Item>
-              <span>다음 참여 정산일</span>
-              <span> {dayjs().add(1, "month").month() + 1}월 1일</span>
-            </Item>
-            <Item>
-              <span>보유 보증금</span>
-              <span>2000원</span>
-            </Item>
-          </Info>
-        </Container>
-        <Message>
-          {type === 2 ? (
-            <div>
-              🎉신규 가입을 환영해요🎉
-              <br />
-              앞으로 열심히 활동해봐요~!
-            </div>
-          ) : type === 1 ? (
-            <div>
-              이번 달 스터디에 참여하지 않았어요.
-              <br /> {-dayjs().add(1, "month").date(1).diff(dayjs(), "day")}일 뒤에 경고를 받습니다.
-            </div>
-          ) : (
-            <div>
-              🎉잘 하고 있어요🎉
-              <br />
-              이번주도 열심히 파이팅~!
-            </div>
-          )}
-        </Message>
-      </ModalLayout>
-    </>
-  );
-}
-
-const Message = styled.div`
-  padding: var(--gap-2) var(--gap-3);
-
-  border-radius: var(--rounded);
-  background-color: var(--gray-100);
-`;
-
-const ProfileWrapper = styled.div`
-  padding: 8px 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: var(--border);
-  > span:first-child {
-    font-weight: 500;
-    font-size: 16px;
-  }
-`;
-
-const ScoreBarWrapper = styled.div`
-  padding: var(--gap-2) 0;
-  border-bottom: var(--border);
-  display: flex;
-  flex-direction: column;
-  > span {
-    font-size: 12px;
-    color: var(--gray-600);
-    margin-left: auto;
-  }
-`;
-
-const Container = styled.div`
-  padding: var(--gap-3) 0;
-  display: flex;
-  flex-direction: row;
-  height: 100%;
-`;
-
-const Info = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;
-
-const ImageWrapper = styled.div`
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  > span {
-    display: inline-block;
-    margin-top: var(--gap-1);
-  }
-`;
-
-const Item = styled.div`
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  padding: var(--gap-1) 0;
-  > span:last-child {
-    font-weight: 600;
-  }
-`;
-
-export default AttendanceModal;
diff --git a/hooks/groupStudy/queries.ts b/hooks/groupStudy/queries.ts
index eb57f9d62..1c7493e82 100644
--- a/hooks/groupStudy/queries.ts
+++ b/hooks/groupStudy/queries.ts
@@ -56,11 +56,17 @@ export const useGroupsMineQuery = (status: "pending" | "all", options?: QueryOpt
     },
     options,
   );
-export const useGroupsTitleQuery = (userId: string, options?: QueryOptions<string[]>) =>
-  useQuery<string[], AxiosError, string[]>(
+export const useGroupsTitleQuery = (
+  userId: string,
+  options?: QueryOptions<{ _id: string; title: string }[]>,
+) =>
+  useQuery<{ _id: string; title: string }[], AxiosError, { _id: string; title: string }[]>(
     [GROUP_STUDY, userId],
     async () => {
-      const res = await axios.get<string[]>(`${SERVER_URI}/groupStudy/profile/${userId}`, {});
+      const res = await axios.get<{ _id: string; title: string }[]>(
+        `${SERVER_URI}/groupStudy/profile/${userId}`,
+        {},
+      );
       return res.data;
     },
     options,
diff --git a/hooks/user/queries.ts b/hooks/user/queries.ts
index f3eac2afc..dc50864d8 100644
--- a/hooks/user/queries.ts
+++ b/hooks/user/queries.ts
@@ -64,11 +64,11 @@ export const usePointSystemLogQuery = (
     { ...options, staleTime: 0, cacheTime: 0 },
   );
 
-export const useUidToUserInfoQuery = (uid: string, options?: QueryOptions<IUser>) =>
+export const useUserIdToUserInfoQuery = (userId: string, options?: QueryOptions<IUser>) =>
   useQuery<IUser, AxiosError, IUser>(
-    [UID_TO_USER, uid],
+    [UID_TO_USER, userId],
     async () => {
-      const res = await axios.get<IUser>(`${SERVER_URI}/user/profile/${uid}`);
+      const res = await axios.get<IUser>(`${SERVER_URI}/user/profile/${userId}`);
       return res.data;
     },
     options,
diff --git a/modals/RecentJoinUserPopUp.tsx b/modals/RecentJoinUserPopUp.tsx
index e837e58e5..f50818355 100644
--- a/modals/RecentJoinUserPopUp.tsx
+++ b/modals/RecentJoinUserPopUp.tsx
@@ -67,7 +67,7 @@ function RecentJoinUserPopUp({ users, setIsModal }: RecentJoinUserPopUpProps) {
             pl="4px"
           >
             <Flex align="center">
-              <Avatar uid={user.uid} avatar={user.avatar} image={user.profileImage} size="md" />
+              <Avatar userId={user._id } uid={user.uid} avatar={user.avatar} image={user.profileImage} size="md" />
               <Box ml="12px" fontSize="16px">
                 {user.name}
               </Box>
diff --git a/modals/pop-up/LastWeekAttendPopUp.tsx b/modals/pop-up/LastWeekAttendPopUp.tsx
index 642234f9f..f21d5065c 100644
--- a/modals/pop-up/LastWeekAttendPopUp.tsx
+++ b/modals/pop-up/LastWeekAttendPopUp.tsx
@@ -62,6 +62,7 @@ function LastWeekAttendPopUp({ setIsModal }: IModal) {
     >
       <Flex align="center">
         <Avatar
+          userId={ userInfo._id}
           image={userInfo?.profileImage}
           uid={userInfo?.uid}
           avatar={userInfo?.avatar}
diff --git a/modals/profile/ProfileCardModal.tsx b/modals/profile/ProfileCardModal.tsx
index 4b2e48b73..8018f4bd7 100644
--- a/modals/profile/ProfileCardModal.tsx
+++ b/modals/profile/ProfileCardModal.tsx
@@ -64,6 +64,7 @@ function ProfileCardModal({ setIsModal }: IModal) {
         <FriendList>
           {friends?.map((who) => (
             <Avatar
+              userId={who._id}
               image={who.profileImage}
               uid={who.uid}
               avatar={who.avatar}
diff --git a/pageTemplates/gather/detail/GatherParticipation.tsx b/pageTemplates/gather/detail/GatherParticipation.tsx
index 6956125fa..b1e5e5909 100644
--- a/pageTemplates/gather/detail/GatherParticipation.tsx
+++ b/pageTemplates/gather/detail/GatherParticipation.tsx
@@ -1,10 +1,7 @@
 import { Box } from "@chakra-ui/react";
-import { useRouter } from "next/router";
-import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
 import Avatar from "../../../components/atoms/Avatar";
-import { prevPageUrlState } from "../../../recoils/navigationRecoils";
 import { IGather } from "../../../types/models/gatherTypes/gatherTypes";
 import { IUserSummary } from "../../../types/models/userTypes/userInfoTypes";
 
@@ -13,21 +10,12 @@ interface IGatherParticipation {
 }
 
 function GatherParticipation({ data }: IGatherParticipation) {
-  const router = useRouter();
-
-  const setPrevPageUrl = useSetRecoilState(prevPageUrlState);
-
   const organizer = data.user as IUserSummary;
   const status = data.status;
   const participantsCnt = data.participants.length;
 
   const isAdminOpen = data.isAdminOpen;
 
-  const onClickProfile = (user: IUserSummary) => {
-    setPrevPageUrl(router?.asPath);
-    router.push(`/profile/${user.uid}`);
-  };
-
   return (
     <>
       <Layout>
@@ -48,9 +36,10 @@ function GatherParticipation({ data }: IGatherParticipation) {
         </Header>
         <Members>
           {!isAdminOpen ? (
-            <MemberItem key={organizer?.uid} onClick={() => onClickProfile(organizer)}>
+            <MemberItem key={organizer?.uid}>
               <Organizer>
                 <Avatar
+                  userId={organizer._id}
                   image={organizer.profileImage}
                   avatar={organizer.avatar}
                   uid={organizer.uid}
@@ -73,8 +62,9 @@ function GatherParticipation({ data }: IGatherParticipation) {
           {data?.participants.map(
             (who) =>
               who?.user && (
-                <MemberItem key={who?.user.uid} onClick={() => onClickProfile(who.user)}>
+                <MemberItem key={who?.user.uid}>
                   <Avatar
+                    userId={who.user._id}
                     image={who.user.profileImage}
                     avatar={who.user.avatar}
                     uid={who.user.uid}
diff --git a/pageTemplates/group/GroupMine.tsx b/pageTemplates/group/GroupMine.tsx
index 1d2ec7050..10da66ba9 100644
--- a/pageTemplates/group/GroupMine.tsx
+++ b/pageTemplates/group/GroupMine.tsx
@@ -1,5 +1,4 @@
 import { Box, Button, Flex } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useMemo } from "react";
 import { useSetRecoilState } from "recoil";
@@ -11,7 +10,6 @@ import { transferGroupDataState } from "../../recoils/transferRecoils";
 import { getRandomImage } from "../../utils/imageUtils";
 
 function GroupMine() {
-  const { data: session } = useSession();
   const { data } = useGroupsMineQuery("pending");
 
   const setGroup = useSetRecoilState(transferGroupDataState);
diff --git a/pageTemplates/group/detail/GroupOrganizer.tsx b/pageTemplates/group/detail/GroupOrganizer.tsx
index ac89bf13c..d21862250 100644
--- a/pageTemplates/group/detail/GroupOrganizer.tsx
+++ b/pageTemplates/group/detail/GroupOrganizer.tsx
@@ -24,7 +24,12 @@ function GroupOrganizer({
   return (
     <Layout>
       <div>
-        <Avatar uid={organizer.uid} image={organizer.profileImage} size="sm" />
+        <Avatar
+          userId={organizer._id}
+          uid={organizer.uid}
+          image={organizer.profileImage}
+          size="sm"
+        />
         <Info>
           <Writer>{organizer.name}</Writer>
           <span>{writingDate}</span>
diff --git a/pageTemplates/member/MemberMyProfile.tsx b/pageTemplates/member/MemberMyProfile.tsx
index a61d92e88..060a61a93 100644
--- a/pageTemplates/member/MemberMyProfile.tsx
+++ b/pageTemplates/member/MemberMyProfile.tsx
@@ -18,6 +18,7 @@ function MemberMyProfile() {
           <Wrapper>
             <Profile>
               <Avatar
+                userId={userInfo._id}
                 image={userInfo.profileImage}
                 avatar={userInfo.avatar}
                 uid={userInfo.uid}
diff --git a/pageTemplates/notice/NoticeChat.tsx b/pageTemplates/notice/NoticeChat.tsx
index 5f6ae6a59..bbdfdf09b 100644
--- a/pageTemplates/notice/NoticeChat.tsx
+++ b/pageTemplates/notice/NoticeChat.tsx
@@ -28,6 +28,7 @@ function NoticeChat({ chats }: NoticeChatProps) {
             <Flex p="16px" justify="space-between" align="center" borderBottom="var(--border)">
               <Flex flex={1}>
                 <Avatar
+                  userId={user._id}
                   size="md"
                   uid={user.uid}
                   avatar={user.avatar}
diff --git a/pageTemplates/profile/DetailInfo.tsx b/pageTemplates/profile/DetailInfo.tsx
index fc13f347a..7841d9916 100644
--- a/pageTemplates/profile/DetailInfo.tsx
+++ b/pageTemplates/profile/DetailInfo.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@chakra-ui/react";
 import { useSession } from "next-auth/react";
 import styled from "styled-components";
 
@@ -7,7 +8,7 @@ import { PLACE_TO_NAME } from "../../constants/serviceConstants/studyConstants/s
 import { IUser } from "../../types/models/userTypes/userInfoTypes";
 import { birthToAge } from "../../utils/convertUtils/convertTypes";
 
-function DetailInfo({ user }: { user: IUser }) {
+function DetailInfo({ user, groups }: { user: IUser; groups: string[] }) {
   const { data: session } = useSession();
   const isGuest = session?.user.name === "guest";
 
@@ -42,19 +43,25 @@ function DetailInfo({ user }: { user: IUser }) {
             {user?.majors?.length ? <span>{user?.majors[0]?.detail}</span> : <span>--</span>}
           </ProfileItem>
           <ProfileItem>
-            <span>관심사</span>
-            <div>
-              {user?.interests?.first ? (
-                <Interests>
-                  <span>1. {user?.interests.first}</span>
-                  <span>
-                    {user?.interests.second && "2."} {user?.interests.second}
-                  </span>
-                </Interests>
-              ) : (
-                <span>--</span>
-              )}
-            </div>
+            <span>소모임</span>
+            <Box
+              flex={1}
+              fontWeight={600}
+              sx={{
+                display: "-webkit-box",
+                WebkitLineClamp: 2, // 최대 2줄
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {groups?.map((group, idx) => (
+                <>
+                  <span>{group}</span>
+                  <span>{idx !== groups.length - 1 && ", "}</span>
+                </>
+              ))}
+            </Box>
           </ProfileItem>
           <ProfileItem>
             <span>즐겨찾기</span>
@@ -82,17 +89,6 @@ const Profile = styled.div`
   line-height: 2.4;
 `;
 
-const Interests = styled.div`
-  display: flex;
-  flex-direction: column;
-  color: var(--gray-800);
-  font-weight: 600;
-
-  > span {
-    display: inline-block;
-  }
-`;
-
 const ProfileItem = styled.div`
   display: flex;
   > span:first-child {
diff --git a/pageTemplates/profile/profileOverview/ProfileInfo.tsx b/pageTemplates/profile/profileOverview/ProfileInfo.tsx
index 3f85fc4fd..d2d058740 100644
--- a/pageTemplates/profile/profileOverview/ProfileInfo.tsx
+++ b/pageTemplates/profile/profileOverview/ProfileInfo.tsx
@@ -117,7 +117,13 @@ function ProfileInfo({ user }: IProfileInfo) {
     <>
       <Layout>
         <Profile>
-          <Avatar uid={user.uid} image={user.profileImage} avatar={user.avatar} size="xl" />
+          <Avatar
+            userId={user._id}
+            uid={user.uid}
+            image={user.profileImage}
+            avatar={user.avatar}
+            size="xl"
+          />
           <ProfileName>
             <div>
               <span>{user?.name || session?.user.name}</span>
diff --git a/pageTemplates/ranking/RankingMembers.tsx b/pageTemplates/ranking/RankingMembers.tsx
index 22495d74a..bf3502f97 100644
--- a/pageTemplates/ranking/RankingMembers.tsx
+++ b/pageTemplates/ranking/RankingMembers.tsx
@@ -61,6 +61,7 @@ function RankingMembers({ categorySource, rankingUsers, isScore }: IRankingMembe
             </Box>
             <Name>
               <Avatar
+                userId={who._id}
                 image={who.profileImage}
                 avatar={who.avatar}
                 uid={who.uid}
diff --git a/pageTemplates/ranking/RankingOverview.tsx b/pageTemplates/ranking/RankingOverview.tsx
index 0a55a21a9..b8d1aae7f 100644
--- a/pageTemplates/ranking/RankingOverview.tsx
+++ b/pageTemplates/ranking/RankingOverview.tsx
@@ -34,6 +34,7 @@ function RankingOverview({ myRankInfo }: IRankingOverview) {
                 avatar={userInfo.avatar}
                 uid={userInfo.uid}
                 size="lg"
+                userId={userInfo._id}
                 isPriority={true}
                 isLink={false}
               />
diff --git a/pageTemplates/user/userOverview/UserOverView.tsx b/pageTemplates/user/userOverview/UserOverView.tsx
index b9d507981..3abece8e8 100644
--- a/pageTemplates/user/userOverview/UserOverView.tsx
+++ b/pageTemplates/user/userOverview/UserOverView.tsx
@@ -53,6 +53,7 @@ export default function UserOverview({ userInfo }: UserOverviewProps) {
               avatar={userInfo?.avatar}
               image={userInfo.profileImage}
               uid={userInfo.uid}
+              userId={userInfo._id}
               size="xl"
               isLink={false}
             />
diff --git a/pages/chat/[uid].tsx b/pages/chat/[uid].tsx
index f6fda2870..7a7502057 100644
--- a/pages/chat/[uid].tsx
+++ b/pages/chat/[uid].tsx
@@ -116,6 +116,7 @@ function Uid() {
                               image={opponent.profileImage}
                               avatar={opponent.avatar}
                               uid={opponent.uid}
+                              userId={opponent._id}
                             />
                           </Box>
                           <Flex ml="8px" direction="column" color="var(--gray-800)">
diff --git a/pages/designs/studyAttendance.tsx b/pages/designs/studyAttendance.tsx
deleted file mode 100644
index 5dc48f26f..000000000
--- a/pages/designs/studyAttendance.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useState } from "react";
-
-import RowButtonBlock from "../../components/atoms/blocks/RowButtonBlock";
-import Header from "../../components/layouts/Header";
-import Slide from "../../components/layouts/PageSlide";
-import AttendanceModal from "../../design/attendance/AttendanceModal";
-
-function StudyAttendance() {
-  const [hasModalNumber, setHasModalNumber] = useState<1 | 2>();
-  return (
-    <>
-      <Header title="스터디 점수판" />
-      <Slide>
-        <RowButtonBlock text="기존 스터디 출석표 모달 1" func={() => setHasModalNumber(1)} />
-        <RowButtonBlock text="기존 스터디 출석표 모달 2" func={() => setHasModalNumber(2)} />
-      </Slide>
-      {hasModalNumber && (
-        <AttendanceModal type={hasModalNumber} setIsModal={() => setHasModalNumber(null)} />
-      )}
-    </>
-  );
-}
-
-export default StudyAttendance;
diff --git a/pages/member/[location]/[category].tsx b/pages/member/[location]/[category].tsx
index 807b4ce5d..aadd685f0 100644
--- a/pages/member/[location]/[category].tsx
+++ b/pages/member/[location]/[category].tsx
@@ -63,7 +63,13 @@ function FriendCategory() {
           {filterMember?.map((who) => (
             <Item key={who.uid} onClick={() => onClickProfile(who)}>
               <ProfileHeader>
-                <Avatar image={who.profileImage} avatar={who.avatar} uid={who.uid} size="md" />
+                <Avatar
+                  image={who.profileImage}
+                  userId={who._id}
+                  avatar={who.avatar}
+                  uid={who.uid}
+                  size="md"
+                />
                 <span>{who.name}</span>
               </ProfileHeader>
               <Info>
diff --git a/pages/member/[location]/detail.tsx b/pages/member/[location]/detail.tsx
index 282298189..36307fdaf 100644
--- a/pages/member/[location]/detail.tsx
+++ b/pages/member/[location]/detail.tsx
@@ -41,7 +41,13 @@ function MemberDetail() {
             return (
               <Item key={who.uid} onClick={() => onClickUser(who)}>
                 <ProfileWrapper>
-                  <Avatar image={who.profileImage} avatar={who.avatar} uid={who.uid} size="sm" />
+                  <Avatar
+                    userId={who._id}
+                    image={who.profileImage}
+                    avatar={who.avatar}
+                    uid={who.uid}
+                    size="sm"
+                  />
                 </ProfileWrapper>
                 <Info>
                   <Name>
diff --git a/pages/profile/[userId].tsx b/pages/profile/[userId].tsx
index ff316c5ae..47ed39ad5 100644
--- a/pages/profile/[userId].tsx
+++ b/pages/profile/[userId].tsx
@@ -1,21 +1,20 @@
 import { Button } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
 import { useParams, useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 
 import Header from "../../components/layouts/Header";
 import Slide from "../../components/layouts/PageSlide";
 import { useTypeToast } from "../../hooks/custom/CustomToast";
 import { useGroupsTitleQuery } from "../../hooks/groupStudy/queries";
-import { useUidToUserInfoQuery } from "../../hooks/user/queries";
+import { useUserIdToUserInfoQuery } from "../../hooks/user/queries";
 import BottomDrawer from "../../pageTemplates/profile/BottomDrawer";
 import DeclareDrawer from "../../pageTemplates/profile/DeclareDrawer";
 import DetailInfo from "../../pageTemplates/profile/DetailInfo";
 import ProfileOverview from "../../pageTemplates/profile/ProfileOverview";
-import { prevPageUrlState } from "../../recoils/previousAtoms";
 import { transferUserName } from "../../recoils/transferRecoils";
 import { IUser } from "../../types/models/userTypes/userInfoTypes";
 import { DeclareRequest } from "../../types/models/userTypes/userRequestTypes";
@@ -27,23 +26,22 @@ function ProfilePage() {
   const searchParams = useSearchParams();
   const isGuest = session ? session.user.name === "guest" : undefined;
 
-  const beforePage = useRecoilValue(prevPageUrlState);
-
   const isDeclare = searchParams.get("declare") === "on";
 
-  const { uid } = useParams<{ uid: string }>() || {};
+  const { userId } = useParams<{ userId: string }>() || {};
 
   const setTransferUserName = useSetRecoilState(transferUserName);
   const [declareModal, setDeclareModal] = useState<DeclareRequest>();
 
-  const { data: user } = useUidToUserInfoQuery(uid as string, {
-    enabled: !!uid,
+  const { data: user } = useUserIdToUserInfoQuery(userId as string, {
+    enabled: !!userId,
   });
 
-  const { data: data2 } = useGroupsTitleQuery(session?.user.id, {
-    enabled: !!session?.user.id,
+  const { data } = useGroupsTitleQuery(userId, {
+    enabled: !!userId,
   });
-  console.log(4, session?.user.id, data2);
+
+  const groups = data?.map((props) => props.title);
 
   useEffect(() => {
     if (user) setTransferUserName(user.name);
@@ -55,12 +53,12 @@ function ProfilePage() {
       return;
     }
     if (type === "chat") router.push(`/chat/${user._id}`);
-    if (type === "declare") router.replace(`/profile/${uid}?declare=on`);
+    if (type === "declare") router.replace(`/profile/${userId}?declare=on`);
   };
 
   return (
     <>
-      <Header title="" url={beforePage} rightPadding={8}>
+      <Header title="" rightPadding={8}>
         <Button px="12px" size="md" variant="ghost" onClick={() => handleDrawer("chat")}>
           <i className="fa-regular fa-paper-plane fa-lg" />
         </Button>
@@ -73,14 +71,14 @@ function ProfilePage() {
           <Layout>
             <ProfileOverview user={user as IUser} />
             <HrDiv />
-            <DetailInfo user={user as IUser} />
+            <DetailInfo user={user as IUser} groups={groups} />
           </Layout>
         </Container>
       </Slide>
       {isDeclare && (
         <BottomDrawer
           onClose={() => {
-            router.replace(`/profile/${uid}`);
+            router.replace(`/profile/${userId}`);
           }}
           setDeclareModal={setDeclareModal}
         />
diff --git a/pages/user/alphabet.tsx b/pages/user/alphabet.tsx
index c152320b2..913002d40 100644
--- a/pages/user/alphabet.tsx
+++ b/pages/user/alphabet.tsx
@@ -126,6 +126,7 @@ function CollectionAlphabet() {
                   <ProfileWrapper onClick={() => onClickProfile(user)}>
                     <Avatar
                       size="md"
+                      userId={user._id}
                       image={user.profileImage}
                       avatar={user.avatar}
                       uid={user.uid}
diff --git a/stories/designs/attendanceModal.stories.ts b/stories/designs/attendanceModal.stories.ts
deleted file mode 100644
index 6fbc41245..000000000
--- a/stories/designs/attendanceModal.stories.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import AttendanceModal from "../../design/attendance/AttendanceModal";
-
-const meta = {
-  title: "DESIGNS/AttendanceModal",
-  component: AttendanceModal,
-  parameters: {},
-  tags: ["autodocs"],
-  argTypes: {},
-  args: {},
-} satisfies Meta<typeof AttendanceModal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    type: 1,
-  },
-};
-export const Secondary: Story = {
-  args: {
-    type: 2,
-  },
-};