From 28d9235ff42c74597360ad4d64030205a5be124d Mon Sep 17 00:00:00 2001
From: ss0526100 <ss0526100@gmail.com>
Date: Wed, 23 Oct 2024 18:13:14 +0900
Subject: [PATCH 01/10] =?UTF-8?q?fix:=ED=94=84=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EA=B0=80=EC=9A=B4=EB=8D=B0=20=EC=A0=95=EB=A0=AC=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChattingPreviewContainer/ChattingPreviewContainer.style.ts  | 2 +-
 .../components/ChatFilterTagList/ChatFilterTagList.styles.ts    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts
index 520c7bf19..0c9b383b5 100644
--- a/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts
+++ b/frontend/src/layouts/ChattingPreviewLayout/ChattingPreviewContainer/ChattingPreviewContainer.style.ts
@@ -5,7 +5,7 @@ export const Container = ({ theme }: { theme: Theme }) => css`
   display: flex;
   flex-direction: column;
   gap: 2rem;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
 
   width: 100%;
diff --git a/frontend/src/pages/Chatting/ChatPage/components/ChatFilterTagList/ChatFilterTagList.styles.ts b/frontend/src/pages/Chatting/ChatPage/components/ChatFilterTagList/ChatFilterTagList.styles.ts
index 44bfdaf66..5c8afaf51 100644
--- a/frontend/src/pages/Chatting/ChatPage/components/ChatFilterTagList/ChatFilterTagList.styles.ts
+++ b/frontend/src/pages/Chatting/ChatPage/components/ChatFilterTagList/ChatFilterTagList.styles.ts
@@ -4,4 +4,5 @@ export const list = css`
   display: flex;
   flex-direction: row;
   gap: 1rem;
+  width: 100%;
 `;

From 8c6d614b53173b315ffd119c32b0780e8403a414 Mon Sep 17 00:00:00 2001
From: ss0526100 <ss0526100@gmail.com>
Date: Wed, 23 Oct 2024 18:19:43 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=EB=A3=B0=EB=A0=9B=20=EB=B3=B5?=
 =?UTF-8?q?=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Bet/BetResultPage/BetResultPage.tsx | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
index 4c6b0a6b6..27ccad73c 100644
--- a/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
+++ b/frontend/src/pages/Bet/BetResultPage/BetResultPage.tsx
@@ -1,6 +1,7 @@
 import * as S from './BetResultPage.style';
 
-import { useMemo, useState } from 'react';
+import { css, useTheme } from '@emotion/react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
@@ -10,7 +11,6 @@ import GET_ROUTES from '@_common/getRoutes';
 import Roulette from '../components/Roulette/Roulette';
 import RouletteWrapper from '../components/RouletteWrapper/RouletteWrapper';
 import SelectLayout from '@_layouts/SelectLayout/SelectLayout';
-import { css } from '@emotion/react';
 import useBet from '@_hooks/queries/useBet';
 import useBetResult from '@_hooks/queries/useBetResult';
 
@@ -32,6 +32,7 @@ const getPercentString = (bet: BetDetail) => {
 
 export default function BetResultPage() {
   const navigate = useNavigate();
+  const theme = useTheme();
 
   const params = useParams();
   const betId = Number(params.betId);
@@ -46,20 +47,20 @@ export default function BetResultPage() {
   const [isRouletteEnd, setIsRouletteEnd] = useState(false);
   const [isButtonShown, setIsButtonShown] = useState(false);
 
-  // useEffect(() => {
-  //   const nowRoot = document.getElementById('root');
-  //   if (nowRoot) {
-  //     nowRoot.style.backgroundColor = theme.colorPalette.orange[200];
-  //     nowRoot.style.transition = '1s all ease-in-out';
-  //   }
-
-  //   return () => {
-  //     if (nowRoot) {
-  //       nowRoot.style.backgroundColor = '';
-  //       nowRoot.style.transition = '';
-  //     }
-  //   };
-  // }, [theme]);
+  useEffect(() => {
+    const nowRoot = document.getElementById('root');
+    if (nowRoot) {
+      nowRoot.style.backgroundColor = theme.colorPalette.orange[200];
+      nowRoot.style.transition = '1s all ease-in-out';
+    }
+
+    return () => {
+      if (nowRoot) {
+        nowRoot.style.backgroundColor = '';
+        nowRoot.style.transition = '';
+      }
+    };
+  }, [theme]);
 
   const handleAfterRoulette = () => {
     setTimeout(() => {
@@ -113,7 +114,7 @@ export default function BetResultPage() {
           {isButtonShown && bet?.myRole !== 'NON_MOIMEE' && (
             <Button
               shape="bar"
-              primary
+              reversePrimary
               onClick={buttonClickHandler}
               font={css`
                 font: 400 normal 2rem ${bitbit};

From 97fe4e857e4ec472316da076ce889f4bf6cdb440 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 23 Oct 2024 21:32:55 +0900
Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EA=B0=9C=EB=B0=9C=20?=
 =?UTF-8?q?=EC=B4=88=EC=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/endPoints.ts                |   3 +
 frontend/src/apis/gets.ts                     |  10 ++
 frontend/src/apis/responseTypes.ts            |  10 ++
 .../BottomSheet/BottomSheet.stories.tsx       |  30 +++++
 .../components/BottomSheet/BottomSheet.tsx    | 119 ++++++++++++++++++
 .../components/CloseButton/CloseButton.tsx    |  22 ++++
 frontend/src/components/Icons/CloseIcon.tsx   |  16 +++
 .../src/components/MemberCard/MemberCard.tsx  |   2 +-
 .../ProfileBottomSheet/ProfileBottomSheet.tsx |  97 ++++++++++++++
 .../ProfileBottomSheet/ProfileInfoItem.tsx    |  37 ++++++
 .../ProfileFrame/ProfileFrame.style.ts        |   1 +
 frontend/src/constants/queryKeys.ts           |   1 +
 .../src/hooks/queries/useDarakbangMember.ts   |  21 ++++
 frontend/src/hooks/useProfileBottomSheet.tsx  |  26 ++++
 frontend/src/mocks/browser.ts                 |   2 +
 frontend/src/mocks/handler/profileHandler.ts  |  17 +++
 .../ProfileCard/ProfileCard.style.ts          |   2 -
 .../ProfileList/ProfileCard/ProfileCard.tsx   |  51 ++++++--
 18 files changed, 451 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/BottomSheet/BottomSheet.stories.tsx
 create mode 100644 frontend/src/components/BottomSheet/BottomSheet.tsx
 create mode 100644 frontend/src/components/CloseButton/CloseButton.tsx
 create mode 100644 frontend/src/components/Icons/CloseIcon.tsx
 create mode 100644 frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
 create mode 100644 frontend/src/components/ProfileBottomSheet/ProfileInfoItem.tsx
 create mode 100644 frontend/src/hooks/queries/useDarakbangMember.ts
 create mode 100644 frontend/src/hooks/useProfileBottomSheet.tsx
 create mode 100644 frontend/src/mocks/handler/profileHandler.ts

diff --git a/frontend/src/apis/endPoints.ts b/frontend/src/apis/endPoints.ts
index 2d9356796..589b4f9cf 100644
--- a/frontend/src/apis/endPoints.ts
+++ b/frontend/src/apis/endPoints.ts
@@ -34,6 +34,9 @@ const API_URL = {
   },
   kakaoOAuth: addBaseUrl('/auth/kakao/oauth', false),
   myInfo: addBaseUrl('/member/mine', true),
