미리보기

내가갈가[家]는 실제 현장 방문 없이도 부동산 거래를 완료할 수 있는 솔루션을 제공하고자 합니다.
거리가 멀어 직접 방문하기 힘든 사용자, 코로나 시대에 건강과 안전을 최우선으로 고려하는 사용자를 위해 화상 부동산 중개 서비스를 제공합니다.

Vue3와 Typescript 등 새로운 기술을 익히는 스터디 활동

• 프로젝트 설계 단계에서 새로운 기술을 많이 도입했기에 평일에는 개인 공부를, 주말에는 공부한 것을 바탕으로 팀원들이 알아야 하는 내용을 서로 공유하였다.
• 그 중 꼭 필요한 내용은 팀 노션에 정리하여 작성하였다.
  회원 관리와 정보 파트 설계 및 구현
• 회원 가입, 로그인과 같은 회원 관리 페이지와 회원 가입 시 입력한 사용자 정보, 미팅 예약 시간 등 사용자 정보에 관련된 페이지를 모두 제작하였다.
• 회원 가입 시 아이디 중복 체크, 입력한 비밀번호 재확인, 일반 사용자 혹은 부동산 사업자 여부를 체크하는 유효성 검사를 진행하였다.
• 로그인 실패 시 단순히 실패했다는 메시지가 아닌 정확한 오류 메세지를 전달 받아 알맞은 오류를 출력하여 유저 경험을 향상 시키려 노력함.
  메인 페이지 구성
• 화면 디자인 및 css 작업
  매물 검색
  화상 미팅
• OpenVidu의 소스 코드가 클래스형으로 되어있어 이를 함수형으로 변환하여 일대다 화상 미팅을 구현하였다.

빅데이터를 기반으로 유저들의 다양한 음식 취향에 맞게 개인의 맛 기호를 파악하여 알맞는 레시피를 추천하는 서비스 입니다.

담당한 페이지의 UI/UX 향상을 위해 디자이너와 소통
- 일주일에 3회 이상 소통하며 기획 내용과 현재 개발 상황 및 디자인의 세부 사항을 전달함.
Next, PWA, jotai 등의 신규 기술을 익히기 위해 FE 팀원들과 스터디 진행.
- 신규 기술을 많이 도입하여 스터디가 필요하다고 판단해 매주 기술 하나를 정해 각자 글을 씀
- 월요일마다 서로의 글을 공유하고 유용한 내용은 프로젝트에 적용.
프로젝트에 맞게 Next와 tsconfig 설정 값 조정.
모바일 화면에서도 사용 가능한 웹을 만들기 위해 PWA를 채택하여 프로젝트에 적용.
화면 크기를 감지하여 boolean 값을 반환하는 custom hook인 useMediaQuery를 만들어 모든 페이지를 반응형으로 만드는데 사용.
custom hook을 사용하여 영양소를 보여주는 pie chart를 반응형으로 구현
라이브러리를 활용하여 Masonry Layout을 구현하고 내가 좋아하는 음식 화면에 적용.
레시피 상세 페이지 웹에 필요한 Accordian 제작
- 3개의 페이지에서 사용되는 레이아웃으로 재사용성이 높아 제작.
- 아코디언의 항목을 컴포넌트화 하여 개수 조절이 가능하도록 제작.
사용자 기본 정보 및 맛 평균을 확인 가능한 마이페이지 구현
감정 상태에 따른 필터가 포함된 식단일기 페이지 구현.
레시피 상세보기 페이지, 식단일기, 마이페이지 , 정보페이지를 반응형으로 구현.

체험형 경제 교육의 필요성은 나날이 높아지지만 높은 진입 장벽 때문에 시도하지 못하는 선생님들을 위해, 문서로 된 딱딱한 경제 교육이 아닌 일상에서 자연스러운 경제 교육이 필요한 알파세대를 위해 탄생한 체험형 경제 교육 플랫폼 아이코입니다.
아이코는 순우리말인 아이와, 경제를 뜻하는 Economy의 합성어로 아이들이 재미있게 현실 경제에 대해 배웠으면 하는 마음으로 개발하였습니다.

FE 팀장으로서 팀원들과 자주 소통하고 일정을 체크함
- 회의를 통해 역할을 분담하고 진행 상황을 체크하여 일정에 차질이 없도록 조율
- merge 전 팀원들의 코드를 리뷰하여 더 나은 코드를 작성할 수 있는지 서로 의논하고 코딩 컨벤션, commit 규칙 등을 확인함
- 매주 월요일 프론트엔드 코드 리뷰를 진행함
프로젝트에 맞게 Next와 tsconfig 설정 값 조정.
태블릿 및 모바일 화면에서도 사용 가능한 웹을 만들기 위해 PWA를 채택하여 프로젝트에 적용.
- Service Worker를 이용하여 오프라인 상태에서도 푸시 알림을 제공
- 웹 앱을 홈 화면에 추가하도록 하여 사용자 경험 및 편의성 향상
Firebase Cloud Messaging을 이용하여 오프라인 상태에서도 푸시 알림을 보냄
재사용 가능한 공통 컴포넌트를 확인하고 이를 나누어 제작하였다.
- 와이어 프레임을 그리며 Button, Input, Card, Carousel, Dropdown, Modal, Table 등의 공통 컴포넌트를 확인한 후 제작하였다.
교사용 금융 페이지를 설계 및 구현
- 예금 페이지에 사용한 Table을 공통 컴포넌트로 제작하였다.
- 라이브러리를 활용하여 투자 페이지에 사용한 Graph을 공통 컴포넌트로 제작하였다.
- 투자 페이지에 사용한 Dropdown을 공통 컴포넌트로 제작하였다.
교사용 상점 페이지를 설계 및 구현
- 상점 페이지에 사용한 Card를 공통 컴포넌트로 제작하였다.
- 상품 상세보기 페이지에 사용한 Carousel을 공통 컴포넌트로 제작하였다.
학생용 상점 페이지를 설계 및 구현