미리보기

신발을 판매하는 이커머스 사이트

팀구성 -FE 3명 , BE 2명

나의 역할 : 로그인,회원가입 페이지 / 제품 상세 페이지 마크업 및 기능 구현

로그인, 회원가입 페이지
• 사용자의 이메일, 비밀번호 입력을 통한 로그인 / 회원가입 기능 구현
• 정규표현식을 활용한 유효성 검사를 통해, 사용자들이 잘못 기입하여 발생할 수 있는 에러를 미연에 방지
• 프론트엔드 ↔ 백엔드 간 토큰 방식을 이용한 인증/인가 기능 구현

제품 상세 페이지
• 사용자가 최소한의 움직임으로 페이지를 경험할 수 있게 하기 위해 버튼 클릭시 지정된 위치로 스크롤이 이동하게 함
• 제품의 색상, 사이즈를 선택하지 않으면 alert창을 띄워 유저가 선택해야 하는 부분을 알려줌
• 사용자가 선택한 제품의 수량과 색상, 총 가격등 제품에 대한 정보를 한 눈에 알아보기 쉽게 보여주기 위해 모달창을 생성함
•로그인을 할 때 생성된 코인을 통해 회원중에서 실제 제품을 구매한 회원만 리뷰를 작성할 수 있게 함. 이를 통해 제품에 대한 신뢰도를 가질 수 있게 함.

온라인에서 책을 소장 및 대여 후 뷰어를 통해 열람할 수 있는 서비스를 제공하는 사이트

팀구성 -FE 3명 , BE 2명

나의 역할 : 메인 페이지 / 뷰어 마크업 및 기능 구현

메인 페이지
• slick 라이브러리를 사용하여 캐러셀 기능 구현
• 카테고리 버튼을 이용한 윈도우 스크롤 이동
• 백에서 받아온 데이터에서 배열의 길이가 기준값을 넘으면 더보기 버튼이 보여지게하고 처음 보여지는 책의 수량 조절
• 성인 카테고리는 블러효과를 사용하여 19세 미만 사용자는 썸네일 확인 및 클릭을 할 수 없게 설정

뷰어
• 서재에서 모달창 오픈시 받아온 데이터를 props로 받아와 관리
• slick 라이브러리를 사용하여 이미지를 보여줌
• range바를 이용해 현재 페이지의 value값을 확인할 수 있게 UI 구성
• 회차 선택 시 해당하는 페이지로 이동하는 기능 구현
• 권 선택시 해당하는 권의 첫번째 페이지로 이동하는 기능 구현
• 마지막 페이지에서 nextArrow클릭 시 다음권으로 이동하는 기능 구현
• 마지막 권일 경우 이동하지 않고 alert창을 통해 마지막 권임을 알림

나의 기억을 그림으로 그려주는 ai를 이용한 치매를 예방하는 서비스

팀구성 -FE 2명 , BE 1명, 디자이너 1명, 기획자 1명

나의 역할 : 피드 페이지, 피드 디테일 페이지 마크업 및 기능

피드 페이지
• 나의 피드, 친구의 피드로 페이지 분할
• 자세히 보기 버튼 클릭 시 피드 디테일페이지로 이동
• 백엔드와 통신 후 받아온 데이터를 필요한 형태로 가공 후 사용.

피드 디테일
• 댓글 남기기 버튼 클릭시 모달창을 열어 댓글의 형태를 선택하게 함.
• 목소리, 덕담카드 버튼 클릭시 새로운 모달창 생성.
• 목소리 버튼 클릭시 열리는 모달창에서 마이크를 이용하여 사용자의 목소리를 녹음하고 녹음파일을 백엔드에게 전달
• STT를 통해 생성된 text를 사용자에게 보여준 뒤 답장 남기기 버튼 클릭 시 댓글 생성
• 덕담카드 버튼 클릭시 열리는 모달창에서 각 카드의 value 값을 이용하여 백엔드와 통신
• 댓글이 달린 날짜와 시간을 현재의 날짜와 시간과 계산하여 분, 시간, 일 단위로 쪼개서 표시