🍊 첫번째 프로젝트 - [제이솝 JSOP]
- 첫번째 프로젝트 클론코딩 사이트로 이솝(Aesop)사이트를 결정했다!
⏰ 개발 기간
﹣ 2022.10.31~11.11
⚒️ 기술 스택
[프론트] - React, Javascript, Router, Sass
[백엔드] - Node.js / Express / Bcrypt / jsonwebtoken(JWT) / MySQL(+ Morgan / Cors / Typeorm)
🙋🏻♀️ 내가 담당한 부분
- 메인화면 UI, 로고, 파비콘, 상품 이미지 제작 🎨
- 상품 캐러셀 기능 구현
- 카테고리 필터링 구현
- 상품 디테일 페이지로 연결
(1) 이미지 제작과정
먼저 사이트 디테일과 이미지 저작권(?) 문제로 이미지를 제작했다!
포토샵 이용해서 로고랑 상품이미지를 만들어봤는데 png 저장이 잘 되지 않아서 약간 애를 먹었지만! 다 만들고 나니까 뿌-듯했다!
(2) 상품 캐러셀 기능
처음 파트 분배할때부터 캐러셀 기능을 구현해보고 싶어서 내가 하고싶다고 했다!
아래 보이는 캐러셀이 내가 구현해낸 캐러셀이다 !
두가지 버전이 있는데 첫번째는 상품 한개씩 움직이는 것이고,
두번째는 현 페이지가 모두 넘어가도록 만들었다.
carousel.js
const prevCarousel = () => { //이전으로 움직이는 캐러셀
if (currentCarousel > 0) {
currentCarousel = currentCarousel - 1;
}
let moveToCarousel = currentCarousel * -32; //캐러셀 움직이는 부분
let moveToPage = currentCarousel * 22; //캐러셀 아래 페이지 이동부분
carouselRef.current.style.transform = `translate(${moveToCarousel}vw)`; //현재위치에서 지정된 범위만큼 위치 이동
pageRef.current.style.transform = `translate(${moveToPage}vw)`;
setCarousel(currentCarousel);
};
const nextCarousel = () => { //다음으로 움직이는 캐러셀
if (currentCarousel < item.length - 3) {
currentCarousel = currentCarousel + 1;
}
let moveToCarousel = currentCarousel * -32; //캐러셀 움직이는 부분
let moveToPage = currentCarousel * 22; //캐러셀 아래 페이지 이동부분
carouselRef.current.style.transform = `translate(${moveToCarousel}vw)`; //현재위치에서 지정된 범위만큼 위치 이동
pageRef.current.style.transform = `translate(${moveToPage}vw)`;
setCarousel(currentCarousel);
};
위 코드는 상품 한개 이동 캐러셀 코드로, 전체페이지 이동은 이동범위를 이미지 크기만큼 지정해주었다.
(3) 카테고리 필터링 구현
//카테고리 클릭하는 필터링
const contentChange = e => {
e.preventDefault();
setContent(e.target.value);
fetch(
{서버주소}
)
.then(res => res.json())
.then(res => {
const filterItems = res.filter(detail => {
return detail.category.level_2_category === e.target.value;
});
setFilterItem(filterItems);
});
};
카테고리 버튼에 클릭 이벤트를 주었고, 상단에 클릭한 카테고리를 확인 할 수 있도록 만들었다!
e.target.value에 해당하는 제품들은 filter메소드를 통해 가져와서 저장했고, 밑에서 map을 돌려서 페이지를 만들었다!
(4) 상품 디테일 페이지로 연결
const [product, setProduct] = useState([]);
const params = useParams();
useEffect(() => {
window.scrollTo(0, 0);
fetch(`{서버주소}/${params.id}`)
.then(res => res.json())
.then(res => setProduct(res));
}, []);
{product.map(props => {
return <CategoryProductDetail key={props.id} {...props} />;
})}
useParams()를 이용하여 서버에서 해당 상품의 id에 해당하는 정보를 가져왔다! 그리고 props이용해서 디테일 페이지 안에 데이터를 넣어주었다!
🥺 어려웠던 부분
− 위에서 카테고리 필터구현을 어떤 식으로 해야할지 감이 안잡혀서 map만 냅다 돌렸는데,, 팀원들이 도와주셔서 filter 메소드 사용해서 해결했다..
그리고 처음 깃에서 merge를 main으로 해버려서 되돌리는데 애를 먹었다..😿 진짜 Git은 끝판왕으로 너무너무 어려웠다... 에러풀면 새로운 에러가 생기구,,눈물의 연속이었다..그리구 gitk ..=>이친구 진짜 눈으로 딱딱보여서 아주 좋았다!!신세계였달까...?
🫶 프로젝트 마치는 소감
﹣ 처음 프로젝트을 진행해봤는데 너무 재밌구, 행복했다🔥
우리팀~~ (💗지온,기밍,떵아,우령쿤,상유니,기혀니💗) 모두모두 수고하셨어욤🥺 다들 도움요청도 잘 도와주셔서 너무 감사했고, 회의할때도, 회의안할때도! 분위기 너무너무 좋고 재밌어서 하는 내내 너무너무(x10000)!즐거웠다(제이솝 최고👍)❤️ 다음에는..2인분할수있도록 성장해서..돌아올거니까..! 우리 타입스크립트로 기깔나는거 한번 더 맹드러봐요오~~🫶
