2024. 9. 3 (rest-api)

import { Button, Grid2, TextField, Typography } from "@mui/material"; import axios from "axios"; import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { useNavigate, useParams } from "react-router-dom"; const PostForm = () => { const { register, handleSubmit, formState: { errors }, setValue } = useForm(); const navigate = useNavigate(); const { postId } = useParams(); // 요청을 보내야 함 axios (http://localhost:8080/api/post/id) const getPost = async () => { try { const res = await axios.get(`http://localhost:8080/api/post/${postId}`); const data = res.data; console.log(data); setValue("title", data.title); setValue("content", data.content); } catch (error) { navigate("/error"); } } useEffect(() => { if (postId) { getPost(); } }, []); // 수정 const onSubmit = async (data) => { data.image = data.image[0]; data.authorId = 1; // 로그인 기능 추가 전까지 임의로 작성 const formData = new FormData(); // 이미지 등록을 위한 로직 구성 Object.keys(data).forEach(key => { formData.append(key, data[key]); }); try { if (postId) { formData.append("id", postId); const res = await axios.patch("http://localhost:8080/api/post", data); } else { // 서버에 요청을 보내고 - const res = await axios.post( "http://localhost:8080/api/post", formData, { headers: {"Content-Type": "multipart/form-data"} }); } // 정상적인 응답이면 -> 게시글 목록으로 보내주자 navigate("/post"); } catch (error) { // 비정상이면 -> 에러페이지 ㄱㄱ navigate("/error"); } }; // watch("이름") -> 해당 입력 "이름"의 값을 가져온다. // console.log(watch("example")); // watch input value by passing the name of it return ( <> {/* "handleSumbit 함수는 onSubmit 동작 전에 입력값에 대한 유효값 검증(validation)을 한다." */} <form onSubmit={handleSubmit(onSubmit)}> <Grid2 container direction={"column"} spacing={3} sx={ { width : {xs: '250px', sm: '500px'}} } > {/* ...register("이름") -> 값이 전달된다. */} {/* 필수값, 유효성 검증 등을 추가할 수 있다. */} {/* 제목 (필수, 50자 이내) */} <TextField variant="outlined" label="제목" error={errors.title && true} helperText={errors.title && "제목은 필수값이며, 50자 이내로 작성해야 합니다."} {...register("title", { required: true, maxLength: 50 })} fullWidth /> {/* 내용 (필수) */} <TextField id="outlined-multiline-flexible" label="내용" multiline rows={4} error={errors.content ? true : false} helperText={errors.content && "내용은 필수값입니다."} {...register("content", { required: true })} /> {/* 이미지 파일 (선택) */} <TextField type="file" label="이미지 파일" {...register("image", { required: false })} slotProps={{ htmlInput : {"accept": "image/*"} }} /> {/* 비밀번호 (필수) */} <TextField id="outlined-password-input" label="비밀번호" type="password" autoComplete="current-password" error={errors.password ? true : false} helperText={errors.password && "비밀번호는 필수값이며, 영어와 숫자를 포함해 8자리 이상 20자리 이하로 작성해주세요."} {...register("password", { required: true, pattern: /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,20}$/ })} fullWidth /> {/* 유효값 검증 실패 시 나타나는 문구 */} <Button fullWidth type="submit" variant="outlined" color="main">제출</Button> </Grid2> </form> </> ); } export default PostForm;

import axios from "axios"; import { useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { Avatar, Button, Card, CardActions, CardContent, CardHeader, CardMedia, Typography, useTheme } from "@mui/material"; import DeleteIcon from "@mui/icons-material/Delete"; import EditIcon from "@mui/icons-material/Edit"; import Swal from "sweetalert2"; const PostDetail = () => { // id 값 가져오기 (주소창에 있음) const { postId } = useParams(); const navigate = useNavigate(); const theme = useTheme(); const [post, setPost] = useState(); // 요청을 보내야 함 axios (http://localhost:8080/api/post/id) const getPost = async () => { try { const res = await axios.get(`http://localhost:8080/api/post/${postId}`); const data = res.data; setPost(data); } catch (error) { navigate("/error"); } } // 가져온 정보를 예쁘게 화면에 뿌려주자 useEffect(() => { getPost(); }, []); // 삭제 기능 const handleDelete = async () => { const result = await Swal.fire({ title: "삭제를 원해?", input: "password", inputLabel: "비밀번호", inputPlaceholder: "비밀번호를 입력하세요", inputAttributes: { maxlength: "20", autocapitalize: "off", autocorrect: "off" }, showCancelButton: true, showCloseButton: true }); // if (result.dismiss === "close") { // console.log("닫았네"); // } else if (result.dismiss === "cancel") { // console.log("취소했네"); // } const password = result.value; if (password) { const authorId = 1; // 로그인 기능 전까지 임시 작성자 아이디 try { const res = await axios.delete( `http://localhost:8080/api/post/${post.id}`, { data: { password, authorId } }); Swal.fire({ title: "잘했어요!", text: `${post.id}번 게시물이 삭제되었습니다.`, icon: "success" }); navigate("/post"); } catch (error) { navigate("/error"); } } } return ( <> <h1>게시물 상세정보</h1> {post && <Card sx={{ width: { xs: '250px', sm: '500px', md: '800px' } }}> <CardHeader avatar={ <Avatar sx={{ bgcolor: theme.palette.main.main }}> {post.id} </Avatar> } title={post.title} subheader={post.createdAt} /> { post.image && <CardMedia component="img" height="194" image={`http://localhost:8080/img/${post.image.saved}`} alt="게시글 이미지" /> } <CardContent> <Typography gutterBottom sx={{ color: 'text.secondary', fontSize: 12 }}> {post.author.name} - {post.author.email} </Typography> <Typography variant="body2" sx={{ color: 'text.secondary' }}> {post.content} </Typography> </CardContent> <CardActions> <Button variant="contained" color="bg2" size="small" startIcon={<EditIcon />} onClick={() => navigate(`/post/modify/${post.id}`)} > 수정 </Button> <Button variant="contained" color="sub" size="small" startIcon={<DeleteIcon />} onClick={handleDelete} > 삭제 </Button> </CardActions> </Card> } </> ); } export default PostDetail;