feat: prettier index

전진호 · 전진호 · commit 095b3b4eeda1 · 2024-09-11T00:14:55.000+09:00
diff --git a/.scripts/index-page-builder.js b/.scripts/index-page-builder.js
@@ -8,76 +8,79 @@ const baseDir = "./build";
 let htmlContent = `
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project Index</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 20px;
-      background-color: #f9f9f9;
-      color: #333;
-    }
-    h1 {
-      text-align: center;
-      color: #4CAF50;
-    }
-    ul {
-      list-style-type: none;
-      padding-left: 20px;
-    }
-    ul ul {
-      padding-left: 20px;
-      border-left: 1px solid #ccc;
-    }
-    li {
-      margin: 5px 0;
-    }
-    a {
-      text-decoration: none;
-      color: #4CAF50;
-      font-weight: bold;
-    }
-    a:hover {
-      color: #333;
-    }
-    .folder::before {
-      content: "📁 ";
-      font-size: 16px;
-    }
-    .file::before {
-      content: "📄 ";
-      font-size: 16px;
-    }
-    .container {
-      max-width: 600px;
-      margin: 0 auto;
-      background-color: #fff;
-      padding: 20px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>Project Index</h1>
-    <ul>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link
+      href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <title>KUIT FE</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+        background-color: #fff;
+      }
+      h1 {
+        color: #1a1a1a;
+      }
+      ul {
+        list-style-type: none;
+      }
+      ul ul {
+        padding-left: 20px;
+      }
+      li {
+        margin: 10px 0;
+      }
+      .folder {
+        font-size: 14px;
+        color: #1a1a1a;
+      }
+      a {
+        text-decoration: none;
+        color: #2c2c2c;
+      }
+      .container {
+        max-width: 600px;
+        margin: 0 auto;
+        background-color: #fff;
+        padding: 20px;
+      }
+      .tossface {
+        font-family: Tossface;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Kuit Frontend Missions ✨</h1>
+      <ul>
 `;
 
 // 주차별로 디렉토리를 탐색
 const weeks = fs.readdirSync(baseDir);
 weeks.forEach((week) => {
   const weekPath = path.join(baseDir, week);
   if (fs.lstatSync(weekPath).isDirectory()) {
-    htmlContent += `<li class="folder">${week}<ul>\n`;
+    htmlContent += `<li class="folder">
+          <span class="tossface">📂</span> ${week}
+          <ul>\n`;
 
     // 주차별 하위 프로젝트 탐색
     const projects = fs.readdirSync(weekPath);
     projects.forEach((project) => {
       const projectPath = path.join(weekPath, project);
       if (fs.lstatSync(projectPath).isDirectory()) {
-        htmlContent += `<li class="file"><a href="/${week}/${project}">${project}</a></li>\n`;
+        htmlContent += `<li class="tossface">
+              <a href="KUIT4_Web-FrontEnd/${week}/${project}"
+                ><span class="tossface">📄</span> ${project}</a
+              >
+            </li>\n`;
       }
     });
 
