필름 사진을 찍는 취미를 가지고 있습니다. 개인 SNS에만 아카이빙 해오던 사진들을 제가 직접 홈페이지를 만들어 갤러리 마켓 형식으로 사진을 보여주는 사이트를 제작했습니다.
react hook form 을 사용하여 입력창을 구현했습니다.
yup을 사용하여 잘못된 입력값이 들어올 경우 에러를 띄우고 버튼을 비활성화 시켰습니다.
작가 소개 페이지 입니다.
기본 퍼블리싱 작업을 진행했습니다.
Shop 메뉴를 클릭하면 바로 나오는 페이지로 사진을 모아볼 수 있는 목록입니다.
무한 스크롤과 map으로 해당 데이터를 계속해서 불러옵니다.
사진을 등록하는 페이지에서 비회원 유저는 게시글을 등록할 수 없도록 페이지에 권한 분기가 되어 있습니다.
로그인한 유저는 사진을 직접 올리고, 수정 및 삭제를 할 수 있습니다.
10MB 이상 사진 파일과 jpg, jpeg, png 이외의 파일은 업로드 할 수 없도록 검증을 합니다.
yup을 사용하여 잘못된 입력값이 들어올 경우 에러를 띄우고 버튼을 비활성화 시켰습니다.
Cart 를 누르면 해당 사진이 로컬스토리지에 담기도록 장바구니를 구현했습니다.
Buy here 을 눌러 해당 사진을 구매할 수 있으며, 금액 만큼 포인트가 차감됩니다. 잔액이 없을 경우 충전이 필요하다는 alert 창이 뜹니다.
해당 사진에 QnA 대댓글을 기능을 추가했습니다.
댓글 수정 및 삭제가 가능합니다.
커뮤니티 게시판 목록에서 페이지네이션 기능을 구현하였습니다.
상단 오른쪽에서 검색기능을 사용할 수 있습니다.
로그인한 유저만 게시글을 등록할 수 있도록 권한을 분기하였습니다.
게시물 등록하기에서 React Quill 웹 에디터를 적용시켰습니다.
YouTube Url을 입력시 동영상 업로드가 가능합니다.
마이페이지에서 장바구니, 포인트 충전, 충전 내역, 구매 내역을 확인할 수 있습니다.
마이페이지 Charge 버튼을 클릭하면 아임포트를 통해 포인트를 충전할 수 있습니다.
kakao map을 연동하여 피동보다 능동 office 주소로 길찾기를 안내합니다.
email을 클릭시 작가에게 메일을 보낼 수 있습니다.
[web] min-width: 1024px
[tablet] (min-width: 381px) and (max-width: 1023px)
[mobild](max-width: 380px)
부트 캠프 수료 후 React와 next.js 이용해 개인 홈페이지를 만들었습니다. 성과를 증명해 줄 객관적인 수치나 지표가 없지만 실제로 업무에서 쓰이는 기술로 각각의 기능을 하는 웹사이트를 만들었다는 점에서 스스로 발전하고 있다는 생각이 들었습니다.
디자인부터 기획 그리고 기능 구현, 배포까지 혼자 진행하다 보니 그만큼 능동적으로 해결해야 하는 부분이 많았습니다. 기술 구현을 하면서도 계속해서 디자인을 수정하게 되고, 구현하고자 했던 기능들을 완성은 했지만 내가 짠 코드가 좋은 코드인지, 좋은 설계인지 객관적인 지표가 없어서 혼란스러웠습니다.
하지만 더 열심히 자료를 찾아보고 공부를 하면서 저의 부족한 부분을 채워나갔습니다. 이 모든 과정을 포기하지 않고 어떻게든 프로젝트를 완성하고 배포시켰다는 점에서 제가 하고 있는 일에 더 애착도 가지게 되었습니다. 처음으로 진행한 개인 프로젝트지만 몸소 체감한 부족한 점들을 개선하여 다음 프로젝트에서 한층 더 성장한 실력을 발휘하고 싶습니다.