미리보기

Ruby on Rails → Next Migration<br />
- 주요 서비스인 채팅 기능 및 도표 상세페이지 의 React 기반 리뉴얼을 담당했습니다. <br />
특히 chart.js를 활용해 데이터 시각화 작업을 진행하여 사용자에게 직관적인 데이터 인사이트를 제공하였습니다.<br />
- API를 통해 CRUD 기능을 재구축하여 채팅방 생성, 채팅방 검색, 채팅 검색, 내 채팅목록 불러오기, 광고 데이터 불러오기 등의 기능을 구현했습니다.<br />
- 사용자 정보 관리 기능도 API로 연동하여, 학교 정보, 어학 정보, 자격증, 경력 정보 입력 등의 기능을 추가했습니다.<br />
띠배너 디자인 변경에 따른 업데이트 및 반영 작업을 수행했습니다

이마트 챗봇 이로디 서비스 프론트엔드 담당<br />
- Storybook을 활용해 필요한 UI 컴포넌트를 모듈화하여 재사용성과 유지보수성을 높였고, 개발자 간 일관된 디자인과 기능을 보장하였습니다.<br />
- MobX를 사용해 채팅창 상태를 관리하고 환경을 구축하여 사용자 경험이 일관되게 유지될 수 있도록 기여했습니다.<br />
- 백엔드 개발자 및 이마트 협력사와 긴밀히 협업하며 서비스 운영에 참여해 실시간 서비스의 요구사항을 파악하고 대응하였습니다.

워드프레스를 이용한 홈페이지 및 반응형 페이지 제작<br />
- 서울청년대학, 리바운드스쿨, 중랑구 사회적 경제 지원센터 등의 프로젝트에서 홈페이지 제작을 담당하였습니다.<br />
- 제작 완료 후에도 안정적인 운영을 위해 정기적인 유지보수 및 기능 개선을 수행하였고, 각기 다른 요구 사항에 맞춘 커스터마이징으로 사용자 만족도를 높였습니다.

그누보드(아미나빌더)를 활용한 홈페이지 제작 및 유지보수<br />
- 16개의 홈페이지를 지속적으로 관리하며, 고객사의 요청 사항을 신속히 반영하여 안정적인 서비스를 제공했습니다.<br />
- 신규 개발뿐 아니라, 정기적 점검과 수정 작업을 통해 서비스의 안정성을 높였습니다.<br />
반응형 페이지 제작 및 최적화<br />
- 다양한 디바이스에서 원활하게 작동할 수 있도록 반응형 페이지를 제작하고, 성능을 지속적으로 개선했습니다.<br />
React를 이용한 페이지 개발과 성능 향상 작업<br />
- React를 활용해 페이지를 개발하고, 사용자 경험을 유지하기 위해 성능 점검 및 최적화 작업을 진행했습니다.<br />
React-admin 및 Parse-server를 활용한 어드민 페이지 제작<br />
- React-admin과 Parse-server를 이용해 효율적인 관리자 페이지를 제작하였습니다.

프로젝트 소개<br />
블라인드 매칭 및 실시간 채팅을 통해 소울메이트를 만들 수 있는 PWA 기반 서비스<br />
<br />

1. Tailwind 설정 및 메인 컬러 설정<br />
   • 프로젝트의 메인컬러 및 전체적인 CSS 구조 확립<br /> <br />
2. SupaBase 설정<br />
   • ERD 설계 및 설계에 따른 데이터베이스의 구조 구현<br />
   • 트리거를 설정하여 데이터베이스의 변경 사항에 신속하게 대응하여 서비스 안정성 향상<br /> <br />
3. 채팅방 구현<br />
   • SupaBase RealTime 을 통해서 실시간 채팅방 로직을 구현<br />
   • 팀원이 사전에 설계한 UI 를 기준으로 채팅방 로직을 조율하며 반영<br /> <br />
