npm install -g gatsby-cli

gatsby new tech.log

npm install styled-components gatsby-plugin-styled-components

npm install gatsby-plugin-react-svg

module.exports = {
  siteMetadata: {
    title: "TECH.log",
    //...
  },
  plugins: [
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-react-svg`,
      options: {
        rule: {
          include: /icons/,
        },
      },
    },
    //...
  ],
};

  plugins: [
    //...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `./src/pages/`,
      },
      __key: `pages`,
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/_posts/`,
      },
    },
    //...
  ],

const path = require("path");

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions;

  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              title
              coverImage {
                childImageSharp {
                  gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP])
                }
              }
              category
              tag
              createDate
              lastDate
            }
            html
            fields {
              slug
            }
          }
        }
      }
    }
  `);

  // 데이터가 없으면 오류 처리
  if (result.errors) {
    throw new Error("Failed to fetch markdown data");
  }

  const posts = result.data.allMarkdownRemark.edges;

  //...
};

---
title: "제목"
coverImage: "./_assets/temp.jpg"
category: "분류"
tag: ["태그1", "태그2", "태그3"]
createDate: "2024-11-25"
lastDate: "2024-12-06"
---

//...
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions;

  if (node.internal.type === "MarkdownRemark") {
    const parent = getNode(node.parent); // 폴더 이름 가져오기
    const slug = parent.relativeDirectory.split(path.sep).pop(); // 폴더 이름을 slug로 사용
    createNodeField({
      node,
      name: "slug",
      value: slug,
    });
  }
};

//...
posts.forEach(({ node }) => {
  createPage({
    path: `/post/${node.fields.slug}`, // URL
    component: path.resolve("./src/templates/post-template.js"),
    context: {
      slug: node.fields.slug,
    },
  });
});

npm install gatsby-transformer-remark gatsby-remark-copy-linked-files gatsby-remark-autolink-headers gatsby-remark-responsive-iframe gatsby-remark-external-links gatsby-remark-images gatsby-remark-prismjs

  plugins: [
    //...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        gfm: true, // GitHub Flavored Markdown(GFM) 활성화
        plugins: [
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-autolink-headers`,
          `gatsby-remark-responsive-iframe`,
          `gatsby-remark-external-links`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 650,  // 이미지 최대 너비 (px)
              withWebp: true, // WebP 형식 이미지 생성
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              aliases: { js: "javascript", sh: "bash" }, // 코드 블록 언어 별칭 설정
            },
          },
        ],
      },
    },
    //...
  ],

//...
return (
  <PostContainer>
    {/* ... */}
    <Content dangerouslySetInnerHTML={{ __html: post.html }} />
    {/* ... */}
  </PostContainer>
);
//...
export const query = graphql`
  query ($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      #...
      html
      tableOfContents(maxDepth: 3)
    }
  }
`;

//...

// 카테고리 추출
const categoryList = new Set();
posts.forEach(({ node }) => {
  if (node.frontmatter.category) {
    categoryList.add(node.frontmatter.category);
  }
});

// 카테고리를 기반으로 동적 페이지 생성
categoryList.forEach((category) => {
  createPage({
    path: `/category/${category}`, // URL
    component: path.resolve("./src/templates/category-template.js"),
    context: {
      category,
    },
  });
});

export const query = graphql`
  query ($category: String!) {
    allMarkdownRemark(filter: { frontmatter: { category: { eq: $category } } }) {
      edges {
        node {
          frontmatter {
            title
            coverImage {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP])
              }
            }
            tag
            category
            createDate
          }
          fields {
            slug
          }
        }
      }
    }
  }
`;

//...
const useTheme = () => {
  // localStorage에서 저장된 테마 확인 후, 없으면 OS 설정 감지
  const [theme, setTheme] = useState(() => {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
      return savedTheme; // 저장된 테마 적용
    }
    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  });

  // 테마 변경 함수 (onChangeTheme)
  const onChangeTheme = useCallback(() => {
    const updatedTheme = theme === "light" ? "dark" : "light"; // light ↔ dark 변경
    setTheme(updatedTheme);
    localStorage.setItem("theme", updatedTheme); // localStorage에 저장하여 유지
  }, [theme]);

  // 페이지 로딩 시 저장된 테마 값 적용
  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);

  return {
    theme,
    onChangeTheme,
  };
};

