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 |