+
+  profile: (darakbangMemberId: number) =>
+    addBaseUrl(`/members/${darakbangMemberId}/profile`, true),
 };
 
 const ENDPOINTS = {
diff --git a/frontend/src/apis/gets.ts b/frontend/src/apis/gets.ts
index 1e016a47d..4b9c16c15 100644
--- a/frontend/src/apis/gets.ts
+++ b/frontend/src/apis/gets.ts
@@ -19,6 +19,7 @@ import {
   GetChatRoomDetail,
   GetChattingPreview,
   GetDarakbangInviteCode,
+  GetDarakbangMemberProfile,
   GetDarakbangMembers,
   GetDarakbangMine,
   GetDarakbangNameByCode,
@@ -237,3 +238,12 @@ export const getBetResult = async (betId: number) => {
   const json: GetBetDetail = await response.json();
   return json.data.nickname;
 };
+
+export const getDarakbangMemberProfile = async (darakbangMemberId: number) => {
+  const response = await ApiClient.getWithLastDarakbangId(
+    `/members/${darakbangMemberId}/profile`,
+  );
+
+  const json: GetDarakbangMemberProfile = await response.json();
+  return json.data;
+};
diff --git a/frontend/src/apis/responseTypes.ts b/frontend/src/apis/responseTypes.ts
index 06089085f..fb873ae9a 100644
--- a/frontend/src/apis/responseTypes.ts
+++ b/frontend/src/apis/responseTypes.ts
@@ -136,3 +136,13 @@ export interface PostBet {
     betId: number;
   };
 }
+
+export interface GetDarakbangMemberProfile {
+  data: {
+    darakbangMemberId: number;
+    name: string;
+    nickname: string;
+    url: string;
+    description: string;
+  };
+}
diff --git a/frontend/src/components/BottomSheet/BottomSheet.stories.tsx b/frontend/src/components/BottomSheet/BottomSheet.stories.tsx
new file mode 100644
index 000000000..9cb034d60
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BottomSheet from './BottomSheet';
+import Button from '@_components/Button/Button';
+
+const meta = {
+  component: BottomSheet,
+  title: 'Components/BottomSheet',
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    onDimmerClick: () => {},
+    header: <BottomSheet.Header>Header</BottomSheet.Header>,
+    cta: (
+      <BottomSheet.CTA>
+        <Button shape="bar">CTA</Button>
+      </BottomSheet.CTA>
+    ),
+  },
+  render: (args) => (
+    <BottomSheet {...args}>
+      <BottomSheet.Content>Content</BottomSheet.Content>
+    </BottomSheet>
+  ),
+};
diff --git a/frontend/src/components/BottomSheet/BottomSheet.tsx b/frontend/src/components/BottomSheet/BottomSheet.tsx
new file mode 100644
index 000000000..b447cc17d
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,119 @@
+import { css, useTheme } from '@emotion/react';
+import { PropsWithChildren } from 'react';
+
+interface BottomSheetProps {
+  isOpen: boolean;
+  onDimmerClick: () => void;
+
+  header: React.ReactNode;
+  cta?: React.ReactNode;
+
+  size?: 'small' | 'medium' | 'large' | 'full';
+}
+
+export default function BottomSheet(
+  props: PropsWithChildren<BottomSheetProps>,
+) {
+  const { isOpen, onDimmerClick, header, cta, children, size } = props;
+
+  const theme = useTheme();
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <BottomSheetContainer>
+      <Dimmer onClick={onDimmerClick} />
+      <div
+        css={css`
+          z-index: 2;
+
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+
+          width: 100%;
+          max-width: 600px;
+          height: ${size === 'medium'
+            ? '50vh'
+            : size === 'large'
+              ? '80vh'
+              : size === 'full'
+                ? '100vh'
+                : 'auto'};
+          padding-bottom: 32px;
+
+          background-color: ${theme.colorPalette.white[100]};
+          border-radius: 28px 28px 0 0;
+        `}
+      >
+        {header}
+        {children}
+        {cta}
+      </div>
+    </BottomSheetContainer>
+  );
+}
+
+function BottomSheetContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      css={css`
+        position: fixed;
+        z-index: 1;
+        inset: 0;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+
+        width: 100%;
+        height: 100%;
+      `}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Dimmer({ onClick }: { onClick: () => void }) {
+  return (
+    <div
+      onClick={onClick}
+      css={css`
+        position: fixed;
+        inset: 0;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+
+        width: 100%;
+        height: 100%;
+
+        background-color: rgb(0 0 0 / 20%);
+      `}
+    />
+  );
+}
+
+BottomSheet.Header = function BottomSheetHeader(props: PropsWithChildren) {
+  const { children } = props;
+
+  return <div css={{ padding: '32px 24px 0' }}>{children}</div>;
+};
+
+BottomSheet.Content = function BottomSheetContent(props: PropsWithChildren) {
+  const { children } = props;
+
+  return <div css={{ padding: '0px 24px' }}>{children}</div>;
+};
+
+BottomSheet.CTA = function BottomSheetCTA(props: PropsWithChildren) {
+  const { children } = props;
+
+  return <div css={{ padding: '0px 24px 16px' }}>{children}</div>;
+};
diff --git a/frontend/src/components/CloseButton/CloseButton.tsx b/frontend/src/components/CloseButton/CloseButton.tsx
new file mode 100644
index 000000000..81c7583f7
--- /dev/null
+++ b/frontend/src/components/CloseButton/CloseButton.tsx
@@ -0,0 +1,22 @@
+import CloseIcon from '@_components/Icons/CloseIcon';
+import { css } from '@emotion/react';
+import { ButtonHTMLAttributes } from 'react';
+
+interface CloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export default function CloseButton(props: CloseButtonProps) {
+  const { ...rest } = props;
+
+  return (
+    <button
+      css={css`
+        padding: 0.4rem;
+        background: none;
+        border: none;
+      `}
+      {...rest}
+    >
+      <CloseIcon />
+    </button>
+  );
+}
diff --git a/frontend/src/components/Icons/CloseIcon.tsx b/frontend/src/components/Icons/CloseIcon.tsx
new file mode 100644
index 000000000..f5ce1cec2
--- /dev/null
+++ b/frontend/src/components/Icons/CloseIcon.tsx
@@ -0,0 +1,16 @@
+export default function CloseIcon() {
+  return (
+    <svg
+      width="14"
+      height="15"
+      viewBox="0 0 14 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.71929 0.292919C1.53069 0.110761 1.27808 0.00996641 1.01589 0.0122448C0.75369 0.0145233 0.502878 0.119692 0.31747 0.305101C0.132062 0.490509 0.0268924 0.741321 0.0246139 1.00352C0.0223355 1.26571 0.12313 1.51832 0.305288 1.70692L5.59829 6.99992L0.305288 12.2929C0.209778 12.3852 0.133596 12.4955 0.0811869 12.6175C0.0287779 12.7395 0.00119157 12.8707 3.77571e-05 13.0035C-0.00111606 13.1363 0.0241854 13.268 0.0744663 13.3909C0.124747 13.5138 0.199 13.6254 0.292893 13.7193C0.386786 13.8132 0.498438 13.8875 0.621334 13.9377C0.744231 13.988 0.87591 14.0133 1.00869 14.0122C1.14147 14.011 1.27269 13.9834 1.39469 13.931C1.5167 13.8786 1.62704 13.8024 1.71929 13.7069L7.01229 8.41392L12.3053 13.7069C12.4939 13.8891 12.7465 13.9899 13.0087 13.9876C13.2709 13.9853 13.5217 13.8801 13.7071 13.6947C13.8925 13.5093 13.9977 13.2585 14 12.9963C14.0022 12.7341 13.9014 12.4815 13.7193 12.2929L8.42629 6.99992L13.7193 1.70692C13.9014 1.51832 14.0022 1.26571 14 1.00352C13.9977 0.741321 13.8925 0.490509 13.7071 0.305101C13.5217 0.119692 13.2709 0.0145233 13.0087 0.0122448C12.7465 0.00996641 12.4939 0.110761 12.3053 0.292919L7.01229 5.58592L1.71929 0.292919Z"
+        fill="#6D717F"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/MemberCard/MemberCard.tsx b/frontend/src/components/MemberCard/MemberCard.tsx
index f5df8ae57..346e832c0 100644
--- a/frontend/src/components/MemberCard/MemberCard.tsx
+++ b/frontend/src/components/MemberCard/MemberCard.tsx
@@ -18,7 +18,7 @@ export default function MemberCard(props: MemberCard) {
   const theme = useTheme();
 
   return (
-    <div css={S.card}>
+    <div css={S.card} onClick={() => alert(1)}>
       <div css={S.preview}>
         <UserPreview imageUrl={imageUrl} />
         <span css={[theme.typography.Medium, S.name]}>{name}</span>
diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
new file mode 100644
index 000000000..cdfa5cc35
--- /dev/null
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -0,0 +1,97 @@
+import BottomSheet from '@_components/BottomSheet/BottomSheet';
+import { Profile } from '@_hooks/useProfileBottomSheet';
+import ProfileInfoItem from './ProfileInfoItem';
+import { css, useTheme } from '@emotion/react';
+import CloseButton from '@_components/CloseButton/CloseButton';
+import ProfileFrame from '@_components/ProfileFrame/ProfileFrame';
+
+interface ProfileBottomSheetProps {
+  isOpen: boolean;
+  profile: Profile;
+  close: () => void;
+}
+
+export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
+  const { isOpen, profile, close } = props;
+
+  const theme = useTheme();
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      header={
+        <BottomSheet.Header>
+          <CloseButton />
+        </BottomSheet.Header>
+      }
+      // cta={<Button shape="bar">butt123on</Button>}
+      size="medium"
+      onDimmerClick={close}
+    >
+      <BottomSheet.Content>
+        <div
+          css={css`
+            display: flex;
+            flex-direction: column;
+            gap: 4.1rem;
+          `}
+        >
+          <div
+            css={css`
+              display: flex;
+              justify-content: center;
+            `}
+          >
+            <div
+              css={css`
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                width: 123px;
+                height: 123px;
+
+                border-radius: 100%;
+                box-shadow: 0 8px 24px 0 rgb(149 157 165 / 20%);
+              `}
+            >
+              <ProfileFrame
+                width={9}
+                height={9}
+                borderWidth={0}
+                src={profile.url}
+              />
+            </div>
+          </div>
+          <div
+            css={css`
+              display: flex;
+              flex-direction: column;
+              gap: 1.1rem;
+            `}
+          >
+            <div
+              css={css`
+                ${theme.typography.label}
+                color: ${theme.colorPalette.grey[500]};
+              `}
+            >
+              프로필
+            </div>
+            <div
+              css={css`
+                display: flex;
+                flex-direction: column;
+                gap: 3.7rem;
+              `}
+            >
+              <ProfileInfoItem label="이름" value={profile.name} />
+              <ProfileInfoItem label="닉네임" value={profile.nickname} />
+              <ProfileInfoItem label="소개" value={profile.description} />
+            </div>
+          </div>
+        </div>
+      </BottomSheet.Content>
+    </BottomSheet>
+  );
+}
diff --git a/frontend/src/components/ProfileBottomSheet/ProfileInfoItem.tsx b/frontend/src/components/ProfileBottomSheet/ProfileInfoItem.tsx
new file mode 100644
index 000000000..aef8bfef2
--- /dev/null
+++ b/frontend/src/components/ProfileBottomSheet/ProfileInfoItem.tsx
@@ -0,0 +1,37 @@
+import { css, useTheme } from '@emotion/react';
+
+interface InfoItemProps {
+  label: string;
+  value: string;
+}
+
+export default function InfoItem(props: InfoItemProps) {
+  const { label, value } = props;
+
+  const theme = useTheme();
+
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+      `}
+    >
+      <p
+        css={css`
+          ${theme.typography.s2}
+        `}
+      >
+        {label}
+      </p>
+      <p
+        css={css`
+          ${theme.typography.b1}
+        `}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts
index 6cf8948b9..aa9bd387a 100644
--- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts
+++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts
@@ -5,6 +5,7 @@ type Size = number;
 export const profileBox = () => {
   return css`
     position: relative;
+    z-index: -1;
   `;
 };
 
diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts
index 853fcb0c3..8ba59e949 100644
--- a/frontend/src/constants/queryKeys.ts
+++ b/frontend/src/constants/queryKeys.ts
@@ -25,6 +25,7 @@ const QUERY_KEYS = {
   bets: 'bets',
   bet: 'bet',
   betResult: 'betResult',
+  darakbangMember: 'darakbangMember',
 };
 
 export default QUERY_KEYS;
diff --git a/frontend/src/hooks/queries/useDarakbangMember.ts b/frontend/src/hooks/queries/useDarakbangMember.ts
new file mode 100644
index 000000000..c165213b8
--- /dev/null
+++ b/frontend/src/hooks/queries/useDarakbangMember.ts
@@ -0,0 +1,21 @@
+import { getDarakbangMemberProfile } from '@_apis/gets';
+import { getLastDarakbangId } from '@_common/lastDarakbangManager';
+import QUERY_KEYS from '@_constants/queryKeys';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useDarakbangMember(darakbangMemberId: number) {
+  const { data: member, isLoading } = useQuery({
+    queryKey: [
+      QUERY_KEYS.darakbang,
+      getLastDarakbangId(),
+      QUERY_KEYS.darakbangMember,
+      darakbangMemberId,
+    ],
+    queryFn: () => getDarakbangMemberProfile(darakbangMemberId),
+  });
+
+  return {
+    member,
+    isLoading,
+  };
+}
diff --git a/frontend/src/hooks/useProfileBottomSheet.tsx b/frontend/src/hooks/useProfileBottomSheet.tsx
new file mode 100644
index 000000000..00d343dda
--- /dev/null
+++ b/frontend/src/hooks/useProfileBottomSheet.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import ProfileBottomSheet from "@_components/ProfileBottomSheet/ProfileBottomSheet";
+
+export interface Profile {
+  name: string;
+  nickname: string;
+  description: string;
+  url: string;
+}
+
+export default function useProfileBottomSheet(profile: Profile) {
+  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+
+  const open = () => setIsBottomSheetOpen(true);
+  const close = () => setIsBottomSheetOpen(false);
+
+  const profileBottomSheet = (
+    <ProfileBottomSheet
+      isOpen={isBottomSheetOpen}
+      profile={profile}
+      close={close}
+    />
+  );
+
+  return { profileBottomSheet, open, close };
+}
\ No newline at end of file
diff --git a/frontend/src/mocks/browser.ts b/frontend/src/mocks/browser.ts
index 75a924432..f262732ef 100644
--- a/frontend/src/mocks/browser.ts
+++ b/frontend/src/mocks/browser.ts
@@ -6,6 +6,7 @@ import { myInfoHandler } from './handler/myInfoHandler';
 import { notificationHandler } from './handler/notificationHandler';
 import { pleaseHandler } from './handler/pleaseHandler';
 import { setupWorker } from 'msw/browser';
+import { profileHandler } from './handler/profileHandler';
 
 export const worker = setupWorker(
   ...moimHandler,
@@ -15,4 +16,5 @@ export const worker = setupWorker(
   ...notificationHandler,
   ...betHandler,
   ...myInfoHandler,
+  ...profileHandler,
 );
diff --git a/frontend/src/mocks/handler/profileHandler.ts b/frontend/src/mocks/handler/profileHandler.ts
new file mode 100644
index 000000000..d0d9768f6
--- /dev/null
+++ b/frontend/src/mocks/handler/profileHandler.ts
@@ -0,0 +1,17 @@
+import { API_URL } from '@_apis/endPoints';
+import { http, HttpResponse } from 'msw';
+
+export const profileHandler = [
+  http.get(`${API_URL.profile(1)}`, () => {
+    return HttpResponse.json({
+      data: {
+        darakbangMemberId: 1,
+        name: '김다락방',
+        nickname: '다락방',
+        url: 'https://darakbang.com',
+        description:
+          '다락방입니다. 공백 열두글자 뽀로로로의 한줄소개입니다 길어지면 밑으로 내려갸야해요. 공백 열두글자 뽀로로로의 한줄소개입니다 길어지면 밑으로 내려갸야해요.',
+      },
+    });
+  }),
+];
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
index 3127fead8..92c9ce193 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.style.ts
@@ -1,8 +1,6 @@
 import { css, Theme } from '@emotion/react';
 
 export const profileCard = css`
-  z-index: -1;
-
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
index 6af542f51..5b594c882 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
@@ -4,32 +4,57 @@ import { Participation } from '@_types/index';
 import ProfileFrame from '../../../../../../components/ProfileFrame/ProfileFrame';
 import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
 import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
+import useDarakbangMember from '@_hooks/queries/useDarakbangMember';
+import useProfileBottomSheet from '@_hooks/useProfileBottomSheet';
 
 interface ProfileCardProps {
   info: Participation;
 }
+
 export default function ProfileCard(props: ProfileCardProps) {
   const { info } = props;
 
+  const theme = useTheme();
+
   const { nicknameRef, formattedNickname } = useNicknameWidthEffect({
     nickname: info.nickname,
     maxNicknameWidth: 70,
   });
 
-  const theme = useTheme();
+  const { member } = useDarakbangMember(1);
+
+  const { profileBottomSheet, open } = useProfileBottomSheet({
+    name: member?.name || '',
+    nickname: member?.nickname || '',
+    description: member?.description || '',
+    url: member?.url || '',
+  });
+
+  const handleCardClick = () => {
+    open();
+  };
 
   return (
-    <li css={S.profileCard} tabIndex={0} aria-label={info.nickname}>
-      <ProfileFrame
-        width={7}
-        height={7}
-        src={info.profile}
-        role={info.role}
-        aria-hidden
-      />
-      <div ref={nicknameRef} css={S.profileName({ theme })} aria-hidden>
-        {formattedNickname}
-      </div>
-    </li>
+    <Fragment>
+      <li
+        css={S.profileCard}
+        tabIndex={0}
+        aria-label={info.nickname}
+        onClick={handleCardClick}
+      >
+        <ProfileFrame
+          width={7}
+          height={7}
+          src={info.profile}
+          role={info.role}
+          aria-hidden
+        />
+        <div ref={nicknameRef} css={S.profileName({ theme })} aria-hidden>
+          {formattedNickname}
+        </div>
+      </li>
+      {profileBottomSheet}
+    </Fragment>
   );
 }

From 915c37cba00df1a7541f695c48cc751edc40d945 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 23 Oct 2024 21:57:49 +0900
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20=EC=84=9C=EB=B2=84=20API=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=99=20=EB=B3=80=EA=B2=BD=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81(Participation=EC=97=90=20darakbangMemberId?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChattingRoomLayout.stories.tsx            |  70 ++++++--
 frontend/src/mocks/handler/chatHandler.ts     |  53 +++++-
 frontend/src/mocks/handler/mockedChats.ts     | 144 +++++++++++++---
 .../ChattingPreview.stories.tsx               | 156 +++++++++++++++---
 .../components/Chat/Chat.stories.tsx          |   7 +-
 .../components/ChatList/ChatList.stories.tsx  |  70 ++++++--
 .../ChattingRoomSidebar.stories.tsx           |  91 ++++++++--
 .../MoimCard/MoimCard.stories.tsx             |   2 +
 .../MoimCardList/MoimCardList.stories.tsx     |   6 +
 .../ProfileCard/ProfileCard.stories.tsx       |   3 +
 .../ProfileList/ProfileCard/ProfileCard.tsx   |   2 +-
 .../ProfileList/ProfileList.stories.tsx       |   8 +
 frontend/src/types/index.d.ts                 |   1 +
 13 files changed, 530 insertions(+), 83 deletions(-)

diff --git a/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx b/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx
index befaa4b5b..ba14af2d8 100644
--- a/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx
+++ b/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx
@@ -17,7 +17,12 @@ const chats: Chat[] = [
     chatId: 1,
     content: '안녕하세요! 오늘 날씨 어때요?',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:00',
     isMyMessage: false,
@@ -26,7 +31,12 @@ const chats: Chat[] = [
     chatId: 2,
     content: '안녕하세요! 저는 괜찮아요.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:01',
     isMyMessage: true,
@@ -35,7 +45,12 @@ const chats: Chat[] = [
     chatId: 3,
     content: '요즘 어떤 일 하고 계세요?',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:02',
     isMyMessage: false,
@@ -44,7 +59,12 @@ const chats: Chat[] = [
     chatId: 4,
     content: '프로젝트 작업 중이에요.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:03',
     isMyMessage: true,
@@ -53,7 +73,12 @@ const chats: Chat[] = [
     chatId: 5,
     content: '주말에 만나서 이야기해요.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:04',
     isMyMessage: false,
@@ -62,7 +87,12 @@ const chats: Chat[] = [
     chatId: 6,
     content: '좋아요! 그때 봅시다.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:05',
     isMyMessage: true,
@@ -71,7 +101,12 @@ const chats: Chat[] = [
     chatId: 7,
     content: '다음 주에 발표 준비 잘 하고 있나요?',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:06',
     isMyMessage: false,
@@ -80,7 +115,12 @@ const chats: Chat[] = [
     chatId: 8,
     content: '네, 열심히 하고 있어요.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:07',
     isMyMessage: true,
@@ -89,7 +129,12 @@ const chats: Chat[] = [
     chatId: 9,
     content: '도움 필요하면 언제든지 말해요.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:08',
     isMyMessage: false,
@@ -98,7 +143,12 @@ const chats: Chat[] = [
     chatId: 10,
     content: '감사합니다! 도움 요청할게요.',
     chatType: 'BASIC',
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-01',
     time: '10:09',
     isMyMessage: true,
diff --git a/frontend/src/mocks/handler/chatHandler.ts b/frontend/src/mocks/handler/chatHandler.ts
index e65e918eb..73ca0b57b 100644
--- a/frontend/src/mocks/handler/chatHandler.ts
+++ b/frontend/src/mocks/handler/chatHandler.ts
@@ -21,6 +21,8 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
       isLoser: false,
       betId: 22,
       loser: {
+        darakbangMemberId: 1,
+
         nickname: '패배자',
         profile: '',
         role: 'MOIMER',
@@ -30,6 +32,8 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
     title: '내가 안 걸린 모임',
     participations: [
       {
+        darakbangMemberId: 1,
+
         nickname: '1',
         profile: '나',
         role: 'MOIMER',
@@ -49,7 +53,14 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
     },
     type: 'MOIM',
     title: '위와 같은 가격',
-    participations: [{ nickname: '111', role: 'MOIMEE', profile: '' }],
+    participations: [
+      {
+        darakbangMemberId: 1,
+        nickname: '111',
+        role: 'MOIMEE',
+        profile: '',
+      },
+    ],
   },
   {
     chatRoomId: 2,
@@ -66,6 +77,8 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
     title: '위와 같은 모임',
     participations: [
       {
+        darakbangMemberId: 1,
+
         nickname: '',
         profile: '',
         role: 'MOIMER',
@@ -78,6 +91,7 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
       isLoser: true,
       betId: 22,
       loser: {
+        darakbangMemberId: 1,
         nickname: '',
         profile: '',
         role: 'MOIMER',
@@ -87,6 +101,7 @@ const chatRoomDetail: (BetChatRoomDetail | MoimChatRoomDetail)[] = [
     title: '내가 걸린 모임',
     participations: [
       {
+        darakbangMemberId: 1,
         nickname: '1',
         profile: '',
         role: 'MOIMER',
@@ -121,7 +136,12 @@ export const chatHandler = [
         chatId: (nowChatServerData[chatRoomId].at(-1)?.chatId || 0) + 1,
         content: json.content,
         isMyMessage: true,
-        participation: { nickname: '내 닉네임', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: '내 닉네임',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: new Date().toISOString().split('T')[0],
         time: new Date().toISOString().split('T')[1].slice(0, 8),
         chatType: 'BASIC',
@@ -157,7 +177,12 @@ export const chatHandler = [
                 chatRoomId: 0,
                 title: '내가 안 걸린 모임',
                 participations: [
-                  { nickname: '111', role: 'MOIMEE', profile: '' },
+                  {
+                    darakbangMemberId: 1,
+                    nickname: '111',
+                    role: 'MOIMEE',
+                    profile: '',
+                  },
                 ],
                 isStarted: true,
                 unreadChatCount: 1,
@@ -167,7 +192,12 @@ export const chatHandler = [
                 chatRoomId: 3,
                 title: '내가 걸린 모임',
                 participations: [
-                  { nickname: '111', role: 'MOIMEE', profile: '' },
+                  {
+                    darakbangMemberId: 1,
+                    nickname: '111',
+                    role: 'MOIMEE',
+                    profile: '',
+                  },
                 ],
                 isStarted: true,
                 unreadChatCount: 1,
@@ -188,7 +218,13 @@ export const chatHandler = [
                 chatRoomId: 1,
                 title: '모임',
                 participations: [
-                  { nickname: '111', role: 'MOIMEE', profile: '' },
+                  {
+                    darakbangMemberId: 1,
+
+                    nickname: '111',
+                    role: 'MOIMEE',
+                    profile: '',
+                  },
                 ],
                 isStarted: true,
                 unreadChatCount: 0,
@@ -198,7 +234,12 @@ export const chatHandler = [
                 chatRoomId: 2,
                 title: '위와 같은 모임',
                 participations: [
-                  { nickname: '111', role: 'MOIMEE', profile: '' },
+                  {
+                    darakbangMemberId: 1,
+                    nickname: '111',
+                    role: 'MOIMEE',
+                    profile: '',
+                  },
                 ],
                 isStarted: false,
                 unreadChatCount: 0,
diff --git a/frontend/src/mocks/handler/mockedChats.ts b/frontend/src/mocks/handler/mockedChats.ts
index f8c2c442a..a057feae3 100644
--- a/frontend/src/mocks/handler/mockedChats.ts
+++ b/frontend/src/mocks/handler/mockedChats.ts
@@ -5,7 +5,13 @@ const mockedChats: Chat[] = [
     chatId: 1,
     content: '안녕하세요!',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-07',
     time: '10:00',
     chatType: 'BASIC',
@@ -14,7 +20,13 @@ const mockedChats: Chat[] = [
     chatId: 2,
     content: '반갑습니다!',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:01',
     chatType: 'BASIC',
@@ -23,7 +35,13 @@ const mockedChats: Chat[] = [
     chatId: 3,
     content: '카페에서 만나요.',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:02',
     chatType: 'PLACE',
@@ -32,7 +50,12 @@ const mockedChats: Chat[] = [
     chatId: 4,
     content: '회의는 언제인가요?',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:03',
     chatType: 'BASIC',
@@ -41,7 +64,12 @@ const mockedChats: Chat[] = [
     chatId: 5,
     content: '추가적인 질문이 있습니다.',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:04',
     chatType: 'BASIC',
@@ -50,7 +78,12 @@ const mockedChats: Chat[] = [
     chatId: 6,
     content: '이 프로젝트는 언제 끝나나요?',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:05',
     chatType: 'BASIC',
@@ -59,7 +92,12 @@ const mockedChats: Chat[] = [
     chatId: 7,
     content: '내일 몇 시에 만날까요?',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:06',
     chatType: 'BASIC',
@@ -68,7 +106,12 @@ const mockedChats: Chat[] = [
     chatId: 8,
     content: '특별한 일정이 있나요?',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:07',
     chatType: 'BASIC',
@@ -77,7 +120,12 @@ const mockedChats: Chat[] = [
     chatId: 9,
     content: '장소는 어떻게 정할까요?',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:08',
     chatType: 'BASIC',
@@ -86,7 +134,12 @@ const mockedChats: Chat[] = [
     chatId: 10,
     content: '이 시간에 괜찮으신가요?',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:09',
     chatType: 'BASIC',
@@ -95,7 +148,12 @@ const mockedChats: Chat[] = [
     chatId: 11,
     content: '추가적인 회의는 필요할까요?',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:10',
     chatType: 'BASIC',
@@ -104,7 +162,12 @@ const mockedChats: Chat[] = [
     chatId: 12,
     content: '다음 주에 일정 잡아야 해요.',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:11',
     chatType: 'BASIC',
@@ -113,7 +176,12 @@ const mockedChats: Chat[] = [
     chatId: 13,
     content: '도서관에서 만나요.',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:12',
     chatType: 'PLACE',
@@ -122,7 +190,12 @@ const mockedChats: Chat[] = [
     chatId: 14,
     content: '일정이 확정되면 알려주세요.',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:13',
     chatType: 'BASIC',
@@ -131,7 +204,12 @@ const mockedChats: Chat[] = [
     chatId: 15,
     content: '다음 회의는 언제인가요?',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:14',
     chatType: 'BASIC',
@@ -140,7 +218,13 @@ const mockedChats: Chat[] = [
     chatId: 16,
     content: '회의 일정은 확정되었나요?',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:15',
     chatType: 'BASIC',
@@ -149,7 +233,12 @@ const mockedChats: Chat[] = [
     chatId: 17,
     content: '2024-08-10 14:30', // 'DATETIME' 형식으로 유지
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:16',
     chatType: 'DATETIME',
@@ -158,7 +247,12 @@ const mockedChats: Chat[] = [
     chatId: 18,
     content: '일정 조정이 필요할까요?',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:17',
     chatType: 'BASIC',
@@ -167,7 +261,12 @@ const mockedChats: Chat[] = [
     chatId: 19,
     content: '이번 주 금요일에 회의가 있습니다.',
     isMyMessage: true,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:18',
     chatType: 'BASIC',
@@ -176,7 +275,12 @@ const mockedChats: Chat[] = [
     chatId: 20,
     content: '그럼 그때 뵙겠습니다.',
     isMyMessage: false,
-    participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+    participation: {
+      darakbangMemberId: 1,
+      nickname: 'idk',
+      profile: '',
+      role: 'MOIMEE',
+    },
     date: '2024-08-08',
     time: '10:19',
     chatType: 'BASIC',
diff --git a/frontend/src/pages/Chatting/ChatPage/components/ChattingPreview/ChattingPreview.stories.tsx b/frontend/src/pages/Chatting/ChatPage/components/ChattingPreview/ChattingPreview.stories.tsx
index dfe525ee0..1d994f152 100644
--- a/frontend/src/pages/Chatting/ChatPage/components/ChattingPreview/ChattingPreview.stories.tsx
+++ b/frontend/src/pages/Chatting/ChatPage/components/ChattingPreview/ChattingPreview.stories.tsx
@@ -12,7 +12,14 @@ type Story = StoryObj<typeof ChattingPreview>;
 export const NoContent: Story = {
   args: {
     title: '운동 모임',
-    participants: [{ nickname: 'aa', role: 'MOIMEE', profile: '' }],
+    participants: [
+      {
+        darakbangMemberId: 1,
+        nickname: 'aa',
+        role: 'MOIMEE',
+        profile: '',
+      },
+    ],
     tagValue: '모임 전',
     lastContent: '',
     unreadCount: 0,
@@ -23,13 +30,48 @@ export const HasContent: Story = {
   args: {
     title: '독서 클럽',
     participants: [
-      { nickname: 'aa', role: 'MOIMEE', profile: '' },
-      { nickname: 'bb', role: 'MOIMEE', profile: '' },
-      { nickname: 'cc', role: 'MOIMEE', profile: '' },
-      { nickname: 'dd', role: 'MOIMEE', profile: '' },
-      { nickname: 'ee', role: 'MOIMEE', profile: '' },
-      { nickname: 'ff', role: 'MOIMEE', profile: '' },
-      { nickname: 'gg', role: 'MOIMEE', profile: '' },
+      {
+        darakbangMemberId: 1,
+        nickname: 'aa',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'bb',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'cc',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'dd',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'ee',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'ff',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        role: 'MOIMEE',
+        profile: '',
+      },
     ],
     tagValue: '모임 후',
     lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?',
@@ -41,13 +83,48 @@ export const Over300UnreadMessage: Story = {
   args: {
     title: '독서 클럽',
     participants: [
-      { nickname: 'aa', role: 'MOIMEE', profile: '' },
-      { nickname: 'bb', role: 'MOIMEE', profile: '' },
-      { nickname: 'cc', role: 'MOIMEE', profile: '' },
-      { nickname: 'dd', role: 'MOIMEE', profile: '' },
-      { nickname: 'ee', role: 'MOIMEE', profile: '' },
-      { nickname: 'ff', role: 'MOIMEE', profile: '' },
-      { nickname: 'gg', role: 'MOIMEE', profile: '' },
+      {
+        darakbangMemberId: 1,
+        nickname: 'aa',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'bb',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'cc',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'dd',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'ee',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'ff',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        role: 'MOIMEE',
+        profile: '',
+      },
     ],
     tagValue: '모임 전',
     lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?',
@@ -59,13 +136,48 @@ export const AfterMoim: Story = {
   args: {
     title: '독서 클럽',
     participants: [
-      { nickname: 'aa', role: 'MOIMEE', profile: '' },
-      { nickname: 'bb', role: 'MOIMEE', profile: '' },
-      { nickname: 'cc', role: 'MOIMEE', profile: '' },
-      { nickname: 'dd', role: 'MOIMEE', profile: '' },
-      { nickname: 'ee', role: 'MOIMEE', profile: '' },
-      { nickname: 'ff', role: 'MOIMEE', profile: '' },
-      { nickname: 'gg', role: 'MOIMEE', profile: '' },
+      {
+        darakbangMemberId: 1,
+        nickname: 'aa',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'bb',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'cc',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'dd',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'ee',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'ff',
+        role: 'MOIMEE',
+        profile: '',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        role: 'MOIMEE',
+        profile: '',
+      },
     ],
     tagValue: '모임 후',
     lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?',
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.stories.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.stories.tsx
index c18989155..8b1eb47db 100644
--- a/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.stories.tsx
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.stories.tsx
@@ -14,7 +14,12 @@ export const Default: Story = {
     chat: {
       chatId: 11,
       content: '여러분~ 싸우지 마세요',
-      participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+      participation: {
+        darakbangMemberId: 1,
+        nickname: 'idk',
+        profile: '',
+        role: 'MOIMEE',
+      },
       date: '2024-08-01',
       time: '12:12',
       chatType: 'BASIC',
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatList/ChatList.stories.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatList/ChatList.stories.tsx
index 33360f3a4..315f03a41 100644
--- a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatList/ChatList.stories.tsx
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatList/ChatList.stories.tsx
@@ -16,7 +16,12 @@ export const Default: Story = {
         chatId: 1,
         content: '안녕하세요! 어떻게 지내세요?',
         isMyMessage: true,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:00',
         chatType: 'BASIC',
@@ -25,7 +30,12 @@ export const Default: Story = {
         chatId: 2,
         content: '안녕하세요! 잘 지내고 있어요.',
         isMyMessage: false,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:01',
         chatType: 'BASIC',
@@ -34,7 +44,12 @@ export const Default: Story = {
         chatId: 3,
         content: '2024-08-01 15:00',
         isMyMessage: true,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:05',
         chatType: 'DATETIME',
@@ -43,7 +58,12 @@ export const Default: Story = {
         chatId: 4,
         content: '2024-08-01 15:00',
         isMyMessage: false,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:06',
         chatType: 'DATETIME',
@@ -52,7 +72,12 @@ export const Default: Story = {
         chatId: 5,
         content: '카페 A에서 만날까요?',
         isMyMessage: true,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:10',
         chatType: 'PLACE',
@@ -61,7 +86,12 @@ export const Default: Story = {
         chatId: 6,
         content: '강남역 스타벅스에서 만나는 건 어떨까요?',
         isMyMessage: false,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:12',
         chatType: 'PLACE',
@@ -70,7 +100,12 @@ export const Default: Story = {
         chatId: 7,
         content: '오늘 날씨가 좋네요!',
         isMyMessage: true,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:15',
         chatType: 'BASIC',
@@ -79,7 +114,12 @@ export const Default: Story = {
         chatId: 8,
         content: '네, 정말 좋습니다!',
         isMyMessage: false,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:16',
         chatType: 'BASIC',
@@ -88,7 +128,12 @@ export const Default: Story = {
         chatId: 9,
         content: '2024-08-02 10:00',
         isMyMessage: true,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:20',
         chatType: 'DATETIME',
@@ -97,7 +142,12 @@ export const Default: Story = {
         chatId: 10,
         content: '2024-08-02 10:00',
         isMyMessage: false,
-        participation: { nickname: 'idk', profile: '', role: 'MOIMEE' },
+        participation: {
+          darakbangMemberId: 1,
+          nickname: 'idk',
+          profile: '',
+          role: 'MOIMEE',
+        },
         date: '2024-08-01',
         time: '10:21',
         chatType: 'DATETIME',
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.stories.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.stories.tsx
index a7aca83c6..430891968 100644
--- a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.stories.tsx
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.stories.tsx
@@ -12,19 +12,84 @@ type Story = StoryObj<typeof ChattingRoomSidebar>;
 export const Default: Story = {
   args: {
     members: [
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
-      { nickname: 'gg', profile: '', role: 'MOIMEE' },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
+      {
+        darakbangMemberId: 1,
+        nickname: 'gg',
+        profile: '',
+        role: 'MOIMEE',
+      },
     ],
   },
 };
diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCard/MoimCard.stories.tsx b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCard/MoimCard.stories.tsx
index 229f3cc29..e3a19559f 100644
--- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCard/MoimCard.stories.tsx
+++ b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCard/MoimCard.stories.tsx
@@ -24,11 +24,13 @@ export const Default: Story = {
       authorNickname: '김코딩',
       participants: [
         {
+          darakbangMemberId: 1,
           nickname: '김코딩',
           profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
           role: 'MOIMER',
         },
         {
+          darakbangMemberId: 1,
           nickname: '김디자인',
           profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
           role: 'MOIMEE',
diff --git a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.stories.tsx b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.stories.tsx
index 2992e5354..22672f559 100644
--- a/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.stories.tsx
+++ b/frontend/src/pages/Moim/MainPage/components/HomeMainContent/MoimCardList/MoimCardList.stories.tsx
@@ -27,11 +27,13 @@ export const Default: Story = {
         authorNickname: '김코딩',
         participants: [
           {
+            darakbangMemberId: 1,
             nickname: '김코딩',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'MOIMER',
           },
           {
+            darakbangMemberId: 1,
             nickname: '김디자인',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'MOIMEE',
@@ -51,11 +53,13 @@ export const Default: Story = {
         authorNickname: '김코딩',
         participants: [
           {
+            darakbangMemberId: 1,
             nickname: '김코딩',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'MOIMER',
           },
           {
+            darakbangMemberId: 1,
             nickname: '김디자인',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'MOIMEE',
@@ -86,11 +90,13 @@ export const Default: Story = {
         authorNickname: '김코딩',
         participants: [
           {
+            darakbangMemberId: 1,
             nickname: '김코딩',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'MOIMER',
           },
           {
+            darakbangMemberId: 1,
             nickname: '김디자인',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'MOIMEE',
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx
index 145011bb0..c73fb3157 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.stories.tsx
@@ -15,6 +15,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     info: {
+      darakbangMemberId: 1,
       nickname: '치코',
       profile: EmptyProfile,
       role: 'MOIMEE',
@@ -26,6 +27,7 @@ export const Default: Story = {
 export const WithCustomImage: Story = {
   args: {
     info: {
+      darakbangMemberId: 1,
       nickname: '치코',
       profile: Plus,
       role: 'MOIMEE',
@@ -37,6 +39,7 @@ export const WithCustomImage: Story = {
 export const WithErrorHandling: Story = {
   args: {
     info: {
+      darakbangMemberId: 1,
       nickname: '치코',
       profile: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL
       role: 'MOIMEE',
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
index 5b594c882..041d5cd27 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileCard/ProfileCard.tsx
@@ -22,7 +22,7 @@ export default function ProfileCard(props: ProfileCardProps) {
     maxNicknameWidth: 70,
   });
 
-  const { member } = useDarakbangMember(1);
+  const { member } = useDarakbangMember(info.darakbangMemberId);
 
   const { profileBottomSheet, open } = useProfileBottomSheet({
     name: member?.name || '',
diff --git a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.stories.tsx b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.stories.tsx
index c49b26f3d..7db706f45 100644
--- a/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.stories.tsx
+++ b/frontend/src/pages/Moim/MoimDetailPage/components/ProfileList/ProfileList.stories.tsx
@@ -14,41 +14,49 @@ export const Default: Story = {
   args: {
     participants: [
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMEE',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
       },
       {
+        darakbangMemberId: 1,
         nickname: '치코',
         profile: '',
         role: 'MOIMER',
diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts
index fbaf19666..081c9d942 100644
--- a/frontend/src/types/index.d.ts
+++ b/frontend/src/types/index.d.ts
@@ -19,6 +19,7 @@ export interface MoimInfo {
 }
 
 export interface Participation {
+  darakbangMemberId: number;
   nickname: string;
   profile: string;
   role: Role;

From 3e1881c2e13bce96e0daafa0358cc2b4ddc33272 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 23 Oct 2024 22:24:52 +0900
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80,=20=EC=B1=84=ED=8C=85=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94,=20=EB=8B=A4=EB=9D=BD=EB=B0=A9=20=EB=A9=A4?=
 =?UTF-8?q?=EB=B2=84=20=ED=8E=98=EC=9D=B4=EC=A7=80,=20=EB=A3=B0=EB=A0=9B?=
 =?UTF-8?q?=20=EB=94=94=ED=85=8C=EC=9D=BC=EC=97=90=EB=8F=84=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20UI?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/apis/responseTypes.ts            |  2 +-
 .../src/components/MemberCard/MemberCard.tsx  | 34 +++++++++++++-----
 .../ProfileBottomSheet/ProfileBottomSheet.tsx |  2 +-
 .../components/ProfileCard/ProfileCard.tsx    | 36 +++++++++++++------
 .../ChattingRoomPage/components/Chat/Chat.tsx |  9 +++--
 .../ChatProfileImage.style.ts                 | 27 ++++++++++++++
 .../ChatProfileImage/ChatProfileImage.tsx     | 31 ++++++++++++++++
 .../ChattingRoomSidebar.tsx                   | 10 ++++--
 .../DarakbangMembersPage.tsx                  | 15 ++++++--
 9 files changed, 138 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.style.ts
 create mode 100644 frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.tsx

diff --git a/frontend/src/apis/responseTypes.ts b/frontend/src/apis/responseTypes.ts
index fb873ae9a..5dccb0ec8 100644
--- a/frontend/src/apis/responseTypes.ts
+++ b/frontend/src/apis/responseTypes.ts
@@ -98,7 +98,7 @@ export interface GetMyRoleInDarakbang {
 export interface GetDarakbangMembers {
   data: {
     responses: {
-      memberId: number;
+      darakbangMemberId: number;
       nickname: string;
       profile: string;
     }[];
diff --git a/frontend/src/components/MemberCard/MemberCard.tsx b/frontend/src/components/MemberCard/MemberCard.tsx
index 346e832c0..8c94b1e9f 100644
--- a/frontend/src/components/MemberCard/MemberCard.tsx
+++ b/frontend/src/components/MemberCard/MemberCard.tsx
@@ -1,9 +1,13 @@
 import * as S from './MemberCard.style';
 
 import UserPreview from '@_components/UserPreview/UserPreview';
+import useDarakbangMember from '@_hooks/queries/useDarakbangMember';
+import useProfileBottomSheet from '@_hooks/useProfileBottomSheet';
 import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
 
 interface MemberCard {
+  memberId: number;
   name: string;
   // options?: {
   //   description: string;
@@ -14,18 +18,30 @@ interface MemberCard {
 }
 
 export default function MemberCard(props: MemberCard) {
-  const { imageUrl, name } = props;
+  const { memberId, imageUrl, name } = props;
   const theme = useTheme();
 
+  const { member } = useDarakbangMember(memberId);
+
+  const { profileBottomSheet, open } = useProfileBottomSheet({
+    name: member?.name || '',
+    nickname: member?.nickname || '',
+    description: member?.description || '',
+    url: member?.url || '',
+  });
+
   return (
-    <div css={S.card} onClick={() => alert(1)}>
-      <div css={S.preview}>
-        <UserPreview imageUrl={imageUrl} />
-        <span css={[theme.typography.Medium, S.name]}>{name}</span>
-      </div>
-      {/* {options&&<div>
+    <Fragment>
+      <div css={S.card} onClick={() => open()}>
+        <div css={S.preview}>
+          <UserPreview imageUrl={imageUrl} />
+          <span css={[theme.typography.Medium, S.name]}>{name}</span>
+        </div>
+        {/* {options&&<div>
         <KebabMenu />
-      </div>} */}
-    </div>
+        </div>} */}
+      </div>
+      {profileBottomSheet}
+    </Fragment>
   );
 }
diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
index cdfa5cc35..e067980a8 100644
--- a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -24,7 +24,7 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
           <CloseButton />
         </BottomSheet.Header>
       }
-      // cta={<Button shape="bar">butt123on</Button>}
+      // TODO: 바텀시트 사이즈에 대한 논의 필요
       size="medium"
       onDimmerClick={close}
     >
diff --git a/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.tsx b/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.tsx
index 9e755495a..32f706b32 100644
--- a/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.tsx
+++ b/frontend/src/pages/Bet/BetDetailPage/components/ProfileCard/ProfileCard.tsx
@@ -4,6 +4,9 @@ import DefaultProfile from '@_common/assets/default_profile.svg?url';
 import { Participant } from '@_types/index';
 import useNicknameWidthEffect from '@_hooks/useNicknameWidthEffect';
 import { useTheme } from '@emotion/react';
+import useProfileBottomSheet from '@_hooks/useProfileBottomSheet';
+import useDarakbangMember from '@_hooks/queries/useDarakbangMember';
+import { Fragment } from 'react';
 
 interface ProfileCardProps {
   info: Participant;
@@ -18,17 +21,30 @@ export default function ProfileCard(props: ProfileCardProps) {
 
   const theme = useTheme();
 
+  console.log(info);
+  const { member } = useDarakbangMember(info.id);
+
+  const { profileBottomSheet, open } = useProfileBottomSheet({
+    name: member?.name || '',
+    nickname: member?.nickname || '',
+    description: member?.description || '',
+    url: member?.url || '',
+  });
+
   return (
-    <div css={S.profileCard({ theme })}>
-      <img
-        src={info.profileUrl || ''}
-        css={S.profileImage({ theme })}
-        alt={info.nickname + ' 프로필사진'}
-        onError={(event) => (event.currentTarget.src = DefaultProfile)}
-      />
-      <div ref={nicknameRef} css={S.profileNickname({ theme })}>
-        {formattedNickname}
+    <Fragment>
+      <div css={S.profileCard({ theme })} onClick={() => open()}>
+        <img
+          src={info.profileUrl || ''}
+          css={S.profileImage({ theme })}
+          alt={info.nickname + ' 프로필사진'}
+          onError={(event) => (event.currentTarget.src = DefaultProfile)}
+        />
+        <div ref={nicknameRef} css={S.profileNickname({ theme })}>
+          {formattedNickname}
+        </div>
       </div>
-    </div>
+      {profileBottomSheet}
+    </Fragment>
   );
 }
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.tsx
index 7255ca4b0..a289d7073 100644
--- a/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.tsx
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/Chat/Chat.tsx
@@ -8,9 +8,9 @@ import {
 
 import { Chat as ChatType } from '@_types/index';
 import { PropsWithChildren } from 'react';
-import UserPreview from '@_components/UserPreview/UserPreview';
 import { formatHhmmToKoreanWithPrefix } from '@_utils/formatters';
 import { useTheme } from '@emotion/react';
+import ChatProfileImage from '../ChatProfileImage/ChatProfileImage';
 
 export interface ChatMessageProps extends PropsWithChildren {
   chat: ChatType;
@@ -19,11 +19,16 @@ export interface ChatMessageProps extends PropsWithChildren {
 export default function Chat(props: ChatMessageProps) {
   const { chat, children } = props;
   const { participation, time, isMyMessage } = chat;
+
   const theme = useTheme();
+
   return (
     <div css={chatMessageStyle({ isMyMessage })}>
       {/* TODO: 추후 프로필 사진 추가시 변경해야함  */}
-      <UserPreview imageUrl={participation.profile} />
+      <ChatProfileImage
+        imageUrl={participation.profile}
+        memberId={chat.participation.darakbangMemberId}
+      />
       <div css={messageContainer({ isMyMessage })}>
         <span css={senderStyle({ theme })}>{participation.nickname}</span>
         <div css={chatLine({ isMyMessage })}>
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.style.ts b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.style.ts
new file mode 100644
index 000000000..3e31fb888
--- /dev/null
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.style.ts
@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+import defaultProfile from '@_common/assets/default_profile.svg?url';
+
+export const preview = ({
+  imageUrl,
+  size,
+}: {
+  imageUrl?: string;
+  size?: string;
+}) => css`
+  flex-shrink: 0;
+
+  width: ${size || '3.5rem'};
+  height: ${size || '3.5rem'};
+
+  background: url(${imageUrl}), url(${defaultProfile});
+  background-color: white;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
+  border-radius: 50%;
+  box-shadow: 0 4px 4px 0 #00000040;
+
+  &:active {
+    background-color: #868e96;
+  }
+`;
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.tsx
new file mode 100644
index 000000000..0fcba8c32
--- /dev/null
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChatProfileImage/ChatProfileImage.tsx
@@ -0,0 +1,31 @@
+import useDarakbangMember from '@_hooks/queries/useDarakbangMember';
+import { preview } from './ChatProfileImage.style';
+import useProfileBottomSheet from '@_hooks/useProfileBottomSheet';
+import { Fragment } from 'react';
+
+interface UserPreviewProps {
+  memberId: number;
+  imageUrl?: string;
+  size?: string;
+  hasCrown?: boolean;
+}
+
+export default function ChatProfileImage(props: UserPreviewProps) {
+  const { memberId, imageUrl, size } = props;
+
+  const { member } = useDarakbangMember(memberId);
+
+  const { profileBottomSheet, open } = useProfileBottomSheet({
+    name: member?.name || '',
+    nickname: member?.nickname || '',
+    description: member?.description || '',
+    url: member?.url || '',
+  });
+
+  return (
+    <Fragment>
+      <div css={preview({ imageUrl, size })} onClick={() => open()} />
+      {profileBottomSheet}
+    </Fragment>
+  );
+}
diff --git a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.tsx b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.tsx
index ada0e448f..95d0ec1de 100644
--- a/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.tsx
+++ b/frontend/src/pages/Chatting/ChattingRoomPage/components/ChattingRoomSidebar/ChattingRoomSidebar.tsx
@@ -39,10 +39,14 @@ export default function ChattingRoomSidebar(props: ChattingRoomSidebarProps) {
             </span>
           </header>
           <div css={S.members}>
-            {members.map(({ nickname, profile }) => {
+            {members.map(({ darakbangMemberId, nickname, profile }) => {
               return (
-                <div css={S.memberWrapper} key={nickname}>
-                  <MemberCard name={nickname} imageUrl={profile} />
+                <div css={S.memberWrapper} key={darakbangMemberId}>
+                  <MemberCard
+                    memberId={darakbangMemberId}
+                    name={nickname}
+                    imageUrl={profile}
+                  />
                 </div>
               );
             })}
diff --git a/frontend/src/pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage.tsx b/frontend/src/pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage.tsx
index c13f49b69..ec0fb9436 100644
--- a/frontend/src/pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage.tsx
+++ b/frontend/src/pages/Darakbang/DarakbangMembersPage/DarakbangMembersPage.tsx
@@ -11,6 +11,12 @@ export default function DarakbangMembersPage() {
   const navigate = useNavigate();
 
   const { members, isLoading } = useDarakbangMembers();
+
+  console.log(members);
+  console.log(members);
+  console.log(members);
+  console.log(members);
+  console.log(members);
   return (
     <>
       <StickyTriSectionHeader>
@@ -21,8 +27,13 @@ export default function DarakbangMembersPage() {
       </StickyTriSectionHeader>
       {isLoading && <>loading...</>}
       <div css={S.members}>
-        {members?.map(({ nickname, memberId, profile }) => (
-          <MemberCard key={memberId} name={nickname} imageUrl={profile} />
+        {members?.map(({ nickname, darakbangMemberId, profile }) => (
+          <MemberCard
+            key={darakbangMemberId}
+            memberId={darakbangMemberId}
+            name={nickname}
+            imageUrl={profile}
+          />
         ))}
       </div>
     </>

From ddc5e81af1f4b67bcdfbfe0b21af729d00786c43 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 23 Oct 2024 22:26:08 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EB=8B=AB=EA=B8=B0?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EB=B0=94?=
 =?UTF-8?q?=EC=9D=B8=EB=94=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ProfileBottomSheet/ProfileBottomSheet.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
index e067980a8..333d856d1 100644
--- a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -21,7 +21,7 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
       isOpen={isOpen}
       header={
         <BottomSheet.Header>
-          <CloseButton />
+          <CloseButton onClick={close} />
         </BottomSheet.Header>
       }
       // TODO: 바텀시트 사이즈에 대한 논의 필요

From 328d9f725f8b7780c5d68b2b043c5d7fae8ae99d Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 23 Oct 2024 22:36:23 +0900
Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=EC=8B=9C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=BD=98=ED=85=90?=
 =?UTF-8?q?=EC=B8=A0=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=8B=A4=EB=A5=B4?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ProfileBottomSheet/ProfileBottomSheet.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
index 333d856d1..610bc39ee 100644
--- a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -16,6 +16,7 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
 
   const theme = useTheme();
 
+  console.log(profile);
   return (
     <BottomSheet
       isOpen={isOpen}
@@ -25,7 +26,7 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
         </BottomSheet.Header>
       }
       // TODO: 바텀시트 사이즈에 대한 논의 필요
-      size="medium"
+      size="small"
       onDimmerClick={close}
     >
       <BottomSheet.Content>

From 75965f8bc80fd4211bdd25d65f7ae2af6aa2bfa8 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Wed, 23 Oct 2024 22:41:53 +0900
Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EC=86=8C=EA=B0=9C=EA=B8=80?=
 =?UTF-8?q?=EC=9D=B4=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EA=B8=B0=EB=B3=B8?=
 =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=A0=9C=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProfileBottomSheet/ProfileBottomSheet.tsx  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
index 610bc39ee..15a729aea 100644
--- a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -88,7 +88,13 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
             >
               <ProfileInfoItem label="이름" value={profile.name} />
               <ProfileInfoItem label="닉네임" value={profile.nickname} />
-              <ProfileInfoItem label="소개" value={profile.description} />
+              <ProfileInfoItem
+                label="소개"
+                value={
+                  profile.description ||
+                  `${profile.name}(${profile.nickname})님의 소개가 없습니다.`
+                }
+              />
             </div>
           </div>
         </div>

From 74b7c0a74b75b3185bf522d7708fc36dc5d4d9d8 Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Thu, 24 Oct 2024 10:17:27 +0900
Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=EC=8B=9C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BottomSheet/BottomSheet.tsx    | 111 +++++++++++++++++-
 .../ProfileBottomSheet/ProfileBottomSheet.tsx |   6 -
 2 files changed, 107 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/BottomSheet/BottomSheet.tsx b/frontend/src/components/BottomSheet/BottomSheet.tsx
index b447cc17d..89abee72f 100644
--- a/frontend/src/components/BottomSheet/BottomSheet.tsx
+++ b/frontend/src/components/BottomSheet/BottomSheet.tsx
@@ -1,11 +1,11 @@
 import { css, useTheme } from '@emotion/react';
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 
 interface BottomSheetProps {
   isOpen: boolean;
   onDimmerClick: () => void;
 
-  header: React.ReactNode;
+  header?: React.ReactNode;
   cta?: React.ReactNode;
 
   size?: 'small' | 'medium' | 'large' | 'full';
@@ -18,17 +18,97 @@ export default function BottomSheet(
 
   const theme = useTheme();
 
-  if (!isOpen) {
+  const [startY, setStartY] = useState(0); // 터치 시작 Y좌표
+  const [currentY, setCurrentY] = useState(window.innerHeight); // 초기에는 화면 아래에 위치
+  const [isDragging, setIsDragging] = useState(false); // 드래그 중인지 여부
+  const [isClosing, setIsClosing] = useState(false); // 닫히는 애니메이션 여부
+
+  // Bottom Sheet가 열릴 때 애니메이션으로 위로 올라옴
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'; // 스크롤 비활성화
+
+      // 열릴 때 100px 아래에서 0으로 부드럽게 올라오도록 애니메이션 시작
+      setTimeout(() => {
+        setCurrentY(0); // Y값을 0으로 변경 -> 밑에서 위로 올라오는 애니메이션
+      }, 10); // 딜레이를 줘야 애니메이션이 자연스럽게 동작
+    } else {
+      setCurrentY(window.innerHeight); // 닫힐 때 다시 화면 아래로
+      document.body.style.overflow = 'auto'; // 스크롤 활성화
+    }
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setCurrentY(window.innerHeight); // 닫힐 때 높이를 초기화
+      setIsClosing(false); // 닫힘 애니메이션 초기화
+    }
+  }, [isOpen]);
+
+  // Dimmer 클릭 시 애니메이션으로 밑으로 내려간 후 닫힘
+  const handleDimmerClick = () => {
+    setIsClosing(true);
+    setCurrentY(window.innerHeight); // 화면 아래로 내려가는 애니메이션
+    setTimeout(() => {
+      onDimmerClick(); // 300ms 후 실제로 닫기
+    }, 300); // 애니메이션 시간이 0.3초이므로 300ms 후에 닫음
+  };
+
+  // 드래그 시작
+  const handleTouchStart = (event: React.TouchEvent) => {
+    setStartY(event.touches[0].clientY);
+    setIsDragging(true);
+  };
+
+  // 드래그 중
+  const handleTouchMove = (event: React.TouchEvent) => {
+    if (!isDragging) return;
+
+    const currentTouchY = event.touches[0].clientY;
+    const deltaY = currentTouchY - startY;
+
+    // Y축으로만 움직임을 감지
+    if (deltaY > 0) {
+      setCurrentY(deltaY); // 드래그된 만큼 값을 저장
+    }
+  };
+
+  // 드래그 종료
+  const handleTouchEnd = () => {
+    if (!isDragging) return;
+    setIsDragging(false);
+
+    // 드래그가 일정 값 이상이면 Bottom Sheet를 닫음
+    if (currentY > 100) {
+      // 애니메이션으로 Bottom Sheet를 아래로 내리고 닫기
+      setIsClosing(true);
+      setCurrentY(window.innerHeight); // 화면 하단으로 내리는 애니메이션
+      setTimeout(() => {
+        onDimmerClick(); // 애니메이션 후 실제로 닫기
+      }, 300); // 애니메이션 시간이 0.3초이므로 300ms 후에 닫음
+    } else {
+      setCurrentY(0); // 원래 위치로 되돌림
+    }
+  };
+
+  if (!isOpen && !isClosing) {
     return null;
   }
 
   return (
     <BottomSheetContainer>
-      <Dimmer onClick={onDimmerClick} />
+      <Dimmer onClick={handleDimmerClick} />
       <div
         css={css`
           z-index: 2;
 
+          /* 터치 드래그에 따른 Y축 이동 */
+          transform: translateY(${currentY}px);
+
           display: flex;
           flex-direction: column;
           gap: 24px;
@@ -46,8 +126,31 @@ export default function BottomSheet(
 
           background-color: ${theme.colorPalette.white[100]};
           border-radius: 28px 28px 0 0;
+
+          /* 터치 드래그에 따른 Y축 이동 */
+          transition: ${isDragging ? 'none' : 'transform 0.3s ease'};
         `}
       >
+        <div
+          css={css`
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 32px;
+          `}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        >
+          <div
+            css={css`
+              width: 50px;
+              height: 6px;
+              background-color: black;
+              border-radius: 12px;
+            `}
+          />
+        </div>
         {header}
         {children}
         {cta}
diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
index 15a729aea..4dfc7e9d6 100644
--- a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -2,7 +2,6 @@ import BottomSheet from '@_components/BottomSheet/BottomSheet';
 import { Profile } from '@_hooks/useProfileBottomSheet';
 import ProfileInfoItem from './ProfileInfoItem';
 import { css, useTheme } from '@emotion/react';
-import CloseButton from '@_components/CloseButton/CloseButton';
 import ProfileFrame from '@_components/ProfileFrame/ProfileFrame';
 
 interface ProfileBottomSheetProps {
@@ -20,11 +19,6 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
   return (
     <BottomSheet
       isOpen={isOpen}
-      header={
-        <BottomSheet.Header>
-          <CloseButton onClick={close} />
-        </BottomSheet.Header>
-      }
       // TODO: 바텀시트 사이즈에 대한 논의 필요
       size="small"
       onDimmerClick={close}

From 939d88751ca8dea85eb8239d59789fda0d10649d Mon Sep 17 00:00:00 2001
From: cys4585 <dev.youngsu@gmail.com>
Date: Thu, 24 Oct 2024 10:45:24 +0900
Subject: [PATCH 10/10] =?UTF-8?q?style:=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81=20=EC=BD=94=EB=93=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BottomSheet/BottomSheet.stories.tsx       |   2 +-
 .../components/BottomSheet/BottomSheet.tsx    | 108 ++----------------
 .../BottomSheetBody/BottomSheetBody.style.ts  |  39 +++++++
 .../BottomSheetBody/BottomSheetBody.tsx       |  21 ++++
 .../BottomSheetContainer.style.ts             |  15 +++
 .../BottomSheetContainer.tsx                  |   8 ++
 .../BottomSheetHandle.style.ts                |  15 +++
 .../BottomSheetHandle/BottomSheetHandle.tsx   |  22 ++++
 .../src/components/Dimmer/Dimmer.style.ts     |  16 +++
 frontend/src/components/Dimmer/Dimmer.tsx     |   5 +
 .../ProfileBottomSheet/ProfileBottomSheet.tsx |   5 +-
 11 files changed, 155 insertions(+), 101 deletions(-)
 create mode 100644 frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.style.ts
 create mode 100644 frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.tsx
 create mode 100644 frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.style.ts
 create mode 100644 frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.tsx
 create mode 100644 frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.style.ts
 create mode 100644 frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.tsx
 create mode 100644 frontend/src/components/Dimmer/Dimmer.style.ts
 create mode 100644 frontend/src/components/Dimmer/Dimmer.tsx

diff --git a/frontend/src/components/BottomSheet/BottomSheet.stories.tsx b/frontend/src/components/BottomSheet/BottomSheet.stories.tsx
index 9cb034d60..a9c3f5a48 100644
--- a/frontend/src/components/BottomSheet/BottomSheet.stories.tsx
+++ b/frontend/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -24,7 +24,7 @@ export const Default: Story = {
   },
   render: (args) => (
     <BottomSheet {...args}>
-      <BottomSheet.Content>Content</BottomSheet.Content>
+      <BottomSheet.Main>Content</BottomSheet.Main>
     </BottomSheet>
   ),
 };
diff --git a/frontend/src/components/BottomSheet/BottomSheet.tsx b/frontend/src/components/BottomSheet/BottomSheet.tsx
index 89abee72f..4fd37b2ea 100644
--- a/frontend/src/components/BottomSheet/BottomSheet.tsx
+++ b/frontend/src/components/BottomSheet/BottomSheet.tsx
@@ -1,5 +1,8 @@
-import { css, useTheme } from '@emotion/react';
+import Dimmer from '@_components/Dimmer/Dimmer';
 import { PropsWithChildren, useEffect, useState } from 'react';
+import BottomSheetContainer from './BottomSheetContainer/BottomSheetContainer';
+import BottomSheetBody from './BottomSheetBody/BottomSheetBody';
+import BottomSheetHandle from './BottomSheetHandle/BottomSheetHandle';
 
 interface BottomSheetProps {
   isOpen: boolean;
@@ -16,8 +19,6 @@ export default function BottomSheet(
 ) {
   const { isOpen, onDimmerClick, header, cta, children, size } = props;
 
-  const theme = useTheme();
-
   const [startY, setStartY] = useState(0); // 터치 시작 Y좌표
   const [currentY, setCurrentY] = useState(window.innerHeight); // 초기에는 화면 아래에 위치
   const [isDragging, setIsDragging] = useState(false); // 드래그 중인지 여부
@@ -102,114 +103,27 @@ export default function BottomSheet(
   return (
     <BottomSheetContainer>
       <Dimmer onClick={handleDimmerClick} />
-      <div
-        css={css`
-          z-index: 2;
-
-          /* 터치 드래그에 따른 Y축 이동 */
-          transform: translateY(${currentY}px);
-
-          display: flex;
-          flex-direction: column;
-          gap: 24px;
-
-          width: 100%;
-          max-width: 600px;
-          height: ${size === 'medium'
-            ? '50vh'
-            : size === 'large'
-              ? '80vh'
-              : size === 'full'
-                ? '100vh'
-                : 'auto'};
-          padding-bottom: 32px;
-
-          background-color: ${theme.colorPalette.white[100]};
-          border-radius: 28px 28px 0 0;
-
-          /* 터치 드래그에 따른 Y축 이동 */
-          transition: ${isDragging ? 'none' : 'transform 0.3s ease'};
-        `}
-      >
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 32px;
-          `}
+      <BottomSheetBody currentY={currentY} size={size} isDragging={isDragging}>
+        <BottomSheetHandle
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
-        >
-          <div
-            css={css`
-              width: 50px;
-              height: 6px;
-              background-color: black;
-              border-radius: 12px;
-            `}
-          />
-        </div>
+        />
         {header}
         {children}
         {cta}
-      </div>
+      </BottomSheetBody>
     </BottomSheetContainer>
   );
 }
 
-function BottomSheetContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      css={css`
-        position: fixed;
-        z-index: 1;
-        inset: 0;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
-
-        width: 100%;
-        height: 100%;
-      `}
-    >
-      {children}
-    </div>
-  );
-}
-
-function Dimmer({ onClick }: { onClick: () => void }) {
-  return (
-    <div
-      onClick={onClick}
-      css={css`
-        position: fixed;
-        inset: 0;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-end;
-
-        width: 100%;
-        height: 100%;
-
-        background-color: rgb(0 0 0 / 20%);
-      `}
-    />
-  );
-}
-
 BottomSheet.Header = function BottomSheetHeader(props: PropsWithChildren) {
   const { children } = props;
 
-  return <div css={{ padding: '32px 24px 0' }}>{children}</div>;
+  return <div css={{ padding: '0 24px' }}>{children}</div>;
 };
 
-BottomSheet.Content = function BottomSheetContent(props: PropsWithChildren) {
+BottomSheet.Main = function BottomSheetMain(props: PropsWithChildren) {
   const { children } = props;
 
   return <div css={{ padding: '0px 24px' }}>{children}</div>;
@@ -218,5 +132,5 @@ BottomSheet.Content = function BottomSheetContent(props: PropsWithChildren) {
 BottomSheet.CTA = function BottomSheetCTA(props: PropsWithChildren) {
   const { children } = props;
 
-  return <div css={{ padding: '0px 24px 16px' }}>{children}</div>;
+  return <div css={{ padding: '0px 24px' }}>{children}</div>;
 };
diff --git a/frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.style.ts b/frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.style.ts
new file mode 100644
index 000000000..1f7d907ec
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.style.ts
@@ -0,0 +1,39 @@
+import { css, Theme } from '@emotion/react';
+
+export const body = ({
+  theme,
+  currentY,
+  size,
+  isDragging,
+}: {
+  theme: Theme;
+  currentY: number;
+  size?: 'small' | 'medium' | 'large' | 'full';
+  isDragging: boolean;
+}) => css`
+  z-index: 2;
+
+  /* 터치 드래그에 따른 Y축 이동 */
+  transform: translateY(${currentY}px);
+
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  width: 100%;
+  max-width: 600px;
+  height: ${size === 'medium'
+    ? '50vh'
+    : size === 'large'
+      ? '80vh'
+      : size === 'full'
+        ? '100vh'
+        : 'auto'};
+  padding-bottom: 32px;
+
+  background-color: ${theme.colorPalette.white[100]};
+  border-radius: 28px 28px 0 0;
+
+  /* 터치 드래그에 따른 Y축 이동 */
+  transition: ${isDragging ? 'none' : 'transform 0.3s ease'};
+`;
diff --git a/frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.tsx b/frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.tsx
new file mode 100644
index 000000000..1004f138b
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheetBody/BottomSheetBody.tsx
@@ -0,0 +1,21 @@
+import { useTheme } from '@emotion/react';
+import { PropsWithChildren } from 'react';
+import * as S from './BottomSheetBody.style';
+
+interface BottomSheetBodyProps {
+  currentY: number;
+  size?: 'small' | 'medium' | 'large' | 'full';
+  isDragging: boolean;
+}
+
+export default function BottomSheetBody(
+  props: PropsWithChildren<BottomSheetBodyProps>,
+) {
+  const { currentY, size, isDragging, children } = props;
+
+  const theme = useTheme();
+
+  return (
+    <div css={S.body({ theme, currentY, size, isDragging })}>{children}</div>
+  );
+}
diff --git a/frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.style.ts b/frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.style.ts
new file mode 100644
index 000000000..066adbe41
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.style.ts
@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+
+export const container = css`
+  position: fixed;
+  z-index: 1;
+  inset: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+
+  width: 100%;
+  height: 100%;
+`;
diff --git a/frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.tsx b/frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.tsx
new file mode 100644
index 000000000..69e86ca74
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheetContainer/BottomSheetContainer.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import * as S from './BottomSheetContainer.style';
+
+export default function BottomSheetContainer(props: PropsWithChildren) {
+  const { children } = props;
+
+  return <div css={S.container}>{children}</div>;
+}
diff --git a/frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.style.ts b/frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.style.ts
new file mode 100644
index 000000000..b60cb7fb7
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.style.ts
@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+
+export const handleWrapper = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+`;
+
+export const handleBar = css`
+  width: 50px;
+  height: 6px;
+  background-color: black;
+  border-radius: 12px;
+`;
diff --git a/frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.tsx b/frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.tsx
new file mode 100644
index 000000000..54a94b4c6
--- /dev/null
+++ b/frontend/src/components/BottomSheet/BottomSheetHandle/BottomSheetHandle.tsx
@@ -0,0 +1,22 @@
+import * as S from './BottomSheetHandle.style';
+
+interface BottomSheetHandleProps {
+  onTouchStart: (event: React.TouchEvent) => void;
+  onTouchMove: (event: React.TouchEvent) => void;
+  onTouchEnd: () => void;
+}
+
+export default function BottomSheetHandle(props: BottomSheetHandleProps) {
+  const { onTouchStart, onTouchMove, onTouchEnd } = props;
+
+  return (
+    <div
+      css={S.handleWrapper}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+    >
+      <div css={S.handleBar} />
+    </div>
+  );
+}
diff --git a/frontend/src/components/Dimmer/Dimmer.style.ts b/frontend/src/components/Dimmer/Dimmer.style.ts
new file mode 100644
index 000000000..9fc6d127a
--- /dev/null
+++ b/frontend/src/components/Dimmer/Dimmer.style.ts
@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+
+export const dimmer = css`
+  position: fixed;
+  inset: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgb(0 0 0 / 20%);
+`;
diff --git a/frontend/src/components/Dimmer/Dimmer.tsx b/frontend/src/components/Dimmer/Dimmer.tsx
new file mode 100644
index 000000000..f74e677ec
--- /dev/null
+++ b/frontend/src/components/Dimmer/Dimmer.tsx
@@ -0,0 +1,5 @@
+import * as S from './Dimmer.style';
+
+export default function Dimmer({ onClick }: { onClick: () => void }) {
+  return <div onClick={onClick} css={S.dimmer} />;
+}
diff --git a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
index 4dfc7e9d6..eb74e125a 100644
--- a/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
+++ b/frontend/src/components/ProfileBottomSheet/ProfileBottomSheet.tsx
@@ -15,7 +15,6 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
 
   const theme = useTheme();
 
-  console.log(profile);
   return (
     <BottomSheet
       isOpen={isOpen}
@@ -23,7 +22,7 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
       size="small"
       onDimmerClick={close}
     >
-      <BottomSheet.Content>
+      <BottomSheet.Main>
         <div
           css={css`
             display: flex;
@@ -92,7 +91,7 @@ export default function ProfileBottomSheet(props: ProfileBottomSheetProps) {
             </div>
           </div>
         </div>
-      </BottomSheet.Content>
+      </BottomSheet.Main>
     </BottomSheet>
   );
 }