// ...
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { light, dark } from "../styles/Theme";
import useTheme from "../hooks/useTheme";

const defaultValue = {
  theme: "light",
  onChangeTheme: () => {},
};

export const ThemeContext = React.createContext(defaultValue);

export const ThemeProvider = ({ children }) => {
  const themeProps = useTheme(); // useTheme 훅 사용

  return (
    <ThemeContext.Provider value={themeProps}>
      <StyledThemeProvider theme={themeProps.theme === "light" ? light : dark}>{children}</StyledThemeProvider>
    </ThemeContext.Provider>
  );
};
s;

import * as styledComponents from "styled-components";

const md = {
  blockquote: "#707070",
  tableBr: "#C0C0C0",
};

export const light = {
  brLine: "#585858",
  bgMain: "#FFFFFF",
  bgMainSub: "#FCFCFC",
  bgLayout: "#E8E8E8",
  bgSub: "#C3C3C3",
  btn: "#A9A9A9",
  btnActive: "#585858",
  text: "black",
  bgText: "#999999",
  btnText: "#696969",
  btnActiveText: "#C0C0C0",
  highlightText: "#4682B4",
  warningText: "#8B0000",
  md: { ...md },
};

export const dark = {
  brLine: "#585858",
  bgMain: "#282828",
  bgMainSub: "#252525",
  bgLayout: "#383838",
  bgSub: "#606060",
  btn: "#505050",
  btnActive: "#909090",
  text: "white",
  bgText: "#808080",
  btnText: "#808080",
  btnActiveText: "#505050",
  highlightText: "#87CEEB",
  warningText: "#F08080",
  md: { ...md },
};

// styled-components에서 사용
const { default: styled, createGlobalStyle } = styledComponents;
export { styled, createGlobalStyle };

import { createGlobalStyle } from "./Theme";

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'D2Coding';
    src: url('/fonts/D2Coding-Ver1.3.2.ttf') format('truetype');
  }

  html, body {
    color: ${({ theme }) => theme.text};
    background: ${({ theme }) => theme.bgMain};
    font-family: 'D2Coding', sans-serif;
    line-height: 1.5;
  }

  // ...
`;

export default GlobalStyle;

//...
import { ThemeProvider } from "./src/context/ThemeProvider";
// Assets
import "./src/styles/prism-nord.css";
// Component
import Layout from "./src/components/layouts/Layout";

export const wrapRootElement = ({ element }) => {
  return <ThemeProvider>{element}</ThemeProvider>;
};

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>;
};

// ...
import { styled } from "../../styles/Theme";
import GlobalStyle from "../../styles/GlobalStyle";

//...
const Layout = ({ children }) => {
  const [sideOpen, setSideOpen] = useState(false);

  const toggleSideOpen = () => {
    setSideOpen((prev) => !prev);
  };

  return (
    <>
      <GlobalStyle />
      <Background>
        <Header />
        <Sidebar open={sideOpen} setOpen={setSideOpen} />
        <FloatingBox toggleSideOpen={toggleSideOpen} />
        <Content>{children}</Content>
        <Footer />
      </Background>
    </>
  );
};

const Background = styled.div`
  //...
  background-color: ${({ theme }) => theme.bgMain};
  //...
