메인 페이지
스토어 페이지
회원가입, 로그인 페이지
상품 리스트, 상세 페이지
장바구니 페이지
결제 페이지
useEffect(() => {
const fetchData = async () => {
const {
data: { cart_list },
} = await axios.get(`${URL}/cart`, {
headers: { Authorization: localStorage.getItem("token") },
});
setProducts(cart_list);
};
fetchData();
}, []);
const updateFech = async (btn, index) => {
try {
const result = await axios.patch(
`${URL}/cart/${products[index].id}`,
{
cart_button: btn,
},
{ headers: { Authorization: localStorage.getItem("token") } }
);
} catch (err) {}
};
const handleRemove = async (id, index) => {
try {
const result = await axios.delete(
`${URL}/cart/${products[index].id}`,
{
headers: { Authorization: localStorage.getItem("token") },
},
{}
);
} catch (err) {}
const temp = [...products];
const filteredItems = temp.filter((item) => item.product_id !== id);
setProducts(filteredItems);
};
2차 팀 프로젝트로 FREITAG 웹사이트 클론을 진행했다. FRIETAG은 1993년 스위스의 그래픽 디자이너 형제가 만든 브랜드이며, Recycling이 아닌 Upcycling(단순한 재활용이 아닌 버릴 물건으로 뭔가 생상적인 것을 만들어 새로운 의미를 찾자는 개념으로 recycling과는 다르다)을 하자는 친환경 에코백을 판매하는 커머스 사이트이다.
팀은 프론트엔드 4명과 백엔드 2명, 총 6명으로 진행되었다. 그 중에서 나는 상품 장바구니 페이지 기능 구현을 맡았다. 장바구니 페이지에서 1차 때 아쉬웠던 부분인 백엔드와의 통신을 많이 해볼 수 있을 것 같아서 장바구니 페이지의 기능 구현을 맡았다. 실제로 장바구니 한 페이지에서만 get 요청, patch, delete 등 다양하게 해볼 수 있었다.
프론트&백엔드의 소통
1차 때와 마찬가지로 전체적으로 백엔드와의 소통이 부족함을 많이 느꼈던 것 같다. 2차 프로젝트에서 특히 많은 문제들이 있었던 것 같다. 나는 장바구니 페이지 기능을 구현을 마치기 전 백엔드 장바구니 기능을 담당하신 분에게 데이터 구조라던지 키값을 꾸준히 이야기하여 기능 구현을 마쳐 Back-end API 통신이 어렵지 않았고, 1차 프로젝트 때보다 수월하게 협업이 이루어지고 있다고 생각했다.
하지만 팀원들 중 몇몇은 미리 작업해 둔 Mock data와 발표 전 날 실제로 Back-end에서 나온 API의 데이터의 구조가 너무 많이 달랐고, 나는 발표 당일 새벽까지 밤을 새어 가며 함께 수정했었다.
그리고 결국 발표 전날까지 전체 페이지를 이어 붙여보지 못 했고, 당일까지 프론트의 페이지 전체를 연결하지 못해 따로 발표하는 일이 벌어졌다...😓😓
내가 처음 PM를 맡아서 진행했던 프로젝트였는데 내가 맡은 부분만 신경쓰느라 다른 팀원들에게 신경쓰지 못 한 것 같고 프로젝트를 잘 진행하지 못해 아쉬운 점이 많은 2차 프로젝트였다.