1. 프로젝트 소개

모두의 공방 클론 프로젝트

모두의 공방은 원하는 공방을 쉽고 빠르게 찾을 수 있는 맞춤 제작 전문 플랫폼입니다.
모두의 공방에서 제공하는 주요 기능은 맞춤 제작을 문의할 수 있는 맞춤 제작소와 이미 만들어진 제품을 옵션에 따라 구매할 수 있는 디자인마켓으로 이루어져있습니다.
저희는 디자인마켓의 다양한 옵션 선택 기능과 필터링 기능을 구현해보고 싶어서 모두의 공방을 선택했습니다.

개발기간 및 인원

• 개발 기간: 2022-09-19 ~ 2022-09-30 14:00
• 개발 인원: 5명 FE : 김유현, 안승섭, 정세영 BE : 이해연, 박지은

GitHub Repo

• Front End
• Back End

팀 노션

• 4팀 사조의 공방 팀노션 보러가기

시연영상

• 시연영상 보러가기

기술스택

• Front End
  HTML / CSS JavaScrip React.js CRA Redux
React Router axios Font Awesome SASS

• Back End
  Node.js Express.js serve-statc Bcrypt My SQL

• Communication
  Slack Notion Zep

주요기능 및 설명

✅ 메인 페이지

• Header/Footer UI
• Navigation bar UI
• 이번달 신상 모음 및 이번달 인기 상품 리스트 UI
• 이번달 신상 모음 및 이번달 인기 상품 API 연동

✅ 로그인/회원가입

• 유효성 검사
• 회원가입시 주소 API 사용

✅ 상품 리스트 페이지

• 상품 리스트 UI
• 카테고리별 동적 라우팅
• 카테고리별 정렬 기능
• 상세페이지로 동적라우팅
• API 연동

✅ 상품 상세 페이지

• 상세 페이지 UI
• 옵션 다중 선택
• 찜하기 기능
• API 연동

✅ 장바구니 페이지

• 장바구니 UI
• 장바구니 수량 변경, 가격 변동, 삭제, 결제
• API 연동

✅ 마이페이지

• 회원정보 UI
• 결제 목록, 찜한 상품 목록
• 리뷰 작성하기
• 리뷰 작성한 제품의 상세페이지로 동적 라우팅
• API 연동

---

2. 프로젝트 진행 과정

Planning Meeting 1: 주제선정,범위설정

• 각자 2개 이상의 웹페이지를 찾아와서 소개하는 시간을 가졌습니다.
• 투표를 통해 모두의 공방을 클론 페이지로 선정했습니다. 일반적인 이커머스가 아닌 맞춤 제작이라는 점에서 다양한 옵션 선택 기능이나 필터링 기능을 구현해볼 수 있는 기회라고 생각해서 선택했습니다.
• 함께 웹사이트를 둘러보면서 주요 기능과 사이트의 흐름을 파악했습니다.
• 시간 제약이 있는 만큼 구현할 기능과 제외할 기능들을 명확하게 나눴습니다. 저희는 우선 디자인 마켓의 주요 기능들을 구현한 후 시간이 있다면 맞춤제작소의 채팅 기능까지 구현하는 것을 목표로 설정했습니다.
• 각자 기능에 대해 더 탐구하고 다음 플래닝 미팅 때 역할을 분담하기로 했습니다.

Planning Meeting 2: 역할 분담, 컨벤션

• 각자 원하는 기능을 소개하고 겹치는 부분이 있으면 조율하면서 역할을 분담했습니다.
• 코드 컨벤션과 Git 컨벤션을 정리했습니다. 👉프론트 코드 컨벤션 보러 가기
  

• 프로젝트 초기세팅과 파일구조를 정리했습니다.
  - Pages 파일에 페이지 파일들을 생성했습니다.
  • Components 파일에는 page단위의 파일들을 생성하고 그안에 해당 페이지에 사용될 컴포넌트 파일들을 생성했습니다.
  • 여러 페이지에서 재사용되는 컴포넌트의 경우 따로 폴더를 만들고 그 안에 파일을 생성했습니다.
  • 이미지 파일은 src>assets>image 폴더에서 관리했습니다.
  • 목데이터는 piblic>mocks 에서 관리했습니다.
• Git Flow 방식으로 협업을 진행하도록 결정했습니다.

Planning Meeting 3: 새로운 기획 회의