4. 호감도 알고리즘에 따른 채팅창 상태 관리<br />
   • 지속적인 대화 유도를 위해 호감도 측정 알고리즘 구현<br />
   • 호감도 알고리즘에 의해 변경되는 호감도에 맞춰 채팅창 UI에 현재 호감도 퍼센트 제공<br /> <br />
5. 꾸준한 업데이트 (테스트 기간 총 7일간 169명의 유저, 316개의 채팅방이 생성)<br />
   • 설문조사, 문의페이지 등을 통해서 유저들과 활발하게 소통하여 문제 사항을 빠르게 파악한 뒤, 유저 피드백을 즉각 반영하여 꾸준한 업데이트를 진행 (1.8버전까지의 업데이트 반영)

프로젝트 소개<br />
나의 스타일을 공유하고 최신 트렌드에 맞는 스타일을 확인할 수 있는 서비스<br />
<br />

1. 재사용성을 위한 컴포넌트화<br />
   • 지속적으로 사용하는 오렌지 아이콘을 PNG ⇒ SVG 로 변환<br />
   • 공통적으로 가장 많이 사용되는 카드 컴포넌트 구현<br /> <br />
2. 메인페이지 / 카테고리별 구현<br />
   • 페이지의 다양성을 강조하기 위해 와이어프레임에 포함되지 않았던 배너를 추가<br />
   • 게시글을 카테고리별로 분류하고, 작성자가 추가한 해시태그를 기반으로 게시글을 필터링할 수 있는 기능을 추가<br /> <br />
3. 전체적인 CSS 설정<br />
   • TailWind와 MUI 를 사용하여 전체적인 CSS 설정<br />
   • TailWind 가 적용되지않는 부분을 발견 ⇒ MUI의 우선순위가 높기에 MUI 테마 설정을 통해 해결

프로젝트 소개<br />

• 각 팀의 팀장들이 실시간으로 채팅경매를 통해 팀원을 뽑는 사이트<br />
• 자낳대 롤 대회 경매장을 보고 소규모 대회에서도 사용이 가능하게 밴치마킹하여 제작<br />
• 현재 서버상의 문제로 테스트페이지를 통해 확인 가능합니다.<br /> <br />

역할<br />

1. 경매장 생성<br />
   • 각 티어별 최소 포인트와 팀장들의 티어별 포인트를 설정<br />
   • 포인트 설정을 완료하면 경매장코드를 제공하여 경매장을 생성<br /> <br />
2. 선수 등록<br />
   • 방 주인이 제공한 코드를 사용하여 해당 방에 선수 정보를 등록<br />
   • 롤 닉네임 / 최고티어 / 주라인 / 부라인 / MOST3 챔피언 의 정보를 입력하여 등록<br /> <br />
3. 경매 참가<br />
   • 방 주인이 제공한 코드를 사용하여 팀장으로 선정된 선수들만 입<br />
   • 선수등록 페이지에서 등록된 정보들을 토대로 경매 진행<br />
   • stomp소켓을 사용하여 실시간 채팅 경매 구현<br />
   • 채팅으로 입찰을 진행하며 진행 타이머에 맞게 유찰/낙찰 기능 추가<br />
   • 팀장 선정<br />
     선수 등록 페이지를 통해 등록된 유저들 중에서 팀장 선정<br />
   • 강퇴<br />
     방 주인에 의해서 강퇴 가능<br />
     <br />
4. Twitch API 통하여 로그인 구현*<br />
   • 로그인을 하지 않을 경우 무조건 로그인을 통하여 Twitch Auth Token 을 받아오는 방식으로 구현<br />
   • Twitch API 을 통하여 유저의 트위치 닉네임 조회<br />
5. Riot API 를 사용하여 전체 챔피언 가져오기 및 업데이트 되는 버전 자동화 구현<br />
   • 전체 챔피언 정보 가져온 후 SelectBox 통해 정렬<br />
   • 업데이트 되는 버전에 맞춰서 업데이트 없이 항상 최신버전 유지<br /> <br />

매뉴얼<br />
https://web.archive.org/web/20220925111510/https%3A%2F%2Ftgd.kr%2Fg%2Ftip%2F66305718