미리보기

리그오브레전드의 다양한 정보를 제공하는 서비스입니다.

깃허브 | 배포 링크 | 디자인 | RIOT API

❗RIOT API에 웹 정식 등록 요청을 하여 승인을 받았습니다.

핵심 사용 기술

Next.js14, Tailwind-css, React-query, Typescript

✨핵심포인트

1. Context API를 활용해 modal, tooltip상태를 전역으로 관리함으로써 애플리케이션의 상태 관리의 일관성을 유지하였고, 또한 컴포넌트 간의 props 전달을 줄이고, 각 컴포넌트에서 modal, tooltip을 손쉽게 호출할 수 있도록 구현했습니다.

2. Next.js의 Route Handlers를 사용하여 지정된 경로에 대한 사용자 지정 요청 처리기를 구현하였습니다.

3. 챔피언 데이터, 데이터 버전, 룬 데이터 등 웹 페이지에 필요한 많은 정적 데이터를 서버 컴포넌트에서 관리함으로써, 클라이언트에서의 로딩 시간을 단축시키고, 데이터 일관성을 보장하였습니다.

4. useModal, useOutsideClick, useTooltip, useIntersectionObservRef 등 커스텀 훅을 통해 로직의 중복을 최소화하고, 코드의 재사용성을 높였습니다.

5. useInfinityQuery를 활용하여 더보기 버튼을 통해 사용자에게 끊김 없는 전적 검색 경험을 제공하였습니다. 이로 인해 사용자는 필요에 따라 데이터를 계속해서 불러올 수 있으며, 직관적인 인터페이스를 통해 탐색할 수 있습니다. 또한, 초기 데이터 불러오는 과정에서 Skeleton UI를 적용함으로써, 로딩 중에도 사용자에게 매끄러운 시각적 피드백을 제공하여 불편함을 최소화했습니다.

6. metaData를 적극 활용하여 SEO 최적화를 구현함으로써, 웹 애플리케이션의 가시성과 검색 엔진 순위를 크게 향상시켰습니다. 또한 각 페이지에 적절한 제목, 설명, 키워드, OG 태그 및 기타 메타 정보를 설정하여 사용자가 검색 결과에서 보다 쉽게 해당 페이지를 발견할 수 있도록 하였습니다.

7. 다크 모드를 구현함으로써 사용자에게 보다 편리하고 쾌적한 경험을 제공하였습니다.

8. next-intl를 활용하여 다국어 지원을 구현함으로써, 사용자에게 보다 포괄적이고 접근 가능한 경험을 제공하였습니다.

저의 개인 포트폴리오 웹 사이트입니다.

깃허브 | 사이트

핵심 사용 기술

React, Styled-component, Fabric.js, Typescript, React-router-dom,

✨핵심포인트

1. Fabric.js 라이브러리를 활용하여 Canvas를 이용한 다양한 효과를 주었습니다.

2. 각 프로젝트 사이트에는 각각의 primary color를 설정함으로써 시각적으로 개인화된 느낌을 주었습니다.

3. Svg를 이용한 애니메이션 효과를 추가하여 더욱 흥미있는 웹 사이트를 만들었습니다.

JS로 React의 Component패턴을 따라해보는 프로젝트입니다.

깃허브 | 디자인

핵심 사용 기술

JavaScript

✨핵심포인트

1. JS의 class 문법을 사용하여 React의 Component 기반 아키텍처를 흉내 내어, 코드의 재사용성과 유지보수성을 높였습니다.

2. 미디어 쿼리와 유연한 레이아웃을 활용해 다양한 디바이스 환경에서도 최적의 사용자 경험을 제공할 수 있도록 반응형 웹을 구축하였습니다

피클타임(Pickle Time)은 뜻이 맞는 사람들과 함께 자투리 시간을 가치 있게 만들어주는 자기개발 플랫폼입니다.

피클타임이란? 피자를 먹을 때 아주 잠깐의 시간동안 피클을 먹습니다. 이 피클 먹는 시간은 짧지만 피자와의 맛의 조화를 이루어주는 아주 중요한 시간입니다. 이처럼 피클타임은 피클 먹는 시간과 같이 짧은 시간을 가치 있는 시간으로 만들어주는 뜻입니다.

깃허브 | 디자인

❗서버 비용 문제로 서버 배포가 중단되었습니다.

핵심 사용 기술

React, Styled-component, Typescript, React-query, Zustend

인원

프론트엔드(5명), 디자이너(1명)

맡은 역할

1. 공통 Bottom Sheet Modal을 개발함으로써 사용자에게 일관된 UI 경험을 제공하였습니다. 이 모달은 다양한 상황에서 재사용 가능하도록 설계되어, 애플리케이션 내에서 여러 컴포넌트에서 쉽게 호출할 수 있는 구조를 갖추었습니다. Zustand를 활용하여 모달 상태를 전역으로 관리함으로써, 상태 관리의 복잡성을 줄이고, 컴포넌트 간의 효율적인 데이터 흐름을 유지할 수 있었습니다. 이를 통해 모달의 열림과 닫힘 상태를 중앙에서 관리하며, 다양한 컴포넌트에서 일관된 상태를 유지할 수 있었습니다.

2. 메인 페이지의 인기 급상승 피클 UI, 마감 임박 피클 UI를 공통 컴포넌트로 개발하였습니다. 공통 컴포넌트인만큼 재사용성을 중요시하였으며 React의 Suspense와 ErrorBoundary를 직접 구현하여 에러가 발생하거나 로딩 중일때 사용자의 불편을 최소화 하였습니다.

3. 피클을 신청하거나 피클을 생성할 때의 마지막 단계인 결제 페이지의 컴포넌트들을 구현하였습니다. 결제하는 디자인은 같기 때문에 범용적으로 사용할 수 있는 이름으로 컴포넌트를 네이밍 하였습니다. 결제 로직도 구현하고 싶었지만 당시 트러블 슈팅으로 저가 구현하지 못해 큰 아쉬움이 남았습니다.

4. 내 피클 페이지에 대한 컴포넌트들을 구현하였습니다. 내 피클 카드는 현재 날짜에 맞춰 진행전, 진행중, 종료 중 하나의 상태를 갖게 되어 각 상태마다 UI가 조금씩 다르지만 전체적인 디자인 틀은 같기 때문에 하나의 컴포넌트로 만들어 각 상태에 따라서 그에 맞는 UI가 랜더링 되도록 구현하였습니다.