Merge pull request #100 from TakhyunKim/feature/algorithm

알고리즘 네비게이션 탭, 페이지 추가 및 포스팅 추가

algorithms/10828-stack.md

@@ -0,0 +1,67 @@
+---
+title: "백준 10828-stack"
+date: "2024-04-09"
+tag: "stack"
+---
+
+## 문제
+
+> <a href="https://www.acmicpc.net/problem/10828" target="_blank">문제 링크</a>
+
+정수를 저장하는 스택을 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.
+
+명령은 총 다섯 가지이다.
+
+push X: 정수 X를 스택에 넣는 연산이다.<br />
+pop: 스택에서 가장 위에 있는 정수를 빼고, 그 수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.<br />
+size: 스택에 들어있는 정수의 개수를 출력한다. <br />
+empty: 스택이 비어있으면 1, 아니면 0을 출력한다.<br />
+top: 스택의 가장 위에 있는 정수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.<br />
+
+## 풀이
+
+```ts
+const answers = [];
+const [n, ...commands] = input;
+
+function solution(n, commands) {
+  const stack = [];
+
+  const stackCommand = {
+    push: (value) => {
+      stack.push(value);
+    },
+    pop: () => {
+      return stack.length === 0 ? -1 : stack.pop();
+    },
+    size: () => {
+      return stack.length;
+    },
+    empty: () => {
+      return stack.length === 0 ? 1 : 0;
+    },
+    top: () => {
+      return stack.length === 0 ? -1 : stack.at(-1);
+    },
+  };
+
+  for (i = 0; i < n; i++) {
+    const [command, value] = commands[i].split(" ");
+    if (command === "push") {
+      stackCommand.push(parseInt(value));
+    } else {
+      answers.push(stackCommand[command]());
+    }
+  }
+
+  console.log(answers.join("\n"));
+}
+```
+
+## 설명
+
+Stack 구현은 javascript Array method 를 활용했습니다.<br />
+구현해야할 push, pop, size, empty, top 을 구현 후,<br />
+for 문을 통해 필요한 내용을 순회, split 을 통해 문자열 자르기를 통해 값과 stack command 를 분리했습니다.<br />
+push 를 제외한 나머지 method 는 값을 출력해야하므로 반환값을 별도로 저장하고,<br />
+마지막엔 예제 출력에 맞도록 `join("\n")` 을 통해 줄바꿈 후 출력하는 방식을 적용했습니다.<br />

algorithms/9093-reverse-string.md

@@ -0,0 +1,50 @@
+---
+title: "백준 9093-단어 뒤집기"
+date: "2024-04-10"
+tag: "stack,문자열 뒤집기"
+---
+
+## 문제
+
+> <a href="https://www.acmicpc.net/problem/9093" target="_blank">문제 링크</a>
+
+문장이 주어졌을 때, 단어를 모두 뒤집어서 출력하는 프로그램을 작성하시오. 단, 단어의 순서는 바꿀 수 없다. 단어는 영어 알파벳으로만 이루어져 있다.
+
+첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 문장이 하나 주어진다. 단어의 길이는 최대 20, 문장의 길이는 최대 1000이다. 단어와 단어 사이에는 공백이 하나 있다.
+
+## 퓰이
+
+```ts
+function solution(targetList) {
+  const answers = [];
+
+  for (i = 0; i < targetList.length; i++) {
+    const reversedList = [];
+    const target = targetList[i].split(" ");
+
+    for (j = 0; j < target.length; j++) {
+      const reversedTarget = target[j].split("").reverse().join("");
+      reversedList.push(reversedTarget);
+    }
+
+    answers.push(reversedList.join(" "));
+  }
+
+  console.log(answers.join("\n"));
+}
+
+solution(targetInput);
+```
+
+## 설명
+
+문제 유형은 스택이나, 문자열 뒤집기는 split(String method), reverse(Array method) 을 통해 쉽게 풀 수 있을 것 같아 해당 method 를 활용하여 문제를 풀었습니다. 접근 방식은 다음과 같습니다.
+
+> 1. for 문을 통해 문자열 뒤집기 대상 배열을 순회합니다.
+> 2. 대상 문자열은 문장 구조를 가질 수 있으므로, 내부에 뒤집기한 문자열을 보관할 배열을 선언합니다.<br />(ex: 'I am happy today')
+> 3. 대상 문자열을 띄어쓰기 기준으로 split 하여 배열화합니다.
+> 4. 배열화한 문자열을 for 문으로 순회합니다.
+> 5. 띄어쓰기로 분리된 문자열을 reverse 합니다. 문자열이므로 split("")으로 단어 별로 분리한 후 reverse 했으며, 이 후 join("")을 통해 뒤집은 문자열을 합칩니다.
+> 6. 뒤집기한 문자열을 배열에 보관합니다.
+> 7. 처음 for 문이 끝날 지점에선 뒤집은 문자열 list 를 보관합니다.
+> 8. 이를 출력합니다.

app/algorithms/AlgorithmPost.module.css

@@ -0,0 +1,49 @@
+.list_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.item_wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 8px;
+  padding-bottom: 0;
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+
+.item_wrapper:hover {
+  background-color: var(--box-bg-hovered-color);
+  box-shadow: 10px 20px 20px 0 var(--box-shadow-hovered-color);
+  transition: 0.5s ease;
+}
+
+.item_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.title {
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+.date {
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--description-text-color);
+}
+
+.tag_wrapper {
+  display: flex;
+  justify-content: left;
+}

app/algorithms/AlgorithmPostList.tsx

