From ae278070b7a86a633369bff82f04264423c8d3e4 Mon Sep 17 00:00:00 2001 From: jhynsoo Date: Thu, 8 Aug 2024 17:33:35 +0900 Subject: [PATCH] =?UTF-8?q?design:=20=EA=B2=8C=EC=8B=9C=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Router.jsx | 1 - .../Article/ArticleDetail/ArticleDetail.jsx | 5 +- .../ArticleDetail/ArticleDetail.module.css | 3 +- .../ArticleDetailAnswer.module.css | 1 + .../ArticleDetailAnswerInput.jsx | 8 +- .../ArticleDetailAnswerInput.module.css | 15 ++-- .../Article/CreateArticle/CreateArticle.jsx | 1 + .../Article/EditArticle/EditArticle.jsx | 1 + .../Article/EditFreeboard/EditFreeboard.jsx | 1 + .../components/Article/EditQna/EditQna.jsx | 1 + .../FreeDetailComments/FreeboardComment.jsx | 48 ++++++----- .../FreeboardComment.module.css | 80 +++++++++---------- .../FreeboardCommentInput.jsx | 5 +- .../FreeboardCommentInput.module.css | 14 ++-- .../FreeboardDetail/FreeboardDetail.jsx | 50 +++++------- .../FreeboardDetail.module.css | 25 +++++- .../src/components/Layout/LectureLayout.jsx | 1 - .../src/components/QuizForm/QuizsetForm.jsx | 1 + frontend/src/components/QuizSet/QuizSet.jsx | 4 +- .../FreeboardDetailPage.jsx | 2 + .../FreeboardListPage/FreeboardListPage.jsx | 2 +- .../pages/LectureInfoPage/LectureInfoPage.jsx | 4 +- .../LectureInfoPage.module.css | 22 +++++ .../TeacherNoticeListPage.jsx | 33 -------- .../src/pages/TeacherNoticeListPage/index.js | 1 - frontend/src/utils/axios/instance.js | 1 - 26 files changed, 173 insertions(+), 157 deletions(-) delete mode 100644 frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx delete mode 100644 frontend/src/pages/TeacherNoticeListPage/index.js diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx index 20db9d1..9efe647 100644 --- a/frontend/src/Router.jsx +++ b/frontend/src/Router.jsx @@ -5,7 +5,6 @@ import HomePage from './pages/HomePage'; import NotFoundPage from './pages/NotFoundPage'; import { lazy, Suspense } from 'react'; import MyPageLayout from './components/Layout/MyPageLayout'; -// import LivePage from './pages/LivePage'; import ErrorPage from './pages/ErrorPage'; import { LectureLayout } from './components/Layout'; diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx index 0d6150e..83914cc 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx @@ -75,9 +75,8 @@ export default function ArticleDetail({ )} -
-

{content}

-
+

{content}

