React

[React] 42. Home 페이지 UI 구현

서회정's avatar
서회정
Mar 17, 2026
[React] 42. Home 페이지 UI 구현
Contents
1. Header 컴포넌트 구현2. DiaryList 컴포넌트1. 상단 버튼 영역2. 다이어리 아이템
 
감정일기장의 Home 페이지 UI를 구현해보자.
 

1. Header 컴포넌트 구현

 
우선 App 컴포넌트에서 기능 테스트를 위해 넣어두었던 버튼 태그를 삭제해주자.
 
notion image
 
그리고 Home 컴포넌트에서 헤더 섹션을 구현해주도록 하자.
만들어두었던 Header 컴포넌트를 삽입하고
props로 전달되는 text에 완성본에서 보이는 것과 같은 날짜를 넣어주면 된다.
 
import Header from "../components/Header";
import Button from "../components/Button";

const Home = () => {
  return (
    <div>
      <Header title={"2024년 2월"} />
    </div>
  );
};

export default Home;
 
notion image
 
다음으로 헤더의 양쪽에 위치하는 버튼을 구현하자.
 
만들어둔 Button 컴포넌트를 삽입하고
text와 onClick이벤트를 임시로 넣어주자.
 
import Header from "../components/Header";
import Button from "../components/Button";

const Home = () => {
  return (
    <div>
      <Header
        title={"2024년 2월"}
        leftChild={
          <Button
            text={"<"}
            onClick={() => {
              console.log("왼쪽버튼클릭");
            }}
          />
        }
        rightChild={
          <Button
            text={">"}
            onClick={() => {
              console.log("오른쪽버튼클릭");
            }}
          />
        }
      />
    </div>
  );
};

export default Home;
 
버튼이 구현되고 클릭하면 임시로 넣어둔
콘솔 출력 코드가 잘 실행되고 있음을 확인할 수 있다.
 
notion image
 

2. DiaryList 컴포넌트

 
다음으로는 다이어리 리스트가 보일 DiaryList 컴포넌트를
만들기 위해 components 폴더 아래에 jsx 파일을 만들고
컴포넌트의 기본적인 틀을 만들어주자.
 
const DiaryList = () => {
  return <div>다이어리 리스트</div>;
};

export default DiaryList;
 
notion image
 
notion image
 

1. 상단 버튼 영역

 

1. 레이아웃

 
다이어리리스트 컴포넌트 내부에는 크게 두 가지 구조로 나뉜 영역이 있다.
상단에는 솔팅 기능이 있는 select 버튼 영역, 그리고 새로운 일기를 작성할 수 있도록 클릭했을 때 Edit 페이지로 넘어가는 새 일기 쓰기 버튼이 있는 영역이다.
 
먼저 상단의 버튼 영역부터 다음의 이미지처럼 구현해보도록 하자.
 
notion image
 
먼저 다이어리리스트 컴포넌트 내부를 두 개의 div로 나누자.
그리고 각각의 className을 붙여 구분하자.
 
가장 상단의 div 태그에는 컴포넌트 이름을 그대로 className으로 할당해주도록 하자.
 
import Button from "./Button";
import "./DiaryList.css";

const DiaryList = () => {
  return (
    <div className="DiaryList">
      <div className="menu_bar"></div>
      <div className="list_wrapper"></div>
    </div>
  );
};

export default DiaryList;
 
이제 menu_bar 내부에 버튼을 두 개 만들어보자.
select태그와 option태그로 셀렉트 박스를 만들어 두 가지 정렬 방법을 만들자.
value 속성으로 추후에 상태로 관리할 변수를 넣어주자.
 
그리고 만들어둔 Button컴포넌트를 삽입해 text로 새 일기 쓰기를 작성해주자.
 
<div className="menu_bar">
  <select>
    <option value={"latest"}>최신순</option>
    <option value={"oldest"}>오래된 순</option>
  </select>
  <Button text={"새 일기 쓰기"} />
</div>;
 
이후에는 스타일을 작성하면 된다.
 
notion image
 

2. 스타일

 
DiaryList.css 파일을 만들고 스타일을 작성했다.
 
