[글쓰기][수정] About Me

src/components/Contact/index.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { copyLink } from "./style.module.css";
+
+export const Contact = () => {
+  const copyText = async (text) => {
+    if (!text || typeof text !== "string") throw new Error("copy text error");
+    try {
+      await navigator.clipboard.writeText(text);
+      alert("복사되었습니다.");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <h2>Contact</h2>
+      <ul>
+        <li>
+          Email.{" "}
+          <span
+            onClick={(event) => {
+              event.preventDefault();
+              copyText(event.target.textContent);
+            }}
+            className={copyLink}
+          >
+            [email protected]
+          </span>{" "}
+        </li>
+        <li>
+          {" "}
+          github.{" "}
+          <a
+            style={{ display: "inline", fontStyle: "italic" }}
+            href="https://github.com/pithesun"
+          >
+            pithesun
+          </a>
+        </li>
+      </ul>
+    </>
+  );
+};

src/components/Contact/style.module.css

@@ -0,0 +1,9 @@
+@import "../vars.css";
+
+.copy-link {
+  text-decoration: underline dotted;
+}
+
+.copy-link:hover {
+  cursor: pointer;
+}

src/components/WorkExperience/index.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { WorkExperienceRow } from "../WorkExperienceRow";
+import { row, rowLeft, rowRight } from "./style.module.css";
+
+export const WorkExperience = () => {
+  return (
+    <>
+      <h2>Work Experience</h2>
+      <div className={row}>
+        <div className={rowLeft}>
+          <h3>현대퓨처넷(현대아이티앤이).</h3>
+          <span>2022.1.3~</span>
+        </div>
+        <div className={rowRight}>
+          <WorkExperienceRow
+            title={"Hmall 상품상세(2022.01 ~ 현재)"}
+            description={"제품의 유지보수"}
+            didlist={[
+              `구매하기 엣지 케이스 처리`,
+              `API 과다 호출 개선`,
+              `온에어 영상 자동재생`,
+              `속도개선(불필요 소스 및 로직 파악 삭제)`,
+            ]}
+          />
+          <WorkExperienceRow
+            title={"Hmall 차세대 프로젝트 (2023.06~2024.01)"}
+            description={`레거시(jsp/Spring Framework)에서 react/nextjs, Spring Boot로 기술스택 및 설계
+              변경하는 차세대 프로젝트 및 안정화 작업에 참여`}
+            didlist={[
+              "상품상세 영역 IA 문서 작성 및 정책 정리",
+              "차세대 프로젝트 테스트 지원 (테스트 케이스 정의)",
+              `기존 기능 이관 개발(model-viewer 라이브러리를 활용한 glb 파일 노출, 재입고 알림 배치)`,
+              `실시간 혜택가 redis 설정 오류로 변경이 되지
+              않는 이슈/ Exception handling 오류로 인해 특정 API uuid 토큰
+              발행하지 못하는 이슈/ feign client 도입`,
+            ]}
+          />
+          <WorkExperienceRow
+            title={"AI상품평 분석 솔루션 도입 프로젝트(2023.01~2023.03)"}
+            description={`외부 ai분석 솔루션을 사용하여 도출된 키워드를 바탕으로
+              키워드별 상품평 리스트와 하이라이팅된 상품평 텍스트를 전달하여
+              상품평의 가독성 증대`}
+            didlist={[
+              `외부 솔루션을 사용하는만큼 서버 간 통신 포맷을 통일하기 위해 자사
+              상품평 포맷에 맞게끔 데이터 가공처리`,
+              "상품평 탭 진입 시 상품평 키워드 노출 및 키워드별 상품평 리스트를 전시",
+            ]}
+          />
+          {/* <ul>
+            <li>재입고 알림</li>
+          </ul>
+          <ul>
+            <li>베스트 상품평</li>
+            상단 리뉴얼
+          </ul> */}
+        </div>
+      </div>
+    </>
+  );
+};

src/components/WorkExperience/style.module.css

@@ -0,0 +1,14 @@
+.row {
+  display: "flex";
+}
+
+/* flexBasis: "16rem", flexShrink: 0, paddingRight: "12px" */
+.row-left {
+  flex-basis: 16rem;
+  flex-shrink: 0;
+  padding-right: 12px;
+}
+
+.row-right {
+  flex-grow: 1;
+}

src/components/WorkExperienceRow/index.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export const WorkExperienceRow = ({ title, description, didlist }) => {
+  return (
+    <ul>
+      <h3>{title}</h3>
+      <p>요약: {description}</p>
+      <div>
+        what I did :{" "}
+        {didlist?.map((did) => (
+          <li>{did}</li>
+        ))}
+      </div>
+    </ul>
+  );
+};

src/pages/about.js

@@ -1,18 +1,37 @@
 import * as React from "react";
 import Seo from "../components/Seo";
 import Layout from "../components/layout";
+import { Contact } from "../components/Contact";
+import { WorkExperience } from "../components/WorkExperience";
 
 const AboutPage = () => {
   return (
     <Layout pageTitle="My Blog Posts">
-      <h3>안녕하세요, 원주혜입니다</h3>
+      <h3>안녕하세요, 3년차 웹개발자 원주혜입니다</h3>
       <p style={{ lineHeight: "160%", overflowX: "hidden" }}>
-        웹 기술, 특히 프론트엔드 개발에 관심이 많아요.
-        <br /> 이곳에 한 자, 한 자 채워나가며 <strong>개발자 원주혜</strong>
-        로서의
-        <br />
-        발자취를 담아보려고 합니다.
+        3년간 Hmall의 웹 서비스 운영팀에서 주로 상품상세 페이지 내의 서비스를
+        담당하였습니다. <br />
+        운영팀 담당자로서 개발팀과 협업하여 크고 작은 프로젝트를 오픈하고
+        운영하였으며, <br />
+        운영 도중 생기는 이슈들에 대응하였습니다. <br />
+        최근에는 주로 프론트엔드 개발 기술에 관심이 많습니다.
       </p>
+      <Contact />
+      <WorkExperience />
+
+      <h2>Education</h2>
+      <table>
+        <colgroup>
+          <col style={{ width: "30%" }} />
+          <col />
+        </colgroup>
+        <tr>
+          <th>중앙대학교 2017.3~2022.2</th>
+          <td>
+            국어국문학과 졸업 <br /> 컴퓨터공학과 복수전공
+          </td>
+        </tr>
+      </table>
     </Layout>
   );
 };