검색기능을 제외한 상품검색 필터(위치,카테고리,가격) #83

kgpyo · 2019-12-11T12:08:16Z

PR에 대한 요약

검색어를 입력받는 기능을 제외한 위치 / 카테고리 / 가격 정보를 필터링하여 출력하는 기능입니다.

PR에 대한 동기와 상황에 대한 설명 부탁드립니다.

사용자로서 원하는 제약조건으로 필터링하여 원하는 조건의 상품들만 볼 수 있다. #47 유저스토리와 관련
상품을 검색할때 본인의 예산에 맞추어 검색하거나, 본인이 거주하고 있는 위치에서 이동할 수 있는 거리가 제한적일 수 있기 때문에 필터를 이용하여 검색을 할 수 있게 구현하였습니다.

참고

기존 ci/cd에서 폴더명 오류를 수정하였습니다.
리스트를 갱신하기 위해 데이터를 받아오는 중에 페이지 전환이 일어날 경우 중단 처리는 아직 구현하지 않았습니다.
폰트는 나눔고딕을 사용하였습니다.(구글-웹폰트)

이번 코드는 어떻게 테스트 되었나요?

별도의 테스트코드를 작성하지 못하였습니다.

결과물 스크린샷 (선택) :

리스트 조회 (지역정보 없음)
지역 필터링 (x 버튼은 초기화버튼)
초기화 버튼 등 안내메시지

지역 검색

필터링 결과 (최대 20km까지 검색가능)
카테고리 필터링

해결하지 못한 상황 (크롬 F12, 일반 -> 모바일 환경 혹은 모바일 -> 일반환경 전환시 다음과 같은 오류 발생)

어떤 변화인가요?

Bug fix (큰 변화없이 이슈를 고칩니다.)
New feature (큰 변화없이 기능을 추가합니다.)
Breaking change (기능을 추가하거나, 수정함으로서 기존의 기능에 영향을 줄 수 있습니다.)

체크리스트:

본 프로젝트의 코드 스타일을 따랐습니다.
이번 변화에 대한 결과로, 본 프로젝트의 문서를 수정해야 합니다.
이에 따라 본 프로젝트의 문서를 적절히 갱신하였습니다.

본 PR은 다음 이슈에 해당하는 내용입니다.

Closes #70 #53 #52 #51

- material ui 컴포넌트를 사용하기 때문에 dependencies 추가 - card section은 크게 이미지 영역, 데이터 영역으로 나눠지기 때문에 코드길이를 줄이기 위해 파일을 나누어서 관리 - 작성시간을 직접적으로 표시하지 않고 00분전, 초전, 일전으로 표시 되기 때문에 데이터가 입력받으면 시간 단위로 난어서 처리 - 자릿수표기는 거꾸로 계산해야하기 때문에 reverse로 뒤집어서 계산

- 활성화상태에 따라 라벨과 체크박스 색상을 변경하기 위해 컴포넌트로 만들어서 추가

- 일반적인 appbar 형태는 왼쪽영역 - 제목영역 - 오른쪽 영역이므로 해당 방식으로 생성하는 기본적인 툴바를 생성하고, 이후 중복되는 부분 (뒤로가기 제목 버튼)영역에 대해서 이를 활용하여 컴포넌트 생성 - 제목은 가운데 정렬을 사용하려 하였으나 material ui가 일반적으로 왼쪽정렬을 기본으로 하므로 왼쪽영역-제목-----오른쪽영역으로 분리

- onChnage 오타로 인해 동작하지 않는 오류 수정

- 하단 snackbar는 직접 구현하는 것이 간단하므로 컴포넌트 추가 - slide의 보여짐 여부는 컴포넌트를 사용하는 측에서 제어 - 필요에 따라 snack bar의 위치가 변경될 필요가 있으므로 bottom으로 전달

- 선택한 카테고리를 라우터간 전달하기 위하여 QUERY사용 - 잘못된 카테고리를 전달받을 수 있으므로 카테고리 입력 검증 - 어떠한 카테고리도 설정되지 않았으면 모든 카테고리를 선택하게 처리 - Checkbox의 key값은 선택되었을때 선택되지 않았을 때를 구분하기 위하여 카테고리명+선택여부를 이용하여 지정

- 실제 데이터를 연결하기전 데이터를 불러올 때 로딩 이미지가 정상적 으로 생성되는지 확인하기 위하여 지연을 두어서 처리 - 필터정보가 여러개(카테고리, 지역, 범위, 페이지네이션)가 들어가고 여러개의 분산된 값을 사용하는 것보다 하나의 개체로 다루는 것이 의미상 맞는 것 같아 하나의 객체로 두어 state사용