+
{/* TODO: 이 부분에서 answer 만든다음 뒤로가기로 나갔다가 돌아오면 0.1초 정도 input 칸이 보였다가 answer 로 바뀜. 수정필요 */} {isQna && (submittedAnswer && !isEditing ? ( diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css index 50fa354..f20f07d 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css @@ -53,7 +53,7 @@ line-height: 1.4; font-weight: 400; margin: 0; - white-space: pre-line; + white-space: pre-wrap; } .icon { @@ -61,6 +61,7 @@ } .actionGroup { + flex-shrink: 0; display: flex; align-items: end; gap: 20px; diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css index 06522dc..6472002 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css @@ -27,6 +27,7 @@ } .actionGroup { + flex-shrink: 0; display: flex; gap: 12px; } diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx index 284401a..9b90b5c 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.jsx @@ -3,6 +3,8 @@ import { useAnswerWrite } from '../../../../hooks/api/useAnswerWrite'; import { useParams } from 'react-router-dom'; import { useState } from 'react'; +import SendIcon from '/src/assets/icons/send.svg?react'; + export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer }) { const { answerWrite } = useAnswerWrite(); const { questionId } = useParams(); @@ -19,19 +21,19 @@ export default function ArticleDetailAnswerInput({ onSubmit, initialAnswer }) { onSubmit={handleSubmit} className={styles.answer} > - {/* TODO: 여기 css 부분은 내가 임의로 넣었음 */} setNewAnswer(e.target.value)} - placeholder="답변 작성" + placeholder="답변 작성하기" className={styles.input} /> ); diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css index 6e2cbb5..cb2b8b9 100644 --- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css +++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswerInput.module.css @@ -1,6 +1,6 @@ .answer { - border: 1px solid #ccc; - padding: 16px; + border: 1px solid var(--border-color); + padding: 8px; border-radius: 8px; display: flex; align-items: center; @@ -17,14 +17,13 @@ } .button { - padding: 8px 16px; - font-size: 16px; - line-height: 1.4; - font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + padding: 12px 16px; background-color: var(--primary-color); - color: var(--on-primary); stroke: var(--on-primary); - border: 1px solid var(--primary-color); + border: none; border-radius: 8px; cursor: pointer; } diff --git a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx index c5be647..f45e73a 100644 --- a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx +++ b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx @@ -34,6 +34,7 @@ export default function CreateArticle({ topic, title, onSubmit }) { 제목 제목 제목 setNewComment(e.target.value)} - placeholder="답변 작성" + placeholder="댓글 수정하기" className={styles.input} required /> @@ -48,30 +50,38 @@ export default function FreeboardComment({ content, author, onDeleteSubmit, onEd type="submit" className={styles.button} > - 작성 + ) : (
- -
{author}의 답변
+
+ +
{author}
+
+ + {isMine && ( +
+ + +
+ )}

{content}

- -
)} diff --git a/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardComment.module.css b/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardComment.module.css index c7e57df..ff8f755 100644 --- a/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardComment.module.css +++ b/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardComment.module.css @@ -10,8 +10,8 @@ } .commentEdit { - border: 1px solid #ccc; - padding: 16px; + border: 1px solid var(--border-color); + padding: 8px; border-radius: 8px; display: flex; flex-direction: row; @@ -20,6 +20,11 @@ } .commentHeader { + display: flex; + justify-content: space-between; +} + +.title { display: flex; gap: 4px; color: var(--text-color-secondary); @@ -40,40 +45,6 @@ color: var(--text-color); } -.editButton { - 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; -} - -.deleteButton { - display: flex; - align-items: center; - gap: 8px; - padding: 12px 16px; - border: 1px solid var(--error-color); - background-color: var(--error-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; -} - .input { flex: 1; border: none; @@ -84,14 +55,39 @@ } .button { - padding: 8px 16px; - font-size: 16px; - line-height: 1.4; - font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + padding: 12px 16px; background-color: var(--primary-color); - color: var(--on-primary); stroke: var(--on-primary); - border: 1px solid var(--primary-color); + border: none; border-radius: 8px; cursor: pointer; } + +.actionGroup { + flex-shrink: 0; + display: flex; + align-items: end; + gap: 16px; + color: var(--text-color); + margin-right: 8px; +} + +.edit, +.delete { + padding: 0; + margin: 0; + border: none; + background-color: var(--background); + color: var(--text-color-tertiary); + font-size: 14px; + line-height: 1.4; + font-weight: 500; + cursor: pointer; +} + +.delete { + color: var(--error-color); +} diff --git a/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.jsx b/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.jsx index 1ce5167..892047e 100644 --- a/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.jsx +++ b/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.jsx @@ -1,5 +1,6 @@ import styles from './FreeboardCommentInput.module.css'; import { useState } from 'react'; +import SendIcon from '/src/assets/icons/send.svg?react'; export default function FreeboardCommentInput({ onCommentSubmit }) { const [newComment, setNewComment] = useState(''); @@ -19,7 +20,7 @@ export default function FreeboardCommentInput({ onCommentSubmit }) { type="text" value={newComment} onChange={(e) => setNewComment(e.target.value)} - placeholder="답변 작성" + placeholder="댓글 작성하기" className={styles.input} required /> @@ -27,7 +28,7 @@ export default function FreeboardCommentInput({ onCommentSubmit }) { type="submit" className={styles.button} > - 작성 + ); diff --git a/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.module.css b/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.module.css index 7514a14..a951e34 100644 --- a/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.module.css +++ b/frontend/src/components/Article/FreeboardDetail/FreeDetailComments/FreeboardCommentInput.module.css @@ -1,6 +1,6 @@ .comment { - border: 1px solid #ccc; - padding: 16px; + border: 1px solid var(--border-color); + padding: 8px; border-radius: 8px; display: flex; align-items: center; @@ -17,14 +17,12 @@ } .button { - padding: 8px 16px; - font-size: 16px; - line-height: 1.4; - font-weight: 700; + display: flex; + align-items: center; + padding: 12px 16px; background-color: var(--primary-color); - color: var(--on-primary); stroke: var(--on-primary); - border: 1px solid var(--primary-color); + border: none; border-radius: 8px; cursor: pointer; } diff --git a/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.jsx b/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.jsx index 7600beb..2327731 100644 --- a/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.jsx +++ b/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.jsx @@ -5,10 +5,9 @@ import FreeboardCommentInput from './FreeDetailComments/FreeboardCommentInput'; import FreeboardComment from './FreeDetailComments/FreeboardComment'; import { useComments } from '../../../hooks/api/useComments'; import { useCommentWrite } from '../../../hooks/api/useCommentWrite'; -import EditIcon from '/src/assets/icons/edit.svg?react'; import { useParams } from 'react-router-dom'; -export default function FreeboardDetail({ topic, title, author, content, onDelete }) { +export default function FreeboardDetail({ topic, title, author, content, onDelete, isMine }) { const { freeboardId } = useParams(); const { data, refetch } = useComments(freeboardId); const { commentWrite } = useCommentWrite(); @@ -19,14 +18,6 @@ export default function FreeboardDetail({ topic, title, author, content, onDelet refetch(); }; - const handleDeleteSubmit = () => { - refetch(); - }; - - const handleEditSubmit = () => { - refetch(); - }; - return (
@@ -43,22 +34,24 @@ export default function FreeboardDetail({ topic, title, author, content, onDelet {author && {author}}
- - - 수정하기 - - + {isMine && ( +
+ + 수정 + + +
+ )}

{content}

@@ -70,8 +63,9 @@ export default function FreeboardDetail({ topic, title, author, content, onDelet content={comment.content} author={comment.name} commentId={comment.id} - onDeleteSubmit={handleDeleteSubmit} - onEditSubmit={handleEditSubmit} + isMine={comment.mine} + onDeleteSubmit={refetch} + onEditSubmit={refetch} /> ))} diff --git a/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.module.css b/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.module.css index 74f87b5..10e4fe3 100644 --- a/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.module.css +++ b/frontend/src/components/Article/FreeboardDetail/FreeboardDetail.module.css @@ -13,7 +13,7 @@ .header { display: flex; justify-content: space-between; - align-items: start; + align-items: end; } .headerInside { @@ -91,3 +91,26 @@ border-radius: 8px; cursor: pointer; } + +.actionGroup { + flex-shrink: 0; + display: flex; + gap: 12px; +} + +.edit, +.delete { + padding: 0; + margin: 0; + border: none; + background-color: var(--background); + font-size: 14px; + line-height: 1.4; + font-weight: 500; + color: var(--text-color-tertiary); + cursor: pointer; +} + +.delete { + color: var(--error-color); +} diff --git a/frontend/src/components/Layout/LectureLayout.jsx b/frontend/src/components/Layout/LectureLayout.jsx index 979f0f7..2800313 100644 --- a/frontend/src/components/Layout/LectureLayout.jsx +++ b/frontend/src/components/Layout/LectureLayout.jsx @@ -17,7 +17,6 @@ export default function LectureLayout() { const { lectureDelete } = useLectureDelete(); const { data } = useLectureInfo(lectureId); const lecture = data?.data; - console.log(lecture); const userType = useBoundStore((state) => state.userType); const handleDelete = () => { confirm('강의를 삭제할까요??') && diff --git a/frontend/src/components/QuizForm/QuizsetForm.jsx b/frontend/src/components/QuizForm/QuizsetForm.jsx index 66d5b76..56e5403 100644 --- a/frontend/src/components/QuizForm/QuizsetForm.jsx +++ b/frontend/src/components/QuizForm/QuizsetForm.jsx @@ -57,6 +57,7 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialV setTitle(e.target.value)} placeholder="퀴즈셋 제목을 입력해주세요" diff --git a/frontend/src/components/QuizSet/QuizSet.jsx b/frontend/src/components/QuizSet/QuizSet.jsx index 0a42931..ae1c41c 100644 --- a/frontend/src/components/QuizSet/QuizSet.jsx +++ b/frontend/src/components/QuizSet/QuizSet.jsx @@ -19,9 +19,9 @@ export default function QuizSet({ quizSetId, reportSetId, finish }) { const requestData = { answer: data, }; - instance.post(`${API_URL}/report/submit/${reportSetId}/quizset/${quizSetId}`, requestData).catch(() => {}); + instance.post(`${API_URL}/report/submit/quizSet/${reportSetId}`, requestData).catch(() => {}); }, - [quizSetId, reportSetId] + [reportSetId] ); const QuizComponents = [ ...quizList.map((quiz, index) => ( diff --git a/frontend/src/pages/FreeboardDetailPage/FreeboardDetailPage.jsx b/frontend/src/pages/FreeboardDetailPage/FreeboardDetailPage.jsx index dff3cd2..c7ad5e8 100644 --- a/frontend/src/pages/FreeboardDetailPage/FreeboardDetailPage.jsx +++ b/frontend/src/pages/FreeboardDetailPage/FreeboardDetailPage.jsx @@ -15,6 +15,7 @@ export default function FreeboardDetailPage() { await freeboardDelete(freeboardId); navigate('..'); }; + return ( ); } diff --git a/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx b/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx index 4e92714..2114ebd 100644 --- a/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx +++ b/frontend/src/pages/FreeboardListPage/FreeboardListPage.jsx @@ -7,7 +7,7 @@ export default function NoticeListPage() { const { lectureId } = useParams(); const { data } = useFreeboards(lectureId); const notices = data?.data; - console.log(notices); + return ( - +

수업소개

@@ -66,7 +66,7 @@ export default function LectureInfoPage() { status={status} /> - +
); } diff --git a/frontend/src/pages/LectureInfoPage/LectureInfoPage.module.css b/frontend/src/pages/LectureInfoPage/LectureInfoPage.module.css index 13e52d3..6611c6d 100644 --- a/frontend/src/pages/LectureInfoPage/LectureInfoPage.module.css +++ b/frontend/src/pages/LectureInfoPage/LectureInfoPage.module.css @@ -1,3 +1,25 @@ +.wrapper { + display: flex; + gap: 20px; + width: 100%; + max-width: 1320px; + padding: 0 40px; + margin: 0 auto; + box-sizing: border-box; + + & > main { + width: 100%; + } + + & > aside { + flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 32px; + width: 320px; + } +} + .group { display: flex; flex-direction: column; diff --git a/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx b/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx deleted file mode 100644 index 2a50362..0000000 --- a/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ArticleLink } from '../../components/ArticleLink'; -import ArticleBoard from '../../components/ArticleBoard/ArticleBoard'; - -export default function TeacherNoticeListPage() { - const { data: notices } = { - data: [ - { id: 1, title: '공지사항1', sub: '7-12 오전 11:40:57' }, - { id: 2, title: '공지사하앙2', sub: '7-12 오전 11:40:57' }, - { id: 3, title: '공지사하앙33', sub: '7-15 오전 11:40:57' }, - { id: 4, title: '제목만 있는 경우' }, - ], - }; - - return ( - - {notices.length && - notices.map?.((notice) => { - if (notice.sub && notice.title) { - return ( - - ); - } - })} - - ); -} diff --git a/frontend/src/pages/TeacherNoticeListPage/index.js b/frontend/src/pages/TeacherNoticeListPage/index.js deleted file mode 100644 index d809499..0000000 --- a/frontend/src/pages/TeacherNoticeListPage/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './TeacherNoticeListPage'; diff --git a/frontend/src/utils/axios/instance.js b/frontend/src/utils/axios/instance.js index b8b42cf..16717f2 100644 --- a/frontend/src/utils/axios/instance.js +++ b/frontend/src/utils/axios/instance.js @@ -12,7 +12,6 @@ const instance = axios.create({ instance.interceptors.request.use((config) => { const accessToken = useBoundStore.getState().token; - console.log(accessToken); if (accessToken) { config.headers.Authorization = `${accessToken}`; }