Wecode First Project Remind

1. 프로젝트 명: 종말론(Apocalypse)

2. 프로젝트 소개

종말된 시대에 알맞은 상품들을 판매하는 커머스 사이트
향수 판매 커머스 사이트인 JoMalone의 클론코딩 프로젝트입니다.

3. 사용 기능: HTML, SCSS, REACT

4. 담당 기능

1. Nav Bar
   1.1 MouseOver, MouseOut 이벤트를 이용한 SubNav 구현
   1.1.1 Nav Menu에 MouseOver 시 Sub Menu Display: Block으로 변경
   1.1.2 다른 Nav Menu에 MouseOver 시 기존에 열려있던 Sub Menu의 Display를 None으로 변경하고 해당 Sub Menu Display를 Block으로 변경함.
   1.1.3 Sub Menu에서 MouseLeave 시 Sub Menu Display: None으로 변경
   1.1.4 SubNav 활성화시 BackGround 불투명화 (z-index 활용)
   
   1.2 제품 카테고리 API를 통한 제품 목록 구현
   1.2.1 제품 카테고리 API의 상태를 저장하고 Map 함수를 사용하여 Component를 재사용함.
   
   1.3 로그인 페이지 및 Token 저장
   1.3.1 ID, PAWSSWORD Value의 상태를 저장하고 서버로 저장된 정보를 보낸 후 Login 정보가 일치하면 서버로부터 받은 Login Token을 sessionStorage에 저장함.
   
   1.4 Token 유무에 따른 Login, MyPage 변환
   1.4.1 SessionStorage에 Login Token 존재 유무에 따라 조건부 렌더링을 함.
   1.4.2 Login Token이 없을 시 로그인 화면, Login Token이 존재하면 마이페이지 이동화면 구현
   
   1.5 검색 API를 통한 제품 검색
   1.5.1 Input Value의 상태를 저장하고 Enter Key Event가 발생하면 서버에 해당 Value의 정보를 검색 요청하고 화면에 구현함.
   
   1.6 로그인 Token 보유 시 유저 장바구니 목록 및 제품 삭제 구현
   1.6.1 SessionStorage에 Login Token이 없을 시 장바구니가 비어있음, Login Token이 존재하면 해당 유저의 장바구니 정보를 화면에 구현함.
   1.6.2 Fetch 내 Delete Method를 사용하여 삭제 버튼 클릭 시 해당 제품에 대한 정보를 서버에 삭제 요청하고 서버에 해당 유저의 장바구니 정보를 다시 요청하고 화면에 구현함.

2. 제품 목록 리스트
   2.1 RestFul API를 이용한 제품 필터링 기능
   2.1.1 CheckBox 선택 시 set Method를 통해 상태를 관리하고 서버에 대한 CheckBox Value에 대해 Filtering을 요청함.
   
   2.2 Sort Method를 이용한 가격기준 오름, 내림차순
   2.2.1 Sort함수를 통하여 가격 기준 제품에 대하여 오름, 내림차순 정렬을 구현함.

3. 고객 성향에 따른 제품추천
   3.1 Button click에 따른 질문지 전환
   3.1.1 상수 데이터를 활용하여 질문지 정보를 저장하고 상시로 업데이트를 할수있도록 구현함.
   3.1.2 질문지 버튼 클릭 시 버튼 Value의 상태를 저장하고 다음 질문지로 화면을 전환시킴.(Node Method를 활용하여 추적함)
   3.1.3 결과보기 버튼 클릭 시 저장된 Value 상태를 서버에 Filtering 요청함.(서버에 구현되지 않아 Mock Data를 활용함)
   3.1.4 Filtering 된 제품을 화면에 구현함.
   
   3.2 Reset button을 통한 상태 초기화
   3.2.1 reset 버튼 클릭 시 초기화면으로 돌아가며 저장된 Value 상태를 초기화 시킴.

5. 협업을 통한 얻은 점

1. 이전 직장(건설회사)에서 프로젝트랑 개발 프로젝트랑은 비슷한거 같으면서도 다르게 진행됨을 느꼈습니다.
   1.1 차이점
   1.1.1 건설 프로젝트
   외부 요인에 따른 프로젝트 수행에 불가항력적 방해 요소가 많음.(Ex. 기상, 노조 파업, 발주자 및 감리 클레임, 자재비 인상 등)
   1.1.2 개발 프로젝트
   외부 요인에 따른 프로젝트 수행에 방해 요소가 적음.
   
   1.2 공통점
   1.2.1 유관부서(팀원)과의 소통이 중요시 되며, 선행/후행 작업이 있는 만큼 딜레이되는 부분이 발생하면 후행 작업에 지장이 발생하게 됨.
   1.2.2 소규모로 진행되는 건에 대해서는 팀원 개개인의 역량이 중요하며, 개인이 막히는 부분이 있으면 보다 많은 지식을 가지고 있는 사람의 조언이나 팀 회의를 통하여 다양한 해결 방법을 모색함.
   1.2.3 개인의 욕심 혹은 고집이 프로젝트의 공멸로 이끔. 타인의 의견을 수용해야하는 열린 마인드가 필요함.

6. 프로젝트 수행에 있어 아쉬웠던 점

