feat: do-dont title

daangn · Jan 17, 2025 · ca7aea9 · ca7aea9
1 parent ecac5a3
commit ca7aea9
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 17 deletions.
diff --git a/docs/app/(home)/page.tsx b/docs/app/(home)/page.tsx
@@ -59,7 +59,7 @@ function BlogCard({ title, description, thumbnail }: Blog) {
     <div className="flex flex-col items-start h-full text-left hover:bg-gray-100 rounded-[26px] transition-all duration-200">
       <SanityImage
         value={thumbnail}
-        className="rounded-[26px] aspect-[16/9] h-full w-full object-cover"
+        className="rounded-3xl aspect-[16/9] h-full w-full object-cover my-0"
       />
       <div className="flex flex-col gap-2 px-[10px] py-[24px]">
         <h3 className="font-bold text-lg sm:text-xl">{title}</h3>

diff --git a/docs/components/sanity/do-dont.tsx b/docs/components/sanity/do-dont.tsx
@@ -14,6 +14,7 @@ interface ImageField {
 
 interface Section {
   type: "do" | "dont";
+  title: string;
   description: string;
   imageField: ImageField;
 }
@@ -44,13 +45,16 @@ export function DoDont({ value, className }: DoDontProps) {
             />
           )}
         </div>
-        <div className="flex items-start gap-3">
+        <div className="flex items-start gap-3 px-[6px] w-full">
           {isDo ? (
             <IconCheckmarkCircleFill className="text-seed-fg-positive shrink-0" size={30} />
           ) : (
             <IconXmarkCircleFill className="text-seed-fg-danger shrink-0" size={30} />
           )}
-          <span className="text-sm text-seed-fg-neutral-subtle">{section.description}</span>
+          <div className="flex flex-col gap-2 break-all">
+            <span className="text-lg font-bold text-seed-fg-neutral mt-[2px]">{section.title}</span>
+            <span className="text-md text-seed-fg-neutral-subtle">{section.description}</span>
+          </div>
         </div>
       </div>
     );

diff --git a/docs/components/sanity/external-image.tsx b/docs/components/sanity/external-image.tsx
@@ -12,15 +12,16 @@ export const ExternalImage = ({ value, className }: ExternalImageProps) => {
   const { imageUrl, alt } = value;
 
   return (
-    <div className={clsx("relative my-4", className)}>
-      <div className="relative aspect-video">
-        <img
-          src={imageUrl}
-          alt={alt || "외부 이미지"}
-          className="w-full h-full object-cover rounded-2xl overflow-hidden my-4"
-          loading="lazy"
-        />
-      </div>
+    <div className={clsx("relative aspect-video my-4", className)}>
+      <img
+        src={imageUrl}
+        alt={alt || "외부 이미지"}
+        className={clsx(
+          "aspect-video w-full h-full object-cover rounded-2xl overflow-hidden",
+          className,
+        )}
+        loading="lazy"
+      />
     </div>
   );
 };
diff --git a/docs/components/sanity/image.tsx b/docs/components/sanity/image.tsx
@@ -34,7 +34,7 @@ export const SanityImage = ({ value, className }: ImageProps) => {
     <img
       src={cdnUrl}
       alt={value.originalFilename}
-      className={clsx("w-full h-auto rounded-2xl overflow-hidden my-4 object-cover", className)}
+      className={clsx("w-full rounded-2xl overflow-hidden object-cover", className)}
       loading="lazy"
       draggable={false}
     />

diff --git a/docs/components/sanity/sanity-content.tsx b/docs/components/sanity/sanity-content.tsx
@@ -4,13 +4,14 @@ import { PortableText } from "@portabletext/react";
 import type { SanityDocument } from "next-sanity";
 import { client } from "./client";
 
+import { ImageTextHalfPreview } from "@/components/sanity/image-text-half";
 import { useEffect, useState } from "react";
 import ErrorBoundary from "../error-boundary";
-import { PortableImage } from "./image";
-import { Table } from "./table";
-import { ImageTextHalfPreview } from "@/components/sanity/image-text-half";
 import { DoDont } from "./do-dont";
 import { ExternalImage } from "./external-image";
+import { PortableImage } from "./image";
+import { Table } from "./table";
+
 interface SanityGuidelineProps {
   title: string;
 }

diff --git a/docs/sanity/schemaTypes/doDontType.tsx b/docs/sanity/schemaTypes/doDontType.tsx
@@ -20,6 +20,11 @@ export const doDontSectionType = defineType({
       validation: (Rule) => Rule.required(),
     },
     imageFieldType, // 기존 imageFieldType 재사용
+    {
+      name: "title",
+      title: "제목",
+      type: "string",
+    },
     {
       name: "description",
       title: "설명",
@@ -50,9 +55,21 @@ export const doDontType = defineArrayMember({
       secondType: "second.type",
       firstImage: "first.imageField.uploadImage",
       firstUrl: "first.imageField.externalUrl",
+      firstTitle: "first.title",
+      firstDescription: "first.description",
       firstImageType: "first.imageField.imageType",
+      secondTitle: "second.title",
+      secondDescription: "second.description",
     },
-    prepare({ firstType, secondType, firstImage, firstUrl, firstImageType }) {
+    prepare({
+      firstType,
+      secondType,
+      firstImage,
+      firstUrl,
+      firstImageType,
+      firstTitle,
+      secondTitle,
+    }) {
       const image =
         firstImageType === "upload"
           ? firstImage
@@ -64,8 +81,11 @@ export const doDontType = defineArrayMember({
         ? `${firstType?.toUpperCase()} & ${secondType?.toUpperCase()}`
         : firstType?.toUpperCase();
 
+      const subtitle = `${firstTitle} & ${secondTitle}`;
+
       return {
         title,
+        subtitle,
         media: image,
       };
     },