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

KwakKwakKwak·2022년 7월 22일
0

토이프로젝트

목록 보기
8/10
post-thumbnail

어제 하루는 쉬어가고 오늘도 느즈막히 다시 시작해본다.


오늘 코드 개선한 점:

1. ...rest 문법 사용하여 DRY 법칙 준수함

const CalendarBody = ({ ...rest }) => {
	return (
    	<CalendarBodyDiv>
        	<CalendarData {...rest} />
        </CalendarBodyDiv>
    )
};

원래는 ...rest 자리에 now={now} isFullSize={isFullSize}가 자리했었는데 굳이 이렇게 명세할 필요 없이 rest 문법으로 더 확장성 있으면서 편하게 처리함.


2. styled-reset 패키지 활용함

검색하다보니 예전 reset.css 파일의 역할을 대신해주는 styled-reset(styled-normalize) 패키지가 따로 있더라. 그래서 npm install styled-reset 해준 뒤 GlobalStyle에 바로 적용시켜줌.

// App.js

...
import { createGlobalStyle } from "styled-components";
import { reset } from "styled-reset";

const GlobalStyle = createGlobalStyle`
  ${reset};

  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #F1F3F5;
  }
`;

function App() {
	return (
    	<TodoProvider>
        	<GlobalStyle />
            ...
        <TodoProvider/>
    )
}

3. 드디어 styled-components 활용해서 꾸며봄

미완성본이긴 한데 지금까지 했던 것 중에서 가장 이상과 가까운 모습이여서 캡쳐했다. 요일 li태그와 날짜 li태그가 가운데 정렬로 같은 너비를 가지게 하려면 각 요소의 padding이나 margin값으로 일일이 조정하는게 아니라 전체 width값을 고정시켜놓고 7등분한 다음에 가운데 정렬하면 될 것 같다.

근데 웃긴게 전체 div의 width값인 512px를 해제하니까 귀신같이 정렬돼버림. 일주일 캘린더의 진짜 width값이 어디서 나왔는지만 찾으면 될 것 같다.

엥? 근데 다시 생각해보니까 width값이 충분하면 같이 정렬되는데 좁혀진 상태에서 어긋나는건 width값의 문제가 아니라 저 글자 자체의 부피 때문에 달리 계산되는 것 같다. 그럼 저 글자 부피를 무시할 수 있는 방법이 있나?

const WeekLi = styled.li`
  display: flex;
  justify-content: center;
  align-items: center;
  // margin: 0.25rem 1.25rem;
  width: 100%;
`;

const DateLi = styled(WeekLi)`
  // margin: 1rem 1.25rem;
  font-size: 1.15rem;
`;

원래 위 주석 처리해놓은 코드까지 포함했었다가, margin값을 아예 둘 다 빼보니까 위 캡쳐본처럼 알아서 잘 맞았다. 위 아래 간격만 조절하면 될 듯 함.

겉모습 완성! 일주일력(?) 만드는데 일주일 넘게 걸리네 ㅋㅋ. 오늘 당일이면 강조 색으로 하이라이트해주는 기능, isFullSize가 true일 때(날짜가 7일을 넘어갈 때) overflow되지 않고 7일 단위로 정상적이게 보이는 것이 남았다.

우선 코드는 아래와 같이 했음.

// CalendarBody.js

import styled from "styled-components";
import CalendarData from "./CalendarData";

const CalendarBodyDiv = styled.div`
  display: flex;
  justify-content: center;
`;

const CalendarBody = ({ ...rest }) => {
  return (
    <CalendarBodyDiv>
      <CalendarData {...rest} />
    </CalendarBodyDiv>
  );
};

export default CalendarBody;
// CalendarData.js

import styled from "styled-components";

const WeekUl = styled.ul`
  justify-content: center;
  align-items: center;
  width: 100%;
  list-style: none;
  padding: 0.5rem;
  margin: 1.5rem;
  background-color: #eaecef;
  border-radius: 0.5rem;
`;

const DateDiv = styled.div`
  display: flex;
`;

const WeekLi = styled.li`
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  width: 100%;
  margin-top: 0.25rem;
`;

const DateLi = styled(WeekLi)`
  margin: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
`;

const CalendarData = ({ now, isFullSize }) => {
	...
    const dayList = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
    
    return (
    <>
      <WeekUl>
        <DateDiv>
          {dayList.map((day) => (
            <WeekLi key={day}>{day}</WeekLi>
          ))}
        </DateDiv>
        <DateDiv>
          {arrIndex && isFullSize
            ? arrIndex.map((value) =>
                totalDate[value].map((date) => (
                  <DateLi key={date}>{date}</DateLi>
                ))
              )
            : findThisWeek()[0].map((date) => (
                <DateLi key={date}>{date}</DateLi>
              ))}
        </DateDiv>
      </WeekUl>
    </>
  );
}

이렇게 보니까 CalendarBody.js의 존재가 필요한지 의심이 들긴 한데, 그건 나중에 고치고 다른 기능이 작동하게끔 만들기나 해보자..

0개의 댓글