@@ -0,0 +1,54 @@
+import Link from "next/link";
+import Tag from "@/common/components/PostList/PostItem/Tag";
+
+import styles from "./AlgorithmPost.module.css";
+
+import type { PostData } from "@/common/utils/posts";
+
+interface AlgorithmPostListProps {
+  algorithmPostList: PostData[];
+}
+
+const AlgorithmPostList = ({ algorithmPostList }: AlgorithmPostListProps) => {
+  return (
+    <section className={styles.list_wrapper}>
+      {algorithmPostList.map((algorithmPostData) => (
+        <AlgorithmPostItem
+          key={algorithmPostData.id}
+          algorithmPostData={algorithmPostData}
+          href={`/algorithms/${algorithmPostData.id}`}
+        />
+      ))}
+    </section>
+  );
+};
+
+interface AlgorithmPostItemProps {
+  href: string;
+  algorithmPostData: PostData;
+}
+
+const AlgorithmPostItem = ({
+  href,
+  algorithmPostData,
+}: AlgorithmPostItemProps) => {
+  const { title, date, tagList } = algorithmPostData;
+
+  return (
+    <article className={styles.item_wrapper}>
+      <Link href={href}>
+        <div className={styles.item_header}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.date}>{date}</div>
+        </div>
+        <div className={styles.tag_wrapper}>
+          {tagList.map((tag) => (
+            <Tag key={tag} tag={tag} />
+          ))}
+        </div>
+      </Link>
+    </article>
+  );
+};
+
+export default AlgorithmPostList;

app/algorithms/[id]/page.module.css

@@ -0,0 +1,96 @@
+.title {
+  margin-top: 0;
+}
+
+.date {
+  margin-bottom: 3rem;
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--description-text-color);
+}
+
+.html_wrapper {
+  line-height: 1.7rem;
+  color: var(--post-text-color);
+}
+
+.html_wrapper h1 {
+  margin: 3rem 0;
+  color: var(--post-h-tag-color);
+}
+
+.html_wrapper h2 {
+  margin-top: 3rem;
+  color: var(--post-h-tag-color);
+}
+
+.html_wrapper h3 {
+  margin-top: 2rem;
+  color: var(--post-h-tag-color);
+}
+
+.html_wrapper a {
+  color: var(--post-link-tag-color);
+  text-decoration: underline;
+  text-underline-position: under;
+  text-decoration-color: var(--post-link-tag-color);
+  text-decoration-thickness: 1px;
+}
+
+.html_wrapper strong {
+  color: var(--post-h-tag-color);
+}
+
+.html_wrapper blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--post-block-quote-color);
+  border-left: 3px solid var(--post-block-quote-color);
+  margin: 2rem 0;
+  padding-left: 1em;
+}
+
+.html_wrapper li {
+  margin: 1rem 0;
+}
+
+.html_wrapper code {
+  color: var(--post-h-tag-color);
+  font-size: 1rem;
+  font-weight: bold;
+  font-family: oblique;
+  background: none;
+}
+
+.html_wrapper pre {
+  color: var(--post-h-tag-color);
+  font-size: 1rem;
+  line-height: 2rem;
+  font-family: inherit;
+  border: 1px solid var(--post-text-color);
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: none;
+}
+
+.html_wrapper pre code {
+  color: #d1d5db;
+  font-size: 1rem;
+  font-weight: initial;
+  font-family: inherit;
+  background-color: #292c33;
+}
+
+@media (max-width: 768px) {
+  .thumbnail_wrapper {
+    position: relative;
+    width: 100%;
+    height: 15rem;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .html_wrapper img {
+    width: 90%;
+  }
+}

app/algorithms/[id]/page.tsx

@@ -0,0 +1,54 @@
+import { getAllPostIds, getPostData } from "@/common/utils/posts";
+
+import MDXRemote from "@/common/components/MDXRemote";
+import TopScrollButton from "@/common/components/TopScrollButton";
+import TableOfContents from "@/common/components/TableOfContents";
+
+import styles from "./page.module.css";
+
+import type { Metadata } from "next";
+import type { Params } from "@/common/types/params";
+
+const getPost = async (params: Params) => {
+  const postData = await getPostData({ postType: "algorithms", id: params.id });
+
+  return postData;
+};
+
+export const generateMetadata = async ({
+  params,
+}: {
+  params: Params;
+}): Promise<Metadata> => {
+  const { title, description, tagList } = await getPost(params);
+
+  return {
+    title,
+    description,
+    keywords: tagList,
+  };
+};
+
+export const generateStaticParams = async () => {
+  const allPostIds = getAllPostIds({ postType: "algorithms" });
+
+  return allPostIds;
+};
+
+const AlgorithmPost = async ({ params }: { params: Params }) => {
+  const { date, title, mdxSource, tableOfContents } = await getPost(params);
+
+  return (
+    <>
+      <h1 className={styles.title}>{title}</h1>
+      <div className={styles.date}>{date}</div>
+      <div className={styles.html_wrapper}>
+        <MDXRemote {...mdxSource} />
+      </div>
+      <TopScrollButton />
+      <TableOfContents tableOfContents={tableOfContents} />
+    </>
+  );
+};
+
+export default AlgorithmPost;

app/algorithms/page.tsx

@@ -0,0 +1,18 @@
+import { getSortedPostsData } from "@/common/utils/posts";
+
+import AlgorithmPostList from "./AlgorithmPostList";
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "알고리즘 포스팅",
+  description: "문제 풀이를 기록한 포스팅",
+};
+
+const Algorithms = () => {
+  const allAlgorithmsData = getSortedPostsData({ postType: "algorithms" });
+  console.log(allAlgorithmsData);
+  return <AlgorithmPostList algorithmPostList={allAlgorithmsData} />;
+};
+
+export default Algorithms;