잘한 점을 회고하기보다는 아쉬웠던 부분에 대해 중점적으로 회고를 남기고 다음 프로젝트에는 같은 실수를 방지하는 것이 개인적인 발전에 더 좋을 것 같아 좋은 점은 생략하도록 하겠습니다.

1. 제가 담당하는 기능에 대해 너무 집중한 나머지 팀원분들의 진도를 전혀 고려치 못했음.
-> 팀원의 Blocker를 함께 고민하고 해결하여 프로젝트의 전체적인 완성도를 높여야함.

2. 간단하게 해결할 수 있는 코드에 대해 너무 복잡하게만 생각하느라 시간을 너무 사용했음.
-> 틀에 박힌 생각을 버리고 좀 더 유연하게 대처해야 할 필요가 있음.

3. 기능 구현에 너무 시간을 투자하여 CSS에 대해서는 안일하게 넘어갔던 부분이 많음
-> 기능 구현과 CSS에 대해서 적당한 밸런스를 찾아야됨.

4. 해당 작업들에 대하여 시간이 어느 정도 소모되는지 제대로 파악하지 못해 시간 배분이 엉망이였음.
-> 다음 프로젝트부터는 간트차트를 활용하여 스케줄 관리를 할 예정임.

5. 개인의 욕심 혹은 고집이 프로젝트를 수행함에 있어 공멸의 위험이 있다는 것을 뼈저리게 느낌
-> 나는 기능 구현이 재밌으니까 CSS 보다는 기능 구현만 집중할 것이다. 같은 이기적인 생각을 버려야됨

6. 최종 취합을 프로젝트 끝나기 전 날 하지말고 좀 더 일찍해서 버그를 잡는 시간이 있었으면 좋았을텐데 그 부분을 간과한게 아쉽습니다.

7. 기억에 남는 코드

1. Nav Bar 상태 관리
   1.1 최초 코드: Menu에 따라 상태 관리를 위하여 Object를 사용하여 관리를 계획 하였고 적용하는 부분에 있어 Object 상태 관리에 미숙함이 더해져서 비슷한 함수가 동일하게 사용되었으며 이로 인하여 코드가 길어지고 가독성이 떨어짐.

const OpenShopping = () => {
     setSubNav({
       shoppingNav: true,
       tendency: false,
       searchNav: false,
       myPageNav: false,
       wishListNav: false,
       shoppingBasketNav: false,
     });
   };
   const OpenTendency = () => {
     setSubNav({
       shoppingNav: false,
       tendency: true,
       searchNav: false,
       myPageNav: false,
       wishListNav: false,
       shoppingBasketNav: false,
     });
   };
   const OpenSearch = () => {
     setSubNav({
       shoppingNav: false,
       tendency: false,
       searchNav: true,
       myPageNav: false,
       wishListNav: false,
       shoppingBasketNav: false,
     });
   };
   const OpenMypage = () => {
     setSubNav({
       shoppingNav: false,
       tendency: false,
       searchNav: false,
       myPageNav: true,
       wishListNav: false,
       shoppingBasketNav: false,
     });
   };
   const OpenWishList = () => {
     setSubNav({
       shoppingNav: false,
       tendency: false,
       searchNav: false,
       myPageNav: false,
       wishListNav: true,
       shoppingBasketNav: false,
     });
   };

1.2 최종 코드: 멘토님의 도움을 받아 함수 실행 시 파라미터를 주고 이벤트 발생 지점 외 다른 부분들은 모두 False를 줌으로써 한 개의 함수를 통해 Nav Menu를 관리할 수 있게됨.

const OpenSuvNav = subName => {
     let obj = {
       shoppingNav: false,
       tendency: false,
       searchNav: false,
       myPageNav: false,
       wishListNav: false,
       shoppingBasketNav: false,
     };
     obj[subName] = true;
     setSubNav(obj);

2. Node Method: ClassName을 특정할 수 없어 Node Method를 통하여 동적으로 동작해야할 요소에 접근하여 상태를 관리함.또한 lastChild를 사용함으로써 질문지에 질문이 추가되어도 코드 수정 없이 관리가 가능함.

const CheckAnswer = e => {
    const parentNodebox = e.target.parentNode.parentNode.parentNode;
    const nextresultbox = e.target.parentNode.parentNode.parentNode.nextSibling;
    if (e.target.name === parentNodebox.parentNode.lastChild.className) {
      testinfo.push(e.target.value);
      parentNodebox.style.display = 'none';
      setResultInfoBox(resultInfoBox => !resultInfoBox);
    } else {
      testinfo.push(e.target.value);
      parentNodebox.style.display = 'none';
      nextresultbox.style.display = 'block';
    }
  };
  //----------return---------- 
  {TendencyTest.map(com => {
          return (
            <div
              className={com.className}
              key={com.id}
              style={{ display: 'none' }}

              <div className="questionBox">
                <div>
                  Q0{com.id}. {com.Question}
                </div>
              </div>
              <div>
                {com.Answer.map(com => {
                  return (
                    <div className="buttonBox" key={com.id}>
                      <button
                        onClick={CheckAnswer}
                        value={com.Value}
                        name={com.Name}

                        {com.Button}
                      </button>
                    </div>
                  );
                })}

8. 담당 기능 중 일부 구현 영상

9. 프로젝트 전체 기능 영상