KREAM 클론 프로젝트

PROJECT

KREAM 클론 프로젝트

sophie0527 2022. 7. 25. 12:51

► KREAM를 클론 하는! DREAM 프로젝트!

• 레포지토리 주소
Front-end-repo < 바로가기
Back-end-repo < 바로가기

► Project 소개

2차 클론 코딩 프로젝트로 KREAM 사이트를 선정하게 되었다. 상품을 사고팔고, 그리고 sns 기능까지 갖춘 다양한 분분을 보여줄 수 있는 사이트라 생각되어 선택하게 되었다.
1차 프로젝트와는 다르게 프론트엔드와 백엔드 파트를 나눠 진행을 했다. 1차에 비해 많은 기능이 있어 다해낼 수 있을까라는 걱정과, 팀원분들 중 코로나에 확진되는 안 좋은 상황이 있었지만, 팀원분들이 몸이 안 좋은데도 불구하고 모두 열정적으로 열심히 참여해주셔서 발표까지 큰 무리 없이 진행할 수 있었다.

작업 기간

2022-07-11 ~ 2022-07-22

개발 인원

총 6명

FE : 손소희,정진우,유관희

BE : 최수진,김예찬,최정훈

Technlogies

Front-end HTML | SCSS | JAVASCRIPT | REACT | STYLED-COMPONENTS

Back-end NODE.JS | EXPRESS | BCRYPT | JSONWEBTOKEN

All RESTful API | MVC Pattern | GithubI | Slack | Notion

DB modeling

프로젝트 사이트 기능 구현 영상

Dream 시연 영상< 바로가기

구현 기능 사항

* 파란색 부분은 내가 기여한 기능!

팀원	Front-end
정진우	로그인/회원가입
	제품상세페이지
	구매/판매 페이지
손소희	마이 페이지 (프로필페이지) 마이 페이지 (관심/구매/판매 페이지)
손소희	SHOP 페이지
유관희	메인페이지
	Header/Footer
	STYLE 페이지

팀원	Back-end
최수진	회원가입,로그인 API/소셜 로그인(카카오)
	SHOP 페이지 API
	제품 상세 페이지 API
김예찬	메인 페이지 API
	STYLE 페이지 API
	관심상품 API
최정훈	마이페이지(프로필)API
	구매/판매 페이지 API

로그인 / 회원가입

로그인/회원가입
- 정규표현식을 사용하여 이메일 주소와 비밀번호에 대한 유효성 검사 기능을 구현
- useState와 useEffect 훅을 사용하여 이메일 state와 비밀번호 state가 변경될 때마다 validation을 체크할 수 있도록 구현
- 카카오 로그인을 진행할 때는 카카오 로그인 버튼을 눌렀을 때 a태그를 사용하여 백엔드 주소로 이동시켜주고, 백엔드 쪽에서 로직을 처리한 후 다시 redirect url으로 이동시켜주는 방식으로 구현
- url에 있는 정보들을 뽑아낼 때는 query-string 라이브러리를 사용. 로컬 스토리지에 정보들을 저장한 후에는 메인 페이지('/')로 이동.

제품 상세 / 구매&판매

제품 상세
- 백엔드와 통신을 통해 제품 상세 정보를 가져오기
- 관심상품 기능과, 사이즈 모달, 구매 전 확인 부분 토글 기능, react-slick을 이용한 이미지 슬라이더 기능, 다른 상품 페이지로 이동하는 기능 구현
구매&판매
- 구매 및 판매 기능을 구현할 때 판매가 등록된 사이즈만 구매할 수 있도록 구현
- 판매를 등록할 때는 등록된 사이즈 가격과 동일하게 등록할 수도 있고, 판매 가격을 입찰 방식으로도 등록할 수도 있도록 구현
- 백엔드에서 보내주는 판매 리스트에 대한 userId와 로컬 스토리지에 저장된 userId를 비교하여 자신이 등록한 상품은 구매 가능한 리스트에 보이지 않는 기능도 구현
- 판매나 구매를 할 때 사용되는 사이즈나 가격 등의 정보들은 페이지가 이동될 때마다 state를 보내주면서
  새로고침 하더라도 정보가 유지될 수 있도록 구현

마이 페이지 ( 프로필 페이지 , 관심/구매/판매 페이지 )

