🍃 WESULLOC

1. 팀원소개

• Front-end : 이윤섭, 손가영, 안수정, 김현주
• Back-end : 황재승, 최바다

2. 프로젝트 기간

• 2022.05.23 ~ 2022.06.03

3. 사용 기술 스택

• Front-end : HTML, SCSS, JS, React
• Back-end : Phython, Django, MySQL

4. 주요 구현 기능

1 ) 일반 회원가입 페이지 / 회원가입 엔드포인트

2 ) 로그인 페이지 / 로그인 엔드포인트

3 ) 메인 페이지 (라이브러리 사용 X)

- 이번주 인기 제품 목록 / 인기 제품 반환 엔드포인트

4 ) 제품 목록 페이지

- 카테고리 별 필터링 기능
- 정렬 기능

5 ) 제품 상세 페이지

- 상세 페이지 설명 간소화 필요 (보통 커머스 사이트에서는 이미지 파일이나 HTML)

6 ) 리뷰 기능

- 리뷰 생성
- 리뷰 조회
- 리뷰 삭제

7 ) 장바구니 기능

- 장바구니 추가
- 장바구니에 추가된 상품 목록
- 장바구니 수정 (수량 변경)
- 장바구니 삭제

8 ) Nav / Footer

---

💚 나의 역할

Nav / Footer / Main page

• Nav Bar 및 Carousel 슬라이드 구현

Nav Bar Category

네브바의 카테고리를 구현하기 앞서 카테고리를 분석해 보았을 때, 크게는 제품, 선물추천, 다다일상이 속해있는 메인 카테고리, 그안에 속해있는 서브 카테고리와 하위 카테고리로 구성되어있다.

Map함수를 사용해 정렬하는 방식으로 접근하기로 했기 때문에 데이터 파일의 로직을 먼저 구상해야했다.

Nav Bar를 보았을 때 UI로 어렵지 않게 구현할 수 있을 것 같아 보였지만, 막상 직접 데이터 형식을 만들어서 해보려고 하니까 어떤식으로 해야할지 감이 오지 않았다. 운이 좋게도 동기 선생님의 도움을 받아서 어떻게 구상해야 하는지 Map함수를 어떻게 적용해야 하는지에 대해서 차근차근 배우면서 로직을 이해할 수 있었다.

조금씩 배운 것을 토대로 적용해 Nav 카테고리 로직을 다 짜고, 스타일링
도 모두 마무리한 상황에서 2번정도만 적용하면 될 줄 알았던 함수를 한 번 더 사용해서 작성해야한다는 사실을 깨달았다. 이미 스타일을 다 먹여놨던 상황이라 어떻게 다시 수정해야할지 막막했지만.. 할 수 있는 만큼이라도 하자라는 마음으로 최대한 수정했다. 스타일링이 비록 성에 차지 않았지만 데드라인이 있었기에 이정도로만 마무리 하고, 앞으로 조금씩 스타일을 추가할 예정이다.

금방 만들어 낼 수 있을 거라고 판단했던 Nav Bar가 (판단미스..) 가장 애를 먹으면서 가장 늦게 마무리가 되었지만 그 덕분인지 이전에 이해하지 못했던 Map함수에 조금 더 가까워 질 수 있었다.

Banner Carousel & Product Carousel

메인에 다른 종류의 carousel이 2개나 사용되었는데, 첫번째 carousel의 경우 사진 하나의 width를 최대로 하여 하나씩 transition 되는 형태의 carousel이었고, 두번째의 경우는 카드형식의 상품리스트 5개가 한번에 좌우로 이동하면서 넘겨지는 카드형식의 carousel이었다.

carousel 작성하기 앞에서서 백엔드 분들과 상의 한 결과 메인 상단의 배너는 프론트 측에서 직접 데이터를 관리하도록 하기로 하였고 두 번째 carousel의 경우는 백엔드에서 데이터를 받아와 관리하기로 하였다.

따라서, 우선적으로 상수데이터를 활용하여 carousel에 들어갈 img, title, subtitle, date등의 키값으로 데이터를 작성해 주었다.

