♻️ Make stylelessA as global component

dohyun-ko · Sep 13, 2024 · e3b793c · e3b793c
1 parent d44369b
commit e3b793c
Show file tree

Hide file tree

Showing 24 changed files with 143 additions and 254 deletions.
diff --git a/.yarn/cache/prettier-npm-3.0.2-2cbecb9037-118b59ddb6.zip b/.yarn/cache/prettier-npm-3.0.2-2cbecb9037-118b59ddb6.zip
diff --git a/.yarn/cache/prettier-npm-3.3.3-e811f023f3-bc86043548.zip b/.yarn/cache/prettier-npm-3.3.3-e811f023f3-bc86043548.zip
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
-    "prettier": "^3.0.0",
+    "prettier": "^3.3.3",
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^2.4.0",

diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg
diff --git a/...es/home/printable/components/StylessA.tsx → src/components/StylessA.tsx b/...es/home/printable/components/StylessA.tsx → src/components/StylessA.tsx
@@ -1,19 +1,26 @@
+import LinkIcon from "@/assets/icons/link.svg";
+
 interface StylessAProps {
   href?: string;
   children: React.ReactNode;
+  hasIcon?: boolean;
 }
 
-const StylessA = ({ href, children }: StylessAProps) => {
+const StylessA = ({ href, children, hasIcon = true }: StylessAProps) => {
   return (
     <a
       href={href}
       target="_blank"
       rel="noopener noreferrer"
       style={{
         color: "inherit",
+        display: "inline-flex",
+        gap: "5px",
       }}
     >
       {children}
+
+      {href && hasIcon && <img src={LinkIcon} />}
     </a>
   );
 };

diff --git a/src/locales/en-US/index.ts b/src/locales/en-US/index.ts
@@ -39,6 +39,21 @@ export const main = {
   experience,
   sideProject: {
     sideProjects: [
+      {
+        name: "React-Atoms: React Component Library",
+        isImportant: true,
+        url: "https://github.com/dohyun-ko/react-atoms",
+        startedAt: "2023-07",
+        endedAt: "2023-07",
+        description:
+          "A library of React components I frequently use, which I published on npm. It follows the atomic design pattern and is documented using Storybook.",
+        whatIDid: [
+          "Developed React components",
+          "Documented components using Storybook",
+          "Published on npm",
+        ],
+        techStacks: ["React", "TypeScript", "RollUp", "Storybook", "npm"],
+      },
       {
         name: "2024 KPMG Ideathon: 🥉 3rd Place",
         isImportant: true,
@@ -88,21 +103,6 @@ export const main = {
         ],
         techStacks: ["React", "TypeScript", "Mapbox", "PWA"],
       },
-      {
-        name: "React-Atoms: React Component Library",
-        isImportant: true,
-        url: "https://github.com/dohyun-ko/react-atoms",
-        startedAt: "2023-07",
-        endedAt: "2023-07",
-        description:
-          "A library of React components I frequently use, which I published on npm. It follows the atomic design pattern and is documented using Storybook.",
-        whatIDid: [
-          "Developed React components",
-          "Documented components using Storybook",
-          "Published on npm",
-        ],
-        techStacks: ["React", "TypeScript", "RollUp", "Storybook", "npm"],
-      },
       {
         name: "Dutch: OOP Final Project",
         isImportant: true,
@@ -134,64 +134,4 @@ export const main = {
       },
     ],
   },
-  skill: {
-    skills: [
-      {
-        name: "React",
-        level: 5,
-      },
-      {
-        name: "TypeScript",
-        level: 4,
-      },
-      {
-        name: "JavaScript",
-        level: 4,
-      },
-      {
-        name: "HTML/CSS",
-        level: 4,
-      },
-      {
-        name: "Next.js",
-        level: 3,
-      },
-      {
-        name: "Python",
-        level: 3,
-      },
-      {
-        name: "NestJS",
-        level: 2,
-      },
-      {
-        name: "FastAPI",
-        level: 2,
-      },
-      {
-        name: "Flutter",
-        level: 2,
-      },
-      {
-        name: "C++",
-        level: 2,
-      },
-      {
-        name: "Kotlin",
-        level: 1,
-      },
-      {
-        name: "Docker",
-        level: 1,
-      },
-      {
-        name: "Rust",
-        level: 1,
-      },
-      {
-        name: "Assembly",
-        level: 1,
-      },
-    ],
-  },
 };
diff --git a/src/locales/ko-KR/experience.ts b/src/locales/ko-KR/experience.ts
@@ -16,7 +16,7 @@ const experience = {
           startedAt: "2024-01",
           endedAt: "2024-05",
           description:
-            "AI의 추론능력을 평가하는 벤치마크 Abstract and Reasoning Corpus([ARC](https://github.com/fchollet/ARC))의 사람 풀이 데이터 수집을 위한 툴 O2ARC 3.0을 개발했습니다. 기존 툴에서 수집된 데이터는 학습에 쓰기 어려운 형태였으며, 이를 유저가 취할 수 있는 행동을 제한해 AI 학습에 유리한 형태의 데이터 1만개 이상을 수집하였습니다. IJCAI 2024에 공동 1저자로 논문을 게재하였습니다.",
+            "AI의 추론능력을 평가하는 벤치마크 [ARC](https://github.com/fchollet/ARC) 사람 풀이 데이터 수집을 위한 툴 O2ARC 3.0을 개발했습니다. 기존 툴에서 수집된 데이터는 학습에 쓰기 어려운 형태였으며, 이를 유저가 취할 수 있는 행동을 제한해 AI 학습에 유리한 형태의 데이터 1만개 이상을 수집하였습니다. IJCAI 2024에 공동 1저자로 논문을 게재하였습니다.",
           whatIDid: [
             "전체적인 프론트엔드 UI 및 그리드 조작 로직 개발",
             "이벤트 관련 Nestjs API 및 role guard 개발",
@@ -44,7 +44,7 @@ const experience = {
       ],
     },
     {
-      name: "Sigor Inc.",
+      name: "스타트업 Sigor Inc.",
       isImportant: true,
       color: "#FEAA17",
       url: "https://introduce.sigor.company/",

diff --git a/src/locales/ko-KR/index.ts b/src/locales/ko-KR/index.ts
@@ -4,7 +4,7 @@ import experience from "./experience";
 export const main = {
   title: { developer: "개발자", name: "고도현 | Dohyun Ko" },
   introduction:
-    "스타트업에서 2년간 일하며 프론트엔드, 백엔드, 앱, 자동화, ML 등 다양한 분야를 주도적으로 작업했습니다. 이후 AI 연구실에서 일하며 데이터 수집 툴을 제작했고 UX 관련으로 논문을 작성했습니다. 개발인력이 늘 부족한 곳에서 일했기에 생산성과 유지보수의 편의성을 항상 중시합니다. 모노레포와 라이브러리를 제작해 생산성을 높이며 atomic 패턴과 Storybook로 제 다음 사람이 보기 쉬운 코드를 짜려 노력합니다.",
+    "스타트업에서 2년간 일하며 프론트엔드, 백엔드, 앱, 자동화, ML 등 다양한 분야를 주도적으로 작업했습니다. 이후 AI 연구실에서 일하며 데이터 수집 툴을 제작했고 UX 관련으로 논문을 작성했습니다. 개발인력이 늘 부족한 곳에서 일했기에 생산성과 유지보수의 편의성을 항상 중시합니다. 모노레포와 라이브러리를 제작해 생산성을 높이며 atomic 패턴과 Storybook로 동료가 보기 쉬운 코드를 짜려 노력합니다.",
   current,
   education: {
     attendedLectures: [
@@ -39,6 +39,21 @@ export const main = {
   experience,
   sideProject: {
     sideProjects: [
+      {
+        name: "React-Atoms: React Component Library",
+        isImportant: true,
+        url: "https://github.com/dohyun-ko/react-atoms",
+        startedAt: "2023-07",
+        endedAt: "2023-07",
+        description:
+          "개인적으로 자주 사용하는 React 컴포넌트를 모아 npm에 배포한 라이브러리입니다. atomic design 패턴을 따르며, Storybook을 사용해 문서화했습니다. 이 이력서와 개인 웹페이지에 사용중입니다.",
+        whatIDid: [
+          "React 컴포넌트 개발",
+          "Storybook을 사용한 컴포넌트 문서화",
+          "npm 배포",
+        ],
+        techStacks: ["React", "TypeScript", "RollUp", "Storybook", "npm"],
+      },
       {
         name: "2024 KPMG Ideathon: 🥉 3등",
         isImportant: true,
@@ -85,21 +100,6 @@ export const main = {
         ],
         techStacks: ["React", "TypeScript", "Mapbox", "PWA"],
       },
-      {
-        name: "React-Atoms: React Component Library",
-        isImportant: true,
-        url: "https://github.com/dohyun-ko/react-atoms",
-        startedAt: "2023-07",
-        endedAt: "2023-07",
-        description:
-          "개인적으로 자주 사용하는 React 컴포넌트를 모아 npm에 배포한 라이브러리입니다. atomic design 패턴을 따르며, Storybook을 사용해 문서화했습니다. 이 이력서와 개인 웹페이지에 사용중입니다.",
-        whatIDid: [
-          "React 컴포넌트 개발",
-          "Storybook을 사용한 컴포넌트 문서화",
-          "npm 배포",
-        ],
-        techStacks: ["React", "TypeScript", "RollUp", "Storybook", "npm"],
-      },
       {
         name: "Dutch: OOP Final Project",
         isImportant: true,
@@ -128,64 +128,4 @@ export const main = {
       },
     ],
   },
-  skill: {
-    skills: [
-      {
-        name: "React",
-        level: 5,
-      },
-      {
-        name: "TypeScript",
-        level: 4,
-      },
-      {
-        name: "JavaScript",
-        level: 4,
-      },
-      {
-        name: "HTML/CSS",
-        level: 4,
-      },
-      {
-        name: "Next.js",
-        level: 3,
-      },
-      {
-        name: "Python",
-        level: 3,
-      },
-      {
-        name: "NestJS",
-        level: 2,
-      },
-      {
-        name: "FastAPI",
-        level: 2,
-      },
-      {
-        name: "Flutter",
-        level: 2,
-      },
-      {
-        name: "C++",
-        level: 2,
-      },
-      {
-        name: "Kotlin",
-        level: 1,
-      },
-      {
-        name: "Docker",
-        level: 1,
-      },
-      {
-        name: "Rust",
-        level: 1,
-      },
-      {
-        name: "Assembly",
-        level: 1,
-      },
-    ],
-  },
 };
diff --git a/src/pages/home/printable/PrintablePage.tsx b/src/pages/home/printable/PrintablePage.tsx
@@ -14,15 +14,15 @@ const PrintablePage = () => {
 
         <Spacer height={"30px"} />
 
-        <SkillSection />
+        <ExperienceSection />
 
         <Spacer height={"30px"} />
 
-        <EducationSection />
+        <SkillSection />
 
         <Spacer height={"30px"} />
 
-        <ExperienceSection />
+        <EducationSection />
 
         <Spacer height={"30px"} />
 

diff --git a/src/pages/home/printable/components/OrganizationCard.tsx b/src/pages/home/printable/components/OrganizationCard.tsx
@@ -3,9 +3,9 @@ import Font from "@/types/Font";
 import Organization from "@/types/Organization";
 import { formatYearMonth } from "@/utils/dateFormats";
 import { Flex, Text } from "@dohyun-ko/react-atoms";
+import StylessA from "../../../../components/StylessA";
 import Card from "./Card";
 import ProjectCard from "./ProjectCard";
-import StylessA from "./StylessA";
 
 interface OrganizationCardProps {
   organization: Organization;

diff --git a/src/pages/home/printable/components/ProjectCard.tsx b/src/pages/home/printable/components/ProjectCard.tsx
@@ -5,7 +5,7 @@ import Project from "@/types/Project";
 import { formatYearMonth } from "@/utils/dateFormats";
 import { Flex, Text } from "@dohyun-ko/react-atoms";
 import ReactMarkdown from "react-markdown";
-import StylessA from "./StylessA";
+import StylessA from "../../../../components/StylessA";
 
 interface ProjectCardProps {
   project: Project;

diff --git a/src/pages/home/printable/components/PublicationCard.tsx b/src/pages/home/printable/components/PublicationCard.tsx
@@ -4,7 +4,7 @@ import Publication from "@/types/Publication";
 import { formatYearMonth } from "@/utils/dateFormats";
 import { Flex, Text } from "@dohyun-ko/react-atoms";
 import ReactMarkdown from "react-markdown";
-import StylessA from "./StylessA";
+import StylessA from "../../../../components/StylessA";
 
 interface PublicationCardProps {
   publication: Publication;

diff --git a/src/pages/home/printable/sections/CurrentSection.tsx b/src/pages/home/printable/sections/CurrentSection.tsx