CodeSquad Day 78 : Team Project 2 - Day 8

 

CodeSquad🔹Day 78

'모든 카테고리 보기' 버튼 구현

오후 2시부터 5시 30분까지는 햄디와 함께 페어 프로그래밍으로 약간의 리팩토링 및 기능구현을 했다. 모든 카테고리 보기 버튼을 state로 구현하니 정말 간단하게 구현할 수 있었다. 

import React, { useState } from 'react';
import { MainWrapper, AllCategoryBtn } from './Main.style.js';
import categoryTitleData from 'data/categoryTitle';
import Slider from 'components/Slider/Slider.jsx';

const Main = () => {
  const [visibleIdx, setVisibleIdx] = useState(0);
  const [isBtnAvailable, setIsBtnAvailable] = useState(true);

  const handleAllCategoryBtnClick = () => {
    setVisibleIdx(categoryTitleData.length - 1);
    setIsBtnAvailable(false);
  };

  return (
    <MainWrapper>
      {categoryTitleData.map((v, i) => {
        return <Slider key={i} title={v.name} id={v.id} display={i <= visibleIdx ? 'block' : 'none'} />;
      })}
      {isBtnAvailable && <AllCategoryBtn onClick={handleAllCategoryBtnClick}>모든 카테고리 보기</AllCategoryBtn>}
    </MainWrapper>
  );
};

export default Main;

categoryTitleDate를 map을 돌려서 Slider를 만들어 주고 있다. 버튼을 누르기 전에는 visibleIdx의 값은 0으로 초기화되어 있기 때문에 display를 보면 i가 0을 초과하면 display: 'none'이 되어 보이지 않는다. 즉 맨 처음 Slider만 노출이 되고 그 다음 Slider들은 화면에 보이지 않는다.

버튼을 클릭하게 되면 setVisibleIdx 함수로 visibleIdx를 categoryTitleDate의 길이에서 1을 뺀 만큼으로 설정해준다. 그러면 display의 비교식을 모두 만족하게 되므로 display: 'block'이 되어서 모든 Slider가 렌더링이 될 수 있게 된다. 

기능 구현 후 구현상황, 질문거리 등을 적어 PR도 보냈다. 

 

로그인 기능 구현 시도

오후 7시 반부터 10시까지는 Github 계정으로 로그인을 시도해 보려고 했다. 그 과정에서 코드스쿼드 바로 직전 기수 분인 Tami의 블로그 글이 매우 도움되었다. 

[React] OAuth Github 로그인 구현하기

정말 정리를 잘 해놓으셔서 많은 참고가 되었다. 

 

React Authentication with Twitter, Google, Facebook and Github

로그인 때 팝업창을 만들어야 하는데, 모달창이 아닌 주소창이 존재하는 팝업창을 어떻게 띄우는지 몰라서 구글링을 했고 위와 같은 링크를 찾았다. window API를 활용하는 것이었다. 

  const openPopup = () => {
    const width = 600;
    const height = 800;
    const left = window.innerWidth / 2 - width / 2;
    const top = window.innerHeight / 2 - height / 2;
    const url = `${API_URL}`;

    return window.open(
      url,
      '',
      `toolbar=no, location=no, directories=no, status=no, menubar=no, 
      scrollbars=no, resizable=no, copyhistory=no, width=${width}, 
      height=${height}, top=${top}, left=${left}`
    );
  };

위와 같이 window 객체의 open 메서드를 활용해 인자로 값을 넘겨주게 되면 팝업창이 잘 뜨게 된다. 

 

그리고 react-router-dom을 사용하기 위해서 설치를 했는데 Switch 컴포넌트를 사용할 수 없었다. 알고보니 6버전에서는 문법이 약간 달라졌다. 아래 stackoverflow의 글을 보고 고칠 수 있었다. 

Attempted import error: 'Switch' is not exported from 'react-router-dom'