반응형
리액트 설치
npx create-react-app my-app
라우터
라우터 설치
npm install react-router-dom --save
만들어야 할 페이지는 메인 페이지, 일기 작성 페이지, 일기 수정 페이지, 일기 개별 조회 페이지로 총 4개이다.
페이지를 만들고 라우터에 각 페이지와 url을 매핑한다.
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} exact />
<Route path="/new" element={<New />} exact />
<Route path="/edit/:id" element={<Edit />} exact />
<Route path="/diary/:id" element={<Diary />} exact />
</Routes>
</BrowserRouter>
</div>
);
}
이제 url과 각 페이지가 매핑되었다.
공용 컴포넌트 생성
웹 사이트에 전체적으로 쓰일 버튼과 상단의 헤더, 카드 컴포넌트를 생성한다.
헤더에는 왼쪽 버튼, 중앙의 텍스트, 오른쪽 버튼의 요소가 들어간다.
import "./Header.css";
const Header = ({ leftBtn, headText, rightBtn }) => {
return (
<header>
<div className="header-left-btn">{leftBtn}</div>
<div className="header-text">{headText}</div>
<div className="header-right-btn">{rightBtn}</div>
</header>
);
};
export default Header;
버튼은 취소, 뒤로 가기 버튼(negative), 저장하기, 수정하기 버튼(positive), 추가하기(plus) 버튼으로 타입을 달리 하여 css를 설정했다.
import "./Button.css";
const Button = ({ type, text, onClick }) => {
//버튼 종류 3가지(취소:negative, 완료:positive, 추가:plus)
return (
<button className={`Button ${type}`} onClick={onClick}>
{text}
</button>
);
};
export default Button;
.Button {
cursor: pointer;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
color: #563a3d;
background-color: transparent;
white-space: nowrap;
font-family: "Noto Serif KR";
}
.Button.negative {
background-color: #b18c79;
}
.Button.positive {
background-color: #764845;
}
.Button.plus {
background-color: #975ab7;
font-size: 14px;
}
카드 컴포넌트는 일기 내용을 wrap해줄 컴포넌트이므로 {props.children}을 사용한다.
import "./Card.css";
const Card = (props) => {
return <div>{props.children}</div>;
};
export default Card;
헤더와 버튼을 적용해 본 결과는 아래와 같다.
반응형
'웹 프로젝트 > 🌜꿈 일기장' 카테고리의 다른 글
[React] 꿈 일기 기록 사이트 제작 일지-11. 일기 검색 기능 추가 (0) | 2023.09.27 |
---|---|
[React] 꿈 일기 기록 사이트 제작 일지-10. 사용자가 장르를 수정할 수 있는 `사용자 장르 추가/삭제 기능` 구현 (+ localStorage) (2) | 2023.09.27 |
[React] 꿈 일기 기록 사이트 제작 일지-6. 일기아이템 생성 및 조회 페이지 이동 구현과 CSS 스타일링 (0) | 2023.09.25 |
[React] 꿈 일기 기록 사이트 제작 일지-5. 일기 정렬 기능 및 페이지 이동 버튼 구현 (0) | 2023.09.25 |
[React] 꿈 일기 기록 사이트 제작 일지-4. Home.js 작성한 월에 맞는 일기 리스트 렌더링 (0) | 2023.09.24 |
[React] 꿈 일기 기록 사이트 제작 일지-1. 기획 및 디자인 구상, url 설계 (0) | 2023.09.22 |