- 메인 페이지에서 텍스트 크기, 제목의 길이에 따라 3줄이 넘어가는 경우 실제 레이아웃에서 정상적으로 표시되지 않는 문제를 해결하기 위하여 webkit-box을 이용하여 3줄 넘어갈 경우 생략하여 최대 2줄까지 표시되도록 수정

- 카카오 맵 API에서는 react 관련 모듈을 제공하지 않으므로, useEffct 를 통해 컴포넌트 사용시 script가 로드되도록 dom 조작 - 키워드, 좌표변화를 객체를 복사해서 일정주기로 변화를 감지하려 하였 으나 정상적을 동작하지 않아서 useState를 통한 상태관리 사용

- 카카오 지도 API를 활용한 컴포넌트롤 이용하여 지도 검색 페이지 추가 - 주소 검색을 통해 얻은 좌표값은 x = longitude, y = latitude에 대응 되므로 이벤트를 넣을 때 x,y값을 반대로 하여 넣어서 사용 - eslint 오류로 인하여,setCoords값을 넣을 수 있는 별도의 메소드를 이용 (latitude, longitude 값만 필요하지만 keyword 속성도 넣어야 하는 불필요함을 줄이기 위함) - api key는 공개되면 안되므로 .env 파일로 별도로 분리하여 관리 - 지도를 이용한 주소 검색시, 리스트 목록을 제거하기 위하여 setList를 통해 초기화 - kakao map api의 결과 속성중 camelcase가 아닌 snake_case로 표기된경우 가 있어 이 경고를 무시하기 위해 eslint-disable 추가

- c카드 컴포넌트에서 ContentSection에서 propTypes속성 누락 수정

- 각각의 페이지에 표시되는 하단바등은 서로 공유하지 않고 독립적이므로 별도의 파일로 분리햇던 것을 하나의 component안으로 다시 합침 - 기존 uri query방식으로는 데이터를 전달하기 복잡하므로(카테고리, 지역, 범위, 가격 등) context 를 이용하기 위하여 기존 내용 삭제 - 모바일과 데스크탑의 보여지는 영역의 내용이 다르므로 resize를 통해 사이즈 조정 - 기존 dotenv를 이용한 키값정보가 동작하지 않기 때문에 별도의 js 파일로 분리하여 관리

…oundation/2019-20 into client-web/search-view

- 실제 입력에 관한 처리는 해당 component를 사용하는 부모에서 사용 하므로 데이터는 ref를 전달하는 방법으로 처리 - 버튼과 입력폼의 일정한 간격유지와, 입력폼 내의 일정한 여백을 위해 0.5rem 정도 지정 - 가격 범위는 두개의 입력폼이 필요하므로, 별도의 컴포넌트 생성

- 기존 query string을 이용한 라우터간 데이터 전달시, 페이지를 이동 할 때마다 해당 query를 유지해야 하는 어려움이 있어 context API를 이용하여 필터정보를 저장 처리 - 가격정보는 가격 통계정보가 없으므로 별도의 1000~2000원 등과 같이 선택지를 제공하지 않고 사용자가 직접 입력하여 처리하도록 구현 - APP_KEY정보는 배포를 위함이며, 배포시 공개된다고 판단하여 별도로 gitignore로 제외하지 않고 같이 저장 - 이전 방식(setState)인 경우에는 재렌더링이 발생하여 사용자가 입력한 정보가 저장되지만, 화면상에는 표시되지 않는 문제가 있어 useMemo를 이용 하여 재렌더링 방지 - closes #53 #52 - fixed #70

- 카테고리를 새롭게 갱신하거나, 하단의 스낵바가 출력되거나 사라질 때 카테고리 영역까지 재렌더링이 되어 이를 제거하기 위하여 컴포넌트 수정 - 카테고리 페이지에서 인라인으로 처리가 가능한 경우에는 별도의 변수 를 할당하지 않고 인라인으로 처리 - 카테고리를 선택할때 사용하는 체크박스 컴포넌트는 실제로 전달할때 필요한 값은 event, check여부, label 명이라고 생각되기 때문에 콜백 함수로 전달하여 처리(컴포넌트 내에서 처리가 가능한 것은 컴포넌트 내에서 계산후 전달) - 필터 항목은 크게 카테고리, 가격정보로 나눌 수 있고 반복을 최소화 하기 위해 field 컴포넌트를 만들어서 사용하였는데, 다른 곳에서도 재활용 할 수 있다 생각되어 components로 이동 - 가격 정보를 입력받을 때 두개의 input 을 이용하는데, 둥근 입력창은 재사용이 가능하므로 별개의 컴포넌트로 분리 - 가격정보를 갱신할때 적용버튼을 상단바로 이동 - activity layor에서 버튼 정보를 처리하지 않고 default tool bar로 이동하여 처리하므로 해당 관련 메소드 제거 - 기존 snackbar 컴포넌트의 애니메이션 시간을 지정했었는데, material ui에서의 기본적으로 설정한 값으로 진행되도록 일부 속성 제거 - snackbar에서 cleanup을 통해 타임아웃 설정이 되어있으면 실행할 필요가 없으므로 제거하도록 return값 추가 - 메시지, 타입등 상수임이 확실한 경우에는 명확하게 구분하기 위하여 키값도 대문자로 표기 - 공통되는 색상인 경우에는 한 곳에서 관리하기 위하여 material ui에서 제공하는 theme 사용

