H&M을 어떤식으로 이름을 바꿔볼까하다가 요즘 코로나 시대니까 손을 잘 씻고 다니자 라는 명분으로 패션브랜드랑은 맞지 않지만 뜻은 좋은 HandWash라는 팀 명이 만들어 졌습니다.
혜리님이 아주 열심히 구현해주신 상단바
카테고리 메뉴 부분이랑 로그인 쇼핑백 부분에 마우스를 가져다 두면 창이 나오게 구현이 되어있습니다.
혜리님이 기존 H&M 이랑 똑같이 만들려고 노력 하셨고 한칸씩 이동 되도록 슬라이더도 구현 하셨다
이부분도 혜리님이 작업 하신 내용이고 위에 아이콘들을 누르면 각자 팀원분들 블로그로 이동할수 있도록 구현해주셨습니다!
동혁님이 구현하신 로그인페이지는 데이터 베이스에 없는 아이디랑 비밀번호로 로그인을 할려고하면 로그인이 안되게 되어있고 아이디에는 @ 비밀번호는 8자리이상인 영어, 숫자, 특수문자,가 전부 포함되어야 버튼이 활성화 되도록 구현하셨습니다.
동혁님이 구현해 주셨고 데이터를 백엔드 쪽에 전달해야하는 필수 부분은 이메일, 비밀번호, 생년월일을 전달해 줘야 가입이 가능하고 나머지는 적든 안적든 상관 없도록 구현을 하였습니다 아래 정보 추가하기를 클릭시 조건부 랜더링으로 아래 창이 나오도록 해주셨습니다.
state
에 인풋 값을 저장해 백엔드한테 POST
구현
윤희님이 고생하신 상품 리스트 페이지입니다.
카테고리 부분의 필터링 부분을 넣어서 사이즈 색상 버튼을 클릭해 원하는 제품들만 찾을수 있도록 구현해 주셨고 아래 상품 더보기 버튼을 클릭하면 24개 나오던 페이지가 16개씩 더 추가적으러 아래에 나오도록 구현해 주셨습니다. 또 상품 이미지를 클리하면 상세페이지로 넘어가도록 구현해 주셨습니다.
state
값에 상품 아이디랑 상품 사이즈를 저장해 백엔드로 보내주어 장바구니로 보내는거 구현id
로 url
변경되게 구현머리로는 코드를 어떻게 작성해야할지 알았지만 어떻게 해야할지 몰라 방황하다가 래영님 도움을 받아 작성하게된 코드를 공유하겠습니다. 부모에 있는 state
값을 자식에서 수정하고 싶을때 쓰는 코드 입니다.
// <부모>
class Favorites extends React.Component {
constructor(props) {
super(props);
this.state = {
product_id: '',
size: '',
};
}
goCart = () => {
const { product_id, size } = this.state;
fetch(API.cart, {
method: 'POST',
headers: {
Authorization: localStorage.getItem('token'),
},
body: JSON.stringify({
product_id: product_id,
size: size,
}),
});
};
handleCarts = (content, id) => {
this.setState({
size: content,
product_id: id,
});
};
// <자식>
<ul className="sizeContent">
{sizes.map(content => {
return (
<li key={content} onClick={() => handleText(content)}>
<button onClick={() => handleCarts(content, id)}>
<span>{content}</span>
</button>
</li>
);
})}
</ul>
처음으로 프로젝트를 하면서 걱정반 설렘반인 마음으로 시작을 했는데 팀원분들이 좋아서 그런지 마냥 좋았습니다. 모르는 것을 서로 물어보며 알려주고 팀원분 코드를 보며 궁금한것도 질문해보고 또 백엔드 분들과 처음으로 소통을 해보면서 데이터를 맞춰가고 백에드가 만들어주신 데이터를 연결해 화면에 나오게하는게 너무너무 신기했습니다.
협업 도구인 Trello
를 잘 활용을 하지못해 누가 어디까지 진행을 했고 무슨도움이 필요한지 잘 알지 못하고 넘어가다 보니 한주에 끝내야할거를 다 못끝내기도해 아쉬웠었고 백엔드와 조금더 소통을해서 데이터를 처음부터 맞춰 나갔다면 좀더 수월하게 시간을 단축 시켰을거라는 아쉬움이 들긴합니다.
태양님 ☀
아쉬웠던 점들은 2차 플젝에서 꼭! 보완해보셔요 -!
너무 너무 수고 많으셨습니다 👏🏻