feat: blocked list page 구현

app/record-detail/[id]/page.tsx

@@ -36,15 +36,15 @@ const DynamicPreviewSection = dynamic(
   },
 );
 
-// const DynamicReportFabSection = dynamic(
-//   () =>
-//     import('@/features/record-detail').then(
-//       ({ DetailReportFabSection }) => DetailReportFabSection,
-//     ),
-//   {
-//     ssr: false,
-//   },
-// );
+const DynamicReportFabSection = dynamic(
+  () =>
+    import('@/features/record-detail').then(
+      ({ DetailReportFabSection }) => DetailReportFabSection,
+    ),
+  {
+    ssr: false,
+  },
+);
 
 const DynamicCheerFabSection = dynamic(
   () =>
@@ -118,8 +118,8 @@ export default async function RecordDetail({ params }: RecordDetail) {
                 <EditButton memoryId={params.id} />
               ) : (
                 // TODO: 기록 신고하기 메뉴 컴포넌트 적용
-                // <DynamicReportFabSection memoryId={params.id} />
-                <></>
+                <DynamicReportFabSection memoryId={params.id} />
+                // <></>
               ),
               key: 'edit',
             },

app/setting/blocked/page.tsx

@@ -0,0 +1,43 @@
+import dynamic from 'next/dynamic';
+
+import { LeftArrowIcon } from '@/components/atoms';
+import { HeaderBar } from '@/components/molecules';
+import { css } from '@/styled-system/css';
+
+const DynamicBackButton = dynamic(
+  () => import('@/components/molecules').then(({ BackButton }) => BackButton),
+  {
+    ssr: false,
+    loading: () => <LeftArrowIcon />,
+  },
+);
+
+const DynamicBlockedListSection = dynamic(
+  () =>
+    import('@/features/setting-blocked').then(
+      ({ BlockedListSection }) => BlockedListSection,
+    ),
+  {
+    ssr: false,
+  },
+);
+
+export default function Blocked() {
+  return (
+    <>
+      <HeaderBar>
+        <HeaderBar.LeftContent>
+          <DynamicBackButton />
+        </HeaderBar.LeftContent>
+        <HeaderBar.Title>차단한 계정</HeaderBar.Title>
+      </HeaderBar>
+      <article className={containerStyle}>
+        <DynamicBlockedListSection />
+      </article>
+    </>
+  );
+}
+
+const containerStyle = css({
+  pb: 'calc(70px + env(safe-area-inset-bottom))',
+});

app/setting/page.tsx

