반응형
일기 수정, 등록 페이지는 동일한 ui를 기반으로 하기 때문에 DiaryEditor 컴포넌트를 따로 작성해서 수정, 등록 페이지에 같이 사용하도록 한다.
import { useContext, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import Button from "../components/Button";
import Header from "../components/Header";
import "./DiaryEditor.css";
import { DiaryContext } from "../context/diary-context";
const getStringDate = (date) => {
return date.toISOString().slice(0, 10);
};
const DiaryEditor = () => {
const { onCreate } = useContext(DiaryContext);
const [date, setDate] = useState(getStringDate(new Date()));
const [img, setImg] = useState();
const [genre, setGenre] = useState("일상");
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const imgRef = useRef();
const titleRef = useRef();
const contentRef = useRef();
const navigate = useNavigate();
const genreList = [
{ value: "daily", name: "일상" },
{ value: "fantasy", name: "판타지" },
{ value: "action", name: "액션" },
{ value: "adventure", name: "모험" },
{ value: "horror", name: "호러" },
];
const setImgHandler = (e) => {
const imgfile = imgRef.current.files[0];
const reader = new FileReader();
reader.onload = () => {
setImg(reader.result);
};
reader.readAsDataURL(imgfile);
setImg(imgfile);
};
const submitHandler = () => {
if (!content) {
}
onCreate(date, img, genre, title, content);
navigate("/", { replace: true });
};
return (
<div className="diary-editor">
<Header
leftBtn={
<Button
type="negative"
text="뒤로 가기"
onClick={(e) => navigate(-1)}
/>
}
headText="새 일기 쓰기"
/>
<div>
<section>
<h4>오늘의 날짜</h4>
<input
className="input-date"
value={date}
onChange={(e) => setDate(e.target.value)}
type="date"
/>
</section>
<section>
<h4>이미지</h4>
<input type="file" onChange={setImgHandler} ref={imgRef} />
{img && (
<div className="img-preview">
<img alt="이미지" src={img}></img>
</div>
)}
</section>
<section>
<h4>장르 | 제목</h4>
<div className="genre-title-wrapper">
<div className="genre-wrapper">
<select onChange={(e) => setGenre(e.target.value)}>
{genreList.map((it, idx) => (
<option key={idx} value={it.value}>
{it.name}
</option>
))}
</select>
</div>
<div className="title-wrapper">
<input
placeholder="제목"
ref={titleRef}
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
</div>
<div>
<h4>내용</h4>
<div className="text-wrapper">
<textarea
placeholder="내용"
ref={contentRef}
value={content}
onChange={(e) => setContent(e.target.value)}
/>
</div>
</div>
</section>
<section>
<div className="control-btn">
<Button
type="negative"
text="취소하기"
onClick={(e) => navigate(-1)}
/>
<Button type="positive" text="작성하기" onClick={submitHandler} />
</div>
</section>
</div>
</div>
);
};
export default DiaryEditor;
스타일 적용 전
스타일 적용 후
반응형
'웹 프로그래밍 > 🌜꿈 일기장' 카테고리의 다른 글
[React] 꿈 일기 기록 사이트 제작 일지-12. 반응형 웹 CSS 스타일링 (0) | 2023.09.27 |
---|---|
[React] 꿈 일기 기록 사이트 제작 일지-11. 일기 검색 기능 추가 (0) | 2023.09.27 |
[React] 꿈 일기 기록 사이트 제작 일지-10. 사용자가 장르를 수정할 수 있는 `사용자 장르 추가/삭제 기능` 구현 (+ localStorage) (2) | 2023.09.27 |
[React] 꿈 일기 기록 사이트 제작 일지-5. 일기 정렬 기능 및 페이지 이동 버튼 구현 (0) | 2023.09.25 |
[React] 꿈 일기 기록 사이트 제작 일지-4. Home.js 작성한 월에 맞는 일기 리스트 렌더링 (0) | 2023.09.24 |
[React] 꿈 일기 기록 사이트 제작 일지-2. 리액트 프로젝트 시작 및 페이지 만들기, 라우터 설정, 공용 컴포넌트 설정 (0) | 2023.09.22 |