From 5b2a8fdfefcb555c7434c6aa4ff4ef11cc0b06c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Mon, 29 Jul 2024 13:56:28 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20QnaWrite=20=ED=9B=85/=ED=95=A8=EC=88=98?= =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95,=20NoticeWrite=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ArticleDetail/ArticleDetail.module.css | 1 + .../Article/EditArticle/EditArticle.jsx | 79 +++++++++++++ .../EditArticle/EditArticle.module.css | 110 ++++++++++++++++++ frontend/src/components/Article/index.js | 1 + frontend/src/hooks/api/useNoticeWrite.js | 2 +- frontend/src/hooks/api/useQnAWrite.js | 16 +++ frontend/src/hooks/api/useQuestionWrite.js | 16 --- .../CreateQuestionPage/CreateQuestionPage.jsx | 2 +- .../NoticeDetailPage/NoticeDetailPage.jsx | 1 + .../pages/NoticeListPage/NoticeListPage.jsx | 2 +- .../pages/NoticeWritePage/NoticeWritePage.jsx | 9 +- 11 files changed, 213 insertions(+), 26 deletions(-) create mode 100644 frontend/src/components/Article/EditArticle/EditArticle.jsx create mode 100644 frontend/src/components/Article/EditArticle/EditArticle.module.css create mode 100644 frontend/src/hooks/api/useQnAWrite.js delete mode 100644 frontend/src/hooks/api/useQuestionWrite.js diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css index bb67bb9..b3d813a 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css @@ -47,4 +47,5 @@ line-height: 1.4; font-weight: 400; margin: 0; + white-space: pre-line; } diff --git a/frontend/src/components/Article/EditArticle/EditArticle.jsx b/frontend/src/components/Article/EditArticle/EditArticle.jsx new file mode 100644 index 0000000..15b5eb5 --- /dev/null +++ b/frontend/src/components/Article/EditArticle/EditArticle.jsx @@ -0,0 +1,79 @@ +import { useState, useEffect, useRef } from 'react'; +import { Link } from 'react-router-dom'; +import styles from './EditArticle.module.css'; +import EditIcon from '/src/assets/icons/edit.svg?react'; +import BackIcon from '/src/assets/icons/back.svg?react'; + +export default function EditArticle({ topic, title, prevTitle, prevContent, onSubmit }) { + const [articleTitle, setArticleTitle] = useState(prevTitle); + const [articleContent, setArticleContent] = useState(prevContent); + const textAreaRef = useRef(null); + + // useEffect(() => { + // adjustTextAreaHeight(); + // }, []); + + useEffect(() => { + adjustTextAreaHeight(); + }, [articleContent]); + + const adjustTextAreaHeight = () => { + if (textAreaRef.current) { + textAreaRef.current.style.height = 'auto'; + textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`; + } + }; + + const handleInput = (e) => { + setArticleContent(e.target.value); + }; + + return ( +
+
+ + + {title} + +
{topic}
+
+
onSubmit(e, articleTitle, articleContent)} + > +
+ + setArticleTitle(e.target.value)} + /> +
+
+ + +
+ +
+
+ ); +} diff --git a/frontend/src/components/Article/EditArticle/EditArticle.module.css b/frontend/src/components/Article/EditArticle/EditArticle.module.css new file mode 100644 index 0000000..54109d5 --- /dev/null +++ b/frontend/src/components/Article/EditArticle/EditArticle.module.css @@ -0,0 +1,110 @@ +.createArticle { + width: 100%; +} + +.header { + display: flex; + flex-direction: column; + align-items: start; + gap: 8px; +} + +.goBack { + display: flex; + align-items: center; + gap: 4px; + font-size: 20px; + line-height: 1.2; + font-weight: 400; + color: var(--text-color-secondary); + stroke: var(--text-color-secondary); +} + +.title { + font-size: 32px; + line-height: 1.2; + font-weight: 800; +} + +.formWrapper { + display: flex; + flex-direction: column; + margin-top: 20px; +} + +.fieldWrapper { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + margin-bottom: 20px; +} + +.label { + color: var(--text-color); + font-size: 16px; + line-height: 1.4; + font-weight: 400; + margin-bottom: 8px; +} + +.titleInput { + padding: 20px; + background: var(--background); + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 20px; + line-height: 1.2; + font-weight: 500; +} + +.titleInput::placeholder { + color: var(--text-color-tertiary); +} + +.contentInput { + padding: 20px; + height: 80px; + box-sizing: border-box; + overflow: hidden; + background: var(--background-color); + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 16px; + line-height: 1.4; + font-weight: 400; +} + +.contentInput::placeholder { + color: var(--text-color-tertiary); +} + +.button { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + border: 1px solid var(--primary-color); + background-color: var(--primary-color); + color: var(--on-primary); + stroke: var(--on-primary); + font-size: 16px; + line-height: 1.4; + font-weight: 700; + align-self: end; + border-radius: 8px; + cursor: pointer; + transition: + background-color 0.25s, + border-color 0.25s, + stroke 0.25s, + color 0.25s; +} + +.button:disabled, +.button[disabled] { + border-color: var(--border-color); + background-color: var(--background-tertiary); + color: var(--text-color-tertiary); + cursor: not-allowed; + stroke: var(--text-color-tertiary); +} diff --git a/frontend/src/components/Article/index.js b/frontend/src/components/Article/index.js index f8dedb9..8a32a75 100644 --- a/frontend/src/components/Article/index.js +++ b/frontend/src/components/Article/index.js @@ -2,3 +2,4 @@ export { default as ArticleDetail } from './ArticleDetail/ArticleDetail.jsx'; export { default as ArticleDetailAnswer } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx'; export { default as CreateArticle } from './CreateArticle/CreateArticle.jsx'; export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx'; +export { default as EditArticle } from './EditArticle/EditArticle.jsx'; diff --git a/frontend/src/hooks/api/useNoticeWrite.js b/frontend/src/hooks/api/useNoticeWrite.js index afba9f8..b28c72c 100644 --- a/frontend/src/hooks/api/useNoticeWrite.js +++ b/frontend/src/hooks/api/useNoticeWrite.js @@ -14,4 +14,4 @@ export function useNoticeWrite() { }; return { noticeWrite }; -} +} \ No newline at end of file diff --git a/frontend/src/hooks/api/useQnAWrite.js b/frontend/src/hooks/api/useQnAWrite.js new file mode 100644 index 0000000..9d0a8eb --- /dev/null +++ b/frontend/src/hooks/api/useQnAWrite.js @@ -0,0 +1,16 @@ +import instance from '../../utils/axios/instance'; +import { API_URL } from '../../constants'; + +export function useQnaWrite() { + const qnaWrite = (lectureId, title, content) => { + const newQna = { + title, + content, + answer: null, + }; + console.log(newQna); + return instance.post(`${API_URL}/qna/${lectureId}`, newQna); + }; + + return { qnaWrite }; +} diff --git a/frontend/src/hooks/api/useQuestionWrite.js b/frontend/src/hooks/api/useQuestionWrite.js deleted file mode 100644 index 34bf935..0000000 --- a/frontend/src/hooks/api/useQuestionWrite.js +++ /dev/null @@ -1,16 +0,0 @@ -import instance from '../../utils/axios/instance'; -import { API_URL } from '../../constants'; - -export function useQnaWrite() { - const questionWrite = (lectureId, title, content) => { - const newNotice = { - title, - content, - answer: null, - }; - console.log(newNotice); - return instance.post(`${API_URL}/qna/${lectureId}`, newNotice); - }; - - return { questionWrite }; -} diff --git a/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx b/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx index e4c32ba..380e92a 100644 --- a/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx +++ b/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx @@ -1,5 +1,5 @@ import { CreateArticle } from '../../components/Article'; -import { useQnaWrite } from '../../hooks/api/useQuestionWrite'; +import { useQnaWrite } from '../../hooks/api/useQnAWrite'; import { useParams, useNavigate } from 'react-router-dom'; export default function CreateQuestionPage() { diff --git a/frontend/src/pages/NoticeDetailPage/NoticeDetailPage.jsx b/frontend/src/pages/NoticeDetailPage/NoticeDetailPage.jsx index f91f70c..5955fe4 100644 --- a/frontend/src/pages/NoticeDetailPage/NoticeDetailPage.jsx +++ b/frontend/src/pages/NoticeDetailPage/NoticeDetailPage.jsx @@ -7,6 +7,7 @@ export default function NoticeDetailPage() { const noticeId = params.noticeId; const { data } = useNoticeDetail(noticeId); const notice = data?.data; + // TODO: 수정 버튼 추가(여기에 또는 ArticleDetail에) return ( - {notices?.map?.((notice) => ( + {notices?.map((notice) => ( { e.preventDefault(); - - await noticeWrite({ - lectureId: Number(lectureId), - title, - category: 'announcement', - content, - }); + console.log(lectureId, content, title); + await noticeWrite(lectureId, title, content); navigate('..'); };