[wecode] Team project : Adlip

https://github.com/manonkim/fullstack2-2nd-ADLIP-frontend

GitHub - manonkim/fullstack2-2nd-ADLIP-frontend

 

 

 

 

WECODE 2차 Team project 

 

Activity platform 'FRIP' site를 모티브로하여 2주간(10.25 ~ 11.05) 'Adlip' 사이트를 제작.

Front-end 5명 / Back-end 2명

 

프로젝트 담당업무 

: 사이트의 상품페이지 프론트엔드 담당

  React hooks, styled components 사용

 

구현사항

- Nested routing으로 하나의 페이지를 재사용하여 사이트의 모든 products page를 구현하였다. (총 20page)

- 반복되는 card form 재사용을 고려해서 component로 만들어 library화 하였다.

- material-UI 라이브러리를 사용하여 페이지네이션과 옵션버튼 등 user-friendly UI를 구현하였다.

 

 

---

 

[ 진행과정 ]

 

 1차 프로젝트 때 백엔드랑 프론트를 같이 진행해야해서, 조금 헤매면서 대충 뭐 이런 절망의 계곡에 잠시 담겨졌다가

지금은 비탈길 초입 산행중...

'아~ 정신을 좀 챙기자' 각성의 시간을 가지고 리팩토링 기간에 react hooks를 공부하기 시작했다. (1차는 class형)

일주일정도 아주 정신없이 공부를했고, 다행히도 class형에 비해서 hooks는 좀 할만해서 (내 의지의 차이인지는 모르겠지만..) 

2차 프로젝트는 마지막이니까 진짜 열심히 해보자 다짐을 했다.

 

 

 

(feat. 호다닥 공부한 흔적)

https://manon-kim.tistory.com/93?category=1045016 

[React] Router

https://manon-kim.tistory.com/94?category=1045016 

[React] styled-components / SASS

https://manon-kim.tistory.com/95?category=1045016 

[React] useEffect

https://manon-kim.tistory.com/96?category=1045016 

[React] Ajax - axios

 

 

 

우리조는 프론트가 5명이나되서 사다리타기로 정하자~ 했는데 상품 리스트 페이지가 걸렸다.

'아니.. 리스트페이지 카드 컴포넌트 만들어서 map돌리면 뚝딱 아닌가?'  했는데 ㅎ.... 

 

'FRIP'사이트를 방문해보니까 이건 뭔가 끝도없는 샛길많은 골목 사이트라 해야하나?

카테고리가 크게 14개이고 그안에 한 카테고리당 서브카테고리가 4~7정도씩 붙어있었다.

거기다가 무슨 전체보기 페이지도 있고.. 미로같은 사이트녀석..

 

일단은 정신잡고 백엔드에서 모델링 할동안 기본 상단틀과 상품리스트에서 map돌려서 사용할 card component를 만들었다.

  상품사진 + 상품명 + 가격 + 할인가 + 별점표시 + new + only = card component 

메인페이지에서도 사용하고 많은 상품리스트 페이지에서도 map으로 돌려서 재사용했다.

 

멀티라인에서 글자수 제한하는 css코드

(깨알같지만 글자수 제한해서 ...으로 나오게하는 이런거 너무 재밌다...)

완성된 기본 틀

 

component를 완성하고 기본 페이지를 구축했다.

인기/금주/신규 상품을 4개씩 보여주는 페이지와 전체상품을 나열하는 페이지 2개로 크게 나눈다.

상품페이지 전체적인 흐름

이런 기괴한 상황도 일어나고 했었지만...우여곡절끝에...완성...

 

 

list페이지에서 전체보기 페이지로 넘어가는 btn

페이지네이션 (눌렀을 때 화면상단으로 소로록 가는기능 귀여워!)

라이브러리로 금방 뚝딱될줄알았지만 그렇지않아 좀 놀란 페이지네이션

 

---

이렇게 UI는 만들었는데 그 이후가 찐이었다.

이제부터 route의 구덩이에 빠져서 한참을 허우적 거렸는데

페이지 구성이 위에 카테고리 버튼이 있는 부분은 고정으로 있고, 그 아래에서

1. 메인카테고리의 리스트

2. 서브카테고리의 리스트

3. 메인카테고리의 전체페이지

이렇게 세개로 중첩으로 라우팅이 되어야했다. (찾아보면 중첩라우팅말고 다른 방법이 있을지도 모르겠지만..)

(2022년 02월 시점 미래의 나 :  Next.js로 하면 훨씬 수월하게 라우팅가능할듯)

 

이렇게 List 페이지 내에서 하위 카테고리로 전환하는 route를 추가해서 구현하긴했는데,

이 부분은 발표날에 쫓겨서 깔끔하게 마무리를 하지못한 것 같아 백엔드씨와 리팩토링을 다시 진행할 예정이다.

coming soon,,,

 

 

[프로젝트 배포 후 영상]

 

 

 

마무리를 깔끔하게 끝내지 못해서 조금 아쉬움이 남았지만, 코딩을 시작하고 4개월동안 가장 재밌고 보람찼던 기간이 아니었나 싶다.

그 전에는 내가 친 코드도 내가친게 아니고 구글휴먼들이 도와주고, 아니면 주위의 다른 동료들이 도와준 코드였는데

이번에 2차 프로젝트를 진행하면서 해낸것들은 온전히 다 내가 낳은 자식같은 코드들이었다.

앞으로 이렇게 조금씩 공부하고, 정리하고, 코드를 직접 쳐보고 하다보면 조금씩 미세먼지마냥 모여서 나의 실력이 되겠지?

라는 10g 정도의 자신감이 또 상승하였다.