BODYLIKE 상세 페이지 구현

 

 

 

 

👆 상세 페이지 구현 움짤

 

 

 

 

 

 

BODYLIKE  project

 

 

 

 

총 5명이서 구성된 Team coner ( FE : 3, BE : 2 )에서

2주간 오로지 학습용으로 bodylike를 구현했습니다.

그 중 로그인, 회원가입 창 / 상세 페이지를 맡았습니다.

 

 

 

상세 페이지 창 

 

 

 

---

 

 

 

구현한 기능

 

 

 

• 상품 정보 옆 리뷰 버튼 누르면 하단 리뷰로 슬라이드
• 상품 카운트 음수로 내려갈 시, 재고 이상 누를 시 알림창 뜸
• 상품 카운트 누른 후 장바구니 클릭 시 로그인 되어 있을 시 모달창 뜨면서 장바구니/쇼핑하기 버튼 뜸, 로그인 안 되어 있을 시 알람창 뜨며 로그인 창으로 이동
• 모달 창에서 장바구니 가기 클릭시 제품이 장바구니에 담기며 장바구니로 이동 (모달창 구현 x)

 

 

 

---

 

 

 

 

상세 페이지를 만들면서 가장 중요하게 생각했던 것은

data를 받아오는 fetch 함수였다

 

 

총 3개의 fetch 함수가 필요했는데

상세 정보를 받아오는 (동적 데이터 사용, method : GET) 함수와 장바구니로 가기 버튼과 구매하기 버튼에 들어갈 함수였다

 

 

 

 

 

 

제품 상세 정보 받는 fetch 함수

 

 

이렇게 짰다

 

 

params 를 이용해 정보를 받고 params.id를 productId 라는 변수에 넣어 url 끝에 넣어주었다

product 데이터는 객체 안의 배열로 오기 때문에 useState에 ([]) 빈 배열을 넣어 주었고

데이터 형식에 따라 각각 name, thumbnail_image_url, price, detail, stock 을 구조 분해 할당해 각각 필요한 곳에 넣었다

 

 

👆 데이터 형식, 처음엔 목데이터를 만들어 썼다

 

 

 

 

 

 

 

장바구니 버튼 / 구매하기 버튼 관련 fetch 

 

 

초반에 구현했을 땐 로그인 / 회원가입 창과 같이 merge 되지 않아 

백엔드분께 따로 토큰을 발급 부탁드려 

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjYsImV4cCI6MTY2MTQ0MzI2NSwiaWF0IjoxNjYxMDgzMjY1fQ.KmF-Jp46fdHKwxS01SJ8PtF5yD1SkQP8rwQFA6tU9rQ"

 

를 변수에 담아 썼었다 😅

 

 

그로인해 로컬 스토리지에  토큰이 있는지 없는지 판별하는 부분은 통신이 늦었는데

이때 Token 키 값을 확인하지 않아서 긴 시간 고생을 많이 했다

 

괜히 로직 다시 써보고 뜯어고치고... 덕분에 fetch 함수를 정말 오랜시간 들여다보았다

 

 

 

 

 

 

 

 

장바구니 / 구매하기 fetch 함수 👇

 

 

 

👆 token 변수는 장바구니와 구매하기 버튼 둘 다 사용하므로 상단에 올려놓았다

 

 

 

 

얼리 리턴을 위해 token이 없을 경우를 먼저 짰다

이렇게 짜면 굳이 서버와 통신하지 않아도 토큰 여부를 프론트엔드에서 먼저 확인해 결과를 보여줄 수 있다

 

method : post 로 서버에 수량을 담아 보내주었고

수량이 재고가 넘을 시 (status 401번) 재고 수량이 부족하다는 알림이 뜨게 했다

 

 

 

 

재고 수량 관련해서 제품 카운트 할 시 알림창에 뜨게끔 막아놓긴 했으나

 

 

서버와 함께 이중으로 막아 좀 더 철저하게 보안을 했다

( + 음수가 되지 못하게 로직 짬)

 

 

 

 

로그인 토큰이 제대로 있는 상태에서 재고 이하의 물건을 담아 장바구니 버튼를 클릭할 시

 

장바구니로 가기 / 쇼핑 계속하기 버튼이 나오는 모달창이 뜨게 했는데

 

팀원이 구현한 모달창 관련 함수를 (false)로 지정해놓고 (true)로 바꾸어 모달창이 뜨게끔 했다

 

 

 

 

 

 

 

 

상세 페이지 내 리뷰 칸으로 슬라이드 하는 기능

 

 

 

기능을 구현하며 useRef hooks을 처음 접해보았다

 

 

렌더링 하지 않고도 컴포넌트가 위치한 곳으로 슬라이드 할 수 있었는데

 

 

useRef 를 homeRef 변수에 담아

이를 가장 마지막에 있는 리뷰창에 근접한 div에 넣어주었다 

스르륵 넘어갈 수 있도록 따로 {behavior : 'smooth'} 스타일도 걸어주었다

 

 

처음 접한 훅이라 어렵다고만 느꼈는데 기능 구현이 생각보다 어렵지 않아 즐겁게 구현할 수 있었다 ☺️

 

 

 

 

 

 

 

 

느낀점

 

 

 첫 프로젝트였던 만큼 아쉬움이 많이 남는다

특히 fetch 함수 관련해서 장바구니에 너무 집중한 나머지 구매하기 fetch가 조금 허술한 게 아니었나한다

 

 

그러나 상세 페이지를 구현하면서 깨달은 것은

 

data 형식을 잘 보고 함수를 짜야한다는 것과

꼭 백엔드분과 같이 맞추어야 오류를 빨리 찾을 수 있다는 것이었다

 

 

오류가 날 시 같이 콘솔을 찍어보며

 

 

프론트, 백엔드 중 어느 쪽에 문제가 있는지

프론트 엔드 함수식 문제라면 어디까지 데이터가 들어왔는지, 이유가 무엇인지

데이터를 주는 쪽과 받는 쪽 모두 같이 고민하는 과정이 매우 즐거웠고

또 서로의 업무에 대한 이해도도 높아져 유익한 시간이었다 느낀다