[운동기록앱 - 달력앱] 5일차 기록

오늘의 난관 봉착. CalendarData.js에서 가공한 일주일/한 달 날짜 배열을 CalendarBody.js로 가져와서 스타일을 입힌 뒤 Home.js에서 렌더링시키고 싶은게 목표다.

Home.js에선 이렇게 전달하고 있고

import CalendarData from "../components/calendar/CalendarData";
import CalendarBody from "../components/calendar/CalendarBody";

const Home = () => {
  const now = new Date();
  const [isFullSize, setIsFullSize] = useState(true);

  return (
    <>
      <HomeHeadBlock>
        <CalendarBody now={now} isFullSize={!isFullSize} />
      </HomeHeadBlock>
    </>
  );
};
export default Home;

CalendarData.js에선 아래와 같이 반환하고 있다

const CalendarData = ({ now, isFullSize }) => {
  ...
  
  return (
    <>
      {isFullSize
        ? totalDate.map((value, index) => <div key={index}>{value}</div>)
        : totalDate.forEach((arr) => {
            if (arr.indexOf(nowDate) !== -1) {
              arrIndex = totalDate.indexOf(arr);
              console.log(`arrIndex:${arrIndex}`);
            }
          })}
      <ul>
        {totalDate[arrIndex].map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </>
  );
};

export default CalendarData;

CalendarBody.js는 현재 이렇게 작성하고 있는 중인데

import styled, { css } from "styled-components";
import CalendarData from "./CalendarData";

const CalendarBodyDiv = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
`;

const WeekUl = styled.ul`
  display: flex;
  flex-direction: row;
  width: 100%;
  ${(props) => css`
    width: 14%;
    height: 1.5rem;
    font-size: 1rem;
  `}
`;

const CalendarBody = ({ now, isFullSize }) => {
  return (
    <CalendarBodyDiv>
      <CalendarData now={now} isFullSize={isFullSize} />
      {isFullSize ?
        <CalendarData now={now} isFullSize={isFullSize}
       :}
    </CalendarBodyDiv>
  );
};

export default CalendarBody;

내 의도는 'Home.js에서 props로 now값과 isFullSize 값을 전달해줬을 때, CalendarData.js에서 그 props를 전달 받고 -> isFullSize 값에 따라 한 달짜리 / 일주일짜리 배열을 뱉어낸 것을 CalendarBody.js로 넘겨받고 -> styled components로 스타일링하여 렌더링되도록' 하는 것이다.

내 목표를 말로 정리하고 코드를 다시 보니 CalendarBody.js를 다시 짜야할 것 같다.
Home에선

<CalendarBody>
	<CalendarData now={now} isFullSize={isFullSize} />
</CalendarBody>

로 넘겨주면 될 것 같고,

CalendarBody.js에서의 return문 안에는 대충

return (
	<CalendarBodyDiv>
    	{Children}
    </CalendarBodyDiv>
)

위와 같이 전개해 Children의 배열 길이가 1개(혹은 7개)면 짧은 스타일, 1개가 아니면 풀사이즈 스타일을 적용하도록 조건을 달아줘야할 것 같다.

CalendarData.js에서 CalendarBody.js로 넘겨줄 데이터의 모양은 지금 코드처럼 ul-li 단계로 태그를 붙여준 채 넘기는 것이 아니라 raw한 배열 그 자체를 넘겨주도록 정제해줘야할 것 같다.

return (
	{isFullSize 
    ? totalDate 
    : totalDate[arrIndex]
    // arrIndex 구하는 코드..
    }
)

대충 위 코드처럼 짜면 되지 않을까?

일단 생각은 해놓고, 멋사 세션이 있어서 더 이상 진행하긴 무리일 것 같아 블로그 기록만 해놓고 내일 다시 도전해보자.