TIL 20211123 [항해99 69일차]

Mypage 전체적인 컴포넌트 위치 변경

오류. 뒷면카드가 아무것도 없을경우 +아이콘이 있는 박스가 있다. +아이콘을 클릭했을때 추가하기 창이 나오는데 그 상태에서 그 위에있는 추가하기를 누르면 또 추가하기 창이 나오는 오류가 발생

• 오류가 발생한 이유
  마이페이지 안에 CardAdd, Emptybox 컴포넌트가 있는데 마이페이지에 추가하기 버튼이 있어서 Emptybox컴포넌트에서 +아이콘 클릭했을때 추가하기창이 나왔지만 그위에 추가하기 버튼을 클릭하면 실행이 되서 추가하기 창이 또 나오게됐다.

• 해결방안
  고민 끝에 마이페이지에있던 프로젝트 추가하기 버튼을 CardAdd와 EmptyBox 컴포넌트에 각각 옮기면서 CardAdd 컴포넌트의 조건부 렌더링도 카드 갯수가아닌 클릭했을때 실행되도록 변경했다.

// Mypage 
...생략...
if (cardCount?.length === 0) {
    return (
      <div style={{ paddingTop: '88px', minWidth: '1200px' }}>
        <Grid>
          <CardProfile />
        </Grid>
        <Grid width="100%" height="100%" bg="#0F0a1A">
          <Grid>
            <EmptyBox />
          </Grid>
        </Grid>
      </div>
      );
    }
    

  return (
    <div style={{ paddingTop: '88px', minWidth: '1200px' }}>
      <Grid>
        <CardProfile />
      </Grid>
      <Grid width="100%" height="100%" bg="#0F0a1A">
        <Grid>
          <CardAdd />
        </Grid>
      </Grid>
    </div>
  );
};

...생략...

// CardAdd 컴포넌트
  const [click, setClick] = React.useState(false);

  const closeClick = () => {
    setClick(false);
  };

 if (!click) {
   <Grid width="100%" height="100%" padding="0px 0px 7% 0px;">
        <div style={{ marginBottom: '92px' }}>
          <TextDiv>
            <TitleText>
              나의 카드 <Count>{cardCount.length}</Count>
            </TitleText>
            <TextBtn
              onClick={() => {
                setClick(true);
              }}
            >
              + 카드 추가하기
            </TextBtn>
          </TextDiv>
        </div>
        {cardList.allIds.map((cardId) => {
          return (
            <Grid>
            }
            
...생략...
   

// EmptyBox 컴포넌트
const [click, setClick] = React.useState(false);
 
  const closeClick = () => {
    setClick(false);
  };
  
...생략...

 return (
    <Grid width="100%" height="100%" padding="0px 0px 7% 0px;">
      <TextDiv>
        <TitleText>
          나의 카드 <Count>{cardCount.length}</Count>
        </TitleText>
        <TextBtn
          onClick={() => {
            setClick(true);
          }}
        >
          + 프로젝트 추가하기
        </TextBtn>
      </TextDiv>
      <Grid>
        <CardBackWrite onHide={closeClick} />
      </Grid>
    </Grid>
  );