Next.js로 나만의 블로그 만들기

  const socialLogins: SocialLogins = {
    github: {
      clientId: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID,
      redirectUri: encodeURIComponent(
        process.env.NEXT_PUBLIC_GITHUB_REDIRECT_URI!
      ),
      loginUrl: (clientId, redirectUri) =>
        `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}`,
      imageUrl: "/logo/github.webp",
      imageAlt: "Github",
    },
    google: {
      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
      redirectUri: encodeURIComponent(
        process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI!
      ),
      loginUrl: (clientId, redirectUri) =>
        `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=openid%20email%20profile`,
      imageUrl: "/logo/google.webp",
      imageAlt: "Google",
    },
  };
 
  const LoginButton: React.FC<LoginButtonProps> = ({ provider, children }) => {
    const [isHovered, setIsHovered] = useState(false);
    const { clientId, redirectUri, loginUrl } = socialLogins[provider];
 
    const handleLogin = () => {
      const url = loginUrl(clientId, redirectUri);
      window.location.href = url;
    };
 
    const getImageSrc = () => {
      if (provider === "github") {
        return isHovered ? "/logo/github_black.webp" : "/logo/github.webp";
      } else {
        return socialLogins[provider].imageUrl;
      }
    };

const handleSubmit = async (event: React.FormEvent) => {
  event.preventDefault();
  if (!selectedCategoryId) {
    alert("Please select a category.");
    return;
  }
 
  const title_ko = title.ko;
  const title_ja = title.ja;
  const content_ko = content.ko;
  const content_ja = content.ja;
 
  try {
    const insertedId = await addPost(
      selectedCategoryId,
      title_ko,
      title_ja,
      content_ko,
      content_ja,
      images,
      representativeImage,
    );
 
    // R2 내부에서 이미지 파일명 변경
    const newImageUrls = await renameAndOverwriteFiles(
      images,
      "tmp",
      insertedId,
    );
 
    // 대표 이미지 파일명 변경
    const newRepresentativeImageUrl = representativeImage.replace(
      /(https:\/\/blog_workers\.forever-fl\.workers\.dev\/)tmp_/,
      `$1${insertedId}_`,
    );
 
    // 콘텐츠 내의 모든 'tmp' URL을 'insertedId'로 대체
    const updatedContentKo = content_ko.replace(
      /https:\/\/blog_workers\.forever-fl\.workers\.dev\/tmp/g,
      `https://blog_workers.forever-fl.workers.dev/${insertedId}`,
    );
    const updatedContentJa = content_ja.replace(
      /https:\/\/blog_workers\.forever-fl\.workers\.dev\/tmp/g,
      `https://blog_workers.forever-fl.workers.dev/${insertedId}`,
    );
 
    // DB 업데이트
    const updateResult = await updatePost(
      insertedId,
      title_ko,
      title_ja,
      updatedContentKo,
      updatedContentJa,
      newImageUrls.imageUrls,
      newRepresentativeImageUrl,
    );
 
    // 불필요한 이미지 제거
    for (const image of images) {
      await deleteImage(image);
    }
 
    // State 초기화
    setSelectedCategoryId("");
    setTitle({ ko: "", ja: "" });
    setContent({ ko: "", ja: "" });
    setImages([]);
    setRepresentativeImage("");
 
    alert("The post has been published!");
 
    dispatch(setCurrentView({ view: "main" })); // main 뷰로 상태 변경
    sessionStorage.setItem("currentView", "main");
    router.push("/", { scroll: false });
  } catch (error) {
    console.error("Failed to add post:", error);
    alert("Failed to add the post.");
  }
};

export async function GET(
  req: NextRequest,
  { params }: { params: { categoryId: string; page: string } },
) {
  const categoryId = params.categoryId;
  const pageNumber = parseInt(params.page, 10);
  const itemsPerPage = 12; // 페이지 당 항목 수
 
  try {
    // 카테고리별 포스트 가져오기
    const { posts, total } = await getPostsByCategory(
      categoryId,
      pageNumber,
      itemsPerPage,
    );
 
    // 응답 데이터 생성
    const responseBody = JSON.stringify({
      posts,
      pagination: {
        page: pageNumber,
        itemsPerPage,
        totalItems: total,
        totalPages: Math.ceil(total / itemsPerPage),
      },
    });
 
    return new NextResponse(responseBody, {
      status: 200,
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    console.error(error);
    return new NextResponse("Internal Server Error", { status: 500 });
  }
}

<div>
  <label htmlFor="content" className="block text-sm font-medium text-gray-700">
    Content
  </label>
  <textarea
    id="content"
    ref={textAreaRef}
    value={content[selectedLanguage]}
    onChange={(e) =>
      setContent({ ...content, [selectedLanguage]: e.target.value })
    }
    className="mt-1 block w-full p-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
    rows={50}
    required
  ></textarea>
</div>

"use client";
 
import React, { useState, useEffect } from "react";
import { useRouter, usePathname } from "next/navigation";
import Image from "next/image";
 
import { useAppDispatch, useAppSelector } from "@/lib/hooks";
 
import { setLanguage } from "@/features/language/languageSlice";
 
const SetLanguage: React.FC = () => {
  const pathname = usePathname();
  const router = useRouter();
 
  //Redux
  const dispatch = useAppDispatch();
 
  const [isReady, setIsReady] = useState(false); // 로딩 상태 관리
 
  const currentLanguage = useAppSelector((state) => state.language.value);
 
  useEffect(() => {
    const initialLang =
      localStorage.getItem("siteLanguage") ||
      (navigator.language.startsWith("ko") ? "ko" : "ja");
    dispatch(setLanguage(initialLang));
    setIsReady(true);
  }, [dispatch]);
 
  const toggleLanguage = () => {
    const newLanguage = currentLanguage === "ko" ? "ja" : "ko";
    dispatch(setLanguage(newLanguage));
 
    const pathParts = pathname.split("/");
    const languageCode = pathParts[2];
    const postIdx = pathParts[3];
 
    if (languageCode) {
      if (newLanguage === "ja") {
        router.push(`/post/ja/${postIdx}`, { scroll: false });
      } else if (newLanguage === "ko") {
        router.push(`/post/ko/${postIdx}`, { scroll: false });
      }
    }
  };
  if (!isReady) {
    return (
      <div className="animate-pulse">
        <div className="rounded-full bg-gray-400 h-8 w-14"></div>
      </div>
    );
  }
 
  return (
    <>
      {/* 스위치 컨테이너 */}
      <div
        className="relative inline-block w-14 h-8 cursor-pointer"
        onClick={toggleLanguage}
      >
        <input type="checkbox" className="hidden" />
        {/* 스위치 배경 */}
        <div
          className={`rounded-full h-8 bg-gray-400 p-1 transition-colors duration-200 ease-in-out`}
        >
          {/* 스위치 토글 핸들 */}
          <div
            className={`bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-200 ease-in-out ${
              currentLanguage === "ko" ? "translate-x-6" : ""
            }`}
          >
            <Image
              src={
                currentLanguage === "ko"
                  ? "/images/korea.webp"
                  : "/images/japan.webp"
              }
              alt={currentLanguage === "ko" ? "Korean Flag" : "Japanese Flag"}
              width={24}
              height={24}
              className="rounded-full"
            />
          </div>
        </div>
      </div>
    </>
  );
};
 
export default SetLanguage;

{
  currentPost ? (
    <Markdown
      remarkPlugins={[remarkGfm]}
      components={{
        code(props) {
          const { children, className, node, ...rest } = props;
          const match = /language-(\w+)/.exec(className || "");
          return match ? (
            <SyntaxHighlighter
              PreTag="div"
              language={match[1]}
              style={darcula}
              customStyle={{ margin: "0" }} // pre 태그에 적용될 스타일
              showLineNumbers={true}
            >
              {String(children).replace(/\n$/, "")}
            </SyntaxHighlighter>
          ) : (
            <code {...rest} className={className}></code>
          );
        },
      }}
    >
      {content}
    </Markdown>
  ) : (
    <div></div>
  );
}