feat(sanity): 이미지, 텍스트 반반 컴포넌트 추가

Author: junghyeonsu

docs/components/sanity/sanity-content.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import ErrorBoundary from "../error-boundary";
 import { PortableImage } from "./image";
 import { Table } from "./table";
+import { ImageWithTextPreview } from "@/sanity/components/ImageWithTextPreview";
 
 interface SanityGuidelineProps {
   title: string;
@@ -49,6 +50,7 @@ export const PortableContent = ({ content }: { content: any }) => {
         types: {
           image: (props) => <PortableImage {...props} />,
           tabelContainer: Table,
+          imageWithText: ImageWithTextPreview,
         },
         block: {
           normal: (props) => <p className="min-h-4 m-0" {...props} />,

docs/sanity/components/ImageWithTextPreview.tsx

@@ -0,0 +1,66 @@
+import { PortableText, PortableTextBlock } from "@portabletext/react";
+import { SanityImageAsset } from "@sanity/asset-utils";
+import imageUrlBuilder from "@sanity/image-url";
+import { useCallback } from "react";
+import { client } from "./client";
+
+const builder = imageUrlBuilder(client);
+
+interface SanityImage {
+  _type: "image";
+  asset: SanityImageAsset;
+  hotspot?: {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+  };
+  crop?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+}
+
+interface ImageWithTextPreviewProps {
+  value: {
+    image: SanityImage;
+    text: PortableTextBlock[];
+    imagePosition: "left" | "right";
+  };
+}
+
+export function ImageWithTextPreview({ value }: ImageWithTextPreviewProps) {
+  const { image, text, imagePosition } = value;
+
+  console.log("value", value);
+
+  const imageUrl = useCallback(() => builder.image(image).width(800).url(), [image]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: imagePosition === "right" ? "row-reverse" : "row",
+        gap: 8,
+      }}
+    >
+      <div style={{ flex: 1, maxWidth: "50%" }}>
+        <img
+          src={imageUrl()}
+          alt=""
+          style={{
+            width: "100%",
+            height: "auto",
+            objectFit: "cover",
+          }}
+        />
+      </div>
+
+      <div style={{ flex: 1, padding: 4 }}>
+        <PortableText value={text} />
+      </div>
+    </div>
+  );
+}

docs/sanity/components/client.ts

@@ -0,0 +1,10 @@
+import { createClient } from "@sanity/client";
+
+import { projectId, dataset } from "../env";
+
+export const client = createClient({
+  projectId,
+  dataset,
+  apiVersion: "2023-05-03", // 현재 날짜 사용
+  useCdn: true, // 프로덕션에서는 true로 설정
+});

docs/sanity/schemaTypes/blockContent.tsx

@@ -1,16 +1,71 @@
 import { ImageIcon } from "@sanity/icons";
 import { defineArrayMember, defineType } from "sanity";
 
-/**
- * This is the schema type for block content used in the post document type
- * Importing this type into the studio configuration's `schema` property
- * lets you reuse it in other document types with:
- *  {
- *    name: 'someName',
- *    title: 'Some title',
- *    type: 'blockContent'
- *  }
- */
+// imageWithText를 defineArrayMember로 정의
+export const imageWithTextType = defineArrayMember({
+  name: "imageWithText",
+  title: "이미지 텍스트 조합",
+  type: "object",
+  fields: [
+    {
+      name: "image",
+      title: "이미지",
+      type: "image",
+      options: {
+        hotspot: true,
+      },
+    },
+    {
+      name: "text",
+      title: "텍스트",
+      type: "array",
+      of: [
+        {
+          type: "block",
+          styles: [
+            { title: "본문", value: "normal" },
+            { title: "제목", value: "h3" },
+            { title: "부제목", value: "h4" },
+          ],
+          marks: {
+            decorators: [
+              { title: "굵게", value: "strong" },
+              { title: "기울임", value: "em" },
+              { title: "밑줄", value: "underline" },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "imagePosition",
+      title: "이미지 위치",
+      type: "string",
+      options: {
+        list: [
+          { title: "왼쪽", value: "left" },
+          { title: "오른쪽", value: "right" },
+        ],
+        layout: "radio",
+      },
+      initialValue: "left",
+    },
+  ],
+  preview: {
+    select: {
+      title: "text",
+      media: "image",
+      imagePosition: "imagePosition",
+    },
+    prepare({ title, media, imagePosition }) {
+      return {
+        title: title?.[0]?.children?.[0]?.text || "이미지 텍스트 블록",
+        subtitle: `이미지 위치: ${imagePosition === "left" ? "왼쪽" : "오른쪽"}`,
+        media,
+      };
+    },
+  },
+});
 
 // You can add additional types here. Note that you can't use
 // primitive types such as 'string' and 'number' in the same array
@@ -90,5 +145,6 @@ export default defineType({
     }),
     imageType,
     tableType,
+    imageWithTextType,
   ],
 });