-재렌더링을 줄이기 위해 위도 경도를 props전달하는 방시에서 ref전달 하는 방법으로 변경 - custom ref를 사용하므로 어떤 타입에 대한 return인지에 대한 정보제거 - close #51

- 기존 폴더 위치가 잘못되어 올바르게 수정(webapps 에서 web-apps)

sukjae

고생 많으셨습니다.

혹, window에 올려진 map을 ref나 state등으로 내릴 수 있었나요?

web-apps/client/src/App.js

web-apps/client/src/components/action-bar/convert-icon-button.js

web-apps/client/src/components/action-bar/get-buttons.js

web-apps/client/src/components/action-bar/index.js

web-apps/client/src/components/action-bar/types/default.js

web-apps/client/src/components/card/content-section.js

web-apps/client/src/utils/fetch.js

Johnie-Yeo

고생많으셨습니다. 전반적으로 네이밍/구조에 관하여 몇가지 코멘트 남깁니다.

Johnie-Yeo · 2019-12-12T05:42:44Z

web-apps/client/src/components/card/time-function.js

+    return number;
+  })
+    .reverse()
+    .join('');


현실적으로 돈 단위가(금액의 문자열의 길이가) 그렇게 길수는 없지만 1000의 나누기과 모듈러 연산을 활용하면 좀 더 빠른 연산이 가능할것 같습니다!

좋은 의견감사합니다.
https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
방법으로 변경하였습니다.

Johnie-Yeo · 2019-12-12T05:49:52Z

web-apps/client/src/components/field.js

+        {description}
+      </Grid>
+      <Grid item className={classes.subDescription}>
+        {subscription}


클래스는 subDescription인데 내부컴포넌트의 이름은 subscription이네요 의도에 맞는 부분인가요?

감사합니다

Johnie-Yeo · 2019-12-12T05:54:00Z

web-apps/client/src/components/kakao-map/index.js

+    });
+  };
+
+  useEffect(loadAPIScript(appKey, initialKakaoMap(section)), []);


이 부분과 해당하는 함수들을 custom hooks 형태로 처리하면 내부가 좀 더 직관적으로 이해하기 좋아질 것 같습니다.

다음 수정 시 반영하겠습니다.

Johnie-Yeo · 2019-12-12T05:55:31Z

web-apps/client/src/components/kakao-map/load-api-script.js

+    script.removeEventListener('load', callback);
+    document.head.removeChild(element);
+  };
+};


이 함수는 util로 갈 수 있을것 같네요

지도 api 만 사용하는 것이라서 해당 파일만 길어져서 따로 분리하였습니다.

Johnie-Yeo · 2019-12-12T06:14:18Z

web-apps/client/src/pages/area.js

+        ref={mapRef}
+      />
+    );
+  }, [TYPE.COORDINATE, dispatch]);


파일로 분리하면 더 좋을 것 같습니다.

다음 수정시 반영하겠습니다.

Johnie-Yeo · 2019-12-12T06:16:41Z

web-apps/client/src/pages/area.js

+                      {address_name}
+                    </ListItem>
+                  ))
+                }


return 안에서 함수가 실행되는 것보단 외부에서 처리 후 가져오는 것이 어떨까요

Johnie-Yeo · 2019-12-12T06:20:14Z

web-apps/client/src/pages/filters/index.js

+      >
+        <Field
+          description='홈 화면에서 보고 싶지 않은 카테고리는 체크를 해제하세요.'
+          subscription='최소 1개 이상 선택되어 있어야 합니다.'


subscription이 의미에 맞는 단어인가요?

수정했습니다

Johnie-Yeo · 2019-12-12T06:20:31Z

web-apps/client/src/pages/filters/index.js

+        />
+        <Field
+          description='가격범위 설정'
+          subscription='가격범위는 상단의 적용버튼을 눌러야만 적용됩니다.'


위와 동일한 질문입니다.

수정했습니다

Johnie-Yeo · 2019-12-12T06:21:11Z

web-apps/client/src/pages/main.js

