푸터

 

Footer 코드 예시

export default function Footer() {
  const router = useRouter();

  const snsLogos = {
    youtube: "/icons/sns/youtube.png",
    facebook: "/icons/sns/facebook.png",
    instagram: "/icons/sns/instagram.png",
    twitter: "/icons/sns/twitter.png",
    telegram: "/icons/sns/telegram.png",
    discord: "/icons/sns/discord.png",
    kakao: "/icons/sns/kakao.png",
    linkedin: "/icons/sns/linkedin.png",
    x: "/icons/sns/x_dark.png",
    etc: "/icons/sns/url.png",
  };

  const getSnsLogo = (url: string) => {
    if (!url) return;
    if (url.includes("youtube.com")) return snsLogos.youtube;
    if (url.includes("facebook.com")) return snsLogos.facebook;
    if (url.includes("instagram.com")) return snsLogos.instagram;
    if (url.includes("twitter.com")) return snsLogos.twitter;
    if (url.includes("x.com")) return snsLogos.x;
    if (url.includes("t.me")) return snsLogos.telegram;
    if (url.includes("discord.gg")) return snsLogos.discord;
    if (url.includes("linkedin.com")) return snsLogos.linkedin;
    if (url.includes("open.kakao.com")) return snsLogos.kakao;
    return snsLogos.etc;
  };

  return (
    <div className="py-8 md:py-[52px] md:mt-10 bg-background-footer">
      <div className="max-w-[1600px] mx-auto flex flex-col px-5 md:px-[155px] gap-8">
        <div className="w-[200px] h-10 shrink-0 relative">
          <Image
            src={Info.images.club_logo[0].path}
            alt="logo"
            className="object-contain object-left"
            fill={true}
          />
        </div>

        <div>
          <div className="flex flex-col gap-1.5 mb-3 md:mb-5 text-label_l">
            <div>{Info.name}</div>
            <div>
              {Info.representative_description}:{" "}
              {Info.representative_name} |{" "}
              {Info.owner?.description}: {Info.owner?.name}
            </div>
            <div className="md:flex">
              <div>{Info.description1}</div>
              <div className="hidden md:inline mx-1">|</div>
              <div>{Info.description2}</div>
            </div>
            <div>{Info.address}</div>
            <div>서비스 문의: {Info.phone_number}</div>
            <div>이메일: {Info.email}</div>
          </div>

          <div className="flex flex-wrap">
            {Info.official_channels?.map((url, index) => (
              <div
                className="flex items-center gap-2 rounded-md px-1 py-1"
                key={index}
                onClick={() => window.open(url, "_blank")}
              >
                {getSnsLogo(url) ? (
                  <Image
                    src={getSnsLogo(url)!}
                    alt={`sns logo image`}
                    className="object-scale-down bg-transparent aspect-square cursor-pointer"
                    width={32}
                    height={32}
                  />
                ) : (
                  <LinkIcon className="w-6 h-6 shrink-0 cursor-pointer" />
                )}
              </div>
            ))}
          </div>
        </div>

        <div className="flex gap-x-8 gap-y-5 text-title_l flex-wrap">
          <DialogPrivacyPolicy
            renderTrigger={(onClick) => (
              <div className="cursor-pointer" onClick={onClick}>
                서비스 이용약관
              </div>
            )}
          />

          <DialogPrivacyPolicy
            renderTrigger={(onClick) => (
              <div className="cursor-pointer" onClick={onClick}>
                개인정보처리방침
              </div>
            )}
          />

          <div>사용자 가이드</div>
        </div>

        <div className="flex flex-col md:flex-row md:justify-between gap-5 md:gap-0">
          <div className="opacity-50 text-body_m">
            © 2024. All rights reserved.
          </div>
          <LanguageToggle
            size="xs"
            icon="/icons/icon/Arrow-Glyph-Down.svg"
            className="w-[74px] text-primary border border-border-input bg-background-footer"
          />
        </div>
      </div>
    </div>
  );
}