조원분들과 함께 순조롭게 프로젝트 진행중!!!
프론트 작업물 깃허브 주소
https://github.com/GosuEE/memes_front
오늘은 백분들과 함께 서버와 연동해가며 수정작업을 진행 했습니다.
오후 2시부터 9시까지 7시간 쉬지않고 쭉 달렸는데....
api 명세서 작업이 굉장히 중요하단걸 깨달았습니당........
정말정말... :)
접속중인 사용자가 정답을 제출하면 댓글작성과 댓글뷰가 나타납니다! 해당 사용자가 저장되기 때문에 로그아웃후 재접속하여도 유지 됩니다:) 게시글을 작성한 사용자가 해당 게시글을 수정 하였다면 정답자가 초기화 됩니다!
어쩌다보니 상당히 길어진 게시글 상세조회 페이지...
아직 미완성입니다
import React, { useCallback, useEffect } from 'react';
import styled from 'styled-components';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import WirteComment from '../components/Detail/WriteComment';
import { deleteMemes, getMemeById, giveAnswer } from '../redux/modules/postSlice';
import { useState } from 'react';
import CommentView from '../components/Detail/CommentView';
import CelebrationIcon from '@mui/icons-material/Celebration';
import CampaignIcon from '@mui/icons-material/Campaign';
function Detail() {
const { memeId } = useParams();
const [answerValue, setAnswerValue] = useState();
const meme = useSelector((state) => state.meme.meme);
const navigate = useNavigate();
const dispatch = useDispatch();
const getMeme = useCallback(() => {
dispatch(getMemeById(memeId));
}, [dispatch, memeId]);
async function onDeleteHandler() {
await dispatch(deleteMemes(memeId));
navigate('/');
}
useEffect(() => {
getMeme();
}, [getMeme]);
return (
<>
<StBoxOuter>
<StBox>
<StTitle>
<h1>
<AccountCircleIcon /> {meme.nickname}
</h1>
<h1 style={titleStyle}>{meme.title}</h1>
</StTitle>
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
mt: 2,
'& > :not(style)': {
m: 1,
width: 550,
height: 400,
},
}}
>
<Paper elevation={3}>
{meme.img && <img src={meme.img} alt="img" style={inputStyle} />}
</Paper>
</Box>
<Box
component="form"
sx={{
'& .MuiTextField-root': { m: 1, width: '62ch' },
}}
noValidate
autoComplete="off"
>
<TextField
label="내용"
variant="outlined"
multiline
rows={4}
value={meme.contents}
InputProps={{
readOnly: true,
}}
/>
</Box>
{/* {meme.boardUser?} */}
<Link to="/" style={linkStyle}>
<Button
onClick={() => dispatch(deleteMemes(memeId))}
sx={{ mt: 2, ml: '15px' }}
color="error"
variant="outlined"
>
삭제
</Button>
</Link>
<Link to={`/update/${memeId}`} style={linkStyle}>
<Button sx={{ mt: 2, ml: '15px' }} variant="outlined">
수정
</Button>
</Link>
{meme.correct ? (
<></>
) : (
<RadioGroupOuter>
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">
<CampaignIcon /> 정답을 선택해 주세요 <br /> <CampaignIcon /> 정답을 맞추시면 댓글
작성 및 확인이 가능합니다
</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
name="radio-buttons-group"
>
<FormControlLabel
value="1"
control={<Radio />}
label={meme.exam1}
onChange={(e) => {
setAnswerValue(1);
console.log(answerValue);
}}
/>
<FormControlLabel
value="2"
control={<Radio />}
label={meme.exam2}
onChange={(e) => {
setAnswerValue(2);
console.log(answerValue);
}}
/>
<FormControlLabel
value="3"
control={<Radio />}
label={meme.exam3}
onChange={(e) => {
setAnswerValue(3);
console.log(answerValue);
}}
/>
</RadioGroup>
<Button
variant="outlined"
size="small"
type="button"
onClick={async () => {
const payload = {
answerValue: answerValue,
memeid: meme.id,
};
await dispatch(giveAnswer(payload));
dispatch(getMemeById(meme.id));
}}
>
정답제출
</Button>
</FormControl>
</RadioGroupOuter>
)}
{meme.correct ? (
<>
<h1 style={h1Style}>
<CelebrationIcon style={iconStyle} /> 축하합니다 이제 댓글을 작성해 보세요{' '}
<CelebrationIcon />
</h1>
<WirteComment /> <CommentView />
</>
) : (
<></>
)}
</StBox>
</StBoxOuter>
</>
);
}
export default Detail;
const StBox = styled.div`
margin: 0 auto;
`;
const StBoxOuter = styled.div`
align-items: center;
display: flex;
text-align: center;
margin-top: 50px;
&::after {
content: '';
clear: both;
display: table;
}
`;
const TextBox = styled.textarea`
min-width: 550px;
max-width: 550px;
min-height: 140px;
max-height: 140px;
display: block;
`;
const RadioGroupOuter = styled.div`
text-align: left;
`;
const titleStyle = {
marginTop: '20px',
fontSize: '30px',
fontWeight: 'bold',
};
const inputStyle = {
maxWidth: '100%',
maxHeight: `100%`,
};
const h1Style = {
marginTop: '20px',
color: 'red',
};
const linkStyle = {
textDecoration: 'none',
};
const iconStyle = {
transform: 'scaleX(-1)',
};
const StTitle = styled.div`
max-width: 550px;
`;
게시글 작성자와 접속중인 사용자의 username의 값을 백단에서 비교하여 true or false 값으로 프론트로 넘겨 줍니다 :)
(meme.boardUser)
의 값이 true일 경우 삭제/수정 버튼이 보여지게 될 예정입니다.