Tistory에서 nextjs 기반의 개인 블로그로 이주한 후기

"use client";
import Script from "next/script";
 
export const ClarityScript = () => {
  return (
    <>
      <Script id="clarityScript" type="text/javascript" defer strategy={"afterInteractive"}>{`(function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "mvz3tc93tn")`}</Script>
    </>
  );
};
 

import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType } from "react";
 
export type AsProp<C extends ElementType> = {
  as?: C;
};
 
export type KeyWithAs<C extends ElementType, Props> = keyof (AsProp<C> & Props);
 
export type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>["ref"];
 
export type PolymorphicComponentProps<C extends ElementType, Props = object> = (Props & AsProp<C>) &
  Omit<ComponentPropsWithoutRef<C>, KeyWithAs<C, Props>>;
 
export type PolymorphicComponentPropsWithRef<C extends ElementType, Props = object> = Props & {
  ref?: PolymorphicRef<C>;
};
 

import type {
  PolymorphicComponentProps,
  PolymorphicComponentPropsWithRef,
  PolymorphicRef,
} from "@xionwcfm/types/polymorphic";
import { type ElementType, type ReactNode, forwardRef } from "react";
import { cn } from "../cn";
import { getS } from "../internal-utils/get-s";
import type { SpacingSystemProps } from "../types";
 
export type PolimophicWithSpacingSystemProps<C extends ElementType> = PolymorphicComponentProps<
  C,
  {
    className?: string;
  } & SpacingSystemProps
>;
 
type BoxType = <C extends ElementType = ElementType>(
  props: PolymorphicComponentPropsWithRef<C, PolimophicWithSpacingSystemProps<C>>,
) => ReactNode | null;
 
export const Box: BoxType = forwardRef(function Box<C extends ElementType = "div">(
  { children, as, className, ...rest }: PolimophicWithSpacingSystemProps<C>,
  ref?: PolymorphicRef<C>,
) {
  const Component = as || "div";
  const { m, my, mx, mr, ml, mt, mb, p, py, px, pr, pl, pt, pb, style, ...omitSpacingRest } = rest;
  const defaultCss = `${getS("m", m)} ${getS("mr", mr)} ${getS("ml", ml)} ${getS("mb", mb)} ${getS("mt", mt)}  ${getS("my", my)} ${getS("mx", mx)}  
   ${getS("py", py)} ${getS("px", px)} ${getS("pt", pt)}  ${getS("pb", pb)}  ${getS("pl", pl)}  ${getS("pr", pr)}  ${getS("p", p)}`;
 
  return (
    <Component ref={ref} className={cn(defaultCss, className)} {...omitSpacingRest}>
      {children}
    </Component>
  );
});
 

     <Box my="16" px="24" mx="4" pb="2" pt="4">
     hello
      </Box>

    openGraph: {
      title,
      description,
      url,
      type: "website",
      siteName: BASE_SITE_NAME,
      images: [{ url: `/opengraph-image.png`, alt: "About XionWCFM OG IMAGE" }],
    },
    twitter: {
      creator: authors,
      card: "summary",
      site: url,
      title,
      description,
      images: [{ url: `/twitter-image.png`, alt: "About XionWCFM OG IMAGE" }],
    },

    openGraph: {
      title,
      description,
      url,
      type: "website",
      siteName: BASE_SITE_NAME,
      images: [{ url: `${BASE_SITE_URL}/opengraph-image.png`, alt: "About XionWCFM OG IMAGE" }],
    },
    twitter: {
      creator: authors,
      card: "summary",
      site: url,
      title,
      description,
      images: [{ url: `${BASE_SITE_URL}/twitter-image.png`, alt: "About XionWCFM OG IMAGE" }],
    },