1. 프로젝트 소개

목표 웹사이트

와디즈 (https://www.wadiz.kr/)

국내 대표 크라우드 펀딩 서비스 중 하나이며 리워드 펀딩 외에도 투자 및 펀딩 스쿨 등 다양한 영역으로 사업을 확장해나가고 있다. 이러한 다양한 서비스들 중 우리 팀은 크라우드 펀딩 서비스의 한 사이클을 구현하고자 하였다.

팀 소개

팀명 : WeGotDiz✨

팀원 구성 : Front-end 3명, Back-end 4명

프로젝트 기간

2021.02.15 - 2021.02.25

기술 스택

Front-end

React (Class Component) / Sass / CRA / React Router DOM / Slick / RESTful API

Back-end

Python / Django / bycyrpt / pyjwt / RESTful API / Aquery Tool / MySQL / CORS header

협업 툴

Notion / Slack / Trello / Git / GitHub / Zoom / Figma

우리 팀은 구현하고자 하는 flow 및 페이지 컴포넌트 확인을 위해 Figma를 추가적으로 사용하게 되었다.

실제 웹사이트를 보며 작업을 하게 되면 구현 범위인지 아닌지 헷갈리게 되는 경우가 많아서 실제 사이트 페이지 캡쳐 후 섹션별로 구현 범위만 페이지로 정리해놓았다.

아무래도 다른 팀원분들보다 (PM님 제외!) 디자인 업무 경험이 있다보니 팀원 분들이 디자인 관련 사항이나 디자인 툴로 해결할 수 있는 문제들을 신경쓰지 않도록 하고 싶었다. 내가 빠르게 도울 수 있는 부분이니까!

2. 목표

와디즈에서 여러 다양한 서비스를 제공하고 있다 보니 2주 사실 10일... 안에 모든 것을 구현해내기에는 기간적인 여유가 없었다.

팀 구성원이 발표된 후 한 첫 회의에서 우린 가장 먼저 구현 범위에 대해 조율을 하였고 결론적으로는 메인에서부터 결제 완료까지 한 사이클을 만들어내기로 하였다.

우리는 총 6가지의

• 메인페이지
• 회원가입
• 로그인
• 상품 상세 페이지 ❤️
• 리워드 선택 및 결제 페이지 ❤️
• 마이 페이지

를 구현 목표로 세웠다.

그리고 그 중에서 나는 상품 페이지, 리워드 선택 및 결제 페이지를 맡게 되었다.

과연 우리는 이 목표를 잘 이루어 냈을까...!?

3. 구현한 페이지

상품 상세 페이지

1. mapping을 이용한 메뉴 탭 구현

탭 메뉴에서 선택한 탭에 따라 왼쪽 하단에 각각 탭에 맞는 컴포넌트가 출력될 수 있도록 구현하였다.

실제 와디즈 사이트의 경우에 탭마다 다루고 있는 데이터가 많아 그런지 각각 다른 url로 되어 있었지만 우리의 경우 엄청 많은 데이터가 들어가는 것은 아니라 컴포넌트로 컨텐츠 영역만 클릭한 메뉴에 따라 다시 렌더해주는 방식을 채택했다.

그러나 실제 방대한 양의 데이터를 다루는 사이트를 구현하게 된다면 기존 와디즈 방식대로 해야 할 것 같다.

TIL #35 - mapping을 이용한 탭 메뉴 구현

2. 펀딩 기간, 로그인 / 로그아웃 따른 flow

펀딩 기간

펀딩의 경우 가능한 기간이 정해져 있기 때문에 기간이 지나 마감된 펀딩은 결제 페이지로 넘어가지 않도록 구현했다.

로그인/로그아웃

goToPurchase = () => {
    if (localStorage.getItem('access_token')) {
      this.props.history.push(
        `http://IP:8000/product/purchase/${this.props.match.params.id}`
      );
    } else {
      alert('로그인해주세요!');
      this.props.history.push('/login');
    }
  };

로그아웃 상태의 유저들도 상품 상세 페이지에 들어올 수는 있으나 '좋아요' 나 상품 결제는 로그인 유저만 가능한 기능이었다. 나중에 로그인/로그아웃 여부를 상품 페이지에서도 확인해야 한다는 것을 알았으나, 이미 백엔드에서 token의 유효성 여부에 따른 메세지를 보내줄 수 없는 상황이라 급하게 Local Storage에 access_token이 있는지 여부만 보고 flow 정리를 했다. 실제 웹사이트였다면 token의 유효성 여부 체크도 필수였던 사항이라 가능하다면 나중에 꼭 수정하고 싶은 부분이다.

3. 유저의 좋아요 여부에 따른 색상 및 좋아요 수 출력

handleLike = () => {
    const { id, isLikeClicked } = this.state;

    if (localStorage.getItem('access_token')) {
      fetch(`http://IP:8000/product/${this.props.match.params.id}/like`, {
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('access_token'),
        },
      })
        .then(res => res.json())
        .then(res => {
          this.setState({
            likes: res.total_likes,
            isLikeClicked: !isLikeClicked,
          });
        });
    } else {
      alert('좋아요 기능은 로그인한 회원만 가능합니다!');
    }
  };

보낸 token의 유효성에 따라 로그인한 유저라면 유저가 이미 좋아요를 클릭한 상태인지 아닌지를 boolean 데이터로 받아 해당 여부에 따라 색상을 다르게 출력하였다.

리워드 선택 및 결제 페이지

해당 페이지는 스텝별로 하단 내용을 모두 컴포넌트화하여 출력하다보니 각각의 컴포넌트에서 수정된 데이터를 어떻게 보내야할지 감이 안 잡혀 구현하기 쉽지 않았던 페이지이다.