프로필 페이지
- 백엔드와 통신을 통해 프로필 상세 정보를 가져오기 (GET)
- 백엔드와 통신을 통해 프로필 주소 등록 (POST) : 프로필 이미지 없을 시 기본 프로필 이미지로 보여줄 수 있도록 함.
- 백엔드와 통신을 통해 회원 탈퇴 (DELETE) : 회원 탈퇴 성공 시 메인 화면으로 이동.
- 백엔드와 통신을 통해 프로필 주소 삭제 (DELETE)
- 백엔드와 통신을 통해 프로필 주소 수정 (PUT) : input 창에 입력되는 값을 useState를 사용해 입력된 값을 유지시키기.
- 백엔드와 통신을 통해 프로필 이름/휴대폰 번호 수정 (PUT)
- 프로필 주소 추가 기능

관심 / 구매 / 판매 페이지
- 백엔드와 통신을 통해 판매상품/구매상품/관심 상세 정보를 가져오기 (GET)
- 백엔드와 통신을 통해 관심 상세정보 삭제 (DELETE)

SHOP 페이지

백엔드와 통신을 통해 상품 가져오기 (GET)
인기순/발매 일순으로 map 메소드를 활용해 상품 보여주기

메인 페이지 / Style 페이지

메인 페이지
- 메인 배너 : 버튼 클릭 시 해당 슬라이더로 이동 기능 구현
- 백엔드와 통신을 통해 제품 상세 정보를 가져오기
스타일 페이지
- 백엔드와 통신을 통해 제품 상세 정보를 가져오기

Header

Header
- 해당 페이지로 이동 가능하도록 구현

► Project Review

칭찬해주고 싶은 점

진행 상황 및 막히는 부분 빠르게 공유하기!

매일 있는 스탠드업 미팅을 게더 타운에서 모여 진행하였고,

또한 현재 자기 상황에 대해 공유하고 조율하며, 프로젝트 진행을 원활하게 이어나갈 수 있었습니다.

아쉬웠던 점

패치하는 부분이 많아 기능 구현을 많이 하지 못한 점

패치하는 방법을 이해하는데 어려움이 있었는데, 이번 프로젝트에서는 패치하는 부분이 대부분이라 계속 한 부분에 머무르게 되어 기능 구현을 많이 하지 못해 아쉬웠습니다.

그래도 힘들었던 만큼 패치 부분에 있어서는 많이 성장할 수 있었습니다.

기록하고 싶은 부분

2차 프로젝트에서는 fetch 하는 부분이 많이 있어서 fetch 하는 법을 많이 익힐 수 있었다.

그중에서 url 이 쿼리로 되어있어 인기순일 때와 발매일 순일 때를 onChange 했을 때, 바뀔 수 있도록 useState를 사용한 코드가 가장 기억에 남는 코드라 이렇게 남겨본다.

const [keyword, setKeyword] = useState('sell_num');

useEffect(() => {
    setIsUpdated(false);
    fetch(`http://localhost:10010/search?sort=${keyword}`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setSearchInfo(data);
      });
  }, [isUpdated, keyword]);

const handleSellNum = e => {
    setKeyword(e.target.value);
  };

return (
        <div className={css.filter_sorting}>
          <select onChange={handleSellNum}>
            <option value="sell_num">인기순</option>
            <option value="created_at">발매일순</option>
          </select>
        </div>
...

팀 프로젝트 후기

이번 프로젝트를 통해 기한 안에 효율적으로 맡은 부분을 어떻게 구현할지, 그리고 만약 어려울 시 어떻게 조율할지에 대해 더 생각하게 되고 배울 수 있었다. 물론 1차 프로젝트처럼 기안 안에 가능하도록 여유롭게 계획을 잡는 것도 방법이겠지만, 현업에서는 그렇게 하기 어려울 수 있는 부분이 있다고 생각이 든다. 그래서 이번 프로젝트는 힘든 만큼 많이 경험하고 배울 수 있었다.

내가 맡은 부분을 다 해내지 못할 수도 있을 거라는 걱정을 우리 팀원들의 도움으로 잘 마무리될 수 있었다. 끝까지 함께해준 우리 드림팀 팀원들 너무너무 감사해요~🫰