From 38d1fcb0176a9d370422b5db86327dc7cb3a8595 Mon Sep 17 00:00:00 2001 From: 1ilsang <1ilsang@naver.com> Date: Thu, 28 Mar 2024 18:34:21 +0900 Subject: [PATCH] dump --- _data/company.ts | 134 --------- src/features/about/activity/Card.tsx | 4 +- src/features/about/work/Container.tsx | 2 +- src/features/about/work/card/Container.tsx | 2 +- .../content/{Project.tsx => Container.tsx} | 44 ++- .../about/work/card/content/LeftSide.tsx | 49 ++-- .../about/work/card/content/ProjectDate.tsx | 2 +- .../about/work/card/content/ProjectDetail.tsx | 29 ++ .../work/card/content/description/Bleet.tsx | 34 --- .../work/card/content/description/Blind.tsx | 28 -- .../work/card/content/description/LPC.tsx | 11 - .../card/content/description/LdsCalendar.tsx | 38 --- .../card/content/description/MyBiskit.tsx | 50 ---- .../work/card/content/description/OAL.tsx | 37 --- .../work/card/content/description/OAP.tsx | 42 --- .../work/card/content/description/Place.tsx | 39 --- .../work/card/content/description/Stove.tsx | 29 -- .../work/card/content/description/UVP.tsx | 99 ------- .../work/card/content/description/VLC.tsx | 11 - src/features/about/work/data/blind/index.ts | 16 ++ .../about/work/data/blind/projects.tsx | 88 ++++++ src/features/about/work/data/company.ts | 11 + src/features/about/work/data/line/index.ts | 15 + .../about/work/data/line/projects.tsx | 266 ++++++++++++++++++ .../about/work/data/smileGate/index.ts | 16 ++ .../about/work/data/smileGate/projects.tsx | 29 ++ src/features/about/work/models.ts | 9 + src/features/styles/common.scss | 7 +- src/features/styles/ui/about/index.scss | 58 ++-- src/features/styles/ui/about/project.scss | 11 +- 30 files changed, 570 insertions(+), 640 deletions(-) delete mode 100644 _data/company.ts rename src/features/about/work/card/content/{Project.tsx => Container.tsx} (53%) create mode 100644 src/features/about/work/card/content/ProjectDetail.tsx delete mode 100644 src/features/about/work/card/content/description/Bleet.tsx delete mode 100644 src/features/about/work/card/content/description/Blind.tsx delete mode 100644 src/features/about/work/card/content/description/LPC.tsx delete mode 100644 src/features/about/work/card/content/description/LdsCalendar.tsx delete mode 100644 src/features/about/work/card/content/description/MyBiskit.tsx delete mode 100644 src/features/about/work/card/content/description/OAL.tsx delete mode 100644 src/features/about/work/card/content/description/OAP.tsx delete mode 100644 src/features/about/work/card/content/description/Place.tsx delete mode 100644 src/features/about/work/card/content/description/Stove.tsx delete mode 100644 src/features/about/work/card/content/description/UVP.tsx delete mode 100644 src/features/about/work/card/content/description/VLC.tsx create mode 100644 src/features/about/work/data/blind/index.ts create mode 100644 src/features/about/work/data/blind/projects.tsx create mode 100644 src/features/about/work/data/company.ts create mode 100644 src/features/about/work/data/line/index.ts create mode 100644 src/features/about/work/data/line/projects.tsx create mode 100644 src/features/about/work/data/smileGate/index.ts create mode 100644 src/features/about/work/data/smileGate/projects.tsx diff --git a/_data/company.ts b/_data/company.ts deleted file mode 100644 index 50900b09..00000000 --- a/_data/company.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { - Company, - CompanyName, - JobPosition, - ProjectName, -} from '~/about/work/models'; - -const LINE: Company = { - company: CompanyName.LINE, - companyHref: 'https://www.linkedin.com/company/line-messenger/', - companyLogoUrl: - 'https://github.com/1ilsang/dev/assets/23524849/81800e67-b54f-41e8-a232-520c99f465c8', - position: JobPosition.FE, - workStartDate: 1596985200000, - projectList: [ - { - name: ProjectName.LPC, - tags: ['Vite', 'pnpm', 'React-Query'], - startDate: 1709218800000, - }, - { - name: ProjectName.UVP, - tags: [ - 'HTMLVideo', - 'Preact10', - 'Zustand', - 'Turborepo', - 'Storybook', - 'Cypress', - 'Webpack', - ], - startDate: 1604156400000, - endDate: 1709218800000, - }, - { - name: ProjectName.VLC, - tags: ['React18', 'React-Testing-Library', 'React-Query', 'WebSocket'], - url: 'https://oa-live.line.biz/', - startDate: 1686495600000, - endDate: 1709218800000, - }, - { - name: ProjectName.OAL, - tags: [ - 'React18', - 'React-Testing-Library', - 'React-Query', - 'WebSocket', - 'MSW', - 'Chart.js', - ], - url: 'https://oa-live.line.biz/', - startDate: 1659279600000, - endDate: 1709218800000, - }, - - { - name: ProjectName.LDS_CALENDAR, - tags: ['React18', 'Vite'], - startDate: 1680274800000, - endDate: 1688137200000, - }, - { - name: ProjectName.PLACE, - tags: ['Next12', 'Redux', 'Redux-Saga', 'Swiper'], - url: 'https://www.youtube.com/watch?v=-hmsdx_qoiA', - startDate: 1601478000000, - endDate: 1617980400000, - }, - { - name: ProjectName.OAP, - tags: ['Next12'], - url: 'https://creative.line.me/blog/91', - startDate: 1597071600000, - endDate: 1625929200000, - }, - ], -}; - -const BLIND: Company = { - company: CompanyName.Blind, - companyHref: 'https://www.linkedin.com/company/teamblind/', - companyLogoUrl: - 'https://github.com/1ilsang/dev/assets/23524849/abdc15c8-571c-430c-a3c3-f2473aedd201', - position: JobPosition.FULL_STACK, - workStartDate: 1564930800000, - workEndDate: 1596726000000, - projectList: [ - { - name: ProjectName.Bleet, - tags: ['Node.js', 'MySQL', 'Swagger', 'Firebase'], - url: 'https://www.teambleet.com', - startDate: 1588258800000, - endDate: 1596726000000, - }, - { - name: ProjectName.MyBiskit, - tags: ['Nuxt2', 'MySQL'], - startDate: 1572534000000, - endDate: 1588172400000, - }, - { - name: ProjectName.Blind, - tags: ['Node.js', 'PHP', 'Docker', 'MySQL', 'Redis'], - startDate: 1564930800000, - endDate: 1577631600000, - url: 'https://www.teamblind.com/', - }, - ], -}; - -const SmileGate: Company = { - company: CompanyName.Smilegate, - companyHref: 'https://www.linkedin.com/company/smilegate/', - companyLogoUrl: - 'https://github.com/1ilsang/dev/assets/23524849/932fade0-e7bf-4fdc-b7a8-c346fedbb76d', - workStartDate: 1520780400000, - workEndDate: 1525791600000, - position: `${JobPosition.FE}(intern)`, - projectList: [ - { - name: ProjectName.Stove, - tags: ['Vue2'], - startDate: 1520780400000, - endDate: 1525791600000, - }, - ], -}; - -export const companyData: Company[] = [ - { ...LINE }, - { ...BLIND }, - { ...SmileGate }, -]; diff --git a/src/features/about/activity/Card.tsx b/src/features/about/activity/Card.tsx index 151f5eb8..8de5e4ad 100644 --- a/src/features/about/activity/Card.tsx +++ b/src/features/about/activity/Card.tsx @@ -14,8 +14,8 @@ const ActivityCardContainer: FunctionComponent = ({ list, }) => { return ( -
-
+
+
{year}
diff --git a/src/features/about/work/Container.tsx b/src/features/about/work/Container.tsx index 5274743d..3bcfaa39 100644 --- a/src/features/about/work/Container.tsx +++ b/src/features/about/work/Container.tsx @@ -2,7 +2,7 @@ import { FunctionComponent, useState } from 'react'; import WorkCardContainer from './card/Container'; -import { companyData } from '~data/company'; +import { companyData } from '~/about/work/data/company'; type WorkContainerProps = { format: string; diff --git a/src/features/about/work/card/Container.tsx b/src/features/about/work/card/Container.tsx index 8868fa8c..e09c79df 100644 --- a/src/features/about/work/card/Container.tsx +++ b/src/features/about/work/card/Container.tsx @@ -4,7 +4,7 @@ import { Company } from '../models'; import LeftSide from './content/LeftSide'; import ContentHeadline from './content/Headline'; -import CompanyContentProject from './content/Project'; +import CompanyContentProject from './content/Container'; export type WorkCardContainerProps = Company & { toggleOpenAll: boolean; diff --git a/src/features/about/work/card/content/Project.tsx b/src/features/about/work/card/content/Container.tsx similarity index 53% rename from src/features/about/work/card/content/Project.tsx rename to src/features/about/work/card/content/Container.tsx index d470cc7b..b3f92c3a 100644 --- a/src/features/about/work/card/content/Project.tsx +++ b/src/features/about/work/card/content/Container.tsx @@ -1,18 +1,10 @@ -import { FunctionComponent, MouseEventHandler, useMemo, useState } from 'react'; +import { FunctionComponent, MouseEventHandler, useState } from 'react'; -import { Project, ProjectName } from '../../models'; +import { Project } from '../../models'; -import UVP from './description/UVP'; -import OAL from './description/OAL'; -import LdsCalendar from './description/LdsCalendar'; -import Place from './description/Place'; -import OAP from './description/OAP'; -import Bleet from './description/Bleet'; -import MyBiskit from './description/MyBiskit'; -import Blind from './description/Blind'; -import Stove from './description/Stove'; import Tags from './Tags'; import ProjectDate from './ProjectDate'; +import ProjectDetail from './ProjectDetail'; import ExternalLink from '~/shared/components/ExternalLink'; @@ -20,14 +12,18 @@ export type CompanyContentProjectProps = Project & { format?: string; }; -const CompanyContentProject: FunctionComponent = ({ - name, - url, - tags, - startDate, - endDate, - format = 'yyyy.MM', -}) => { +const CompanyContentProject: FunctionComponent = ( + props, +) => { + const { + name, + url, + tags, + startDate, + endDate, + summary, + format = 'yyyy.MM', + } = props; const [open, setOpen] = useState(false); const handleDetailClick: MouseEventHandler = () => { @@ -55,15 +51,7 @@ const CompanyContentProject: FunctionComponent = ({
- {name === ProjectName.OAL && } - {name === ProjectName.LDS_CALENDAR && } - {name === ProjectName.UVP && } - {name === ProjectName.PLACE && } - {name === ProjectName.OAP && } - {name === ProjectName.Bleet && } - {name === ProjectName.MyBiskit && } - {name === ProjectName.Blind && } - {name === ProjectName.Stove && } +
{url && openClassName !== 'hide' && ( = ({ - href, - logoUrl, - alt, - workStartDate, - workEndDate, - format = 'yyyy.MM', -}) => { - return ( -
- - {alt} - - -
- ); -}; +const LeftSide: FunctionComponent = memo( + ({ href, logoUrl, alt, workStartDate, workEndDate, format = 'yyyy.MM' }) => { + return ( +
+ + {alt} + + +
+ ); + }, +); export default LeftSide; diff --git a/src/features/about/work/card/content/ProjectDate.tsx b/src/features/about/work/card/content/ProjectDate.tsx index 5ee50b1d..68fac4d4 100644 --- a/src/features/about/work/card/content/ProjectDate.tsx +++ b/src/features/about/work/card/content/ProjectDate.tsx @@ -1,6 +1,6 @@ import { FunctionComponent, memo } from 'react'; -import { CompanyContentProjectProps } from './Project'; +import { CompanyContentProjectProps } from './Container'; import DateFormatter from '~/shared/components/DateFormatter'; diff --git a/src/features/about/work/card/content/ProjectDetail.tsx b/src/features/about/work/card/content/ProjectDetail.tsx new file mode 100644 index 00000000..d9f001f8 --- /dev/null +++ b/src/features/about/work/card/content/ProjectDetail.tsx @@ -0,0 +1,29 @@ +import { FunctionComponent, memo } from 'react'; + +import { Project } from '~/about/work/models'; +import DynamicImage from '~/shared/components/DynamicImage'; + +type ProjectDetailProps = Project; + +const ProjectDetail: FunctionComponent = memo( + ({ summary, body, img }) => { + return ( + <> + {img && ( + + )} +
+

{summary}

+
    {body}
+
+ + ); + }, +); + +export default ProjectDetail; diff --git a/src/features/about/work/card/content/description/Bleet.tsx b/src/features/about/work/card/content/description/Bleet.tsx deleted file mode 100644 index 79e14531..00000000 --- a/src/features/about/work/card/content/description/Bleet.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const Bleet: FunctionComponent = () => { - return ( - <> - -
-

- Bleet은 블라인드 기반 회사인증을 통한 직장인 소개팅 어플입니다. - 전/현 직장 및 전 애인 회사까지 모두 차단되는 특징이 있습니다. -

-
    - - 메인 서버 개발자로 Node.js를 활용해 API를 개발. Beta 오픈까지 작업 - -
  • - 블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업 - 주도적으로 진행 -
    • -
  • Firebase를 통한 채팅 기능 개발
    • -
  • Swagger 및 문서화를 통해 클라이언트 호출이 용이하도록 함
    • -
-
- - ); -}; - -export default Bleet; diff --git a/src/features/about/work/card/content/description/Blind.tsx b/src/features/about/work/card/content/description/Blind.tsx deleted file mode 100644 index 1ff58172..00000000 --- a/src/features/about/work/card/content/description/Blind.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const Blind: FunctionComponent = () => { - return ( - <> - -
-

- Blind는 전 세계 기업의 지속 가능한 기업 문화를 위한  - 직장인 익명 플랫폼입니다. -

-
    - 블라인드 어드민 및 서버 API를 개발 -
  • 어드민 페이지 개선 작업 진행
    • -
  • 신고하기 및 패널티 등의 API를 개선
    • -
-
- - ); -}; - -export default Blind; diff --git a/src/features/about/work/card/content/description/LPC.tsx b/src/features/about/work/card/content/description/LPC.tsx deleted file mode 100644 index 0bb09821..00000000 --- a/src/features/about/work/card/content/description/LPC.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FunctionComponent } from 'react'; - -const LPC: FunctionComponent = () => { - return ( - <> -

LandPress Content 개발

- - ); -}; - -export default LPC; diff --git a/src/features/about/work/card/content/description/LdsCalendar.tsx b/src/features/about/work/card/content/description/LdsCalendar.tsx deleted file mode 100644 index f0d0f913..00000000 --- a/src/features/about/work/card/content/description/LdsCalendar.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const LdsCalendar: FunctionComponent = () => { - return ( - <> - -
-

- LDS Calendar는 라인 디자인 시스템을 적용한 리액트{' '} - 캘린더 컴포넌트 라이브러리입니다. -

-
    - - 사내 공용 캘린더 라이브러리의 부재로 자발적으로 시작한 프로젝트 - -
  • - 다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발 -
      -
    • 다국어 및 Timezone 설정 가능
      • -
    • - 모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션을 제공, 유연한 - 캘린더가 될 수 있도록 개발 -
      • -
    -
    • -
-
- - ); -}; - -export default LdsCalendar; diff --git a/src/features/about/work/card/content/description/MyBiskit.tsx b/src/features/about/work/card/content/description/MyBiskit.tsx deleted file mode 100644 index dbd3779b..00000000 --- a/src/features/about/work/card/content/description/MyBiskit.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const MyBiskit: FunctionComponent = () => { - return ( - <> - -
-

- 마이비스킷은 직장인을 위한 온라인 취미클래스 플랫폼입니다. 정규 - 및 원데이 클래스를 다양한 쿠폰과 정기 결제로 수강할 수 있습니다. -

-
    - Nuxt.js로 페이지 및 서버 개발 -
  • 다양한 프로모션 페이지 및 상세 페이지 개발
    • -
  • - 쿠폰 및 결제 API 개선/개발 -
      -
    • - 테스트 코드를 적용해 리팩토링 과정의 사이드 이펙트를 간소화 - 하고자 노력 -
      • -
    • 트랜잭션 적용 및 결제 플로우 간소화 작업을 진행
      • -
    -
    • -
  • - 지표 분석을 위한 크롤러를 개발 -
      -
    • - Puppeteer를 활용해 추출한 데이터를 JSON으로 가공후 S3에 저장. - 차트 페이지를 제공 -
      • -
    • - 사내 엔지니어링 세미나 "주니어의 반란"을 주최, 개발 - 여정을 공유 -
      • -
    -
    • -
-
- - ); -}; - -export default MyBiskit; diff --git a/src/features/about/work/card/content/description/OAL.tsx b/src/features/about/work/card/content/description/OAL.tsx deleted file mode 100644 index 47a67921..00000000 --- a/src/features/about/work/card/content/description/OAL.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const OAL: FunctionComponent = () => { - return ( - <> - -
-

- OA LIVE CMS는 Official Account 유저들이 라이브 방송을 세팅할 수 - 있는 CMS 페이지입니다. -

-
    -
  • - 방송 디테일 페이지 개발 -
      -
    • 실시간 채팅을 위한 WebSocket 개발
      • -
    -
    • -
  • - 시각화 페이지 개발 -
      -
    • Chart.js를 활용해 통계 차트 및 테이블 영역 개발
      • -
    -
    • -
-
- - ); -}; - -export default OAL; diff --git a/src/features/about/work/card/content/description/OAP.tsx b/src/features/about/work/card/content/description/OAP.tsx deleted file mode 100644 index 0418d137..00000000 --- a/src/features/about/work/card/content/description/OAP.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const OAP: FunctionComponent = () => { - return ( - <> - -
-

- Official Account Profile 페이지는 공식 계정을 운영하는{' '} - 비즈니스 오너의 정보를 보다 쉽게 찾을 수 있도록 도와주는 페이지 - 입니다. -

-
    -
  • - Traffic, Nearby, Takeout 등의 플러그인 개발 -
      -
    • 플러그인의 중복된 코드를 개선
      • -
    • - 데이터 이관 작업을 통해 서로 다른 페이지의 싱크 맞추는 작업 진행 -
      • -
    -
    • -
  • - React {'->'} Next.js 리팩터링 진행 -
      -
    • 커스텀 서버 개발
      • -
    -
    • -
-
- - ); -}; - -export default OAP; diff --git a/src/features/about/work/card/content/description/Place.tsx b/src/features/about/work/card/content/description/Place.tsx deleted file mode 100644 index 60e8d765..00000000 --- a/src/features/about/work/card/content/description/Place.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { FunctionComponent } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; - -const Place: FunctionComponent = () => { - return ( - <> - -
-

- LINE PLACE는 유저의 위치 기반으로 음식점 추천 및 검색 할 수 - 있는 서비스입니다. -

-
    -
  • - Home 화면 개발 -
      -
    • 위치 기반 API Flow 정리
      • -
    -
    • -
  • Profile/Settings 개발
    • -
  • - Koa 커스텀 서버 개발 -
      -
    • nGrinder를 활용 Stress test 진행후 서버 가용량 산출
      • -
    -
    • -
-
- - ); -}; - -export default Place; diff --git a/src/features/about/work/card/content/description/Stove.tsx b/src/features/about/work/card/content/description/Stove.tsx deleted file mode 100644 index 27a3e003..00000000 --- a/src/features/about/work/card/content/description/Stove.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FunctionComponent } from 'react'; - -import ExternalLink from '~/shared/components/ExternalLink'; - -const Stove: FunctionComponent = () => { - return ( -
-

유저 타임라인 개발

-
    - 출시 예정 게임 유저 타임라인 개발 -
  • 방명록 CRUD 기능 개발
    • -
  • 댓글 / 신고하기 기능 개발
    • -
  • - 재밌고 즐겁게 인턴생활 적응 -
      -
    • - -
      • -
    -
    • -
-
- ); -}; - -export default Stove; diff --git a/src/features/about/work/card/content/description/UVP.tsx b/src/features/about/work/card/content/description/UVP.tsx deleted file mode 100644 index 54c9255f..00000000 --- a/src/features/about/work/card/content/description/UVP.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { FunctionComponent, useLayoutEffect, useState } from 'react'; - -import DynamicImage from '~/shared/components/DynamicImage'; -import ExternalLink from '~/shared/components/ExternalLink'; - -const UVP: FunctionComponent = () => { - return ( - <> - -
-

- UVP는 사내의 다양한 서비스에서 사용되는  - 웹 동영상 컴포넌트 라이브러리로 서로 다른 디바이스 및 - 브라우저에서 스트리밍 및 아카이브 영상의 통일된 스펙과 디자인의 유지를 - 목표로 합니다. -

-
    - UVP의 메인테이너로 참여해 v0부터 v3까지 주도적으로 개발 -
  • - v1: 런타임 이전에 코드 동작을 이해하고 유지보수의 용이를 목표로 개발 -
      -
    • - 레거시 프로젝트를 인수인계 받아 최신화 작업을 주도적으로 진행 -
      • -
    • - TypeScript 적용 및 선언적 컴포넌트화를 통해 런타임 이전에 코드 - 구성을 이해할 수 있도록 개발 -
      • -
    • - 이벤트의 흐름을 정리하여 동작의 시각화 및 디버깅 과정을 향상 -
      • -
    -
    • -
  • - v2: 친절한 라이브러리를 목표로 개발 진행. 배포 안정화 및 친절한 - 문서화를 목표로 개발 -
      -
    • - jsx-dom에서 preact로 마이그레이션 및 zustand, jest, cypress, - storybook을 도입 -
      • -
    • ESM 및 완전한 키보드 제어를 지원(웹 접근성)
      • -
    • 테스트 코드로 라이브러리의 안정성 향상
      • -
    • tsdoc 및 storybook으로 문서화를 진행해 DX 향상 성취
      • -
    • - 관련 발표:  - -
      • -
    -
    • -
  • - v3: 확장성을 목표로 개발 -
      -
    • - yarn monorepo, turborepo를 통해 플러그인 개발이 용이하도록 - 레포를 변경 -
      • -
    • - 단일 컴포넌트 라이브러리 구조에서 플러그인을 주입 받을수 있는 - 구조로 변경 -
        -
      • - VideoCore 영역과 UI 영역, 추가 기능(HLS, IMA, Thumbnail - 등)으로 영역을 분리하여 목적에 맞게 플러그인을 조합해 적용 - 할 수 있게 됨 -
        • -
      • - 번들 크기 및 배포 사이드 이펙트 영향도 감소의 효과와 더불어 - 라이브러리의 확장성(추가 기능의 유연성) 성취 -
        • -
      • - 라인의 다양한 서비스 니즈를 만족시키고 보다 안정적인 기능 - 추가를 이어갈 수 있게 됨 -
        • -
      -
      • -
    • - 관련 내용:  - -
      • -
    -
    • -
-
- - ); -}; - -export default UVP; diff --git a/src/features/about/work/card/content/description/VLC.tsx b/src/features/about/work/card/content/description/VLC.tsx deleted file mode 100644 index ace4786f..00000000 --- a/src/features/about/work/card/content/description/VLC.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { FunctionComponent } from 'react'; - -const VLC: FunctionComponent = () => { - return ( - <> -

VOOM LIVE CMS 개발

- - ); -}; - -export default VLC; diff --git a/src/features/about/work/data/blind/index.ts b/src/features/about/work/data/blind/index.ts new file mode 100644 index 00000000..25964828 --- /dev/null +++ b/src/features/about/work/data/blind/index.ts @@ -0,0 +1,16 @@ +import { Company, CompanyName, JobPosition } from '../../models'; + +import { Bleet, MyBiskit, Blind } from './projects'; + +const BLIND: Company = { + company: CompanyName.Blind, + companyHref: 'https://www.linkedin.com/company/teamblind/', + companyLogoUrl: + 'https://github.com/1ilsang/dev/assets/23524849/abdc15c8-571c-430c-a3c3-f2473aedd201', + position: JobPosition.FULL_STACK, + workStartDate: 1564930800000, + workEndDate: 1596726000000, + projectList: [Bleet, MyBiskit, Blind], +}; + +export default BLIND; diff --git a/src/features/about/work/data/blind/projects.tsx b/src/features/about/work/data/blind/projects.tsx new file mode 100644 index 00000000..39aba539 --- /dev/null +++ b/src/features/about/work/data/blind/projects.tsx @@ -0,0 +1,88 @@ +import { Project, ProjectName } from '../../models'; + +export const Bleet: Project = { + name: ProjectName.Bleet, + tags: ['Node.js', 'MySQL', 'Swagger', 'Firebase'], + url: 'https://www.teambleet.com', + startDate: 1588258800000, + endDate: 1596726000000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/bf6d917d-9d2a-4142-a0ee-4933cb321428', + alt: 'Bleet cover', + }, + summary: `Bleet은 블라인드 기반 회사인증을 통한 직장인 소개팅 어플입니다.`, + body: ( + <> + + 메인 서버 개발자로 Node.js를 활용해 API를 개발. Beta 오픈까지 작업 + +
  • + 블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업 주도적으로 + 진행 +
    • +
  • Firebase를 통한 채팅 기능 개발
    • +
  • Swagger 및 문서화를 통해 클라이언트 호출이 용이하도록 함
    • + + ), +}; + +export const MyBiskit: Project = { + name: ProjectName.MyBiskit, + tags: ['Nuxt2', 'MySQL'], + startDate: 1572534000000, + endDate: 1588172400000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/1d4a2e43-72ba-4b3e-b4c7-f236e8574c28', + alt: 'Mybiskit cover', + }, + summary: `마이비스킷은 직장인을 위한 온라인 취미클래스 플랫폼입니다. 정규 및 원데이 클래스를 다양한 쿠폰과 정기 결제로 수강할 수 있습니다.`, + body: ( + <> + Nuxt.js로 페이지 및 서버 개발 +
  • 다양한 프로모션 페이지 및 상세 페이지 개발
    • +
  • + 쿠폰 및 결제 API 개선/개발 +
      +
    • + 테스트 코드를 적용해 리팩토링 과정의 사이드 이펙트를 간소화 하고자 + 노력 +
      • +
    • 트랜잭션 적용 및 결제 플로우 간소화 작업을 진행
      • +
    +
    • +
  • + 지표 분석을 위한 크롤러를 개발 +
      +
    • + Puppeteer를 활용해 추출한 데이터를 JSON으로 가공후 S3에 저장. 차트 + 페이지를 제공 +
      • +
    • + 사내 엔지니어링 세미나 "주니어의 반란"을 주최, 개발 여정을 + 공유 +
      • +
    +
    • + + ), +}; + +export const Blind: Project = { + name: ProjectName.Blind, + tags: ['Node.js', 'PHP', 'Docker', 'MySQL', 'Redis'], + startDate: 1564930800000, + endDate: 1577631600000, + url: 'https://www.teamblind.com/', + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/bf1ace03-ab4a-48c5-9053-c1fe1dd6fc76', + alt: 'Blind cover', + }, + summary: `Blind는 전 세계 기업의 지속 가능한 기업 문화를 위한 직장인 익명 플랫폼입니다.`, + body: ( + <> + 블라인드 어드민 및 서버 API를 개발 +
  • 어드민 페이지 개선 작업 진행
    • +
  • 신고하기 및 패널티 등의 API를 개선
    • + + ), +}; diff --git a/src/features/about/work/data/company.ts b/src/features/about/work/data/company.ts new file mode 100644 index 00000000..95f5a44e --- /dev/null +++ b/src/features/about/work/data/company.ts @@ -0,0 +1,11 @@ +import { Company } from '../models'; + +import LINE from './line'; +import BLIND from './blind'; +import SmileGate from './smileGate'; + +export const companyData: Company[] = [ + { ...LINE }, + { ...BLIND }, + { ...SmileGate }, +]; diff --git a/src/features/about/work/data/line/index.ts b/src/features/about/work/data/line/index.ts new file mode 100644 index 00000000..4ee24650 --- /dev/null +++ b/src/features/about/work/data/line/index.ts @@ -0,0 +1,15 @@ +import { Company, CompanyName, JobPosition } from '../../models'; + +import { LDS_CALENDAR, LPC, OAL, OAP, PLACE, UVP, VLC } from './projects'; + +const LINE: Company = { + company: CompanyName.LINE, + companyHref: 'https://www.linkedin.com/company/line-messenger/', + companyLogoUrl: + 'https://github.com/1ilsang/dev/assets/23524849/81800e67-b54f-41e8-a232-520c99f465c8', + position: JobPosition.FE, + workStartDate: 1596985200000, + projectList: [LPC, UVP, VLC, OAL, LDS_CALENDAR, PLACE, OAP], +}; + +export default LINE; diff --git a/src/features/about/work/data/line/projects.tsx b/src/features/about/work/data/line/projects.tsx new file mode 100644 index 00000000..ea48c355 --- /dev/null +++ b/src/features/about/work/data/line/projects.tsx @@ -0,0 +1,266 @@ +import { Project, ProjectName } from '../../models'; + +import ExternalLink from '~/shared/components/ExternalLink'; + +export const LPC: Project = { + name: ProjectName.LPC, + tags: ['Vite', 'pnpm', 'React-Query'], + startDate: 1709218800000, + summary: 'LandPress Content 개발', + body: <>, +}; + +export const UVP: Project = { + name: ProjectName.UVP, + tags: [ + 'HTMLVideo', + 'Preact10', + 'Zustand', + 'Turborepo', + 'Storybook', + 'Cypress', + 'Webpack', + ], + startDate: 1604156400000, + endDate: 1709218800000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/3f7d451c-f3b9-4244-be36-b32d800512d2', + alt: 'UVP cover', + }, + summary: `UVP는 사내의 다양한 서비스에서 사용되는 웹 동영상 컴포넌트 라이브러리로 서로 다른 디바이스 및 브라우저에서 스트리밍 및 아카이브 영상의 통일된 스펙과 디자인의 유지를 목표로 합니다.`, + body: ( + <> + v0 - v3 메인테이너 활동 +
  • + v1: 런타임 {'->'} 컴파일 타임 코드 리팩터링 +
      +
    • 레거시 프로젝트를 인수인계 받아 최신화 작업을 주도적으로 진행
      • +
    • + TypeScript 적용 및 선언적 컴포넌트화를 통해 런타임 이전에 코드 + 구성을 이해할 수 있도록 개발 +
      • +
    • 이벤트의 흐름을 정리하여 동작의 시각화 및 디버깅 과정을 향상
      • +
    +
    • +
  • + v2: 친절한 라이브러리를 목표로 개발 진행. 배포 안정화 및 친절한 문서화를 + 목표로 개발 +
      +
    • + jsx-dom에서 preact로 마이그레이션 및 zustand, jest, cypress, + storybook을 도입 +
      • +
    • ESM 및 완전한 키보드 제어를 지원(웹 접근성)
      • +
    • 테스트 코드로 라이브러리의 안정성 향상
      • +
    • tsdoc 및 storybook으로 문서화를 진행해 DX 향상 성취
      • +
    • + 관련 발표:  + +
      • +
    +
    • +
  • + v3: 확장성을 목표로 개발 +
      +
    • + yarn monorepo, turborepo를 통해 플러그인 개발이 용이하도록 레포를 + 변경 +
      • +
    • + 단일 컴포넌트 라이브러리 구조에서 플러그인을 주입 받을수 있는 구조로 + 변경 +
        +
      • + VideoCore 영역과 UI 영역, 추가 기능(HLS, IMA, Thumbnail 등)으로 + 영역을 분리하여 목적에 맞게 플러그인을 조합해 적용 할 수 있게 됨 +
        • +
      • + 번들 크기 및 배포 사이드 이펙트 영향도 감소의 효과와 더불어 + 라이브러리의 확장성(추가 기능의 유연성) 성취 +
        • +
      • + 라인의 다양한 서비스 니즈를 만족시키고 보다 안정적인 기능 추가를 + 이어갈 수 있게 됨 +
        • +
      +
      • +
    • + 관련 내용:  + +
      • +
    +
    • + + ), +}; + +export const VLC: Project = { + name: ProjectName.VLC, + tags: [ + 'React18', + 'React-Testing-Library', + 'React-Query', + 'WebSocket', + 'Chart.js', + ], + url: 'https://oa-live.line.biz/', + startDate: 1686495600000, + endDate: 1709218800000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/6163e57c-ed7f-4dea-ac0f-0c8303c83454', + alt: 'VOOM Live CMS cover', + }, + summary: `VOOM LIVE CMS는 VOOM 유저들이 라이브 방송을 세팅할 수 있는 CMS 페이지입니다.`, + body: ( + <> +
  • + 방송 디테일 페이지 개발 +
      +
    • 실시간 채팅을 위한 WebSocket 개발
      • +
    +
    • +
  • + 시각화 페이지 개발 +
      +
    • Chart.js를 활용해 통계 차트 및 테이블 영역 개발
      • +
    +
    • + + ), +}; + +export const OAL: Project = { + name: ProjectName.OAL, + tags: [ + 'React18', + 'React-Testing-Library', + 'React-Query', + 'WebSocket', + 'MSW', + 'Chart.js', + ], + url: 'https://oa-live.line.biz/', + startDate: 1659279600000, + endDate: 1709218800000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/5c98930a-5501-432e-8d2e-e1c6ee1743f6', + alt: 'OA Live CMS cover', + }, + summary: + 'OA LIVE CMS는 Official Account 유저들이 라이브 방송을 세팅 할 수 있는 CMS 페이지입니다.', + body: ( + <> +
  • + 방송 디테일 페이지 개발 +
      +
    • 실시간 채팅을 위한 WebSocket 개발
      • +
    +
    • +
  • + 시각화 페이지 개발 +
      +
    • Chart.js를 활용해 통계 차트 및 테이블 영역 개발
      • +
    +
    • + + ), +}; + +export const LDS_CALENDAR: Project = { + name: ProjectName.LDS_CALENDAR, + tags: ['React18', 'Vite'], + startDate: 1680274800000, + endDate: 1688137200000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/fe644134-f6a7-4029-8d6c-e1fa00ce327e', + alt: 'LDS Calendar', + }, + summary: `LDS Calendar는 라인 디자인 시스템을 적용한 리액트 캘린더 컴포넌트 라이브러리입니다.`, + body: ( + <> + + 사내 공용 캘린더 라이브러리의 부재로 자발적으로 시작한 프로젝트 + +
  • + 다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발 +
      +
    • 다국어 및 Timezone 설정 가능
      • +
    • + 모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션을 제공, 유연한 캘린더가 + 될 수 있도록 개발 +
      • +
    +
    • + + ), +}; + +export const PLACE: Project = { + name: ProjectName.PLACE, + tags: ['Next12', 'Redux', 'Redux-Saga', 'Swiper'], + url: 'https://www.youtube.com/watch?v=-hmsdx_qoiA', + startDate: 1601478000000, + endDate: 1617980400000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/ad5e8f2d-9226-4290-823c-1742521e0aa0', + alt: 'LINE Place cover', + width: 250, + }, + summary: `LINE PLACE는 유저의 위치 기반으로 음식점 추천 및 검색 할 수 있는 서비스입니다.`, + body: ( + <> +
  • + Home 화면 개발 +
      +
    • 위치 기반 API Flow 정리
      • +
    +
    • +
  • Profile/Settings 개발
    • +
  • + Koa 커스텀 서버 개발 +
      +
    • nGrinder를 활용 Stress test 진행후 서버 가용량 산출
      • +
    +
    • + + ), +}; + +export const OAP: Project = { + name: ProjectName.OAP, + tags: ['Next12'], + url: 'https://creative.line.me/blog/91', + startDate: 1597071600000, + endDate: 1625929200000, + img: { + url: 'https://github.com/1ilsang/dev/assets/23524849/7c2ad355-607a-4692-9a95-be44e45f144d', + alt: '"Official Account cover"', + width: 250, + }, + summary: `Official Account Profile 페이지는 공식 계정을 운영하는 비즈니스 오너의 정보를 보다 쉽게 찾을 수 있도록 도와주는 페이지입니다.`, + body: ( + <> +
  • + Traffic, Nearby, Takeout 등의 플러그인 개발 +
      +
    • 플러그인의 중복된 코드를 개선
      • +
    • + 데이터 이관 작업을 통해 서로 다른 페이지의 싱크 맞추는 작업 진행 +
      • +
    +
    • +
  • + React {'->'} Next.js 리팩터링 진행 +
      +
    • 커스텀 서버 개발
      • +
    +
    • + + ), +}; diff --git a/src/features/about/work/data/smileGate/index.ts b/src/features/about/work/data/smileGate/index.ts new file mode 100644 index 00000000..b452384a --- /dev/null +++ b/src/features/about/work/data/smileGate/index.ts @@ -0,0 +1,16 @@ +import { Company, CompanyName, JobPosition } from '../../models'; + +import { Stove } from './projects'; + +const SmileGate: Company = { + company: CompanyName.Smilegate, + companyHref: 'https://www.linkedin.com/company/smilegate/', + companyLogoUrl: + 'https://github.com/1ilsang/dev/assets/23524849/932fade0-e7bf-4fdc-b7a8-c346fedbb76d', + workStartDate: 1520780400000, + workEndDate: 1525791600000, + position: `${JobPosition.FE}(intern)`, + projectList: [Stove], +}; + +export default SmileGate; diff --git a/src/features/about/work/data/smileGate/projects.tsx b/src/features/about/work/data/smileGate/projects.tsx new file mode 100644 index 00000000..d3de95a5 --- /dev/null +++ b/src/features/about/work/data/smileGate/projects.tsx @@ -0,0 +1,29 @@ +import { Project, ProjectName } from '../../models'; + +import ExternalLink from '~/shared/components/ExternalLink'; + +export const Stove: Project = { + name: ProjectName.Stove, + tags: ['Vue2'], + startDate: 1520780400000, + endDate: 1525791600000, + summary: `유저 타임라인 개발`, + body: ( + <> + 출시 예정 게임 유저 타임라인 개발 +
  • 방명록 CRUD 기능 개발
    • +
  • 댓글 / 신고하기 기능 개발
    • +
  • + 재밌고 즐겁게 인턴생활 적응 +
      +
    • + +
      • +
    +
    • + + ), +}; diff --git a/src/features/about/work/models.ts b/src/features/about/work/models.ts index 8e4d47e4..ab9c857c 100644 --- a/src/features/about/work/models.ts +++ b/src/features/about/work/models.ts @@ -1,3 +1,5 @@ +import { ReactNode } from 'react'; + export type Company = { company: CompanyName; companyHref: string; @@ -66,6 +68,13 @@ export type Technique = export type Project = { name: ProjectName; url?: string; + img?: { + url: string; + alt: string; + width?: number; + }; + summary: string; + body: ReactNode; startDate: number; tags: Technique[]; endDate?: number; diff --git a/src/features/styles/common.scss b/src/features/styles/common.scss index 4c4a6f55..0138f662 100644 --- a/src/features/styles/common.scss +++ b/src/features/styles/common.scss @@ -54,17 +54,18 @@ $target: #e73c7e; .dynamic-image { position: relative; margin: 10px 0; - color: $highlight-color; + color: $target; .min { position: absolute; - top: -2rem; + top: -3rem; left: -0.5rem; &::before { content: '⎗'; opacity: 0.5; - font-size: 3rem; + font-size: 6rem; + font-weight: bold; } } diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss index 42b8d5a6..05e18258 100644 --- a/src/features/styles/ui/about/index.scss +++ b/src/features/styles/ui/about/index.scss @@ -11,7 +11,7 @@ border-bottom: 1px solid $base-color; color: $min-color; font-weight: bold; - font-size: 1.3rem; + font-size: 1.5rem; margin-bottom: 4px; } @@ -125,7 +125,7 @@ } .left-side { - width: 13rem; + width: 12rem; .logo { width: 4rem; @@ -210,31 +210,51 @@ } /* stylelint-enable no-descending-specificity */ - .year { - font-size: 1.3rem; - } + &-card { + display: flex; + margin-top: 1rem; + line-height: 1.72rem; - .left-line { - border-left: 3px solid $dark-color; - padding-left: 1rem; + @include mobile { + flex-direction: column; + } - li { - display: flex; + .year { + min-width: 5rem; + font-size: 1.3rem; + width: 11rem; - .category { - min-width: 120px; - color: $min-color; + &:hover { + filter: drop-shadow(2px 2px 4px lightgray) invert(2%); } - .link-wrap { - width: 100%; + @include mobile { + margin: 1rem 0 0.2rem; } + } - .link { - color: #2dd0a8; + .left-line { + border-left: 0.24rem solid $dark-color; + padding-left: 1rem; - &:hover { - color: $highlight-color; + li { + display: flex; + + .category { + min-width: 120px; + color: $min-color; + } + + .link-wrap { + width: 100%; + } + + .link { + color: #2dd0a8; + + &:hover { + color: $highlight-color; + } } } } diff --git a/src/features/styles/ui/about/project.scss b/src/features/styles/ui/about/project.scss index 3b6bba96..5fb182a1 100644 --- a/src/features/styles/ui/about/project.scss +++ b/src/features/styles/ui/about/project.scss @@ -1,5 +1,5 @@ @mixin project { - border-left: 3px solid $dark-color; + border-left: 0.24rem solid $dark-color; border-bottom: 1px dotted $dark-color; padding-left: 10px; padding-bottom: 1rem; @@ -22,7 +22,7 @@ .title { cursor: pointer; - font-size: 1.1rem; + font-size: 1.15rem; font-weight: 500; &:hover { @@ -58,7 +58,6 @@ flex-wrap: wrap; .item { - font-size: 0.75rem; background-color: $base-color; color: $deep-light-color; padding: 1px 5px; @@ -96,8 +95,8 @@ padding-bottom: 1rem; } - .gap { - gap: 0.8rem; + .section { + margin: 2rem 0 0; } ul { @@ -109,7 +108,7 @@ } li { - margin-top: 2px; + margin-top: 0.3rem; padding-left: 1rem; &::before {