🙌 미니프로젝트의 시작
이번주엔 백엔드와 협업하는 미니프로젝트를 진행했습니다. 주어진 주제는 '금융 상품 쇼핑몰'이었고, 저희 조는 대출 상품을 추천하는 사이트를 만들기로 했습니다.
⚙️ 내가 맡은 파트는 ?
저는 장바구니와 상세 페이지를 맡게 되었습니다. 1지망은 회원가입/로그인이었지만 아쉽게도 가위바위보에 져버리는 바람에 .. 그렇게 됐습니다
일단 장바구니에서 구현할 기능에 대한 저의 목표는
- 장바구니 상품 선택 기능 (전체 상품 , 선택 상품 주문/삭제)
- 모달창과 신청 완료 페이지를 통한 신청 여부 확인
입니다.
금융 상품 쇼핑몰이 주제여서일까요 .. 구현해야할 필수 기능에 장바구니는 있지만 구매는 없었습니다. 구색을 맞추기 위해 신청하기 기능을 추가해 야매로(?) 구매하기 기능을 구현하기로 했는데요 .. 필수항목이 아닌지라 백엔드분들께 추가적으로 api를 요청해야 했어요. 일단은 확답을 받지 못 한 상태라 모달창과 임의의 구매 완료 페이지를 통해 이용자에게 구매가 완료되었음을 보여주려 합니다
📈 작업 진행 상황은 ?
📍 장바구니가 비었을 때
📍 장바구니에 상품이 들어왔을 때
📍 상품 신청이 완료 되었을 때
까지 마크업이 진행되었습니다. 기획과 디자인까지 병행하다보니 고민이 많아서 진도가 더디네요
일단은 백엔드로부터 상품 데이터를 받지 못 한 상황이라 목데이터로 작업하고 있는데 .. 얼른 api를 연결해서 장바구니 추가/삭제 기능을 구현해보고 싶습니다
✏️ 새롭게 알게된 점
이번 프로젝트를 통해 styled component를 처음 써봤는데요
emptyCart ? (
<CartBtn primary>상품을 담아주세요</CartBtn>
) : (
<CartBtn onClick={handleClick} primary={false}>
신청하기
</CartBtn>
)
const CartBtn = styled.button<{ primary: boolean }>`
position: absolute;
bottom: 20px;
border-radius: 10px;
width: 90%;
font-weight: 700;
color: ${({ primary }) => (primary ? colors["INDIGO-9"] : "white")};
border: 1px solid ${colors["INDIGO-9"]};
background: ${({ primary }) => (primary ? "white" : colors["INDIGO-9"])};
padding: 10px;
`;
색깔만 다른 버튼의 경우, props로 값을 내려 색을 바꿀 수 있다는 것을 알게 되었습니다.
<CloseBtn>
<GrFormClose className="closeBtn" />
</CloseBtn>
const CloseBtn = styled.div`
position: absolute;
top: 15px;
right: 0;
.closeBtn path {
stroke: #605e5e;
cursor: pointer;
}
`;그리고 react icons의 경우 svg로 취급하여 스타일링을 할 수 있다는 점도 알게 되었어요.
근데 이상하게 장바구니 아이템의 삭제 버튼이 position, background-color 등의 스타일링은 적용이 되는데 color만 바뀌지 않는 오류(?)가 있었습니다. 결국 https://github.com/react-icons/react-icons/issues/404 를 참고하여 문제를 해결했는데요 무엇이 문제였는지는 아직 모르겠습니다 .. 아무튼 styled component에서 svg 색깔 변경이 안 될 땐 className을 지정해 path 경로의 stroke 로 색을 변경하면 된다는 것 ! 잊지맙시다
💻 백엔드도 공부해야겠다 ..
매번 강사님이 제공해주시는 api나 공공 api만을 사용해 작업하다 처음으로 백엔드 팀원분들과 협업을 진행했어요. 데이터 요청하는 방법을 결정하고, api 명세서를 적는 등 처음 해본 것들이 너무 많아 정신없이 한 주가 지나갔습니다. 백엔드 팀원분들과의 협업은 쉽지 않았지만 .. 모든 어려움은 저의 무지에서 비롯된 것이었습니다 ..
서버와 데이터에 대해 잘 모르니 혹시 이러한 요청이 실례가 되는 건 아닐지 걱정이 되기도 하고 .. 하고 싶은 질문은 있는데 너무 바보 같은 질문일까봐 망설이게 되더라고요.
아무튼 결론은 나만 잘하면 된다는 것! 모르는 건 공부해버리면 그만이니 쫄지 않겠어요 ㅎㅎ 열심히 공부할게요 언제 로그인을 맡게 될지 모르니 jwt 토큰에 대해서도 공부할거고요 api에 대해서도 더 빡세게 공부할 겁니다 다른 팀원분들 코드도 열심히 읽고 제 코드도 열심히 고쳐나갈게요 아좌좌
