📞 Contact

🖥️ Front

   
   
   

🗃️ Back

     

🛠 Tools

     
   

업사이클링 브랜드 프라이탁의 쇼핑몰로 회원가입과 로그인이 가능하며 유저 권한에 따라 상품을 업로드 및 삭제할 수 있고, 사용자는 마음에 드는 상품에 좋아요를 표시할 수 있습니다. 또한 상품 정렬 및 필터 기능을 통해 원하는 상품을 찾을 수 있습니다.

🛍️ 포트폴리오 보러가기     💻 저장소 보러가기

미리 보기

주요 기능

• 회원가입
• 로그인 (세션 ID)
• 임시 관리자 로그인
• 상품 업로드 (관리자 권한 필요)
• 상품 삭제 (관리자 권한 필요)
• 상품 좋아요 (로그인 필요)
• INFINITE SCROLL
• 상품 정렬 및 필터
• 반응형 UI
• TOASTIFY를 활용한 alert
• Context API를 활용한 클라이언트 상태 관리
• React Query를 활용한 서버 상태 관리

기술 스택
FRONT
BACK
DATABASE
INFRA

닉네임과 기록을 저장하여 실시간으로 순위를 확인할 수 있는 같은그림찾기 게임

🕹️ 포트폴리오 보러가기     💻 저장소 보러가기

미리 보기

주요 기능

• typescript 활용
• Redux Toolkit을 활용한 상태관리
• createSlice를 통해 각종 리듀서를 정의하여 상태를 업데이트하고 관리
• configureStore를 사용하여 Redux 스토어를 설정
• 모델을 분리하여 코드를 구조화
• 난수를 활용한 랜덤 카드 정렬
• 게임 종료 후 기록과 닉네임을 설정하면 DB에 저장 및 실시간 순위 반영
• lazy와 Suspense을 사용하여 Code splitting(스켈레톤 로더 구현)
• styled-components를 활용한 애니메이션 효과 및 반응형 UI

기술 스택
FRONT
BACK
DATABASE
INFRA

계산식 scroll 이벤트를 활용한 업사이클링 브랜드 프라이탁의 회사소개 리뉴얼

👀 포트폴리오 보러가기     💻 저장소 보러가기

미리 보기

주요 기능

• canvas 활용
• scroll에 반응하는 background-image 와 텍스트
• IntersectionObserver를 사용하지 않고 높이 계산을 통한 scroll 이벤트
• 텍스트의 가독성을 높이기 위한 미니멀한 반응형 UI

기술 스택
FRONT

스크롤 이벤트를 활용한 인터랙션과 컴포넌트 구조로 작업된 반응형 협업 프로젝트

(주)지니 회사소개 미리보기

주요 담당 업무

• header, footer, 타이틀과 같은 공통으로 사용되는 요소들의 스타일 컴포넌트화 작업
• parcel을 활용한 DOM 컴포넌트 작업
• 메인페이지 스크롤 이벤트 구현
• 서브페이지 position:sticky를 활용한 이벤트 구현
• 반응형 UI

기술 스택
FRONT

나라장터 입찰 플랫폼 14개 사이트 통합 및 반응형 퍼블리싱

입찰플랫폼 작업물 보기

(인비드, 청비드, 오토비드, 비드인, 한라입찰, 진비드, 정비드, 비드플러스, 솔비드, 비드스쿨, 비에스, 유비드, 다온TS, 더비스)

주요 담당 업무

• header, footer, 테이블, 버튼과 같은 공통으로 사용되는 요소들의 컴포넌트화 작업
• 아코디언 메뉴, 모달 팝업 등 클릭관련 이벤트 구현
• 크로스브라우징 담당
• 메인페이지 위주의 반응형 퍼블리싱 구현
• 반응형 UI

기술 스택
FRONT

에스와이소프트(현:지니) 자체 인트라넷 리뉴얼 퍼블리싱

인트라넷 작업물 보기

주요 담당 업무

• 모든 페이지 퍼블리싱 담당

기술 스택
FRONT

P2P 대출 플랫폼 ‘비드펀딩’ 반응형 퍼블리싱 협업

비드펀딩 미리보기

주요 담당 업무

• header, footer, 테이블, 버튼과 같은 공통으로 사용되는 요소들의 컴포넌트화 작업
• 아코디언 메뉴, 모달 팝업 등 클릭관련 이벤트 구현
• 대출신청 페이지 위주의 반응형 페이지 퍼블리싱
• 간단한 클래스 네이밍 가이드를 제작하여 협업 진행
• 크로스브라우징 담당
• 반응형 UI

기술 스택
FRONT