본문 바로가기
블록체인_9기/과제

46강_220704_React(캘린더 제작)

weeji 2023. 7. 4.
728x90

 

 

 

과제내용

7월 달력 하나 만들어보기

  • 함수형 컴포넌트로 제작
  • 버튼 누르면 달력보이기
  • 구성
    • 달력 헤더
      • 타이틀, 햄버거버튼, 요일
    • 달력 바디
      • 헤더 리본, 숫자
    • 달력 푸터
      • 본인이름, 회사명 넣기

 

 

결과물

#. 폴더의 경로는 다음과 같다.

 

1. Main.jsx_전체 사이트에 그려질 내용을 render한다.

  • 달력이 보이기 전, 사이트 상단에 제목과 캘린더를 토글할 버튼, 캘린더 영역 컴포넌트를 render한다.
    • ViewBtn : 캘린더 내용은 CBody 컴포넌트를 토글할 버튼
    • CBody : 캘린더 내용 전체를 담은 컴포넌트
import ViewBtn from "../components/ViewBtn";
import CBody from "../components/CalendarDiv";

const Main = () => {
    return (
      <>
        <h1>CALENDAR</h1>
        <ViewBtn />
        <CBody />
      </>
    );
}

export default Main;

 

2. CalendarDiv.jsx_캘린더 영역을 각 컴포넌트를 불러와 render한다.

import React from "react";
import Header from "./Header";
import Body from "./Body";
import Footer from "./Footer";

const CBody = () => {
  return (
    <>
      <Header />
      <Body />
      <Footer />
    </>
  );
};

export default CBody;

 

3. Header.jsx_캘린터의 header 부분의 컴포넌트를 구성하고 render한다.

const Title = () => {
  return (
    <div className="CTitle">
      <div className="CYear">2023 / </div>
      <div className="CMonth">07</div>
    </div>
  );
};

// 헴버거 버튼 그리기
const Hamburger = () => {
  return (
    <div className="hamburger">
      <div className="ham"></div>
      <div className="ham"></div>
      <div className="ham"></div>
    </div>
  );
};

// 헤더 영역 전체를 그리는 함수
const Header = () => {
  return (
    <div className="header">
      <Title />
      <Hamburger />
    </div>
  );
};

export default Header;

 

4. Body.jsx_각 요일과 날짜에 대한 컴포넌트를 생성한다.

import React, { useState } from "react";

// 요일 하나하나의 값을 가지는 컴포넌트
const Week = ({ week3 }) => {
  return <div className={"week " + week3}>{week3}</div>;
};

// 각 요일을 담은 컴포넌트
const Weeks = () => {
  const week2 = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];

  const weekR = [];
  for (let i = 0; i < week2.length; i++) {
    weekR.push(<Week week3={week2[i]} />);
  }
  return <div className="Weeks">{weekR}</div>;
};

// 각 날짜를 담는 컴포넌트
const Day = ({ day, color }) => {
  return (
    <div className={"day " + color}>
      {day}
      <Bar color={color} />
    </div>
  );
};

// 각 날짜마다 리본을 그리는 컴포넌트
const Bar = ({ color }) => {
  return <div className={"bar " + color}></div>;
};

// 각 날짜를 담은 컴포넌트
const Days = () => {
  const day2 = [];
  day2.push(
    <>
    	// 달력의 빈 날짜를 채워주는 div
      <div className="day none"></div>
      <div className="day none"></div>
      <div className="day none"></div>
      <div className="day none"></div>
      <div className="day none"></div>
      <div className="day none"></div>
    </>
  );
  // 토요일과 일요일의 색상을 지정한다.
  for (let i = 1; i <= 31; i++) {
    const color = i % 7;
    if (color == 1) {
      day2.push(<Day day={i} color={"blue"}></Day>);
    } else if (color == 2) {
      day2.push(<Day day={i} color={"red"}></Day>);
    } else {
      day2.push(<Day day={i} color={"black"}></Day>);
    }
  }

  return <div className="Days">{day2}</div>;
};

// 캘린더 날짜를 담은 컴포넌트
const Body = () => {
  return (
    <div className="bodys">
      <Weeks />
      <Days />
    </div>
  );
};

export default Body;

 

5. Footer.jsx_하단의 영역으로 로고와 저작권 표시를 넣는다.

// 저작권 표시
const Copyright = () => {
  return (
    <div className="copyrigth">Copyright 2023. Weeji all rights reserved.</div>
  );
};

//로고 표시
const Logo = () => {
  return (
    <div className="logo">
      <img src="/Logo.png" alt="로고"></img>
    </div>
  );
};

const Footer = () => {
  return (
    <div className="Footer">
      <Logo />
      <Copyright />
    </div>
  );
};

export default Footer;

 

6. ViewBtn.jsx_캘린더 내용을 토글하는 기능을 하는 버튼을 생성하여 render한다.

import Body from "./Body";

import React, { useState, useEffect } from "react";

// 상태값을 하나 지정해주고
// 상태 값이 변함에 따라 헤더와 푸터의 display 값을 변경해준다.

const ViewBtn = () => {
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    console.log("componentDidMount");
  }, []);
  useEffect(() => {
    console.log("componentDidMount, componentDidUpdate");
    if (toggle == true) {
      document.querySelector(".header").style.display = "flex";
      document.querySelector(".bodys").style.display = "block";
    } else {
      document.querySelector(".header").style.display = "none";
      document.querySelector(".bodys").style.display = "none";
    }
  }, [toggle]);

  function Toggle() {
    // 버튼 클릭 시, 캘린더 영역 토글 동작
    setToggle(!toggle);
  }

  return (
    <button onClick={Toggle} className="Btn">
      Calendar
    </button>
  );
};

export default ViewBtn;

 

 

 

 

 

 

 

 

 

 

728x90
저작자표시

'블록체인_9기 > 과제' 카테고리의 다른 글

48강_220706_React(TODO LIST 제작)  (0) 2023.07.07
47강_220705_React(지뢰찾기 제작)  (1) 2023.07.05
44강_220629_React(로또 추첨기 제작)  (1) 2023.06.30
36강_220523_Node.js(게시판 페이지 만들기 총 복습)  (0) 2023.05.30
35강_230522_Node.js(회원가입, 로그인 기능이 있는 게시판 페이지 구현)  (0) 2023.05.29

'블록체인_9기/과제' 관련글

티스토리툴바