+});
+
+const Main = () => {
+  const TITLE = '풀';


프로젝트 이름 변경된거 반영해주세요.

수정했습니다

Johnie-Yeo · 2019-12-12T06:22:14Z

web-apps/client/src/pages/filters/index.js

+      </Grid>
+    </>
+  )
+};


개인적인 생각인데 pages 내부는 좀 더 간결하게 유지하는 것이 보기 좋다고 생각합니다.

하나의 페이지 내에서만 동작하기 때문에 하나로 처리햇었습니다.
여러 페이지를 만든 후 중복된 요소를 제거하면서 처리하겠습니다.

Johnie-Yeo

고생하셨습니다.

sukjae

고생 많으셨습니다!

- subscription 오타 수정 (-> subdescription) - 혼동을 줄 수 있기 때문에 action-bar 컴포넌트 분리 - time-function는 다른 코드에서도 적용할 수 있기 때문에 utils로 변경 - theme는 별도로 관리하기 위해서 폴더로 분리 - 카카오지도에서 기존 전역으로 선언햇던 circle를 useRef를 이용하여처리 - 상품 목록을 불러오는 fetch를 main 페이지로 묶어서 처리

…tion/2019-20 into client-web/search-view

kgpyo added 19 commits December 3, 2019 11:28

feat: add checkbox component that changes color when selected

a2bef0b

- 활성화상태에 따라 라벨과 체크박스 색상을 변경하기 위해 컴포넌트로 만들어서 추가

fix: fix on change typo and removed ref

4a7e37f

- onChnage 오타로 인해 동작하지 않는 오류 수정

fix: fix missing attribute in proptypes - card component

fc1954d

- c카드 컴포넌트에서 ContentSection에서 propTypes속성 누락 수정

Merge branch 'client-web/search-view' of https://github.com/connect-f…

fa12f40

…oundation/2019-20 into client-web/search-view

feat: add distance filter

5e59429

-재렌더링을 줄이기 위해 위도 경도를 props전달하는 방시에서 ref전달 하는 방법으로 변경 - custom ref를 사용하므로 어떤 타입에 대한 return인지에 대한 정보제거 - close #51

fix: ci/cd modify folder path

353b254

- 기존 폴더 위치가 잘못되어 올바르게 수정(webapps 에서 web-apps)

kgpyo added the epic:상품검색 epic label Dec 11, 2019

kgpyo requested review from sukjae and Johnie-Yeo December 11, 2019 12:08

kgpyo self-assigned this Dec 11, 2019

kgpyo changed the title ~~검색기능을 제외한 상품검색 필터~~ 검색기능을 제외한 상품검색 필터(위치,카테고리,가격) Dec 11, 2019

sukjae reviewed Dec 12, 2019

View reviewed changes

Johnie-Yeo reviewed Dec 12, 2019

View reviewed changes

kgpyo requested review from sukjae and Johnie-Yeo December 12, 2019 08:58

Johnie-Yeo approved these changes Dec 12, 2019

View reviewed changes

sukjae approved these changes Dec 12, 2019

View reviewed changes

kgpyo added 2 commits December 13, 2019 00:06

Merge branch 'client-web/master' of https://github.com/connect-founda…

209f682

…tion/2019-20 into client-web/search-view

kgpyo force-pushed the client-web/search-view branch from 9cff471 to 209f682 Compare December 12, 2019 16:14

kgpyo merged commit 09e4bd1 into client-web/master Dec 12, 2019

kgpyo deleted the client-web/search-view branch December 12, 2019 16:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

검색기능을 제외한 상품검색 필터(위치,카테고리,가격) #83

검색기능을 제외한 상품검색 필터(위치,카테고리,가격) #83

kgpyo commented Dec 11, 2019 •

edited

Loading

sukjae left a comment

Johnie-Yeo left a comment

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo Dec 12, 2019

kgpyo Dec 12, 2019

Johnie-Yeo left a comment

sukjae left a comment

검색기능을 제외한 상품검색 필터(위치,카테고리,가격) #83

검색기능을 제외한 상품검색 필터(위치,카테고리,가격) #83

Conversation

kgpyo commented Dec 11, 2019 • edited Loading

PR에 대한 요약

PR에 대한 동기와 상황에 대한 설명 부탁드립니다.

참고

이번 코드는 어떻게 테스트 되었나요?

결과물 스크린샷 (선택) :

어떤 변화인가요?

체크리스트:

본 PR은 다음 이슈에 해당하는 내용입니다.

sukjae left a comment

Choose a reason for hiding this comment

Johnie-Yeo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Johnie-Yeo left a comment

Choose a reason for hiding this comment

sukjae left a comment

Choose a reason for hiding this comment

kgpyo commented Dec 11, 2019 •

edited

Loading