Skip to content

Commit

Permalink
docs: Add default projects
Browse files Browse the repository at this point in the history
  • Loading branch information
@1ilsang
1ilsang committed Apr 2, 2024
1 parent 0118aaf commit 0a5762c
Show file tree
Hide file tree
Showing 9 changed files with 104 additions and 100 deletions.
4 changes: 2 additions & 2 deletions src/features/about/work/card/content/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
</div>
{externalLink && (
<ExternalLink
classNames={openClassName}
classNames={classNames(['pt', openClassName])}
href={url}
label={`> 서비스 구경하기`}
label={`> 서비스 링크`}
/>
)}
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/features/about/work/card/content/ProjectDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@ const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
/>
)}
<div className="text">
<p className="summary">{summary}</p>
<ul className="main">{body}</ul>
<ul className="main">
<span className="summary">{summary}</span>
{body}
</ul>
</div>
</>
);
Expand Down
12 changes: 6 additions & 6 deletions src/features/about/work/data/blind/projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ export const Bleet: Project = {
url: 'https://github.com/1ilsang/dev/assets/23524849/bf6d917d-9d2a-4142-a0ee-4933cb321428',
alt: 'Bleet cover',
},
summary: `Bleet은 블라인드 기반 회사인증을 통한 직장인 소개팅 어플입니다.`,
summary: `블라인드 기반 직장인 소개팅 어플 API 개발`,
body: (
<>
<span>
<li>
메인 서버 개발자로 Node.js를 활용해 API를 개발. Beta 오픈까지 작업
</span>
</li>
<li>
블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업 주도적으로
진행
Expand All @@ -35,7 +35,7 @@ export const MyBiskit: Project = {
url: 'https://github.com/1ilsang/dev/assets/23524849/1d4a2e43-72ba-4b3e-b4c7-f236e8574c28',
alt: 'Mybiskit cover',
},
summary: `마이비스킷은 직장인을 위한 온라인 취미클래스 플랫폼입니다. 정규 및 원데이 클래스를 다양한 쿠폰과 정기 결제로 수강할 수 있습니다.`,
summary: `직장인을 위한 온라인 취미클래스 서비스 개발`,
body: (
<>
<span>Nuxt.js로 페이지 및 서버 개발</span>
Expand Down Expand Up @@ -77,10 +77,10 @@ export const Blind: Project = {
url: 'https://github.com/1ilsang/dev/assets/23524849/bf1ace03-ab4a-48c5-9053-c1fe1dd6fc76',
alt: 'Blind cover',
},
summary: `Blind는 전 세계 기업의 지속 가능한 기업 문화를 위한 직장인 익명 플랫폼입니다.`,
summary: `직장인 익명 앱 API 및 어드민 페이지 개발`,
body: (
<>
<span>블라인드 어드민 및 서버 API를 개발</span>
<li>블라인드 어드민 및 서버 API를 개발</li>
<li>어드민 페이지 개선 작업 진행</li>
<li>신고하기 및 패널티 등의 API를 개선</li>
</>
Expand Down
155 changes: 79 additions & 76 deletions src/features/about/work/data/line/projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,19 @@ export const LPC: Project = {
name: ProjectName.LPC,
tags: ['Vite', 'pnpm', 'React-Query'],
startDate: 1709218800000,
summary: 'LandPress Content 개발',
body: <>TBD</>,
summary: '사내 headless CMS 개발',
body: (
<>
<li>Webpack {'->'} Vite 마이그레이션 진행</li>
<li>
CircleCi 적용 및 Cypress Task 분할 작업 진행
<ul>
<li>테스트 시간 16분 {'->'} 5분 단축 성공</li>
</ul>
</li>
<li>모노레포 워크스페이스 import 개선</li>
</>
),
};

export const UVP: Project = {
Expand All @@ -24,75 +35,80 @@ export const UVP: Project = {
startDate: 1604156400000,
endDate: 1709218800000,
img: {
url: 'https://github.com/1ilsang/dev/assets/23524849/3f7d451c-f3b9-4244-be36-b32d800512d2',
url: 'https://github.com/1ilsang/dev/assets/23524849/d81a09d9-20d7-41ab-ae19-86e5812cfd1a',
alt: 'UVP cover',
},
summary: `UVP는 사내의 다양한 서비스에서 사용되는 웹 동영상 컴포넌트 라이브러리로 서로 다른 디바이스 및 브라우저에서 스트리밍 및 아카이브 영상의 통일된 스펙과 디자인의 유지를 목표로 합니다.`,
summary: '사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝',
body: (
<>
v0 - v3 메인테이너 활동
<li className="section">
<li>
v1: 런타임 {'->'} 컴파일 타임 코드 리팩터링
<ul>
<li>레거시 프로젝트를 인수인계 받아 최신화 작업을 주도적으로 진행</li>
<li>레거시 프로젝트 최신화 작업 주도적으로 진행</li>
<li>
TypeScript 적용 및 선언적 컴포넌트화를 통해 런타임 이전에 코드
구성을 이해할 수 있도록 개발
TypeScript 및 선언적 컴포넌트 적용
<ul>
<li>런타임 이전에 코드 구성을 이해할 수 있도록 개선</li>
</ul>
</li>
<li>이벤트의 흐름을 정리하여 동작의 시각화 및 디버깅 과정을 향상</li>
<li>이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상</li>
</ul>
</li>
<li className="section">
v2: 친절한 라이브러리를 목표로 개발 진행. 배포 안정화 및 친절한 문서화를
목표로 개발
v2: 배포 안정화 및 DX 향상
<ul>
<li>
jsx-dom에서 preact로 마이그레이션 및 zustand, jest, cypress,
storybook을 도입
jsx-dom {'->'} Preact 마이그레이션 및 Zustand, Cypress, Jest 도입
</li>
<li>ESM 및 완전한 키보드 제어를 지원(웹 접근성)</li>
<li>테스트 코드로 라이브러리의 안정성 향상</li>
<li>tsdoc 및 storybook으로 문서화를 진행해 DX 향상 성취</li>
<li>
관련 발표:&nbsp;
<ExternalLink
href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook"
label="개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기"
/>
TSDoc 및 Storybook 적용
<ul>
<li>IDE 단계에서부터 데모 페이지까지 고려한 문서 작성</li>
<li>
관련 발표:&nbsp;
<ExternalLink
href="https://engineering.linecorp.com/ko/blog/ui-component-library-for-developers-with-typescript-storybook"
label="개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기"
/>
</li>
</ul>
</li>
</ul>
</li>
<li className="section">
v3: 확장성을 목표로 개발
v3: 라이브러리 확장성
<ul>
<li>
yarn monorepo, turborepo를 통해 플러그인 개발이 용이하도록 레포를
변경
</li>
<li>
단일 컴포넌트 라이브러리 구조에서 플러그인을 주입 받을수 있는 구조로
변경
Yarn monorepo, Turborepo 적용
<ul>
<li>플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경</li>
<li>
VideoCore 영역과 UI 영역, 추가 기능(HLS, IMA, Thumbnail 등)으로
영역을 분리하여 목적에 맞게 플러그인을 조합해 적용 할 수 있게 됨
</li>
<li>
번들 크기 및 배포 사이드 이펙트 영향도 감소의 효과와 더불어
라이브러리의 확장성(추가 기능의 유연성) 성취
</li>
<li>
라인의 다양한 서비스 니즈를 만족시키고 보다 안정적인 기능 추가를
이어갈 수 있게 됨
관련 내용:&nbsp;
<ExternalLink
href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo"
label="Turborepo로 모노레포 개발 경험 향상하기"
/>
</li>
</ul>
</li>
<li>
관련 내용:&nbsp;
<ExternalLink
href="https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo"
label="Turborepo로 모노레포 개발 경험 향상하기"
/>
플러그인 구조 개발
<ul>
<li>플러그인 템플릿 및 라이프사이클 설계</li>
<li>서로 다른 서비스 니즈를 만족시킬 수 있게 됨</li>
</ul>
</li>
<li>
성능 향상
<ul>
<li>
Webpack4 {'->'} Vite 마이그레이션
<ul>
<li>빌드 시간 약 72% 감소</li>
</ul>
</li>
<li>모노레포 워크스페이스 import 개선</li>
</ul>
</li>
</ul>
</li>
Expand All @@ -102,21 +118,15 @@ export const UVP: Project = {

export const VLC: Project = {
name: ProjectName.VLC,
tags: [
'React18',
'React-Testing-Library',
'React-Query',
'WebSocket',
'Chart.js',
],
tags: ['React18', 'RTL', 'React-Query', 'WebSocket', 'Chart.js', 'Jotai'],
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 페이지입니다.`,
summary: `VOOM Live 방송 CMS 페이지 개발`,
body: (
<>
<li>
Expand All @@ -139,11 +149,12 @@ export const OAL: Project = {
name: ProjectName.OAL,
tags: [
'React18',
'React-Testing-Library',
'RTL',
'React-Query',
'WebSocket',
'MSW',
'Chart.js',
'Jotai',
],
url: 'https://oa-live.line.biz/',
startDate: 1659279600000,
Expand All @@ -152,8 +163,7 @@ export const OAL: Project = {
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 페이지입니다.',
summary: 'LINE Official Account Live 방송 CMS 페이지 개발',
body: (
<>
<li>
Expand All @@ -162,7 +172,7 @@ export const OAL: Project = {
<li>실시간 채팅을 위한 WebSocket 개발</li>
</ul>
</li>
<li>
<li className="section">
시각화 페이지 개발
<ul>
<li>Chart.js를 활용해 통계 차트 및 테이블 영역 개발</li>
Expand All @@ -174,27 +184,27 @@ export const OAL: Project = {

export const LDS_CALENDAR: Project = {
name: ProjectName.LDS_CALENDAR,
tags: ['React18', 'Vite'],
tags: ['React18', 'Vite', 'Jotai'],
startDate: 1680274800000,
endDate: 1688137200000,
img: {
url: 'https://github.com/1ilsang/dev/assets/23524849/fe644134-f6a7-4029-8d6c-e1fa00ce327e',
alt: 'LDS Calendar',
},
summary: `LDS Calendar는 라인 디자인 시스템을 적용한 리액트 캘린더 컴포넌트 라이브러리입니다.`,
summary: `LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발`,
body: (
<>
<span>
사내 공용 캘린더 라이브러리의 부재로 자발적으로 시작한 프로젝트
</span>
<li>
사내 공용 캘린더 라이브러리의 부재로 자발적으로 개발
<ul>
<li>배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용</li>
</ul>
</li>
<li className="section">
다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발
<ul>
<li>다국어 및 Timezone 설정 가능</li>
<li>
모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션을 제공, 유연한 캘린더가
될 수 있도록 개발
</li>
<li>모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공</li>
</ul>
</li>
</>
Expand All @@ -212,7 +222,7 @@ export const PLACE: Project = {
alt: 'LINE Place cover',
width: 250,
},
summary: `LINE PLACE는 유저의 위치 기반으로 음식점 추천 및 검색 할 수 있는 서비스입니다.`,
summary: `위치 기반 음식점 추천 및 검색 서비스 개발`,
body: (
<>
<li>
Expand Down Expand Up @@ -243,18 +253,11 @@ export const OAP: Project = {
alt: '"Official Account cover"',
width: 250,
},
summary: `Official Account Profile 페이지는 공식 계정을 운영하는 비즈니스 오너의 정보를 보다 쉽게 찾을 수 있도록 도와주는 페이지입니다.`,
summary: `라인 공식 계정 페이지 개발`,
body: (
<>
<li>
Traffic, Nearby, Takeout 등의 플러그인 개발
<ul>
<li>플러그인의 중복된 코드를 개선</li>
<li>
데이터 이관 작업을 통해 서로 다른 페이지의 싱크 맞추는 작업 진행
</li>
</ul>
</li>
<li>플러그인 중복된 코드 개선</li>
<li>데이터 이관 작업을 통해 서로 다른 페이지의 싱크 맞추는 작업 진행</li>
<li>
React {'->'} Next.js 리팩터링 진행
<ul>
Expand Down
3 changes: 1 addition & 2 deletions src/features/about/work/data/smileGate/projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ export const Stove: Project = {
tags: ['Vue2'],
startDate: 1520780400000,
endDate: 1525791600000,
summary: `유저 타임라인 개발`,
summary: `모바일 게임 유저 타임라인 개발`,
body: (
<>
<span>출시 예정 게임 유저 타임라인 개발</span>
<li>방명록 CRUD 기능 개발</li>
<li>댓글 / 신고하기 기능 개발</li>
<li>
Expand Down
5 changes: 3 additions & 2 deletions src/features/about/work/models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ type Technique =
| 'Cypress'
| 'Webpack'
| 'React18'
| 'React-Testing-Library'
| 'RTL'
| 'WebSocket'
| 'MSW'
| 'Chart.js'
Expand All @@ -63,7 +63,8 @@ type Technique =
| 'PHP'
| 'Docker'
| 'Redis'
| 'Vue2';
| 'Vue2'
| 'Jotai';

export type Project = {
name: ProjectName;
Expand Down
2 changes: 1 addition & 1 deletion src/features/shared/components/DynamicImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const DynamicImage: FunctionComponent<DynamicImageProps> = ({
className,
src,
alt,
loading = true,
loading = false,
}) => {
const [min, setMin] = useState(true);
const handleMinClick = () => setMin(!min);
Expand Down
2 changes: 1 addition & 1 deletion src/features/styles/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ $target: #e73c7e;

.dynamic-image {
position: relative;
margin: 10px 0;
margin: 10px 0 0;
color: $target;

:hover {
Expand Down
Loading

0 comments on commit 0a5762c

Please sign in to comment.