[FE] 날짜 필터 기능 구현 완료 #57

sungik-choi · 2020-06-03T05:49:06Z

구현 내용

Airbnb react-dates 라이브러리를 사용해 날짜 필터 기능을 구현했습니다
스타일링은 추후 진행할 예정입니다

리팩토링

actions.js 파일을 별도의 액션 파일들로 분리했습니다
각 액션 파일에선 type이 포함된 액션 함수들 또한 export해서, 컴포넌트 내부에서 더 쉽게 dispatch 할 수 있도록 했습니다
Guest Modal 컴포넌트 내부의 유틸 함수들을 유틸 파일 내부로 이동했습니다
url을 유틸 폴더내부의 urls.js 파일을 만들어 import해서 사용하도록 했습니다. 컴포넌트 내부에선 url에 대한 정보가 변수로만 보이도록 했습니다

Close [FE] 날짜 필터 기능 구현 #31

- react-dates 모달 안에 나타나게 기본 설정 적용

- 달력 한글화

- 구조 분해 할당을 하니, 리셋하는 경우에는 별도의 payload가 없어 버그가 발생했다. 분해할당을 없애니 제대로 동작함.

- type을 받는 함수를 별도로 리턴하도록 변경

- 버튼 텍스트를 월, 일로 바꿔주는 함수 - 쿼리에 적합한 형식으로 날짜를 바꿔주는 함수

- endDate가 없을 경우, startDate의 다음 날짜로 데이터를 요청하도록 변경. - startDate가 있을 경우에만 데이터를 요청하도록 변경

- 날짜가 아예 선택되지 않았을 경우라도, 이전의 조건문에서는 !endDate 분기처리로 들어가게 됨 - startDate가 있을 경우로 !endDate 경우를 감싸서 해결

- 데이터가 없을 경우 checkin, checkout 을 빈 문자열로 초기화

- actions 를 개별 action 파일로 분리 - 개별 action 파일에서는 type이 포함된 액션 함수를 리턴해서 쉽게 외부에서 사용할 수 있게 - 게스트 모달에서 사용되는 유틸함수들을 util 파일로 이동

- 다른 필터들과 같이 일관적으로 순서 맞추기 위함

- utils 폴더 내부에 url 파일을 만들어, 거기서 dotenv로 가져온 url을 사용하도록 변경 - filter 컴포넌트 내부의 긴 url을 작성할 필요없이, url 파일 내부에서 구조분해할당으로 사용하도록 변경

reesekimm

중간중간 리팩토링도 진행하면서 빠르게 작업하셨네요!
멋져요 @sungik-choi !!

reesekimm · 2020-06-03T05:59:37Z

FE/src/utils/urls.js

@@ -0,0 +1,4 @@
+export const initURL = `${process.env.API_KEY}`;
+
+export const filterURL = ({ checkin, checkout, adults, children, infants, priceMin, priceMax }) =>


변수를 인자로 전달받아서 url을 리턴하도록 유틸함수를 만든 아이디어가 좋네요!

네이밍 ─ filterURL이라고 하니 'URL을 필터링 하는 함수'로 오해할 수 있을 것 같아요. 함수의 역할에 적합한 다른 이름이면 좋을 것 같아요.

filterURL 함수 내부에서 ${process.env.API_KEY} 대신에 initURL을 쓸 순 없을까요?

filteringDataURL, initDataURL 어때요?

2번은 수정하겠습니다

filteringDataURL, initDataURL 어때요?

음.. 함수의 역할이 필터링/검색을 위한 url을 만드는 거니까 generateFilteringURL 또는 generateSearchURL 은 어떤가요?

네이밍 어렵다..

참고로 '생성하다' 라는 의미를 전달하고 싶을때 create 과 generate 중 무엇을 써야 할지 정리한 포스팅이 있어서 공유해보아요.

https://info-lab.tistory.com/45

filteringDataURL, initDataURL 어때요?

음.. 함수의 역할이 필터링/검색을 위한 url을 만드는 거니까 generateFilteringURL 또는 generateSearchURL 은 어떤가요?

네이밍 어렵다..

제너레이트 좋은데요? 뒤에 링크 내용도 좋네요

reesekimm · 2020-06-03T06:06:42Z

