[TIL] 내일배움캠프 React 과정 2023.01.26

Today I Learned

• 현재 시간에 따라 서점 영업 중/영업 종료 표시하기

 

---

현재 시간에 따라 영업중/영업종료 표시하기

// 현재 시간, 요일 가져오기
export const getCurrentTime = () => {
    const date = new Date();
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    
    const currentTime = parseInt(hours + minutes); // 1500(오후 3시)
    const day = date.getDay(); // 4(목요일)
    
    return { currentTime, day }
};

// 현재 시간, 현재 요일
const { currentTime, day } = getCurrentTime();

// 현재 시간, 요일에 따라 영업 중, 영업 종료 구분
const handleIsOpen = () => {
    // 토요일, 일요일인 경우
    if ( day === 0 || day === 7) {
      return currentTime >= weekendOpenTime && currentTime <= weekendCloseTime

    // 평일인 경우  
    } else {
      return currentTime >= weekdayOpenTime && currentTime <= weekdayCloseTime
    }
};

// 함수 실행 후 return 값(boolean)에 따라 컬러 지정
<MdCircle
    style={{
      color: handleIsOpen() ? GREEN_COLOR : LIGHT_GRAY_COLOR,
      marginRight: '0.5rem',
    }}
/>

new Date()와 getDay()를 실행해서 현재 시간과 요일 정보를 가져온 다음에 이 정보를 이용해서 서점의 오픈 시간과 종료 시간에 따른 조건문을 작성한다. handleIsOpen이라는 함수는 조건에 따라 true, false를 반환하는데 현재 영업 중이라서 true를 반환한 경우에는 녹색이 되고, 영업 종료로 false를 반환한 경우에는 회색이 된다.

 

// 고민했던 흔적들
  const handleIsOpen = () => {
    // const currentTime = getCurrentTime();
    // if ( currentTime >= openTime && currentTime <= closeTime) setIsOpen(true)
    // else setIsOpen(false)
    // console.log('currentTime', currentTime);
    // console.log('openTime', openTime);
    
    // 방법1
    // if ( currentTime >= openTime && currentTime <= closeTime) setIsOpen(true)
    // else setIsOpen(false)

    // 방법2
    // currentTime >= openTime && currentTime <= closeTime ? setIsOpen(true) : setIsOpen(false)
    // currentTime >= openTime && currentTime <= closeTime ? console.log("영업중") : console.log("영업종료")

    // 방법3
    // currentTime >= openTime && currentTime <= closeTime ? isOpen3 = true : isOpen3 = false

    // 방법4
    // setIsOpen(
    //   currentTime >= openTime && currentTime <= closeTime ? true : false
    // )

    // 방법5
    // let isOpen2 = currentTime >= openTime && currentTime <= closeTime ? true : false;
    // setIsOpen(isOpen2);
  };

처음에는 setState 썼다가 변수로도 해보려 했는데 실패하고 결국 태그의 style 속성에서 함수를 바로 실행하는 방법으로 구현했다. 근데 지금 문제는 영업중/영업종료 정보를 다른 컴포넌트에서도 사용해야 하는데 이걸 어떻게 전역적으로 사용할 수 있는지를 모르겠다.

 

 let day = new Date(2016, a-1, b);
 const WEEKDAY = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
 let week = WEEKDAY[day.getDay()];

• 요일 구하기
• return 값은 0 ~ 7으로 (일, 월, 화, 수, 목, 금, 토, 일 순이다.)
• 출처 https://mizzo-dev.tistory.com/entry/JavaScript날짜-Date-활용해서-요일-구하기

 

검색 시 다중 카테고리 설정하기

const handleSubmit = () => {

    if (search) {
      result = result.filter(
        (item: any) =>
          item.FCLTY_NM.includes(search) ||
          item.FCLTY_ROAD_NM_ADDR.includes(search),
      );
    }

    if (currentCategory !== '카테고리 선택') {
      result = result.filter((item: any) =>
        item.MLSFC_NM.includes(currentCategory),
      );
    }

    if (parking) {
      result = result.filter((item: any) => item.ADIT_DC.includes('주차'));
    }

    if (cafe) {
      result = result.filter((item: any) => item.ADIT_DC.includes('카페'));
    }

    if (openFilter === 0) {
      result = result.filter((item: any) => item.isOpen === true);
    }
};

내가 짠 코드는 아니고 다른 팀원분이 검색할 때 카테고리를 다중으로 선택할 수 있게 코드를 짜셨는데 너무 멋지고 신기해 블로그에 남기려고 한다. 근데 생각해보니까 아직 PR을 안 해서 나에게 코드가 없기 때문에 나중에 코드 첨부 예정...

 

+) 코드 추가함! 그냥 if문으로 filter를 계속 돌리면 되는 거였다. 근데 중요한 거는 filter 돌린 결과를 result에 담고 그 다음에 또 이 result에 filter를 돌려야 된다는 것.. 그냥 보기엔 쉬워보이는데 이 로직을 생각해내는 건 쉽지 않은 거 같다.

 

 

---

Programmers 문제 풀기

문자열 정렬하기(2)

나의 풀이

function solution(my_string) {
    return my_string.toLowerCase().split("").sort().join("")
}

 

---

회고

나 오늘 왜 이렇게 한 게 별로 없는 거 같지... 내일은 프로젝트가 어느 정 마무리가 되야 할 텐데// 갑자기 오늘을 너무 날려버린 기분이 들어서 급하게 프로그래머스 문제를 하나 풀었다 ㅎ