두가지 다 동일한 방식으로, slide를 선언 해준 뒤에 slideIndex를 useState로 저장해 주고 슬라이더가 데이터의 길이와 다를 경우 slideIndex가 +1 되도록, 같을 경우는 슬라이더가 첫번째 슬라이드로 올 수있도록 해주었다.

그리고 prevslide 같은 경우에는 위의 nextslide와 반대의 경우로 슬라이드가 움직일 수 있도록 로직을 작성해 주었다.

마지막으로 라디오 버튼을 만들기 위해서moveDot을 선언 해주었고, Array.from() 이라는 함수를 이용해서 슬라이드 개수 만큼의 배열을 만들어서,map함수를 넣어 클릭했을 때 moveDot 클릭시, 인덱스+1을 해주었고 인덱스+1이 되었을 때 dot active라는 scss를 적용시켜주도록 작성하였다.

Hover Event & Footer

Hover시 아래에서 위로 이미지가 페이드 아웃되면서 텍스트가 올라오는 event는 HTML과 scss로 @keprames을 top to top으로 hover에 적용해서 작성했고, Footer 같은 경우에도 정적인 형태의 코드로 구현했기 때문에 반복되는 요소만 상수데이터화 하여 Map함수를 적용해 완성했다.

💚 프로젝트를 마치며

프로젝트를 하기 전까지 트렐로라는 툴을 사용해 본적이 없었으며 스프린트 미팅 방식도 어떻게 진행되는 지 잘 몰랐는데, 오전에 모여서 각자 트렐로에 작성한 계획 및 수행 작업들을 토대로 의견을 정리하면서 실제 회사에서 이루어지는 회의 방식에 대해서 조금은 이해하게 되었고 팀원과의 원활한 소통이 협업의 꽃이라는 사실을 알게된 좋은 기회였다.

프로젝트를 진행하면서 간과했던 부분이 있어서 걱정을 했지만 다행히도 백엔드 분들이 소통을 잘 해주시고, 데이터를 만드실 때 마다 필요한 정보는 없는지 키값은 어떻게 할것인지 물어봐 주셔서 (감사합니다! 👍) 소통이 정말 잘 되었다. 마지막 통신 단계에서는 원활하게 계획했던 대로 진행되었다.

🧡 마무리 과정에서 부딪힌 문제들

github에서 최종 merge를 받아 통신을 하면서 마지막 고비를 경험하게 되었는데, 첫번째는 내가 받은 Font Awsome의 아이콘이 팀원들에게 없어서 npm start 자체가 안되는 오류가 발생하였다. 아이콘을 적용하기 전에 설치했던 파일을 같이 깔아서 해결하려고 했지만 그 마저도 오류가 발생해서 고생했지만 팀원분이 빠르게 방법을 찾아내서, json에 있는 icon파일을 지우고 다시 npm install을 하는 방식으로 문제를 해결했다.

두번째는 팀원들의 클래스네임이 겹치면서 서로 만든 scss가 모두 깨져버리는 현상이 일어났는데 이 문제도 팀원 한명만 클래스네임을 바꾸면 되어서 비교적 빠르게 해결 할 수 있었다.

마지막 문제는 Nav Bar에서 상품리스트로 들어가려고 할 때 튕김현상이 나타나는 것이었다. 처음에는 Nav에 작성된 쿼리에 에러가 있다고 판단했는데 알고보니 상품리스트의 경로가 다른 곳으로 작성되어서 메인으로 튕기는 것이었다. (잘못된 경로이동시 메인페이지로 이동하는 로직이 적용되었기 때문에 메인으로 튕겼 던 것)

이번 1차 프로젝트를 토대로 협업을 하면서 겪을 수 있는 문제와 홈페이지를 만들면서 경험하게된 오류들 덕분에 정말 많이 성장하게 된 것 같다.

사실 프로젝트 이전에는 코딩하는게 어렵기만 했지 재미를 크게 느끼진 못했는데 이번 프로젝트를 하면서 어려움에 많이 봉착하기도 하고 스트레스도 많이 받아가며 직접 부딪히며 배우면서 그 과정들 속에서 코딩이 왜 재밌는지 과정은 힘들어도 결과물이 나왔을 때 얼마나 뿌듯한 지 알아가는 계기가 되었다.

💛 전체시현 영상