WIL 3주차 리액트!

진행상황

• React를 이용하여 에브리타임 클론코딩

  • 메인화면 완성
  • 게시판 화면 완성
  • 검색 페이지 화면 완성

  • 홈 화면 설정 구현 완료

    • local Storage를 이용함

      • 홈 세팅 css

        .select-item {
            input[type="checkbox"] {
        
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 100%;
            border: 1px solid ${COLORS.red};
        }
        input[type="checkbox"]:checked {
        
            display: inline-block;
            width: 12px;
            height: 12px;
            background-color: ${COLORS.red};
        }
        

      • 클릭하면 바뀔 checkbox css 변경

        const [setting, setSetting] = useState({
          isMine: false,
          isHot: false,
          isRealtime: false,
        });
        //로컬 스토리지에 저장될 값들
        const onChangeCheck = (e) => {
          if (e.target.checked) {
            const newObj = { ...setting, [e.target.name]: true };
            window.localStorage.setItem("setting", JSON.stringify(newObj));
            setSetting(newObj); //바뀐 세팅 한번에 저장
            //window.localStorage.setItem를 통해 로컬 스토리지에 값을 저장
          } else {
            const newObj = { ...setting, [e.target.name]: false };
            window.localStorage.setItem("setting", JSON.stringify(newObj));
            setSetting(newObj);
          } //...setting은 setting 전부를 불러올 것이라는 뜻
        };
        
        useEffect(() => {
          const storage = JSON.parse(window.localStorage.getItem("setting"));
          setSetting({
            isMine: storage.isMine,
            isHot: storage.isHot,
            isRealtime: storage.isRealtime,
          });
        }, []);
        //useEffect를 통해서 맨 처음 페이지가 랜더링 된 후 한번 실행됨 -> 로컬 스토리지에서 현재 값을 가져옴.
        

헷갈렸던 부분, 내 생각대로 진행한 부분

• 버튼 만들고 텍스트를 좌우 상하 가운데 정렬하기

  • text-align, item-align 등 여러가지를 해봤지만 원하는대로 움직이질 않아서padding-top을 이용하여 눈으로 보면서 위치를 맞춰줌

    .like-button {
        width: 130%;
        height: 20px;
        text-align: center;
        padding-top: 3px;
        background-color: ${COLORS.grey_300};
        color: ${COLORS.grey_500};
        border-radius: 5px;
        font-size: 15px;
    }
    

  • 상단, 하단 위치 고정하기

    ```css
    width: 90%;
    max-width: 500px;
    position: fixed;
    bottom: 0px;
    ```
    

  • 사진 첨부하기

    • input과 label의 id, for 을 맞춰줌으로써 두개를 일치 시킬 수 있음.

          <label className="input-file-button" for="input-file">
                  <img src={camera} alt="사진 첨부" />
              </label>
              <input type="file" id="input-file" style={{ display: "none" }} />
      

  • 클릭시 글 색깔 바꾸기

    • css에 props 값을 넘겨주고

          color: ${(props) => (props.anonymous ? COLORS.red : COLORS.grey_text)};
      

    • 태그 쓸때 값을 넘겨준다.

          const [anonymous, setAnonymous] = useState(false);
          const onChangeAnonymous = (e) => {
              setAnonymous(anonymous ? false : true);
          };
          return(
              <PostWraaper anonymous={anonymous}>
              <button onClick={onChangeAnonymous}>
                  <img src={checked} alt="익명선택" />
                  <p className="text">익명</p>
              </button>
          );
      

다음 목표

1. pages 폴더 기능별로 다시 정리하기.