Link
사용 기술 및 라이브러리
Frontend
React, Typescript, React-Query, Tailwind-CSS, Vercel, ESLint, Prettier
Backend
Spring boot, JPA, AWS EC2, AWS S3, AWS CodeDeploy, Github Action, MysqlDB, Spring Security
Design
Figma
담당 분야
Web Frontend Developer
상세 내용
체크메이트는 자신이 원하는 성향의 룸메이트를 찾아 쾌적하고 행복한 기숙사 생활을 할 수 있도록 돕는 룸메이트 매칭 플랫폼입니다.
를 찾아 쾌적하고 행복한 기숙사 생활을 할 수 있도록 돕는 룸메이트 매칭 플랫폼입니다.1.
자신의 특성을 나타내는 체크리스트 작성
매번 기숙사 입사신청 시즌이 되면 올라오는 생활수칙 체크리스트를 몇 번의 클릭을 통해 간편하게 작성하실 수 있습니다.
매번 기숙사 입사신청 시즌이 되면 올라오는 생활수칙 체크리스트를 몇 번의 클릭을 통해 간편하게 작성하실 수 있습니다.2.
성별, 인실에 맞추어 확인하는 룸메이트 모집글
4인실 룸메이트를 구하려고 '4인실'을 검색했더니 남긱, 여긱이 모두 다 떠서 '4인실 남긱', '남긱 4인실' 과 같이 여러 조합의 검색어를 활용했던 경험 있으신가요? 이제는 필터링 기능을 통해 간편하게 원하는 글들을 확인하실 수 있습니다!
4인실 룸메이트를 구하려고 '4인실'을 검색했더니 남긱, 여긱이 모두 다 떠서 '4인실 남긱', '남긱 4인실' 과 같이 여러 조합의 검색어를 활용했던 경험 있으신가요? 이제는 필터링 기능을 통해 간편하게 원하는 글들을 확인하실 수 있습니다!3.
내가 원하는 룸메이트, 나와의 매칭률
나의 성향을 나타내는 체크리스트는 기본, 내 룸메이트에게 원하는 점은 따로 작성하실 수 있어요! 이러한 정보를 바탕으로 나와 꼭 맞는 룸메이트 모집글을 추천받을 수 있습니다. 나는 계속 방에 있고 싶은데 룸메는 계속 밖에 있는 걸 바라는 사람에게 유용할 수도..!
나의 성향을 나타내는 체크리스트는 기본, 내 룸메이트에게 원하는 점은 따로 작성하실 수 있어요! 이러한 정보를 바탕으로 나와 꼭 맞는 룸메이트 모집글을 추천받을 수 있습니다. 나는 계속 방에 있고 싶은데 룸메는 계속 밖에 있는 걸 바라는 사람에게 유용할 수도..!4.
룸메이트 관련 채팅을 한 눈에
카카오톡 오픈채팅이나 에타 쪽지 기능을 통해 룸메이트 관련 대화를 주고받다보면 나에게 어떤 사람들이 연락을 줬었는지 한 번에 확인하기 어려워요. 체크메이트 내의 채팅 기능을 통해 룸메이트를 구하기 위해 나눴던 대화들을 손쉽게 확인할 수 있습니다.
카카오톡 오픈채팅이나 에타 쪽지 기능을 통해 룸메이트 관련 대화를 주고받다보면 나에게 어떤 사람들이 연락을 줬었는지 한 번에 확인하기 어려워요. 체크메이트 내의 채팅 기능을 통해 룸메이트를 구하기 위해 나눴던 대화들을 손쉽게 확인할 수 있습니다.데모 영상
깨달은 점
해당 프로젝트를 진행하며 최근 트렌드인 Tailwind CSS를 사용해보았는데, 클래스명을 외워줘야 하고, 모두 작성해줘야 하기 때문에 기존에 사용하던 Emotion에 비해 비효율적일 것이라고 예상한 바와 달리 프로젝트 내의 사이즈를 지정해두고 적재적소에 사용할 수 있고, 따로 파일을 구성할 필요 없이 컴포넌트 파일 내에서 간편하고 짧게 CSS를 관리할 수 있음이 효율적이라고 생각하였습니다. 또한 룸메이트 모집글 조회 화면을 위해 페이징 처리가 필요하기 때문에 Intersection Observer API를 사용하여 커스텀 훅을 생성한 후, 화면의 최상단 혹은 최하단이 관측될 경우 React-Query의 useInfiniteQuery를 이용하여 무한스크롤(사용자가 특정 페이지 하단에 도달했을 때, API가 호출되며 콘텐츠가 끊기지 않고 계속 로드되는 사용자 경험 방식)을 구현하였습니다. 해당 과정에서 Intersection Observer API와 useInfiniteQuery 모두 처음 사용해보는 것이기 때문에 사전 조사가 필요했으나, 한 번 구현에 성공함으로써 앞으로 있을 많은 조회 API에서 유용하게 사용할 수 있을 것입니다.