feat(sanity): description block 추가

daangn · Jan 13, 2025 · b884f84 · b884f84
1 parent 7bf0186
commit b884f84
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/docs/components/sanity/sanity-content.tsx b/docs/components/sanity/sanity-content.tsx
@@ -57,6 +57,7 @@ export const PortableContent = ({ content }: { content: any }) => {
         block: {
           normal: (props) => <p className="min-h-4 m-0" {...props} />,
           h3: (props) => <h3 className="mt-2 mb-1" {...props} />,
+          description: (props) => <span className="text-sm" {...props} />,
         },
       }}
       value={content}

diff --git a/docs/sanity/components/ImageWithTextPreview.tsx b/docs/sanity/components/ImageWithTextPreview.tsx
@@ -34,7 +34,12 @@ interface ImageWithTextPreviewProps {
 
 export function ImageWithTextPreview({ value }: ImageWithTextPreviewProps) {
   const { image, text, imagePosition } = value;
-  const imageUrl = useCallback(() => builder.image(image).width(800).url(), [image]);
+  const imageUrl = useCallback(() => {
+    if (!image) {
+      return null;
+    }
+    return builder.image(image).width(800).url();
+  }, [image]);
 
   return (
     <div
@@ -45,7 +50,7 @@ export function ImageWithTextPreview({ value }: ImageWithTextPreviewProps) {
     >
       <div className="flex-1 w-full sm:max-w-[50%]">
         <img
-          src={imageUrl()}
+          src={imageUrl() ?? undefined}
           alt=""
           style={{
             width: "100%",

diff --git a/docs/sanity/schemaTypes/blockContent.tsx b/docs/sanity/schemaTypes/blockContent.tsx
@@ -138,6 +138,10 @@ export const tableType = defineArrayMember({
   ],
 });
 
+const DescriptionStyle = (props: any) => (
+  <span style={{ fontSize: "14px" }}>{props.children} </span>
+);
+
 export default defineType({
   title: "Block Content",
   name: "blockContent",
@@ -151,6 +155,7 @@ export default defineType({
       // use your content.
       styles: [
         { title: "Normal", value: "normal" },
+        { title: "Description", value: "description", component: DescriptionStyle },
         { title: "H1", value: "h1" },
         { title: "H2", value: "h2" },
         { title: "H3", value: "h3" },