1. 펀딩 관련 안내 사항 모달

와디즈의 경우 펀딩에 따라 모달 내에서 안내하는 사항의 갯수가 달라졌다. 그러다 보니 서비스 관리자나 펀딩을 등록한 메이커가 등록한 대로 안내 사항 갯수 및 추가 안내 사항 여부를 다르게 하도록 컴포넌트로 구성하였다.

2. 리워드 선택 및 추가 펀딩 금액 합산

리워드를 선택하거나 추가로 펀딩하고 싶은 금액을 입력하면 하단에서 최종 금액이 출력된다.

현재 보여지는 단계에서는 Purchase > ChooseReward > Reward > Checkbox 순서로 컴포넌트가 존재한다.

Reward 컴포넌트의 체크박스에 onClick 이벤트가 일어나면 해당 리워드의 데이터가 가장 부모인 Purchase 컴포넌트로 가게 되어 다음 단계인 결제 내역 확인에서도 데이터를 보여줄 수 있도록 하였다.

3. 선택된 리워드 내역 안내 및 결제 정보 통신

이전 단계에서 선택된 리워드의 결제 예정인 내역과 유저의 기본 정보가 출력된다. 회원가입 단계에서 주소 정보를 기입하지 않기 때문에 리워드 발송이 필요한 경우 리워드 배송지를 입력하도록 구현하였다.

입력한 결제 정보가 모두 제대로 통신될 경우 결제 완료로 넘어간다🎉 (얼마나 보고 싶던 페이지인지...😭)

4. 배운 점

백엔드와 더 많이 소통하자!

백엔드에서 데이터를 어떻게 보내줄 것인가에 대해 미리 같이 상의해서 mock data를 잘 짜야겠다는 생각을 많이 했다.

소통이 중요하다는 말은 참 진부하게 들릴 수 있지만 절대 절대 잊어서는 안 되는 점 같다.

console.log의 중요성

귀에 딱지가 앉도록 들었는데 난 왜 몰랐을까...?

인스타그램 클론 코딩을 할 때까지도 나는 console.log를 잘 쓰지 않는 버릇이 있었다. 잘 활용하는 방법을 몰랐는데 이번에 fetch로 데이터를 주고 받으면서 그 필요성에 대해 다시 한번 뼈저리게 느꼈다.

초기 세팅은 정말 중요하다.

우리 팀의 경우 초기 세팅을 진행해주신 정민님이 윈도우를 사용중이셨고, 나와 혜성님은 맥을 사용하는 상황이었는데 정민님 컴퓨터에서 lf와 crlf가 계속 충돌하는 에러가 생겨 초반에 정민님이 엄청 고생하셨다ㅠㅠ 함께 구글링을 통해 에러에 대한 여러 해답을 찾아 임시적으로 해결된 듯 보였지만, 결국 정민님이 댁에 가서 다시 하시다가 문제가 또 생겨 엄청 고생해서 해결하셨다는… 나는 맥 쓰니까 괜찮아 가 아니라 누군가가 같은 문제를 겪게 된다면 함께 도와 해결할 수 있도록 잘 알아놔야겠다고 생각했다.

통신은 모든 페이지를 연결해봐야 안다.

서로 각각의 페이지를 통신했을 때는 무리없이 진행되었던 부분들이 모두 연결되면서 문제가 생기기 시작했다.. 미뤄두지 말자. 통신은 미리미리 확인해야 한다.

체크박스는 여러모로 어려운 녀석이었다…

가로 세로 24px의 작은 녀석은 여러모로 날 힘들게 했다... 스타일 커스터마이즈부터 선택 여부에 따른 전환, 전체 선택 등등... 구현하지 못한 부분도 많아 앞으로 해결해나가야 할 문제 같다.

5. 느낀 점

프로젝트가 끝나는 날까지 여유롭지 못하고 너무 정신없어 무아지경 상태였는데, 끝나고 난 다음 날 내가 한 부분을 보니 생각보다 어려운게 아닌 것 같아 현타가 왔었다...
그러나 이는 2주 전의 나를 잊은 나의 오만한 생각이다.

나는 2주 전에 비해 많은 것을 알게 되었고, 지식적으로나 정신적으로 이전보다 많이 성장했다.

프로젝트를 아주 완벽하게 끝내지 못해 조금의 미련이 계속 남아있지만, 이 기분은 잠시 미뤄두고 2차 프로젝트를 다시 준비해야겠다. 추가 구현 및 코드 리팩토링은 개인적으로 공부하며 조금씩 진행하고, 또한 추후에 함께할 팀원분들과 완벽한 마무리를 짓고 싶다.

모든 팀원이 프론트와 백 함께 프로젝트를 진행하는 것이 처음이다보니 쉽지만은 않았지만 너무나 좋은 팀원분들과 함께 할 수 있어서 프로젝트 하는 내내 감사했다. 목표하던 하나의 사이클이 만들어질 수 있었던 건 결국 팀원 모두가 서로를 믿고 함께해서 가능한 일이었다고 생각한다.

그리고 내가 내 능력에 비해 과분한 일을 맡게 되어 나중에 정신없이 급하게 일을 마무리하게 된 부분이 없지 않아 있다… 개인적으로 팀원분들께 너무 죄송했고, 그럼에도 불구하고 계속 고생했다며 날 걱정해주고 북돋아주던 팀원 분들께 다시 한번 감사하다는 말씀 전하고 싶다.

발표 후 홀가분해진 위갓디즈...