• 클론 페이지인 모두의 공방이 리뉴얼에 들어가서 UI가 제대로 보이지 않는 문제가 발생되어 이를 해결하기 위해 3번 째 플래닝 미팅을 갖게 되었습니다.
  
• 모두의 공방 측에 문의해본 결과 리뉴얼 기간이 2~3개월 정도 될것이라는 답변을 받았고 기다리고만 있을 수 없다는 판단을 내렸습니다. 이미 어느정도 프로젝트가 진행된 상황이었기 때문에 다른 사이트를 찾는 것 보다 저희가 직접 기획 및 디자인을하여 우리들만의 사이트를 만들기로 했습니다.
• 비슷한 형태의 웹사이트인 오늘의 집, 무신사 등 웹사이트들의 UI를 같이 분석하고 차용하면 괜찮을 부분들을 참고해 제작했습니다.
• 리뉴얼 이슈가 발생하여 시간이 부족할 것 같다는 판단을 내렸고 맞춤 제작소 부분은 과감히 제외시켰습니다. 대신에 제작자 페이지를 만들어서 팀원들의 프로필을 넣어 우리만의 공방 페이지를 만들었습니다.

Daily Stand-Up meeting

• 프로젝트 진행 기간동안 매일 오후 2시에 30분 내외로 스탠드업미팅을 진행했습니다.
• 진행상황을 공유하고 공유해야할 이슈를 공유했습니다.

Emergency Meeting

• 작업 중 물어봐야할 것이 생길 때 마다 slack, zep을 사용해 소통했습니다.

GIT Flow 방식

• 개발 사항을 main 브랜치에 병합하지 않고 develop 브랜치에 병합하고 마지막에 main branch에 병합했습니다.
• 새로운 UI 또는 기능을 구현할 때 또는 발견된 버그를 처리할 때 마다 Issue를 등록해 팀원들의 진행상황을 tracking 할 수 있도록했습니다.
• Issue를 등록할 때 태그를 적극적으로 활용했고 작업 내용을 구체적으로 작성했습니다.
• commit을 남길 때 헤더-바디-푸터 구조로 작성하여 작업 내용을 세세하게 기록할 수 있도록 했습니다. 푸터에 Issue 번호를 적어서 어떤 Issue에 속한 작업인지 기록했습니다.
• PR은 하나의 Issue가 완료 될 때 마다 올렸습니다. PR이 Issue와 연동되도록했습니다.

---

3. 담당한 기능

✅ 메인 페이지

• Navigation Bar에 조건부 함수와 MouseEnter 이벤트를 활용해 드롭다운 메뉴를 구현했습니다.
• 베너 광고의 이미지들을 직접 디자인 및 제작했습니다.
• swiper 라이브러리를 사용해 베너 광고 부분을 carousel로 구현했습니다.
• 신상품과 인기상품 리스트부분은 라이브러리를 따로 사용하지 않고 JavaScript로 직접 슬라이드 기능을 구현했습니다.
• 아이템카드 컴포넌트를 재사용하여 리스트를 구현했습니다.
• 표현식을 활용해 상품을 클릭했을 때 해당 상품의 상세페이지로 넘어갈 수 있도록 동적라우팅을 구현했습니다.

✅ 상품 리스트 페이지

• useEffect의 의존성 배열과 표현식에 카테고리id state를 담아서 카테고리 별로 다른 상품들이 나타나도록 동적 라우팅을 구현했습니다.
• 아이템카드 컴포넌트를 재사용하여 리스트를 구현했습니다.
• 백엔드와 통신하여 추천순, 판매량순, 낮은 가격순 , 높은 가격 순 정렬기능을 구현했습니다.
• windows height와 scroll event를 활용하여 무한 스크롤 기능을 구현했습니다.
• useEffect의 의존성 배열과 표현식, return함수를 활용해 정렬기능이 적용된 상태에서 무한스크롤이 작동할 수 있도록 구현했습니다.
• 상품을 눌렀을 때 해당 상품의 상세페이지로 넘어갈 수 있도록 표현식을 사용해 동적라우팅을 구현했습니다.

✅ 장바구니 페이지

• 버튼에 value값을 부여해 해당 아이템의 수량/가격만 변동및 삭제되도록 구현했습니다.
• map함수와 reduce함수를 사용해 제품가격, 총배송비, 총결제가격을 표시하고 변동을 트래킹할 수 있도록 구현했습니다.