FE/src/components/CardList/CardList.jsx

    dispatch: cardListDispatch,
    actionType: {
-      success: fetchActions.FETCH_SUCCESS,
-      error: fetchActions.FETCH_ERROR,
+      success: fetchSuccess,


dispatch에 전달할 인자를 함수의 리턴값으로 반환하다보니 코드가 좀 더 깔끔해졌네요👍

reesekimm · 2020-06-03T06:07:57Z

FE/src/utils/utils.js

+
+export const largerThanMaxNum = (maxNum, num) => maxNum <= num;
+
+export const getTotalNumOfValue = obj =>


유틸 함수를 적극적으로 활용해서 코드의 재사용성을 높인 점이 좋습니다!👍

sungik-choi added 20 commits June 2, 2020 22:17

[#31] Feat : react-dates, css-loader 적용

64f891e

[#31] Chore : 필요없는 파일 삭제

ccf1ef6

[#31] Feat : Data.jsx 기본 설정

2fbad3a

- react-dates 모달 안에 나타나게 기본 설정 적용

[#31] Feat : moment 설치

bb02ee6

[#31] Style : 필터 버튼 간격 수정

c7c99f2

[#31] Feat : Date 상태관리 적용

1a96995

- 달력 한글화

[#31] Fix : startDate, endDate 값 읽지 못하는 버그 수정

866e676

- 구조 분해 할당을 하니, 리셋하는 경우에는 별도의 payload가 없어 버그가 발생했다. 분해할당을 없애니 제대로 동작함.

[#31] Feat : action 파일 변경

e44dbae

- type을 받는 함수를 별도로 리턴하도록 변경

[#31] Feat : DateModal 컴포넌트 분리

7fb398d

[#31] Feat : Date dispatch Handler 추가

da1056a

[#31] Feat : Date 내부에서 사용하는 유틸 함수 분리

6d13f9d

- 버튼 텍스트를 월, 일로 바꿔주는 함수 - 쿼리에 적합한 형식으로 날짜를 바꿔주는 함수

[#31] Fix : 선택날짜가 하루밖에 없을 경우 발생하는 버그 수정

3de870d

- endDate가 없을 경우, startDate의 다음 날짜로 데이터를 요청하도록 변경. - startDate가 있을 경우에만 데이터를 요청하도록 변경

[#31] Fix : 날짜 선택 조건문 버그 수정

f00171d

- 날짜가 아예 선택되지 않았을 경우라도, 이전의 조건문에서는 !endDate 분기처리로 들어가게 됨 - startDate가 있을 경우로 !endDate 경우를 감싸서 해결

[#31] Feat : 데이터가 없을 경우 query 초기화 기능 추가

8a79aa8

- 데이터가 없을 경우 checkin, checkout 을 빈 문자열로 초기화

[#31] Chore : fetch, filterContext log 추가

2961505

[#31] Chore : log 위치 이동

f5c0818

[#31] Refactor : 게스트 정보 객체 위치 이동

823b400

[#31] Refactor : setFilterState 위치 이동

625b170

- 다른 필터들과 같이 일관적으로 순서 맞추기 위함

[#31] Refactor : url 파일 분리

d5ea682

- utils 폴더 내부에 url 파일을 만들어, 거기서 dotenv로 가져온 url을 사용하도록 변경 - filter 컴포넌트 내부의 긴 url을 작성할 필요없이, url 파일 내부에서 구조분해할당으로 사용하도록 변경

sungik-choi added the FE Front end label Jun 3, 2020

sungik-choi added this to the [FE] WEEK 3 milestone Jun 3, 2020

sungik-choi requested a review from reesekimm June 3, 2020 05:49

sungik-choi self-assigned this Jun 3, 2020

reesekimm approved these changes Jun 3, 2020

View reviewed changes

reesekimm added this to Reviewer approved in FE Airbnb Project via automation Jun 3, 2020

sungik-choi requested a review from 1Consumption June 3, 2020 06:25

1Consumption removed their request for review June 3, 2020 06:28

sungik-choi added 2 commits June 3, 2020 15:40

[#31] Refactor : url 변수명 변경

f71c10c

[#31] Style : 파비콘 추가

a021766

reesekimm merged commit f4b47e1 into dev Jun 3, 2020

FE Airbnb Project automation moved this from Reviewer approved to Done Jun 3, 2020

reesekimm deleted the FE/feature/date branch June 3, 2020 06:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 날짜 필터 기능 구현 완료 #57

[FE] 날짜 필터 기능 구현 완료 #57

sungik-choi commented Jun 3, 2020

reesekimm left a comment

reesekimm Jun 3, 2020

sungik-choi Jun 3, 2020

sungik-choi Jun 3, 2020 •

edited

reesekimm Jun 3, 2020

reesekimm Jun 3, 2020 •

edited

sungik-choi Jun 3, 2020 •

edited

reesekimm Jun 3, 2020

reesekimm Jun 3, 2020

		@@ -0,0 +1,4 @@
		export const initURL = `${process.env.API_KEY}`;

		export const filterURL = ({ checkin, checkout, adults, children, infants, priceMin, priceMax }) =>


		export const largerThanMaxNum = (maxNum, num) => maxNum <= num;

		export const getTotalNumOfValue = obj =>

[FE] 날짜 필터 기능 구현 완료 #57

[FE] 날짜 필터 기능 구현 완료 #57

Conversation

sungik-choi commented Jun 3, 2020

구현 내용

리팩토링

reesekimm left a comment

Choose a reason for hiding this comment

reesekimm Jun 3, 2020

Choose a reason for hiding this comment

sungik-choi Jun 3, 2020

Choose a reason for hiding this comment

sungik-choi Jun 3, 2020 • edited

Choose a reason for hiding this comment

reesekimm Jun 3, 2020

Choose a reason for hiding this comment

reesekimm Jun 3, 2020 • edited

Choose a reason for hiding this comment

sungik-choi Jun 3, 2020 • edited

Choose a reason for hiding this comment

reesekimm Jun 3, 2020

Choose a reason for hiding this comment

reesekimm Jun 3, 2020

Choose a reason for hiding this comment

sungik-choi Jun 3, 2020 •

edited

reesekimm Jun 3, 2020 •

edited

sungik-choi Jun 3, 2020 •

edited