Code review khj0426

.eslintrc.json

@@ -0,0 +1,68 @@
+{
+  "plugins": ["import"],
+  "extends": ["next/core-web-vitals", "plugin:import/recommended"],
+  "rules": {
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "import/named": 0,
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "groups": [
+          "type",
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "unknown"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "next*",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "react*",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "src/@hooks/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "src/@Component/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "src/@utils/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "next*",
+          "react*",
+          "src/@hooks/**",
+          "src/@Component/**",
+          "src/@utils/**"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,67 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# lighthouseci
+.lighthouseci
+/lhci_reports/
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+.env
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+.lighthouserc.js
+.commitlint.config.js
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Sentry Auth Token
+.sentryclirc
+.sentry.client.config.ts
+.sentry.edge.config.ts
+.sentry.server.config.ts
+
+.tsconfig.json
+
+public
+
+posts
+.next
+.vercel
+.lighthouseci
+.husky
+
+lhci_reports
+.vscode
+# package.json
+package-lock.json
+
+public

lib/api.ts

@@ -0,0 +1,108 @@
+import fs from 'fs';
+import { join, basename } from 'path';
+
+import matter from 'gray-matter';
+
+const PostDirectory = join(process.cwd(), 'posts');
+const ImageDirectory = join(process.cwd(), 'public/images');
+
+export function getPostSlugs() {
+  return fs.readdirSync(PostDirectory);
+}
+
+export function getPostBySlug(slug: string, fields: string[] = []) {
+  const realSlug = decodeURIComponent(slug.replace(/\.md/, ''));
+  const fullPath = join(PostDirectory, `${realSlug}.md`);
+  const fileContent = fs.readFileSync(fullPath, 'utf-8');
+  const { data, content } = matter(fileContent);
+
+  type Item = {
+    [key: string]: string;
+  };
+  const items: Item = {};
+
+  fields.forEach((field) => {
+    if (field === 'slug') {
+      items[field] = realSlug;
+    }
+    if (field === 'content') {
+      items[field] = content;
+    }
+    if (typeof data[field] !== 'undefined') {
+      items[field] = data[field];
+    }
+    if (field === 'image') {
+      const imagePath = join(ImageDirectory, data[field]);
+    }
+  });
+
+  return items;
+}
+
+export function getAllPosts(fields: string[] = []) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+
+  return posts;
+}
+
+export function getInitPosts(fields: string[] = []) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
+    .slice(0, 5);
+
+  return posts;
+}
+
+export function getAllPostRequest(fields: string[] = []) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1));
+
+  return {};
+}
+
+//리팩토링 필요한 부분
+export function getAllCategories() {
+  const allPosts = getAllPosts(['category']);
+
+  const allCategory = new Map<string, number>();
+
+  allPosts.map((post) => {
+    const getCategory = allCategory.get(post.category);
+    if (getCategory) {
+      allCategory.set(post.category, getCategory + 1);
+      return;
+    }
+
+    allCategory.set(post.category, 1);
+  });
+
+  return Array.from(allCategory).map(([category, categoryCount]) => {
+    return {
+      category: category,
+      categoryCount: categoryCount + '',
+    };
+  });
+}
+
+export function getCategoryFilteredPosts(
+  fields: string[] = [],
+  category: string
+) {
+  const slugs = getPostSlugs();
+  const posts = slugs
+    .map((slug) => getPostBySlug(slug, fields))
+    // sort posts by date in descending order
+    .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
+    .filter((post) => post.category === category);
+
+  return posts;
+}

lib/makeToc.tsx

@@ -0,0 +1,3 @@
+export default function makeToc({ children }: { children: string }) {
+  return children.match(/(?:##|###)(.*)/g);
+}

lib/markdowntoHTML.ts

@@ -0,0 +1,13 @@
+import { remark } from 'remark';
+import html from 'remark-html';
+
+export default async function markdownToHtml(markdown: string) {
+  const result = await remark()
+    .use(html, {
+      sanitize: false,
+    })
+
+    .process(markdown);
+
+  return result.toString();
+}

lib/replaceStr.ts

@@ -0,0 +1,13 @@
+export default function replaceStrWithBlank([input, target]: [
+  string,
+  string | string[]
+]) {
+  if (target instanceof Array) {
+    const result = target.map((eachTarget) => {
+      return input.replaceAll(eachTarget, '');
+    });
+    return result[0].trim();
+  }
+
+  return target.replaceAll(input, '');
+}

next.config.js

@@ -0,0 +1,29 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['styled-components,sentry,lodash,react-markdown'],
+  },
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+    ],
+    formats: ['image/avif', 'image/webp'],
+  },
+};
+
+const bundleAnalyzerConfig = withBundleAnalyzer({
+  ...nextConfig,
+  compress: true,
+});
+
+module.exports = bundleAnalyzerConfig;

package.json

@@ -0,0 +1,73 @@
+{
+  "name": "hj-devlog",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": "https://github.com/khj0426/HJ_Devlog",
+  "scripts": {
+    "lhci": "next build && lhci autorun",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "deploy": "next build && npx gh-pages -d out",
+    "analyze": "cross-env ANALYZE=true next build",
+    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
+  },
+  "dependencies": {
+    "@giscus/react": "^2.2.8",
+    "@next/bundle-analyzer": "^13.4.7",
+    "@sentry/nextjs": "^7.64.0",
+    "@tanstack/react-query": "^4.33.0",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.8",
+    "@types/react-dom": "18.2.4",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/recoil": "^0.0.9",
+    "@types/styled-components": "^5.1.26",
+    "@types/uuid": "^9.0.1",
+    "autoprefixer": "10.4.14",
+    "axios": "^1.6.2",
+    "cross-env": "^7.0.3",
+    "date-fns": "^2.30.0",
+    "eslint": "8.42.0",
+    "eslint-config-next": "13.4.4",
+    "firebase": "^10.7.1",
+    "github-label-sync": "^2.3.1",
+    "gray-matter": "^4.0.3",
+    "js-cookie": "^3.0.5",
+    "next": "^13.5.0",
+    "notion-client": "^6.16.0",
+    "postcss": "8.4.24",
+    "prism-react-renderer": "^2.0.5",
+    "react": "18.2.0",
+    "react-cookie": "^6.1.1",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.7",
+    "react-notion-x": "^6.16.0",
+    "react-secure-storage": "^1.3.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "recoil": "^0.7.7",
+    "rehype-raw": "^6.1.1",
+    "remark": "^14.0.3",
+    "remark-html": "^15.0.2",
+    "styled-components": "^6.0.0-rc.3",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.1.3",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.7.2",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@lhci/cli": "^0.12.0",
+    "@sentry/utils": "^7.64.0",
+    "@types/glob": "^8.1.0",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "gh-pages": "^5.0.0",
+    "glob": "^10.2.7",
+    "husky": "^8.0.3"
+  }
+}

src/@types/AboutProps.ts

@@ -0,0 +1,6 @@
+type AboutProps = {
+  title: string;
+  imgurl: string;
+  content: string | string[];
+};
+export default AboutProps;

src/@types/ButtonType.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export type ButtonProps = {
+  style?: CSSProperties;
+  disabled?: boolean;
+  variant?: 'default' | 'outlined';
+  label?: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+};