🖥 CLONE PROJECT REVIEW
미술품 경매 사이트 Singulart의 클론 코딩 회고록 2021.04.26 ~ 2021.05.06 ✍🏻
🎨 YOUNGGULART
영혼까지 끌어 모아 예술하는 젊은 예술가들을 위한 예술품 경매 웹사이트YOUNGGULART 배포주소
⌨️ 기술 스택
frontend 3명 🔜 frontend githubHTML / CSS / Styled Components / JavaScript(ES6+) / React Hook / EC2 / S3 / Github Action
backend 2명 🔙 backend githubDjango / Python / CORS Header / MySQL / RDS / EC2 / S3 / Docker
⌨️ 협업툴
slack / git / notion / trello
💻 구현기능
- 카카오 소셜 로그인 / 로그아웃
- Slick Library를 활용한 메인 페이지 slider와 Carousel slider 👩🏻💻
- 가격, 높이, 넓이 슬라이더 필터링 기능
- 리스트 Pagination
- 디테일 페이지 tab slider 👩🏻💻
- 디테일 페이지에서 가격 선택 후 버튼 누르면 입찰가격과 카카오톡 메세지 전송 👩🏻💻
- 액자 프레임 선택과 사이즈별 가격변동 modal 👩🏻💻
- 오프라인 경매 일정 페이지 달력 API, 지도 API
- ObserverSection API를 활용한 무한스크롤과 로딩바
- AWS EC2, S3, github action을 이용한 배포 및 CI/CD 환경 셋팅
⭐️ slider세계 & 프레임
Library
신세계-✨맛봐선 안되는 맛을 봐버린 느낌이었다.
이유식만 먹던 아이를 갑자기 초콜렛 공장에 데려간 기분,,
css부분만 몇 가지 뚱땅땅 고치니 마법처럼 슬라이드가 완성되었다.
감격과 감동으로 자신감이 생겨 라이브러리 사용 없이 슬라이드를 만들어 보았다.
Carousel slider
❓ 머선129.. 슬라이드 넘기는 형식에서 막히기 시작했다.
useEffect(() => {
if (!slideRef.current.children.length) return;
slideRef.current.style.transition = 'all 0.5s ease-in-out';
slideRef.current.style.transform = `translateX(-${currentSlide})`;
}, [currentSlide]);
//currentSlide의 전체가 옆으로 움직였다;;%단위로 조금씩 움직이게 만들어보자!
useEffect(() => {
[...slideRef.current.children]?.forEach(div => {
div.style.transition = 'all 0.5s ease-in-out';
div.style.transform = `translateX(-${currentSlide}10%)`;
});
}, [currentSlide]);
//slideRef와forEach문을 활용하여 ${currentSlide}에서 -10%로씩 움직이게 해보았다로직을 좀 더 간단히 줄일 수 있다는 멘토님의 피드백과 함께 탄생한 최종 로직!✨
useEffect(() => {
const slide = slideRef.current;
slide.style.transition = 'all 0.5s ease-in-out';
slide.style.transform = `translate(-${currentSlide * 10}%)`;
}, [currentSlide]);🤥 아쉬운 점
modal 모듈화 작업
프로젝트를 진행하면서 내가 맡은 부분 이외에도 modal이 필요했던 부분이 굉장히 많았다. 공통으로 사용할 수 있는 것들은 전부 만들어 사용해 보고 싶었다. 그중 가장 많이 쓰이는 모달창을 모듈화하고 싶었는데 다른 기능 구현에 급급해서 하지 못했다 💧 기업 협업이 끝나고 못다한 작업들 전부해보고 싶다!!
👩🏻💻 끄읏-!
첫 프로젝트 회고록에 ⬆️ 이런 말을 적었었다.
그리고 결론은 칭찬 스티커를 하나 더 줘도 될 것 같다.ㅎ!
1차에 비해서 기업 협업 준비로 물리적 시간이 적었음에도 불구하고 계획했던 대부분의 기능 구현과 속도를 가지고 작업을 마쳤다.
자진해서 메인페이지와 디테일페이지를 하겠다고 이야기를 했지만 처음 써보는 함수형 컴포넌트 Hook으로 작업을 진행하면서 많은 당황을 했다.
혼자 라운지 구석에 가서 식음 전폐하고 있을 때마다 찾아와서 이것저것 챙겨준 동기들과 '재원님 편할 걸로 해요', '재원님 멘탈이 더 중요해요' 하며 박수와 응원해 준 소중 뽀짝 팀원들이 아니었다면 진짜 힘들었을 프로젝트였다. (제가 더 잘 할게요 라뷰들 🤍🙏)
어벤져스들과 함께 해서 많이 성장했고 좋은 마무리를 할 수 있음에 넘 감사했다.🧚♀️