`;
//...

// ...
import { ThemeContext } from "../../context/ThemeProvider";
import { styled } from "../../styles/Theme";
import userData from "../../../user-data";
// Assets
import { LightIcon, DarkIcon, SearchIcon } from "../../assets/assets";
// Components
import IconButton from "../buttons/IconButton";

const Header = ({ className }) => {
  const { theme, onChangeTheme } = useContext(ThemeContext);

  return (
    <HeaderContainer className={className}>
      <TitleContainer>
        <HeaderTitle onClick={() => navigate(`/`)}>{userData.title}</HeaderTitle>
        <NameText onClick={() => navigate(`/about`)}>{`/ ${userData.name}`}</NameText>
      </TitleContainer>
      <ButtonContainer>
        <IconButton size={[32, 32]} icon={SearchIcon} onClick={() => navigate(`/search`)} />
        <IconButton size={[35, 35]} icon={theme === "light" ? DarkIcon : LightIcon} onClick={onChangeTheme} /> {/* 다크 모드 토글 버튼 */}
      </ButtonContainer>
    </HeaderContainer>
  );
};

//...

//...
import usePostList from "../hooks/usePostList";

const SearchingPage = ({ data }) => {
  //...
  const posts = usePostList(data);
  //...
};

export const query = graphql`
  query SearchPageQuery {
    allMarkdownRemark {
      ...
  }
`;
//...

const usePostList = (data) => {
  return useMemo(
    () =>
      data?.allMarkdownRemark?.edges?.map(({ node }) => ({
        title: node.frontmatter.title,
        coverImage: node.frontmatter.coverImage?.childImageSharp?.gatsbyImageData,
        tag: node.frontmatter.tag,
        category: node.frontmatter.category,
        createDate: node.frontmatter.createDate,
        slug: node.fields.slug,
      })) || [],
    [data]
  );
};

//...
import { useLocation } from "@reach/router"; // 쿼리스트링 읽기 위해 추가
import queryString from "query-string"; // 쿼리스트링 파싱을 위해 추가 설치

const SearchingPage = ({ data }) => {
  const [query, setQuery] = useState("");
  const location = useLocation();

  //...
  useEffect(() => {
    const params = queryString.parse(location.search);
    if (params.tag) {
      setQuery(params.tag);
    }
  }, [location.search]);
  //...
};

const searchPosts = posts.filter((post) => {
  const searchText = query.toLowerCase();
  return (
    post.title?.toLowerCase().includes(searchText) ||
    post.category?.toLowerCase().includes(searchText) ||
    post.tag?.some((t) => t.toLowerCase().includes(searchText))
  );
});

const tagCounts = posts.reduce((acc, post) => {
  post.tag?.forEach((tag) => {
    acc[tag] = (acc[tag] || 0) + 1;
  });
  return acc;
}, {});

const sortedTags = Object.entries(tagCounts).sort(([, a], [, b]) => b - a);

const onTag = (tag) => {
  setQuery(tag);
  navigate(`/search?tag=${encodeURIComponent(tag)}`);
};

const giscusData = {
  repo: "[ENTER REPO HERE]",
  repo_id: "[ENTER REPO ID HERE]",
  category: "Q&A",
  category_id: "[ENTER CATEGORY ID HERE]",
  mapping: "pathname",
  reactions_enabled: "1",
  emit_metadata: "1",
  input_position: "bottom",
  lang: "ko",
};

npm install @giscus/react

//...
import Giscus from "@giscus/react";
import { ThemeContext } from "../context/ThemeProvider";
import { styled } from "../styles/Theme";
import { giscusData } from "../../user-data";

const PostTemplate = ({ data }) => {
  //...

  // Giscus 테마를 동적으로 설정
  const { theme } = useContext(ThemeContext);
  const giscusTheme = theme === "light" ? "noborder_light" : "noborder_gray";

  return (
    <PageWrapper>
      <PostContainer>
        <PostHeader postData={postData} />
        <Content dangerouslySetInnerHTML={{ __html: post.html }} />
        <BorderLine />
        <Comment className="giscus">
          <Giscus
            id="comments"
            repo={giscusData.repo}
            repoId={giscusData.repo_id}
            category={giscusData.category}
            categoryId={giscusData.category_id}
            mapping={giscusData.mapping}
            reactionsEnabled={giscusData.reactions_enabled}
            emitMetadata={giscusData.emit_metadata}
            inputPosition={giscusData.input_position}
            lang={giscusData.lang}
            theme={giscusTheme}
            loading="lazy"
          />
        </Comment>
      </PostContainer>
      <TableOfContents toc={post.tableOfContents} />
    </PageWrapper>
  );
};
//...

export const query = graphql`
  query ($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      #...
      tableOfContents(maxDepth: 3)
    }
  }
`;

//...
const TableOfContents = ({ className, toc }) => {
  const [open, setOpen] = useState(false);

  const toggleOpen = () => {
    setOpen((prev) => !prev);
  };

  return (
    <TocWrapper className={className} $open={open}>
      <Header>
        <IconButton size={[32, 32]} icon={TableIcon} onClick={toggleOpen} />
        <Title $open={open}>{"목차"}</Title>
      </Header>
      <TocContainer dangerouslySetInnerHTML={{ __html: toc }} $open={open} />
    </TocWrapper>
  );
};
//...

const PostTemplate = ({ data }) => {
  //...
  return (
    <PageWrapper>
      <PostContainer>{/*..*/}</PostContainer>
      <TableOfContents toc={post.tableOfContents} />
    </PageWrapper>
  );
};