HandWash 팀 프로젝트 소개

H&M을 어떤식으로 이름을 바꿔볼까하다가 요즘 코로나 시대니까 손을 잘 씻고 다니자 라는 명분으로 패션브랜드랑은 맞지 않지만 뜻은 좋은 HandWash라는 팀 명이 만들어 졌습니다.

프로젝트 기간

• 2021.10.5 ~ 2021.10.15

👨‍👩‍👧‍👦 팀원 소개

Front-End

• 혜리님 Nav, Main, Footer, 페이지 구현
• 동혁님 Login, SignUp, 장바구니 페이지 구현
• 윤희님 상품 리스트 페이지 구현
• 태양(본인) 상품 상세페이지, 즐겨찾기 페이지 구현

Back-End

• 다빈님 상품API, 카테고리API, 장바구니 API
• 민호님 유저API, 즐겨찾기 API
• 공통 데이터 모델링, 데이터추가, 데이터 구축

💻 기술 스택

개발 도구

• React
• JavaScript
• HTML, CSS

🛠 협업 도구

• Trello 전체적인 일정관리와 팀원들의 작업 현황 API 관련을 공유했습니다
  
• Git & Github 전체적인 버전관리를 했습니다
• Slack 서로 소통이나 궁금한것들을 바로바로 물어볼때 사용했습니다.
• Notion API명세 공유
  

구현 기능

전체적으로 구현 페이지

• Nav (상단바) 혜리님
• Main (메인 페이지) 혜리님
• Footer (페이지 하단) 혜리님
• Login (로그인 페이지) 동혁님
• Siginup (회원가입 페이지) 동혁님
• productList (상품 리스트) 윤희님
• Product (상품 상세 페이지) 태양(본인)
• Favorite (즐겨찾기 페이지) 태양(본인)
• Basket (장바구니 페이지) 동혁님

Nav (상단바)

혜리님이 아주 열심히 구현해주신 상단바

카테고리 메뉴 부분이랑 로그인 쇼핑백 부분에 마우스를 가져다 두면 창이 나오게 구현이 되어있습니다.

• 카테고리,로그인,장바구니 마우스 호버기능

Main (메인 페이지)

혜리님이 기존 H&M 이랑 똑같이 만들려고 노력 하셨고 한칸씩 이동 되도록 슬라이더도 구현 하셨다

• CSS 커스터마이즈 슬라이더 구현

Footer (페이지 하단)

이부분도 혜리님이 작업 하신 내용이고 위에 아이콘들을 누르면 각자 팀원분들 블로그로 이동할수 있도록 구현해주셨습니다!

Login (로그인 페이지)

동혁님이 구현하신 로그인페이지는 데이터 베이스에 없는 아이디랑 비밀번호로 로그인을 할려고하면 로그인이 안되게 되어있고 아이디에는 @ 비밀번호는 8자리이상인 영어, 숫자, 특수문자,가 전부 포함되어야 버튼이 활성화 되도록 구현하셨습니다.

• JWT와 로컬스토리지를 사용한 로그인 기능 구현
• 로그인 유효성 으로 버튼 활성화

Siginup (회원가입 페이지)

동혁님이 구현해 주셨고 데이터를 백엔드 쪽에 전달해야하는 필수 부분은 이메일, 비밀번호, 생년월일을 전달해 줘야 가입이 가능하고 나머지는 적든 안적든 상관 없도록 구현을 하였습니다 아래 정보 추가하기를 클릭시 조건부 랜더링으로 아래 창이 나오도록 해주셨습니다.

• 조건부 랜더링으로 추가 창이 나오도록 구현
• state에 인풋 값을 저장해 백엔드한테 POST 구현

productList (상품 리스트)

윤희님이 고생하신 상품 리스트 페이지입니다.
카테고리 부분의 필터링 부분을 넣어서 사이즈 색상 버튼을 클릭해 원하는 제품들만 찾을수 있도록 구현해 주셨고 아래 상품 더보기 버튼을 클릭하면 24개 나오던 페이지가 16개씩 더 추가적으러 아래에 나오도록 구현해 주셨습니다. 또 상품 이미지를 클리하면 상세페이지로 넘어가도록 구현해 주셨습니다.

• 하트 아이콘 마우스 호버기능 및 클릭시 색상 변화
• 필터 기능 구현
• 상품 더보기 클릭시 상품 리스트들이 추가적으로 아래 보이도록 구현

Product (상품 상세 페이지)

• 애니메이션을 적용해 모달찰 구현
• 사이즈를 클릭시 state 값에 상품 아이디랑 상품 사이즈를 저장해 백엔드로 보내주어 장바구니로 보내는거 구현
• 동적라우팅을 적용해 상품페이지에서 이미지 클릭시 상품 id로 url 변경되게 구현

Favorite (즐겨찾기 페이지)

• 사이즈 버튼 클릭시 조건부랜더링을 활용해 모달창 구현
• 쓰레기통 버튼 클릭시 데이터 베이스에서 상품이 지워지게 구현
• 사이즈를 선택한후 담기 버튼을 클릭해 장바구니 데이터베이스에 저장되도록 구현

Basket (장바구니 페이지)

• 백엔드 장바구니 API와 연결해 데이터 받아오기 구현

코드 공유

머리로는 코드를 어떻게 작성해야할지 알았지만 어떻게 해야할지 몰라 방황하다가 래영님 도움을 받아 작성하게된 코드를 공유하겠습니다. 부모에 있는 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를 잘 활용을 하지못해 누가 어디까지 진행을 했고 무슨도움이 필요한지 잘 알지 못하고 넘어가다 보니 한주에 끝내야할거를 다 못끝내기도해 아쉬웠었고 백엔드와 조금더 소통을해서 데이터를 처음부터 맞춰 나갔다면 좀더 수월하게 시간을 단축 시켰을거라는 아쉬움이 들긴합니다.

깃 or 유튜브 주소

GitHub
YouTube