refactor(frontend): Content Dialog 섹션 컴포넌트 분리 및 N+1 쿼리 해결

두 다이얼로그(ContentDetailsDialog, ContentGroupDetailsDialog)에서 중복되던 섹션 렌더링 로직을 공통 컴포넌트로 분리

- ContentBasicInfoSection: 기본 정보 섹션
- ContentRewardSection: 보상 정보 섹션
- ContentSeeMoreRewardSection: 더보기 보상 섹션
- ContentSection: 위 섹션들을 통합한 컴포넌트

ContentGroupDetailsDialog의 N+1 쿼리 문제 해결을 위해 GraphQL 쿼리에서 전체 content 데이터를 한 번에 fetch하도록 변경

fix #274

Author: kubrickcode

src/frontend/src/domains/content/components/content-basic-info-section.tsx

@@ -0,0 +1,37 @@
+import { DataGrid } from "~/components/data-grid";
+import { Section } from "~/components/section";
+
+import { ItemNameWithImage } from "../../item";
+
+type ContentBasicInfoSectionProps = {
+  content: {
+    contentCategory: {
+      imageUrl: string;
+      name: string;
+    };
+    displayName: string;
+    level: number;
+  };
+};
+
+export const ContentBasicInfoSection = ({ content }: ContentBasicInfoSectionProps) => {
+  const items = [
+    {
+      label: "종류",
+      value: (
+        <ItemNameWithImage
+          name={content.contentCategory.name}
+          src={content.contentCategory.imageUrl}
+        />
+      ),
+    },
+    { label: "레벨", value: content.level },
+    { label: "이름", value: content.displayName },
+  ];
+
+  return (
+    <Section title="기본 정보">
+      <DataGrid items={items} />
+    </Section>
+  );
+};

src/frontend/src/domains/content/components/content-reward-section.tsx

@@ -0,0 +1,64 @@
+import { Flex, IconButton, Text } from "@chakra-ui/react";
+import { IoIosSettings } from "react-icons/io";
+
+import { DataGrid } from "~/components/data-grid";
+import { Dialog } from "~/components/dialog";
+import { Section } from "~/components/section";
+import { LoginTooltip } from "~/components/tooltip";
+import { useAuth } from "~/libs/auth";
+
+import { ItemNameWithImage } from "../../item";
+import { ContentRewardEditDialog } from "../content-reward-edit-dialog";
+
+type ContentRewardSectionProps = {
+  contentId: number;
+  contentRewards: Array<{
+    averageQuantity: number | null;
+    item: {
+      imageUrl: string;
+      name: string;
+    };
+  }>;
+  onRefetch: () => void;
+};
+
+export const ContentRewardSection = ({
+  contentId,
+  contentRewards,
+  onRefetch,
+}: ContentRewardSectionProps) => {
+  const { isAuthenticated } = useAuth();
+
+  const items = contentRewards.map((contentReward) => ({
+    label: (
+      <ItemNameWithImage name={contentReward.item.name} reverse src={contentReward.item.imageUrl} />
+    ),
+    value: contentReward.averageQuantity || "-",
+  }));
+
+  return (
+    <Section
+      title={
+        <Flex alignItems="center" gap={2}>
+          <Text>보상 정보</Text>
+          <Dialog.Trigger
+            dialog={ContentRewardEditDialog}
+            dialogProps={{
+              contentId,
+              onComplete: onRefetch,
+            }}
+            disabled={!isAuthenticated}
+          >
+            <LoginTooltip content="로그인 후 보상을 수정할 수 있습니다">
+              <IconButton disabled={!isAuthenticated} size="2xs" variant="surface">
+                <IoIosSettings />
+              </IconButton>
+            </LoginTooltip>
+          </Dialog.Trigger>
+        </Flex>
+      }
+    >
+      <DataGrid items={items} />
+    </Section>
+  );
+};

src/frontend/src/domains/content/components/content-section.tsx