@@ -39,6 +39,10 @@ export default function Page() {
   //   openNoticeModal();
   // };
 
+  const handleClickBlocked = () => {
+    router.push('/setting/blocked');
+  };
+
   const handleClickTerms = () => {
     router.push('/setting/terms');
   };
@@ -63,6 +67,7 @@ export default function Page() {
       onClick: handleGoToChangeDistance,
       divider: true,
     },
+    { text: '차단한 계정', onClick: handleClickBlocked, divider: true },
     { text: '서비스 이용 약관', onClick: handleClickTerms },
     {
       text: '개인정보 처리방침',

components/molecules/profile-list/profile-blocked-list-item.tsx

@@ -0,0 +1,106 @@
+import Link from 'next/link';
+
+import { Button } from '@/components/atoms';
+import { css } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
+import { MemberProfile } from '@/types';
+
+import { ProfileImage } from '../profile-image';
+
+type FollowListItem = {
+  isMyProfile?: boolean;
+  onClick?: () => void;
+} & MemberProfile;
+export const ProfileBlockedListItem = ({
+  memberId,
+  nickname,
+  introduction,
+  profileImageUrl,
+}: FollowListItem) => {
+  const handleClickBlockedItem = () => {
+    //   TODO: api 연동
+    console.log('toggle blocked!');
+  };
+
+  return (
+    <div className={containerStyle}>
+      <Link href={`/profile/${memberId}`} className={linkStyle}>
+        <div className={profileImageStyle}>
+          <ProfileImage
+            src={profileImageUrl ?? ''}
+            alt="profile image"
+            sizes="30vw"
+            fill
+            style={{ objectFit: 'cover' }}
+          />
+        </div>
+        <div className={text.wrapperStyle}>
+          <h1 className={text.nicknameStyle}>{nickname}</h1>
+          {introduction && <p className={text.summaryStyle}>{introduction}</p>}
+        </div>
+      </Link>
+
+      <Button
+        size="small"
+        label="차단 해제"
+        variant="outlined"
+        buttonType="assistive"
+        className={blockedButtonStyle}
+        onClick={handleClickBlockedItem}
+      />
+    </div>
+  );
+};
+
+const containerStyle = flex({
+  py: '8px',
+  align: 'center',
+  maxWidth: '100%',
+  justify: 'space-between',
+});
+
+const profileImageStyle = flex({
+  position: 'relative',
+  width: '40px',
+  height: '40px',
+  align: 'center',
+  rounded: 'full',
+  overflow: 'hidden',
+  flexShrink: 0,
+});
+
+const linkStyle = flex({
+  // button, gap
+  maxWidth: 'calc(100% - 70px - 16px)',
+  gap: '16px',
+  align: 'center',
+  mr: '16px',
+});
+
+const blockedButtonStyle = css({
+  flexShrink: 0,
+});
+
+const text = {
+  wrapperStyle: flex({
+    gap: '2px',
+    direction: 'column',
+    flexGrow: 1,
+    overflow: 'hidden',
+  }),
+
+  nicknameStyle: css({
+    textStyle: 'heading6',
+    fontWeight: 'bold',
+  }),
+
+  summaryStyle: css({
+    width: '100%',
+    textStyle: 'body2.normal',
+    fontWeight: 'regular',
+    color: 'text.alternative',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  }),
+};

components/molecules/profile-list/profile-list.tsx

@@ -6,6 +6,7 @@ import { LoadingArea } from '@/components/atoms';
 import { useCurrentMemberInfo } from '@/hooks';
 import { MemberProfile } from '@/types';
 
+import { ProfileBlockedListItem } from './profile-blocked-list-item';
 import { ProfileListItem } from './profile-list-item';
 import { ProfileListSkeleton } from './profile-list-skeleton';
 
@@ -14,12 +15,14 @@ type ProfileList = {
   fetchNextData: () => void;
   isLoading?: boolean;
   isFetchingNextPage?: boolean;
+  isBlockedList?: boolean;
 };
 export const ProfileList = ({
   data,
   fetchNextData,
   isLoading,
   isFetchingNextPage,
+  isBlockedList = false,
 }: ProfileList) => {
   const { data: myData } = useCurrentMemberInfo();
 
@@ -46,10 +49,16 @@ export const ProfileList = ({
       useWindowScroll
       rangeChanged={handleRangeChanged}
       itemContent={(_, item) => (
-        <ProfileListItem
-          {...item}
-          isMyProfile={getIsMyProfile(item.memberId)}
-        />
+        <>
+          {isBlockedList ? (
+            <ProfileBlockedListItem {...item} />
+          ) : (
+            <ProfileListItem
+              {...item}
+              isMyProfile={getIsMyProfile(item.memberId)}
+            />
+          )}
+        </>
       )}
       style={{
         width: '100%',

features/setting-blocked/components/empty-blocked-list.tsx

@@ -0,0 +1,12 @@
+import { css } from '@/styled-system/css';
+
+export const EmptyBlockedList = () => {
+  return <div className={containerStyle}>차단한 계정이 없어요.</div>;
+};
+
+const containerStyle = css({
+  m: '80px auto 0px',
+  textStyle: 'body2.normal',
+  color: 'text.alternative',
+  textAlign: 'center',
+});

features/setting-blocked/components/index.ts

@@ -0,0 +1 @@
+export * from './empty-blocked-list';

features/setting-blocked/index.ts

@@ -1 +1,2 @@
+export * from './sections';
 export * from './types';

features/setting-blocked/sections/blocked-list-section.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { ProfileList } from '@/components/molecules';
+import { flex } from '@/styled-system/patterns';
+
+import { useBlockedList } from '../apis';
+import { EmptyBlockedList } from '../components';
+
+export const BlockedListSection = () => {
+  const {
+    flattenData,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    isLoading,
+  } = useBlockedList();
+
+  const fetchNextData = () => {
+    if (hasNextPage && !isFetchingNextPage) {
+      void fetchNextPage();
+    }
+  };
+
+  if (flattenData.length === 0 && !isLoading) return <EmptyBlockedList />;
+  return (
+    <div className={containerStyle}>
+      <ProfileList
+        data={flattenData}
+        fetchNextData={fetchNextData}
+        isLoading={isLoading}
+        isFetchingNextPage={isFetchingNextPage}
+        isBlockedList={true}
+      />
+    </div>
+  );
+};
+
+const containerStyle = flex({
+  direction: 'column',
+  gap: '12px',
+  p: '16px 20px',
+});

features/setting-blocked/sections/index.ts

@@ -0,0 +1 @@
+export * from './blocked-list-section';