해결결

src/app/components/Timeline.tsx

@@ -1,48 +0,0 @@
-const events = [
-    { date: '2024-12-07', description: '??? ???? ?? ? ??', link: 'https://ncf.or.kr/' },
-    { date: '2024-12-07', description: '??? ???? ?? ?? ??', link: 'https://ncf.or.kr/' },
-    { date: '2024-08-18', description: '29회 해킹캠프 CTF 1위 (고민중독)', link: 'https://ctf.hackingcamp.org/' },
-    { date: '2024-08-05', description: '29회 해킹캠프 선발', link: 'https://hackingcamp.org/' },
-    { date: '2024-08-01', description: '글로벌 스타트업 학교 2기 베트남 해외 연수 데모데이 대상 (1위)', link: 'http://ncf.or.kr' },
-    { date: '2024-05-16', description: '글로벌 스타트업 학교 2기 합격', link: 'http://ncf.or.kr' },
-    { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 LG 탐색상 수상', link: 'https://lgaiyouthcamp.or.kr/' },
-    { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 수료', link: 'https://lgaiyouthcamp.or.kr/' },
-    { date: '2024-04-22', description: '@isangjeong.today (인천상정중학교의 오늘 급식)', link: 'https://www.instagram.com/isangjeong.today/' },
-    { date: '2024-04-06', description: 'TimeTable (Sekai 개조판 배포) [API 유실]', link: 'https://timeline.imnyang.xyz' },
-    { date: '2024-03-24', description: 'Dreamhack #133', link: 'https://dreamhack.io/users/40116/wargame' },
-    { date: '2024-03-24', description: 'Ubuntu Mirror', link: 'https://launchpad.net/ubuntu/+mirror/mirror.imnyang.xyz-release' },
-    { date: '2024-03-24', description: '내 목소리로 AI Cover 만들기', link: 'https://colab.research.google.com/drive/1a4G4hD9huBeGRZhEL2HNDMpqSuf4y61k?usp=sharing' },
-    { date: '2024-01-26', description: 'Fastapi를 통해 API 제작', link: 'https://github.com/imnyang/api' },
-    { date: '2023-12-20', description: 'LG AI 청소년 캠프 1기 합격' },
-    { date: '2023-11-14', description: '인천상정중학교 2023학년도 SW 문제 해결 활동 우수상(2위) 수여' },
-    { date: '2023-11-01', description: '블로그 시작', link: 'https://blog.imnyang.xyz' },
-    { date: '2023-10-12', description: '나는 로컬 시간을 알고 싶다', link: 'https://time.imnyang.xyz/' },
-    { date: '2023-09-24', description: 'sqlr.kr 기획 및 초기 개발', link: 'https://github.com/sqlare/sqlr.kr/tree/main' },
-    { date: '2023-09-02', description: '선린인터넷고등학교 제6회 소프트웨어나늠축제 Layer7 부서 과정 이수' },
-    { date: '2023-08-26', description: '컴시간 시간표를 더 나아보이게 Sekai', link: 'https://github.com/imnyang/Sekai' },
-    { date: '2023-08-23', description: '디스코드 통화방 녹음', link: 'https://github.com/imnyang/discord-voice-rec'},
-    { date: '2023-07-24', description: '한국정보기술연구원이 주도하는 사이버 가디언즈 보안캠프 수료' },
-    { date: '2023-03-20', description: '디스코드에서 대화형 인공지능 Siru 제작', link: 'https://github.com/imnyang/siru' },
-    { date: '2023-05-15', description: '한국 코드페어 예선 진출' },
-    { date: '2023-03-14', description: '타이머', link: 'https://github.com/imnyang/imnyang-timer' },
-    { date: '2022-12-20', description: '2022 SW영재 창작대회 은상 수상'},
-    { date: '2022-09-27', description: '2022 삼성 주니어 SW 창작대회 본선 진출' },
-    { date: '2022-05-23', description: '2022학년도 석정초SW영재학급 첫 수업' },
-    { date: '2022-07-26', description: '제 14회 맑은하늘 맑은웃음 공모전에서 맑은웃음상 수여' },
-    { date: '2021-11-14', description: 'Become a ZEPETO Creator 이수' },
-    { date: '2021-05-19', description: '소프트웨어와 전자신문이 주관한 소프트웨어재단 꿈찾기 캠프 이수' },
-    { date: '2018-01-27', description: '제4회 맑은하늘 맑은웃음 어린이 문예공모전에서 위닉스상(2위) 수여' },
-];
-
-export default function Timeline() {
-    return (
-        <div>
-            {events.map((event, index) => (
-                <div key={index} className="flex flex-col gap-4">
-                    <p className="tabular-nums">{event.date}</p>
-                    {event.link ? <a href={event.link}>{event.description}</a> : event.description}
-                </div>
-            ))}
-        </div>
-    );
-}

src/app/components/repos.tsx

@@ -1,24 +0,0 @@
-"use client"
-import { useEffect, useState } from "react";
-
-export default function Repos() {
-    const [userInfo, setUserInfo] = useState({ public_repos: 0, followers: 0 });
-
-    useEffect(() => {
-      async function fetchUserInfo() {
-        try {
-          const response = await fetch("https://api.github.com/users/imnyang");
-          const data = await response.json();
-          setUserInfo({ public_repos: data.public_repos, followers: data.followers });
-        } catch (error) {
-          console.error("Error fetching user info:", error);
-        }
-      }
-  
-      fetchUserInfo();
-    }, []);
-
-    return (
-        <>{userInfo.public_repos}</>
-    )
-}

src/app/globals.css

@@ -1,17 +1,12 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
-@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-    --bg: var(--ctp-mocha-base);
-    --fg: var(--ctp-mocha-crust);
-    --primary: var(--ctp-mocha-lavender);
-    --secondary: var(--ctp-mocha-mauve);
-    --accent: var(--ctp-mocha-peach);
-    --accent-foreground: var(--ctp-mocha-text);
+    --bg: #101010;
+    --fg: #fff;
 }
 
 .main {

src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+import { Provider } from "@/components/ui/provider"
+
 export const metadata: Metadata = {
   title: "imnyang",
   description: "imnyang's portfolio",
@@ -22,7 +24,7 @@ export default function RootLayout({
       <body
         className={`antialiased`}
       >
-        {children}
+        <Provider>{children}</Provider>
       </body>
     </html>
   );

src/app/page.tsx

@@ -1,13 +1,22 @@
 'use client';
 
-import { useEffect, useState, forwardRef, Ref, Suspense } from "react";
+import React, { useEffect, useState, forwardRef, Ref, Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import Tippy from "@tippyjs/react";
-import "tippy.js/dist/tippy.css";
 import "./index.css";
 
 import { Link as LinkIcon  } from 'lucide-react';
+import { Tooltip } from "@/components/ui/tooltip";
+
+import { Icon, Stack } from "@chakra-ui/react"
+import {
+  AccordionRoot,
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+} from "@/components/ui/accordion"
+import { Text } from "@chakra-ui/react"
+import { Heart, ChartBar } from "lucide-react";
 
 const events = [
   { date: '2024-12-07', description: '글로벌 스타트업 학교 팀 1위', link: 'https://blog.imnyang.xyz/blog/gss' },
@@ -124,8 +133,8 @@ export default function Home() {
   }
 
   const SocialLink = ({ href, icon, tooltip }: SocialLinkProps) => (
-    <Tippy content={tooltip} placement="bottom">
-      <TippyWrapper
+    <Tooltip content={tooltip} openDelay={100} positioning={{placement: "bottom"}}>
+      <Link
         href={href}
         style={{
           color: "#b2a1af",
@@ -136,10 +145,12 @@ export default function Home() {
         }}
       >
         <i className={icon} style={{ fontSize: "24px" }} />
-      </TippyWrapper>
-    </Tippy>
+      </Link>
+    </Tooltip>
   );
 
+  const [value, setValue] = useState(["about"])
+
   return (
     <Suspense fallback={<div>Loading...</div>}>
       <div className="main">
@@ -156,23 +167,38 @@ export default function Home() {
             <SocialLink href="https://x.com/fur_local" icon="fa-brands fa-x-twitter" tooltip="X" />
           </div>
         </div>
-        <div className="timeline text-white">
-          {events.map((event, index) => (
-            <div key={index} className="flex flex-col mb-3">
-              <p className="tabular-nums">{event.date}</p>
-              <div className="flex items-center">
-                {event.link && (
-                  <Link href={event.link} className="flex gap-2">
-                    <LinkIcon width={18} />
-                    <span>{event.description}</span>
-                  </Link>
-                )}
-                {!event.link && <span className="ml-7">{event.description}</span>}
-              </div>
-            </div>
-          ))}
-        </div>
+          <Stack width="full" maxW="400px" mx="auto">
+            <AccordionRoot multiple collapsible value={value} onValueChange={(e) => setValue(e.value)}>
+              {items.map((item) => (
+                <AccordionItem key={item.value} value={item.value}>
+                  <AccordionItemTrigger style={{ marginBottom: "0.5rem" }}>
+                    <Icon fontSize="lg" color="fg.subtle">
+                      {item.icon}
+                    </Icon>
+                    {item.title}
+                  </AccordionItemTrigger>
+                  <AccordionItemContent maxH="250px" overflow="auto">{item.content}</AccordionItemContent>
+                </AccordionItem>
+              ))}
+            </AccordionRoot>
+          </Stack>
       </div>
     </Suspense>
   );
-}
+}
+
+const items = [
+  {
+    value: "about",
+    icon: <Heart />,
+    title: "About",
+    content:
+      "사람이래요.",
+  },
+  {
+    value: "timeline",
+    icon: <ChartBar />,
+    title: "Timeline",
+    content: <div className="timeline text-white">{events.map((event, index) => (<div key={index} className="flex flex-col gap-2 mb-3"><p className="tabular-nums text-base text-gray-400">{event.date}</p><div className="flex items-center">{event.link && (<Link href={event.link} className="flex gap-2 text-base"><span className="text-base">{event.description}</span><LinkIcon width={18} /></Link>)}{!event.link && <span className="text-base">{event.description}</span>}</div></div>))}</div>,
+  },
+]

src/app/timeline/page.tsx

@@ -1,13 +1,6 @@
-import Link from 'next/link';
-import Timeline from '../components/Timeline';
-
-export default function Timeline_Page() {
-    return (
-        <div style={{ display: 'flex', overflow: 'auto', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: 'white', width: '100vw', height: '100vh', background: '#101020' }}>
-            <div style={{height: '70%', overflow: 'auto'}}>
-                <Link href='/'>🏠 Back</Link>
-                <Timeline />
-            </div>
-        </div>
-    );
+import { redirect } from 'next/navigation'
+ 
+ 
+export default async function TimelinePage( ) {
+    redirect('/')
 }