리팩토링(23.10.)

커뮤니티 리스트 컴포넌트 리팩토링

AS-IS

function CommunityPostCardImage({
  src,
  alt,
  locked,
}: CommunityPostCardImageProps) {
  const firstThumbnailURL = src[0];
  const secondThumbnailURL = src[1];
  const thirdThumbnailURL = src[2];

  if (locked) {
    return (
      <div className="flex justify-center items-center relative mt-[16px] relative w-full pt-[75%] rounded-[8px] overflow-hidden">
        <Image
          src={firstThumbnailURL}
          blurDataURL={firstThumbnailURL}
          layout="fill"
          placeholder="blur"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          alt={alt}
        />
      </div>
    );
  }

  if (src.length === 1) {
    return (
      <>
        <div className="relative flex w-full justify-center pt-[75%] rounded-[8px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] overflow-hidden">
          <Image
            src={firstThumbnailURL}
            blurDataURL={firstThumbnailURL}
            placeholder="blur"
            layout="fill"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            alt="썸네일 이미지"
          />
          <div className="w-full h-[100%] absolute top-0 left-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] rounded-[8px]" />
        </div>
      </>
    );
  }

  if (src.length === 2) {
    return (
      <div className="flex gap-[4px] justify-center items-center relative mt-[16px]">
        <div className="relative w-full pt-[75%] rounded-l-lg overflow-hidden">
          <Image
            src={firstThumbnailURL}
            blurDataURL={firstThumbnailURL}
            layout="fill"
            placeholder="blur"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            alt="썸네일 이미지"
          />
          <div className="w-full h-[100%] absolute top-0 left-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] rounded-l-lg" />
        </div>

        <div className="relative w-full pt-[75%] rounded-r-lg overflow-hidden">
          <Image
            src={secondThumbnailURL}
            blurDataURL={firstThumbnailURL}
            layout="fill"
            placeholder="blur"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            alt="썸네일 이미지"
          />
          <div className="w-full h-[100%] absolute top-0 left-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] rounded-r-lg" />
        </div>
      </div>
    );
  }

  if (src.length >= 3) {
    return (
      <div className="flex gap-[4px] justify-center items-center relative">
        <div className="relative w-[50%] pt-[75%] rounded-l-lg overflow-hidden">
          <Image
            src={firstThumbnailURL}
            blurDataURL={firstThumbnailURL}
            layout="fill"
            placeholder="blur"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            alt="썸네일 이미지"
          />
          <div className="w-full h-[100%] absolute top-0 left-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] rounded-l-lg" />
        </div>
        <div className="flex flex-col gap-[4px] w-[50%]">
          <div className="relative w-full pt-[75%] rounded-tr-lg overflow-hidden">
            <Image
              src={secondThumbnailURL}
              blurDataURL={secondThumbnailURL}
              layout="fill"
              placeholder="blur"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              alt="썸네일 이미지"
            />
            <div className="w-full h-[100%] absolute top-0 left-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] rounded-tr-lg" />
          </div>
          <div className="relative w-full pt-[75%] rounded-br-lg overflow-hidden">
            <Image
              src={thirdThumbnailURL}
              blurDataURL={thirdThumbnailURL}
              layout="fill"
              placeholder="blur"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              alt="썸네일 이미지"
            />
            <div className="w-full h-[100%] absolute top-0 left-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] rounded-br-lg" />
            {src.length > 3 && (
              <span
                className="flex justify-center items-center w-full h-[100%]
              absolute top-0 left-0 dimmed_40 content_primary_inverse font_headline_bold_md"
              >
                +{src.length - 3}
              </span>
            )}
          </div>
        </div>
      </div>
    );
  } else {
    return null;
  }
}

TO-BE

function CommunityPostCardImage({
  src,
  alt,
}: CommunityPostCardImageProps) {
  const [firstThumbnailURL, secondThumbnailURL, thirdThumbnailURL] = src;

  return (
    <>
      {src.length === 1 && (
        <SingleThumbnailDisplay thumbnailUrl={firstThumbnailURL} alt={alt} />
      )}
      {src.length === 2 && (
        <DoubleThumbnailDisplay
          firstThumbnailURL={firstThumbnailURL}
          secondThumbnailURL={secondThumbnailURL}
          alt={alt}
        />
      )}
      {src.length >= 3 && (
        <TripleThumbnailDisplay
          firstThumbnailURL={firstThumbnailURL}
          secondThumbnailURL={secondThumbnailURL}
          thirdThumbnailURL={thirdThumbnailURL}
          totalThumbnailLength={src.length}
          alt={alt}
        />
      )}
    </>
  );
}