@@ -0,0 +1,56 @@
+import { Flex } from "@chakra-ui/react";
+
+import { RewardItem } from "../types";
+import { ContentBasicInfoSection } from "./content-basic-info-section";
+import { ContentRewardSection } from "./content-reward-section";
+import { ContentSeeMoreRewardSection } from "./content-see-more-reward-section";
+import { ContentWageSection } from "./content-wage-section";
+
+type ContentSectionProps = {
+  content: {
+    contentCategory: {
+      imageUrl: string;
+      name: string;
+    };
+    contentRewards: Array<{
+      averageQuantity: number;
+      item: {
+        imageUrl: string;
+        name: string;
+      };
+    }>;
+    contentSeeMoreRewards: Array<{
+      item: {
+        imageUrl: string;
+        name: string;
+      };
+      quantity: number;
+    }>;
+    displayName: string;
+    id: number;
+    level: number;
+  };
+  items: RewardItem[];
+  onRefetch: () => void;
+};
+
+export const ContentSection = ({ content, items, onRefetch }: ContentSectionProps) => {
+  return (
+    <Flex direction="column" gap={4}>
+      <ContentBasicInfoSection content={content} />
+      <ContentWageSection contentId={content.id} items={items} />
+      <ContentRewardSection
+        contentId={content.id}
+        contentRewards={content.contentRewards}
+        onRefetch={onRefetch}
+      />
+      {content.contentSeeMoreRewards.length > 0 && (
+        <ContentSeeMoreRewardSection
+          contentId={content.id}
+          contentSeeMoreRewards={content.contentSeeMoreRewards}
+          onRefetch={onRefetch}
+        />
+      )}
+    </Flex>
+  );
+};

src/frontend/src/domains/content/components/content-see-more-reward-section.tsx

@@ -0,0 +1,68 @@
+import { Flex, IconButton, Text } from "@chakra-ui/react";
+import { IoIosSettings } from "react-icons/io";
+
+import { DataGrid } from "~/components/data-grid";
+import { Dialog } from "~/components/dialog";
+import { Section } from "~/components/section";
+import { LoginTooltip } from "~/components/tooltip";
+import { useAuth } from "~/libs/auth";
+
+import { ItemNameWithImage } from "../../item";
+import { ContentSeeMoreRewardEditDialog } from "../content-see-more-reward-edit-dialog";
+
+type ContentSeeMoreRewardSectionProps = {
+  contentId: number;
+  contentSeeMoreRewards: Array<{
+    item: {
+      imageUrl: string;
+      name: string;
+    };
+    quantity: number;
+  }>;
+  onRefetch: () => void;
+};
+
+export const ContentSeeMoreRewardSection = ({
+  contentId,
+  contentSeeMoreRewards,
+  onRefetch,
+}: ContentSeeMoreRewardSectionProps) => {
+  const { isAuthenticated } = useAuth();
+
+  const items = contentSeeMoreRewards.map((contentSeeMoreReward) => ({
+    label: (
+      <ItemNameWithImage
+        name={contentSeeMoreReward.item.name}
+        reverse
+        src={contentSeeMoreReward.item.imageUrl}
+      />
+    ),
+    value: contentSeeMoreReward.quantity,
+  }));
+
+  return (
+    <Section
+      title={
+        <Flex alignItems="center" gap={2}>
+          <Text>더보기 보상 정보</Text>
+          <Dialog.Trigger
+            dialog={ContentSeeMoreRewardEditDialog}
+            dialogProps={{
+              contentId,
+              onComplete: onRefetch,
+            }}
+            disabled={!isAuthenticated}
+          >
+            <LoginTooltip content="로그인 후 보상을 수정할 수 있습니다">
+              <IconButton disabled={!isAuthenticated} size="2xs" variant="surface">
+                <IoIosSettings />
+              </IconButton>
+            </LoginTooltip>
+          </Dialog.Trigger>
+        </Flex>
+      }
+    >
+      <DataGrid items={items} />
+    </Section>
+  );
+};

src/frontend/src/domains/content/components/index.tsx

@@ -1 +1,5 @@
+export { ContentBasicInfoSection } from "./content-basic-info-section";
+export { ContentRewardSection } from "./content-reward-section";
+export { ContentSection } from "./content-section";
+export { ContentSeeMoreRewardSection } from "./content-see-more-reward-section";
 export { ContentWageSection } from "./content-wage-section";