🎨 Team grafolWEo
저희는 네이버의 웹서비스인 전 세계 크리에이터들의 멋진 작품을 발견, 공유하고 사고팔 수 있는 창작 콘텐츠 커뮤니티인 그라폴리오 클론을 맡았습니다.
- 저는 Wallpaper 페이지, Wallpaper Detail 페이지 구현을 담당했습니다.
- 이 게시글의 기술스택 및 구현내용은 본인이 사용했거나 경험 해 본것들을 기준으로 작성했습니다.
👉 GitHub
💬 프로젝트 회고
첫 프로젝트로 PM을 맡게 되어서 부담도 많이 느끼고 힘들었지만 지금 생각해보면 정말 좋은 기회였던것 같습니다. 매일 아침 데일리 스탠드업 미팅을 하면서 Trello를 사용하여 회의록을 작성 하는등 진행상황을 체크하고 팀원분들과 소통하려고 노력했습니다.
👨👧👧 구성원 및 기간
- 기간 : 2020. 10. 19 ~ 2020. 10. 30 (2주)
- 프론트엔드 : 김보경, 임수현, 조연정, 홍효정(PM)
- 백엔드 : 김성태, 정승호
✍ 기술스택 및 툴
- 내가 사용한 기술스택 : HTML, CSS (Sass), JavaScript, React (CRA, Class, Router), Slick-slider,
- 툴 : Git, Github, Trello
🔥 구현한 기능
Wallpaper - Editor pick 슬라이드, 태그 필터링
- React slick slide 라이브러리를 커스텀해서 슬라이드를 구현하였습니다.
- 상단의 태그를 클릭하면 태그에 맞는 슬라이드를 리랜더링 합니다. 이때 클릭한 태그의
id를query string에 담아서 요청을 보냅니다.
Wallpaper - Top Creators 유저 팔로우
- 로그인 했을때 다른 유저를 팔로우 할 수 있습니다.
- 로그인 한 유저의 토큰과 팔로우 한 크리에이터의
id를body에 담아서 요청을 보냅니다. - 팔로우 버튼을 클릭했을때 + 버튼의 색을 바꾸어 인터렉션을 주었습니다.
Wallpaper - 메뉴 탭, 필터링, 정렬
- 메뉴 탭, 카테고리 필터링, 인기순/최신순 정렬 총 3가지를 구별해서 볼 수 있습니다.
- 각 버튼을 클릭할때마다 새로운 데이터를 서버에서 불러오는데, 태그별, 색상별, 유형별 컴포넌트를 따로 만들어서 불필요하게 공통 코드를 많이 작성했었던 기억이 납니다. 후에 리팩토링하는 작업이 필요할 것 같습니다.
Wallpaper Detail
react router dom을 이용하여 해당 게시글의 상세 페이지 이동 할 수 있도록 구현하였습니다.
HHJ velog 🍔