.DiaryList .menu_bar {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.DiaryList .menu_bar select {
  background-color: rgb(236, 236, 236);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.DiaryList .menu_bar button {
  flex: 1;
}
 
버튼 색상은 Button 컴포넌트에 미리 만들어둔 스타일을 사용해주자.
props로 버튼의 type을 받는데 초록색 버튼의 type은 POSITIVE이다.
 
notion image
 
type을 작성하며 onClick 이벤트로 임시 콘솔출력 코드를 넣어주었다.
 
<div className="menu_bar">
  <select>
    <option value={"latest"}>최신순</option>
    <option value={"oldest"}>오래된 순</option>
  </select>
  <Button
    text={"새 일기 쓰기"}
    type={"POSITIVE"}
    onClick={() => {
      console.log("새 일기 쓰기 버튼 클릭됨");
    }}
  />
</div>;
 
초록색 버튼 스타일도 잘먹고 클릭 이벤트도 문제없이 실행된다.
 
notion image
 

2. 다이어리 아이템

 

1. 이미지 영역

 
버튼 영역인 menu_bar 아래에 위치한
list_wrapper 내부에 들어갈 다이어리를 만들자.
 
컴포넌트를 먼저 만들어준 뒤 화면에 렌더링 해주자.
 
const DiaryItem = () => {
  return <div>하나의 다이어리</div>;
};
export default DiaryItem;
 
다음으로 하나의 다이어리에 들어가는 정보를
세 가지 영역으로 나눠 넣기 위해 구조를 쪼개자.
 
const DiaryItem = () => {
  return (
    <div className="DiaryItem">
      <div className="img_section"></div>
      <div className="info_section"></div>
      <div className="button_section"></div>
    </div>
  );
};
export default DiaryItem;
 
먼저 가장 첫 번째 영역인 이미지를 넣는 곳을 구현하자.
 
만들어두었던 이미지를 불러오는 함수를 사용하기 위해
상단에서 import 해주고 임시로 이미지 아이디를
1로 삽입해주면 렌더링 결과를 확인할 수 있다.
 
import { getEmotionImage } from "../util/get-emotion-image";
 
<div className="img_section">
  <img src={getEmotionImage(1)} alt="" />
</div>;
 
notion image
 

2. 컨텐츠 영역

 
중앙에 들어가는 다이어리의 상세 내용이 보이는 곳이다.
작성 날짜와 내용을 렌더링하기 위해 두 개의 구조로 나누었다.
 
<div className="info_section">
  <div className="create_date"></div>
  <div className="content"></div>
</div>;
 
그리고 임시로 오늘의 날짜를 넣고 임의의 내용도 넣어주자.
 
<div className="info_section">
  <div className="create_date">{new Date().toLocaleDateString()}</div>
  <div className="content">일기 컨텐츠</div>
</div>;
 
notion image
 

3. 버튼 영역

 
버튼은 Button 컴포넌트를 불러와 text porps 내용만 넣어주자.
 
<div className="button_section">
  <Button text={"수정하기"} />
</div>;
 

4. 스타일

 
완성본을 참고하며 스타일을 추가하자.
 
.DiaryItem {
  display: flex;
  gap: 15px;
  justify-content: space-between;

  padding: 15px 0;
  border-bottom: 1px solid rgb(236, 236, 236);
}

.DiaryItem .img_section {
  min-width: 120px;
  height: 80px;

  display: flex;
  justify-content: center;
  cursor: pointer;
}
 
이모티콘이 표시되는 쪽의 이미지 영역은
완성본에서 사각형 박스 형태로 이모티콘과 같은
배경색을 가지고 있다.
 
className에 따라 다른 배경색을 주기 위해
리터럴 문법을 사용해주자.
 
notion image
 
우선 추후에 props로 들어올 이모티콘 아이디를 임시값 1로 두자.
그리고 이 값이 할당된 변수를 리터럴 문법으로 동적인 className이
만들어질 수 있게 구현해주자.
 
notion image
 
그리고 해당 className에 대한 배경 스타일을 주자.
 
.DiaryItem .img_section_1 {
  background-color: rgb(100, 201, 100);
}
 
의도한 모양대로 만들어졌다.
 
notion image
 
이제 각각의 이모티콘에 따른 배경색 스타일을 추가해주자.
 
.DiaryItem .img_section_1 {
  background-color: rgb(100, 201, 100);
}

.DiaryItem .img_section_2 {
  background-color: rgb(157, 215, 114);
}

.DiaryItem .img_section_3 {
  background-color: rgb(253, 206, 23);
}

.DiaryItem .img_section_4 {
  background-color: rgb(253, 132, 70);
}

.DiaryItem .img_section_5 {
  background-color: rgb(253, 86, 95);
}
 
이모티콘 아이디도 유동적으로 받을 수 있도록 맞춰주자.
현재는 임시값이 들어가지만 기능 구현 때 이를 유동적으로
받을 수 있게 할 예정이다.
 
notion image
 
그리고 몇 가지 스타일을 더 추가해 완성도를 높여주자.
 
.DiaryItem .img_section img {
  width: 60%;
}

.DiaryItem .info_section .created_date {
  font-weight: bold;
  font-size: 25px;
}

.DiaryItem .info_section .content {
  font-size: 18px;
}

.DiaryItem .button_section {
  min-width: 70px;
}
 
홈화면의 UI 구현이 완료되었다.
 
notion image
Share article

clubnerdy

RSS·Powered by Inblog