feat: doDont 타입 설정

daangn · Jan 17, 2025 · 089d7e0 · 089d7e0
1 parent 03ae288
commit 089d7e0
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 96 deletions.
diff --git a/docs/components/sanity/do-dont.tsx b/docs/components/sanity/do-dont.tsx
@@ -5,72 +5,67 @@ import clsx from "clsx";
 import { IconCheckmarkCircleFill, IconXmarkCircleFill } from "@daangn/react-monochrome-icon";
 
 // TODO: typescript generate from sanity
+interface ImageField {
+  alt: string;
+  imageType: "upload" | "external";
+  uploadImage?: SanityImageAsset;
+  externalUrl?: string;
+}
+
+interface Section {
+  type: "do" | "dont";
+  description: string;
+  imageField: ImageField;
+}
+
 interface DoDontProps {
   value: {
-    do: {
-      description: string;
-      imageField: {
-        alt: string;
-        imageType: "upload" | "external";
-        uploadImage?: SanityImageAsset;
-        externalUrl?: string;
-      };
-    };
-    dont: {
-      description: string;
-      imageField: {
-        alt: string;
-        imageType: "upload" | "external";
-        uploadImage?: SanityImageAsset;
-        externalUrl?: string;
-      };
-    };
+    first: Section;
+    second?: Section;
   };
   className?: string;
 }
 
 export function DoDont({ value, className }: DoDontProps) {
-  return (
-    <div className={clsx("grid grid-cols-1 sm:grid-cols-2 gap-6 my-8", className)}>
-      {/* Do 섹션 */}
+  const renderSection = (section: Section) => {
+    const isDo = section.type === "do";
+
+    return (
       <div className="flex flex-col gap-5 rounded-lg">
         <div className="w-full overflow-hidden rounded-lg">
-          {value.do.imageField.imageType === "upload" ? (
-            value.do.imageField?.uploadImage && (
-              <SanityImage value={value.do.imageField.uploadImage} className="rounded-2xl m-0" />
+          {section.imageField.imageType === "upload" ? (
+            section.imageField?.uploadImage && (
+              <SanityImage value={section.imageField.uploadImage} className="rounded-2xl m-0" />
             )
           ) : (
             <ExternalImage
-              value={{ imageUrl: value.do.imageField?.externalUrl || "" }}
+              value={{ imageUrl: section.imageField?.externalUrl || "" }}
               className="rounded-2xl m-0"
             />
           )}
         </div>
         <div className="flex items-start gap-3">
-          <IconCheckmarkCircleFill className="text-seed-fg-positive shrink-0" size={34} />
-          <span className="text-sm text-seed-fg-neutral-subtle">{value.do.description}</span>
-        </div>
-      </div>
-
-      {/* Don't 섹션 */}
-      <div className="flex flex-col gap-5 rounded-lg">
-        <div className="relative w-full overflow-hidden rounded-lg">
-          {value.dont.imageField.imageType === "upload" ? (
-            value.dont.imageField?.uploadImage && (
-              <SanityImage value={value.dont.imageField.uploadImage} className="rounded-2xl m-0" />
-            )
+          {isDo ? (
+            <IconCheckmarkCircleFill className="text-seed-fg-positive shrink-0" size={30} />
           ) : (
-            <ExternalImage
-              value={{ imageUrl: value.dont.imageField?.externalUrl || "" }}
-              className="rounded-2xl m-0"
-            />
+            <IconXmarkCircleFill className="text-seed-fg-danger shrink-0" size={30} />
           )}
-        </div>
-        <div className="flex items-start gap-3">
-          <IconXmarkCircleFill className="text-seed-fg-danger shrink-0" size={34} />
-          <span className="text-sm text-seed-fg-neutral-subtle">{value.dont.description}</span>
+          <span className="text-sm text-seed-fg-neutral-subtle">{section.description}</span>
         </div>
       </div>
+    );
+  };
+
+  return (
+    <div
+      className={clsx(
+        "grid gap-6 my-8",
+        value.second ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1",
+        className,
+      )}
+    >
+      {renderSection(value.first)}
+      {value.second && renderSection(value.second)}
     </div>
   );
 }
diff --git a/docs/sanity/schemaTypes/doDontType.tsx b/docs/sanity/schemaTypes/doDontType.tsx
@@ -1,72 +1,72 @@
-import { defineArrayMember } from "sanity";
+import { defineArrayMember, defineType } from "sanity";
 import { imageFieldType } from "./imageType";
 
+export const doDontSectionType = defineType({
+  name: "doDontSection",
+  title: "섹션",
+  type: "object",
+  fields: [
+    {
+      name: "type",
+      title: "타입",
+      type: "string",
+      options: {
+        list: [
+          { title: "Do", value: "do" },
+          { title: "Don't", value: "dont" },
+        ],
+        layout: "radio",
+      },
+      validation: (Rule) => Rule.required(),
+    },
+    imageFieldType, // 기존 imageFieldType 재사용
+    {
+      name: "description",
+      title: "설명",
+      type: "text",
+    },
+  ],
+});
+
 export const doDontType = defineArrayMember({
   name: "doDont",
   title: "Do & Don't",
   type: "object",
   fields: [
     {
-      name: "do",
-      title: "Do",
-      type: "object",
-      fields: [
-        imageFieldType,
-        {
-          name: "description",
-          title: "설명",
-          type: "text",
-        },
-      ],
+      name: "first",
+      title: "첫 번째 섹션",
+      type: "doDontSection",
     },
     {
-      name: "dont",
-      title: "Don't",
-      type: "object",
-      fields: [
-        imageFieldType,
-        {
-          name: "description",
-          title: "설명",
-          type: "text",
-        },
-      ],
+      name: "second",
+      title: "두 번째 섹션",
+      type: "doDontSection",
     },
   ],
   preview: {
     select: {
-      doUploadImage: "do.imageField.uploadImage",
-      doExternalUrl: "do.imageField.externalUrl",
-      doImageType: "do.imageField.imageType",
-      dontUploadImage: "dont.imageField.uploadImage",
-      dontExternalUrl: "dont.imageField.externalUrl",
-      dontImageType: "dont.imageField.imageType",
+      firstType: "first.type",
+      secondType: "second.type",
+      firstImage: "first.imageField.uploadImage",
+      firstUrl: "first.imageField.externalUrl",
+      firstImageType: "first.imageField.imageType",
     },
-    prepare({
-      doUploadImage,
-      doExternalUrl,
-      doImageType,
-      dontUploadImage,
-      dontExternalUrl,
-      dontImageType,
-    }) {
-      const doImage =
-        doImageType === "upload"
-          ? doUploadImage
-          : doExternalUrl
-            ? { _type: "image", asset: { _type: "reference", url: doExternalUrl } }
+    prepare({ firstType, secondType, firstImage, firstUrl, firstImageType }) {
+      const image =
+        firstImageType === "upload"
+          ? firstImage
+          : firstUrl
+            ? { _type: "image", asset: { _type: "reference", url: firstUrl } }
             : undefined;
 
-      const dontImage =
-        dontImageType === "upload"
-          ? dontUploadImage
-          : dontExternalUrl
-            ? { _type: "image", asset: { _type: "reference", url: dontExternalUrl } }
-            : undefined;
+      const title = secondType
+        ? `${firstType?.toUpperCase()} & ${secondType?.toUpperCase()}`
+        : firstType?.toUpperCase();
 
       return {
-        title: "Do & Don't",
-        media: doImage || dontImage,
+        title,
+        media: image,
       };
     },
   },

diff --git a/docs/sanity/schemaTypes/index.ts b/docs/sanity/schemaTypes/index.ts
@@ -4,7 +4,8 @@ import blockContentType from "./blockContent";
 import guidelineType from "./guideline";
 import blogType from "./blog";
 import categoryType from "./category";
+import { doDontSectionType } from "./doDontType";
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [blockContentType, guidelineType, blogType, categoryType],
+  types: [blockContentType, guidelineType, blogType, categoryType, doDontSectionType],
 };