feat: update configuration, styles, and components for improved UI and functionality

src/components/Projects.tsx

@@ -1,31 +1,45 @@
+"use client";
 import { SquareArrowOutUpRight } from 'lucide-react';
-import { url } from 'node:inspector';
-
-{/* <a href="https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />
-<a href="https://github.com/imnyang/today.isangjeong">today.isangjeong</a> */}
+import React from 'react';
 
 const projects = [
   {
     name: 'EPC 2025 Broadcast Manager',
-    url: 'https://www.youtube.com/@adofaigg',
-    desc: '얼불춤 끼얏호우',
+    url: 'https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD',
+    desc: 'ADOFAI is web-scale',
     detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
     tags: ['React', 'ElysiaJS'],
   },
   {
-    name: 'NYL',
-    url: 'https://nyl.ny64.kr',
-    desc: '상위 호환',
-    detail: '전국의 중고등학교의 시간표와 급식을 쉽게 확인할 수 있는 앱을 유지보수하고 있습니다.',
-    tags: ['React Native', 'ElysiaJS']
+    name: 'newsletter',
+    url: 'https://github.com/imnyang/newsletter',
+    desc: 'For Memos',
+    detail: '그저 이메일이 오면 Discord 웹훅으로 포워딩합니다.',
+    tags: ['Rust', 'IMAP']
+  },
+  {
+    name: 'memos-rss',
+    url: 'https://github.com/imnyang/memos-rss',
+    desc: 'For Memos',
+    detail: 'Discord 포럼 채널에 RSS 피드에 올라온 내용을 포워딩합니다.',
+    tags: ['Rust', 'Discord Bot', 'RSS']
+  },
+  {
+    name: 'today.isangjeong',
+    url: 'https://instagram.com/today.isangjeong',
+    desc: 'Instagram Bot',
+    detail: '매일 학교의 급식 메뉴를 자동으로 업로드하는 인스타그램 봇입니다.',
+    tags: ['TypeScript', 'Instagram', '@napi-rs/canvas']
   }
 ];
 
 export default function Projects() {
+  const [visibleCount, setVisibleCount] = React.useState(3);
+
   return (
     <section className="break-keep break-words w-full">
       <div className="space-y-8">
-        {projects.map((project, idx) => (
+        {projects.slice(0, visibleCount).map((project, idx) => (
           <div className="space-y-2" key={idx}>
             <div className="space-y-1">
               <div className="flex justify-between items-center gap-y-2 gap-x-4">
@@ -35,7 +49,7 @@ export default function Projects() {
                     <SquareArrowOutUpRight size={16} />
                   </a>
                 ) : (
-                  <span className="text-lg font-medium">{project.name}</span>
+                  <span className="text-lg">{project.name}</span>
                 )}
                 <span className="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
               </div>
@@ -51,6 +65,14 @@ export default function Projects() {
           </div>
         ))}
       </div>
+      {visibleCount < projects.length && (
+        <button
+          onClick={() => setVisibleCount(visibleCount + 3)}
+          className="mt-6 px-4 py-2 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80"
+        >
+          더 불러오기
+        </button>
+      )}
     </section>
   );
 }