✅ 제작자 페이지

• 아이템카드 컴포넌트를 재사용하여 제작자 페이지를 구현했습니다.
• 팀원들의 아바타를 직접 제작했습니다.

---

4. 잘한 점/ 아쉬운 점

😄 잘한 점

• 컴포넌트 또는 기능 별로 Issue및 PR을 등록해 효율적으로 협업을 진행한 점
• 1차 프로젝트에 비해 컨벤션을 주의하여 코드 및 commit 메세지를 작성한 점
• 클론한는 페이지가 터졌을 때 멘탈이 같이 터질 뻔 했지만 유연한 대처 능력으로 위기를 극복한 점

🥲 아쉬운 점

• 메인페이지의 신상, 인기상품 리스트 슬라이더 부분을 반응형으로 제작하지 못한 점... 수료 후 꼭 리팩토링을 진행할것
• 장바구니에 체크박스 기능을 추가하지 못한 것 이부분도 추후에 꼭 추가할 것
• Intersection 옵저버를 사용하지 않고 스크롤 이벤트로 무한스크롤을 구현한 점
• useMemo, useCallback 등 최적화 관련 Hook들을 적극적으로 활용하지 못한 점

---

5. 공유하고 싶은 코드

정렬 조건 적용된 상태에서 무한스크롤

const showMore = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    //스크롤 이벤트 발생

    if (scrollTop + clientHeight >= scrollHeight) {
      setOffset(1);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', showMore);
    fetch(
      `http://localhost:10010/themeCategory/${params.id}/sort?sort=${orderType}&offset=${offset}`,
      {
        method: 'GET',
      }
    )
      .then(res => res.json())
      .then(result => {
        setCategoryData(result.data);
      });
    console.log(orderType);
    return () => {
      window.addEventListener('scroll', showMore);
    };
  }, [offset, orderType, params.id]);

• 정렬 조건을 그대로 유지하면서 스크롤을 내렸을 때 상품 리스트를 추가로 불러오는 것이 어려웠습니다.
• useState, useParams와 useEffect Hook을 사용하여 동적인 쿼리문을 작성했습니다.
• 카테고리, 정렬 조건, 스크롤 이벤트가 발생했을 때 offset 과 limit이 변경되도록 구현했습니다.
• useEffect의 의존성 배열을 활용해 반복적인 코드를 생략했습니다.

---

6. 성장 point

• 돌발상황이 발생했을 때 팀원들과 해결방안을 도출하기 위해 문제 파악 능력과 상황 판단력 및 결단력을 발휘해 위기를 극복하는 경험을 했습니다.
• 주어진 디자인이 없을 때 사용자 입장에서 UI를 기획하는 경험을 했습니다.
• scroll 이벤트로 infinite scroll을 구현하는 방법을 배울 수 있었습니다.
• useEffect의 의존성 배열의 역할에 대해 이해하고 적용했습니다.
• 조건부 함수와 props를 활용해 다양한 조건에서 컴포넌트를 재사용하는 경험을 했습니다.

---

7. 느낀점

클론 사이트가 있었는데 없었습니다..?!

프로젝트를 시작하고 3일 뒤 부터 이미지가 하나 둘 깨지기 시작하더니 5일 뒤부터는 아무것도 보이지 않았다.. ㅎㅎ... 그래도 덕분에 직접 기획하면서 사용자 친화적인 UI가 무엇인지 고민해 볼 수 있었습니다.

클린코드의 중요성

그동안에는 구현에 집중하느라 클린 코딩의 중요성에 대해 생각할 겨를이 없었는데 이번 프로젝트는 팀원들의 코드들도 뜯어보면서 많이 배울 수 있었습니다. 특히 API 파일을 따로 관리해 임포트해서 쓰는 방식을 보고 다음 프로젝트 때 적용해봐야겠다 생각했습니다.

최적화에 대하여...

리액트는 배울수록 아직 배울게 많다는 것을 느낍니다. 특히 최적화에 대한 이해도가 부족하다고 느껴 최적화에 대해 공부할 필요가 있다고 생각했습니다. 또한 프론트엔드 개발자에게 SEO도 정말 중요한데 다음 프로젝트 때는 최적화와 SEO 모두 신경 써서 작업해봐야겠다 생각했습니다.