Skip to content

Commit

Permalink
Merge pull request #22 from dbstjs95/dev
Browse files Browse the repository at this point in the history 
전반적인 기능 수정
  • Loading branch information
@dbstjs95
dbstjs95 committed May 14, 2022
2 parents c8c430e + 2092105 commit 9735741
Show file tree
Hide file tree
Showing 41 changed files with 2,748 additions and 751 deletions.
15 changes: 12 additions & 3 deletions client/src/component/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,22 @@ function Header() {
</NavLink>
</div>
<ul className={isOpen ? 'header-menu open' : 'header-menu'}>
<NavLink to="/main">
<NavLink
to="/main"
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<li>메인페이지</li>
</NavLink>
<NavLink to="/freeboard">
<NavLink
to="/freeboard"
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<li>무료 정보 게시판</li>
</NavLink>
<NavLink to="/paidboard">
<NavLink
to="/paidboard"
style={{ color: 'inherit', textDecoration: 'inherit' }}
>
<li>유료 정보 게시판</li>
</NavLink>
</ul>
Expand Down
11 changes: 7 additions & 4 deletions client/src/component/MypageCompo/FreeWriting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,21 +117,24 @@ function Writing() {
//업로드 버튼 클릭(파일 없이)
const handleSubmit = (e) => {
e.preventDefault();
const { title, content } = textValues;
axios
.post(
`${process.env.REACT_APP_SERVER_DEV_URL}/info`,
{
type: 'Free',
targetPoint: 0,
...textValues,
title,
content,
file: '',
},
config,
)
.then((res) => {
if (res.data.infoId) alert('글이 등록되었습니다.');
setTextValues({
title: null,
content: null,
title: '',
content: '',
});
})
.catch((err) => {
Expand Down Expand Up @@ -227,7 +230,7 @@ function Writing() {
<textarea
name="content"
id="content"
placeholder="첨부파일에 대한 설명을 적어주세요."
placeholder="공유할 정보에 대한 간단한 설명을 적어주세요."
value={textValues.content}
onChange={(e) =>
setTextValues({ ...textValues, content: e.target.value })
Expand Down
5 changes: 1 addition & 4 deletions client/src/component/MypageCompo/UserInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,10 +194,7 @@ function UserInfo() {
//처음 렌더링때 작동: 유저정보 불러오기
useEffect(() => {
axios
.get(
`${process.env.REACT_APP_SERVER_DEV_URL}/users/userInfo/${id}`,
getConfig,
)
.get(`${process.env.REACT_APP_SERVER_DEV_URL}/users/${id}`, getConfig)
.then((res) => {
const { user } = res.data;
if (user) {
Expand Down
270 changes: 162 additions & 108 deletions client/src/component/content/Comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,16 @@ import {
modifyComment,
} from '../../store/slices/selectedPost';
import axios from 'axios';
import '../../css/Comment.css';

const RegisterBox = styled.div``;

const CommentWrapper = styled.div`
border: 1px solid black;
p {
margin: 0;
}
`;
const UserInfoWrapper = styled.div`
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eeeeee;
`;

const Button = styled.button`
border: 0;
height: 20px;
Expand All @@ -31,15 +29,137 @@ const Button = styled.button`
}
`;

const CommentWrapper = styled.div`
border: 1px solid black;
p {
margin: 0;
}
`;

function Review({ review, userInfo, infoId, postConfig, getConfig }) {
const dispatch = useDispatch();
const textEl = useRef(null);
const [editMode, setEditMode] = useState(false);
const [modifyVal, setModifyVal] = useState(review.content);

useEffect(() => {
if (!editMode) return;
textEl.current.focus();
}, [editMode]);

//댓글 수정 값
const handleTextChange = (e) => {
setModifyVal(e.target.value);
};

//댓글 수정 완료
const chagneContent = (replyId) => {
if (modifyVal === '') return alert('댓글을 작성해주세요.');
axios
.put(
`${process.env.REACT_APP_SERVER_DEV_URL}/info/${infoId}/reply/${replyId}`,
{ content: modifyVal },
postConfig,
)
.then((res) => {
const { updatedAt } = res.data;
dispatch(
modifyComment({
id: replyId,
content: modifyVal,
updatedAt,
}),
);
setEditMode(false);
})
.catch((err) => alert('댓글 수정 실패'));
};

// 코멘트 삭제
const remove = (replyId) => {
axios
.delete(
`${process.env.REACT_APP_SERVER_DEV_URL}/info/${infoId}/reply/${replyId}`,
getConfig,
)
.then((res) => {
const { reply } = res.data;
if (Number(replyId) === Number(reply.id)) {
dispatch(deleteComment({ replyId }));
}
})
.catch((err) => alert('댓글 삭제 실패'));
};

//수정하다가 취소하기
const modifyCancel = () => {
setModifyVal(review.content);
setEditMode(false);
};

return (
<CommentWrapper>
<UserInfoWrapper>
<p>작성자 : {review.User.nickname}</p>
<p>작성일자 : {review.createdAt}</p>
<Button
className={
(Number(review.userId) === Number(userInfo.id) ||
userInfo.grade === 'admin') &&
'authorized'
}
onClick={() => remove(review.id)}
>
삭제
</Button>
{editMode ? (
<button
className="modify-confirm"
onClick={() => chagneContent(review.id)}
>
수정 완료
</button>
) : (
<Button
className={
Number(review.userId) === Number(userInfo.id)
? 'modify-btn authorized'
: 'modify-btn'
}
onClick={() => setEditMode(true)}
>
수정
</Button>
)}
</UserInfoWrapper>
{editMode ? (
<div>
<textarea
className="comment-text"
cols="30"
rows="10"
ref={textEl}
value={modifyVal}
onChange={handleTextChange}
/>

<button onClick={modifyCancel}>취소</button>
</div>
) : (
<div>
<pre>{review.content}</pre>
</div>
)}
</CommentWrapper>
);
}

function Comment() {
const dispatch = useDispatch();
const { id: infoId, reviews } = useSelector(selectSelectedPost);
const userInfo = useSelector(selectUserInfo);

const [input, setInput] = useState('');
const [modifyVal, setModifyVal] = useState('');
const [editMode, setEditMode] = useState(false);
const textEl = useRef(null);

const postConfig = {
headers: {
Expand All @@ -56,23 +176,25 @@ function Comment() {
};

//댓글 입력
const handleChange = (e, type) => {
if (type === 'input') return setInput(e.target.value);
if (type === 'modify') return setModifyVal(e.target.value);
const handleChange = (e) => {
setInput(e.target.value);
};

// 댓글 추가
const add = () => {
if (!input) return alert('댓글을 작성해주세요.');

axios
.post(
`${process.env.REACT_APP_SERVER_DEV_URL}/info/${infoId}/reply`,
{ content: input },
postConfig,
)
.then((res) => {
const { id: replyId, createdAt } = res.data;
let { replyId, createdAt } = res.data;
let day = createdAt.split('T');
let time = day[1].split('.')[0];
createdAt = `${day[0]} ${time}`;

dispatch(
addComment({
id: replyId,
Expand All @@ -87,103 +209,35 @@ function Comment() {
.catch((err) => alert('댓글 작성 실패'));
};

// 코멘트 삭제
const remove = (replyId) => {
axios
.delete(
`${process.env.REACT_APP_SERVER_DEV_URL}/info/${infoId}/reply/${replyId}`,
getConfig,
)
.then((res) => {
const { reply } = res.data;
if (String(replyId) === String(reply.id)) {
dispatch(deleteComment({ replyId }));
}
})
.catch((err) => alert('댓글 삭제 실패'));
};

//댓글 수정 완료
const chagneContent = (replyId) => {
if (!modifyVal) return alert('댓글을 작성해주세요.');
axios
.put(
`${process.env.REACT_APP_SERVER_DEV_URL}/info/${infoId}/reply/${replyId}`,
{ content: modifyVal },
postConfig,
)
.then((res) => {
const { updatedAt } = res.data;
dispatch(
modifyComment({
id: replyId,
content: modifyVal,
updatedAt,
}),
);
setModifyVal('');
setEditMode(false);
})
.catch((err) => alert('댓글 수정 실패'));
};

useEffect(() => {
if (!editMode) return;
textEl.current.focus();
}, [editMode]);

return (
<div style={{ border: '3px solid red' }}>
<textarea
value={input}
onChange={(e) => handleChange(e, 'input')}
placeholder="댓글을 작성하려면 로그인 해주세요."
disabled={!userInfo.isLogin}
/>
<button onClick={add} disabled={!userInfo.isLogin}>
등록
</button>
<>
<RegisterBox>
<textarea
className="comment-text"
value={input}
onChange={handleChange}
placeholder="댓글을 작성하려면 로그인 해주세요."
disabled={!userInfo.isLogin}
/>
<button
className="comment-btn"
onClick={add}
disabled={!userInfo.isLogin}
>
등록
</button>
</RegisterBox>
{reviews.map((R) => (
<CommentWrapper key={R.id}>
<UserInfoWrapper>
<p>작성자 : {R.nickname}</p>
<p>작성일자 : {R.createdAt}</p>
<Button
className={
(R.userId === userInfo.id || userInfo.grade === 'admin') &&
'authorized'
}
onClick={() => remove(R.id)}
>
삭제
</Button>
<Button
className={R.userId === userInfo.id && 'authorized'}
onClick={() => setEditMode(false)}
>
수정
</Button>
</UserInfoWrapper>
{editMode ? (
<div>
<textarea
cols="30"
rows="10"
ref={textEl}
value={modifyVal}
onChange={(e) => handleChange(e, 'modify')}
>
{R.content}
</textarea>
<button onClick={() => chagneContent(R.id)}>등록</button>
<button>취소</button>
</div>
) : (
<div>{R.content}</div>
)}
</CommentWrapper>
<Review
key={R.id}
review={R}
infoId={infoId}
postConfig={postConfig}
getConfig={getConfig}
userInfo={userInfo}
/>
))}
</div>
</>
);
}

Expand Down
Loading

0 comments on commit 9735741

Please sign in to comment.