미리보기

프로젝트 내용

반려동물 용품을 두 명이 함께 구매함으로써 구매 비용을 줄일 수 있는 공동 구매 서비스

주요 구현 사항

• 장바구니

  • React-Query를 사용하여 장바구니에 담은 상품 목록을 출력

  • 쿠키를 감지하여 로그인 상태를 확인하고, 로그인 하지 않은 경우 리다이렉트 처리

• 결제

  • React-Query를 사용하여 장바구니에서 선택한 상품 데이터를 가져옴으로써 장바구니 페이지와 중복된 코드 제거

  • 토스페이먼츠 코어 API 문서에서 제공하는 API를 바탕으로 결제 플로우 구현

개선 사항

• 사용자 경험 개선

  • 두 번째로 결제한 고객과는 달리 첫 번째로 결제한 고객이 지인과 함께 구매하는 경우를 고려해, 결제 성공 페이지에 제품 링크 복사 버튼을 추가

  • 복사 후 2초 뒤 ‘다시 복사하기’ 버튼으로 변경해 사용성 개선

프로젝트 내용

자신의 이력을 공유하고, 타인의 이력을 탐색하며, 사용자 간 고민과 의견을 나눌 수 있는 서비스

주요 구현 사항

• 커뮤니티

  • 게시물을 카테고리화 하여 베스트, 이직/커리어, 면접 후기로 분류하고, 베스트 게시물의 경우 좋아요 수가 많은 순으로 정렬

  • 사용자는 카테고리를 설정하여 게시물 작성 가능

  • 작성된 게시물에 좋아요 및 댓글 기능 구현

  • 사용자가 관심있는 주제를 검색할 경우, 검색 키워드와 일치하는 게시물을 필터링하여 출력

프로젝트 내용

두 개의 영상 URL을 등록하여 표절률을 검사하고 출력하는 서비스

주요 구현 사항

• 영상 비교

  • react-youtube 라이브러리의 Youtube 컴포넌트 사용

  • Youtube 컴포넌트의 videoId prop에 유튜브 영상 ID를 전달하여 URL 두 개를 입력했을 때 자동으로 ID에 맞는 영상이 첨부되도록 구현

• 표절률 계산 결과

  • AI 검사를 통해 출력된 결과를 화면에 bar 형태로 이미지 표절률, 텍스트 표절률 등을 출력

  • 표절률이 검출된 부분의 타임라인을 출력하여 사용자가 타임라인 클릭 시 해당 타임라인으로 영상이 이동하도록 구현

개선 사항

• 사용자 경험 개선

  • autoplay: 0 옵션을 통해 자동 재생 방지

  • 두 개의 영상 URL을 첨부했을 때, 자동 재생으로 인한 사용자 불편을 해소하고, 타임라인 클릭 시 자동 재생을 막아 표절 장면 확인을 용이하게 함

  • rel: 0 옵션을 통해 관련 영상을 표시하지 않음으로써 원치 않는 콘텐츠로의 이동을 차단

프로젝트 내용

대학생들이 친구나 이웃과 함께 음식을 주문하여 배달비를 줄일 수 있도록 돕는 서비스

주요 구현 사항

• 마이페이지

  • 대학생들이 사용 가능한 앱으로, 회원가입 시 메일로 학교 인증을 했는지의 여부인 email_auth 속성을 통해 false이면 ‘인증 전’, true이면 ‘인증 완료’ 표시

• 회원정보 수정

  • 기존 비밀번호를 올바르게 입력했을 시에만 회원 정보 수정 가능

• 참여한 게시물 목록

  • 사용자가 참여한 게시물이 무엇인지 한눈에 파악할 수 있도록 게시물의 제목과 주문하고자 하는 식당을 출력

  • 취소 버튼으로 손쉽게 참여 취소 가능

• HTML, CSS, JavaScript, React 프레임워크, Node.js, Express, Spring 프레임워크, JPA 이론 수강

• 공통/개인/팀 프로젝트 진행

• 팀 프로젝트에서 참여 기업인 (주)유라클의 지도를 받고 Morpheus를 사용하여 Neighbor-Food 개발

  • 마이페이지, 회원정보 수정, 참여한 게시물 목록 페이지 담당

  • 2023 경북 네트워크형 캠퍼스 SW 아카데미 2기 우수상