From 211e5f60bf0251c98224ccf3db57f35d8133e098 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Tue, 30 Jul 2024 16:30:48 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EA=B3=B5=EC=A7=80=EC=82=AC?= =?UTF-8?q?=ED=95=AD/QnA=20=EC=9E=91=EC=84=B1=20=EA=B6=8C=ED=95=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx | 4 ++-- frontend/src/pages/NoticeListPage/NoticeListPage.jsx | 4 +++- frontend/src/pages/QuestionDetailPage/QuestionDetailPage.jsx | 4 +--- frontend/src/pages/QuestionListPage/QuestionListPage.jsx | 4 +++- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx b/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx index 380e92ae..afcf686d 100644 --- a/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx +++ b/frontend/src/pages/CreateQuestionPage/CreateQuestionPage.jsx @@ -5,12 +5,12 @@ import { useParams, useNavigate } from 'react-router-dom'; export default function CreateQuestionPage() { const navigate = useNavigate(); const { lectureId } = useParams(); - const { questionWrite } = useQnaWrite(); + const { qnaWrite } = useQnaWrite(); const handleSubmit = async (e, title, content) => { e.preventDefault(); - await questionWrite(lectureId, title, content); + await qnaWrite(lectureId, title, content); navigate('..'); }; return ( diff --git a/frontend/src/pages/NoticeListPage/NoticeListPage.jsx b/frontend/src/pages/NoticeListPage/NoticeListPage.jsx index 99b4e571..d70161da 100644 --- a/frontend/src/pages/NoticeListPage/NoticeListPage.jsx +++ b/frontend/src/pages/NoticeListPage/NoticeListPage.jsx @@ -2,16 +2,18 @@ import { ArticleLink } from '../../components/ArticleLink'; import ArticleBoard from '../../components/ArticleBoard/ArticleBoard'; import { useNotices } from '../../hooks/api/useNotices'; import { useParams } from 'react-router-dom'; +import useBoundStore from '../../store'; export default function NoticeListPage() { const { lectureId } = useParams(); const { data } = useNotices(lectureId); const notices = data?.data; + const userType = useBoundStore((state) => state.userType); return ( {notices.map?.((notice) => ( ); } diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.jsx b/frontend/src/pages/QuestionListPage/QuestionListPage.jsx index d9407154..27ba6d8a 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.jsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.jsx @@ -2,16 +2,18 @@ import { ArticleLink } from '../../components/ArticleLink'; import ArticleBoard from '../../components/ArticleBoard/ArticleBoard'; import { useParams } from 'react-router-dom'; import { useQnas } from '../../hooks/api/useQnas'; +import useBoundStore from '../../store'; export default function QuestionListPage() { const { lectureId } = useParams(); const { data } = useQnas(lectureId); const questions = data?.data; + const userType = useBoundStore((state) => state.userType); return ( {questions.map?.((question) => ( Date: Tue, 30 Jul 2024 16:58:18 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20lectureCreatePage=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=ED=98=95=ED=83=9C=20=EC=99=84=EC=84=B1=20=EB=B0=8F?= =?UTF-8?q?=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/Router.jsx | 5 ++ .../LectureCreatePage/LectureCreatePage.jsx | 88 +++++++++++++++++++ .../LectureCreatePage.module.css | 69 +++++++++++++++ frontend/src/pages/LectureCreatePage/index.js | 1 + 4 files changed, 163 insertions(+) create mode 100644 frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx create mode 100644 frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css create mode 100644 frontend/src/pages/LectureCreatePage/index.js diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx index 39e36df9..8868ec10 100644 --- a/frontend/src/Router.jsx +++ b/frontend/src/Router.jsx @@ -24,6 +24,7 @@ const PasswordResetPage = lazy(async () => await import('./pages/PasswordResetPa const MyInfoChangePage = lazy(async () => await import('./pages/MyInfoChangePage')); const PasswordChangePage = lazy(async () => await import('./pages/PasswordChangePage')); const LearningLecturesPage = lazy(async () => await import('./pages/LearningLecturesPage')); +const LectureCreatePage = lazy(async () => await import('./pages/LectureCreatePage')); const router = createBrowserRouter([ { @@ -45,6 +46,10 @@ const router = createBrowserRouter([ index: true, element: , }, + { + path: 'lecture/create', + element: , + }, { path: 'lecture/:lectureId/info', element: , diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx new file mode 100644 index 00000000..6ce73d28 --- /dev/null +++ b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx @@ -0,0 +1,88 @@ +import styles from './LectureCreatePage.module.css'; +import { useRef } from 'react'; + +export default function LectureCreatePage() { + // TODO: 디자인 후 적용 + const title = useRef(''); + const description = useRef(''); + const plan = useRef(''); + const startDate = useRef(''); + const endDate = useRef(''); + const time = useRef(''); + + const handleSubmit = (e) => { + e.preventDefault(); + const payload = { + title: title.current.value, + description: description.current.value, + plan: plan.current.value, + startDate: startDate.current.value, + endDate: endDate.current.value, + time: time.current.value, + }; + console.log(payload); + }; + + return ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + + +
+
+ + +
+ +
+ ); +} diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css b/frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css new file mode 100644 index 00000000..54ce505b --- /dev/null +++ b/frontend/src/pages/LectureCreatePage/LectureCreatePage.module.css @@ -0,0 +1,69 @@ +.createClass { + background: var(--background-color); + width: 100%; + max-width: 900px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 40px; +} + +.inputField { + display: flex; + flex-direction: column; + gap: 8px; +} + +.label { + color: var(--text-color); + font-size: 16px; + font-weight: 400; + line-height: 1.4; +} + +.input { + background: var(--background-color); + padding: 20px; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 20px; + line-height: 1.2; + font-weight: 400; +} + +.input::placeholder { + color: var(--text-color-tertiary); +} + +.textarea { + padding: 20px; + height: 150px; + background: var(--background-color); + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 16px; + line-height: 1.4; + font-weight: 400; +} + +.textarea::placeholder { + color: var(--text-color-tertiary); +} + +.button { + display: flex; + flex-direction: row; + padding: 16px 24px; + border-radius: 8px; + border: 1px solid var(--primary-color); + background-color: var(--primary-color); + color: var(--on-primary); + gap: 8px; + align-self: end; +} + +.buttonText { + font-size: 16px; + line-height: 1.4; + font-weight: 700; +} diff --git a/frontend/src/pages/LectureCreatePage/index.js b/frontend/src/pages/LectureCreatePage/index.js new file mode 100644 index 00000000..70d624d4 --- /dev/null +++ b/frontend/src/pages/LectureCreatePage/index.js @@ -0,0 +1 @@ +export { default } from './LectureCreatePage'; From 74807ea8898f1fa5c81d2ca956ee195d48faa2ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Tue, 30 Jul 2024 17:48:13 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20usePasswordChange=20=ED=9B=85=20?= =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=ED=98=95=ED=83=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/api/usePasswordChange.js | 16 ++++++++++++++++ .../LectureCreatePage/LectureCreatePage.jsx | 7 +++---- 2 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 frontend/src/hooks/api/usePasswordChange.js diff --git a/frontend/src/hooks/api/usePasswordChange.js b/frontend/src/hooks/api/usePasswordChange.js new file mode 100644 index 00000000..7c1772bb --- /dev/null +++ b/frontend/src/hooks/api/usePasswordChange.js @@ -0,0 +1,16 @@ +import instance from '../../utils/axios/instance'; +import { API_URL } from '../../constants'; + +export function usePasswordChange() { + // TODO: API 수정 후 실제 기능하는지 확인 + const passwordChange = (currentPw, newPw, newPwCheck) => { + const newPasswordBody = { + currentPassword: currentPw, + newPassword: newPw, + newPasswordCheck: newPwCheck, + }; + return instance.put(`${API_URL}/user/updatepassword/`, newPasswordBody); + }; + + return { passwordChange }; +} diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx index 6ce73d28..2eae1378 100644 --- a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx +++ b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx @@ -39,12 +39,11 @@ export default function LectureCreatePage() {
- + >
From 11a7e19cc080f06e931461e67aa1bc832976f427 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Wed, 31 Jul 2024 13:04:47 +0900 Subject: [PATCH 4/5] =?UTF-8?q?design:=20=ED=95=99=EC=83=9D=20/=20?= =?UTF-8?q?=EA=B0=95=EC=82=AC=20=ED=86=A0=EA=B8=80=20=ED=8A=B8=EB=9E=9C?= =?UTF-8?q?=EC=A7=80=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/UserRegisterPage/UserRegisterPage.module.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/pages/UserRegisterPage/UserRegisterPage.module.css b/frontend/src/pages/UserRegisterPage/UserRegisterPage.module.css index 8be95500..0f7de4a3 100644 --- a/frontend/src/pages/UserRegisterPage/UserRegisterPage.module.css +++ b/frontend/src/pages/UserRegisterPage/UserRegisterPage.module.css @@ -25,6 +25,11 @@ font-size: 16px; line-height: 1.4; font-weight: 700; + transition: + background-color 0.25s, + border-color 0.25s, + stroke 0.25s, + color 0.25s; } .active { From 595733ec6c9f5f89e223956ebd96e1f8a70983a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Wed, 31 Jul 2024 13:27:04 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20LectureCreatePage=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Layout/LectureLayout.jsx | 3 +- frontend/src/hooks/api/useLectureCreate.js | 15 ++++ .../LectureCreatePage/LectureCreatePage.jsx | 72 ++++++++++++------- .../LectureCreatePage.module.css | 2 +- .../pages/LectureInfoPage/LectureInfoPage.jsx | 4 +- 5 files changed, 68 insertions(+), 28 deletions(-) create mode 100644 frontend/src/hooks/api/useLectureCreate.js diff --git a/frontend/src/components/Layout/LectureLayout.jsx b/frontend/src/components/Layout/LectureLayout.jsx index b95a5d02..fd1515b7 100644 --- a/frontend/src/components/Layout/LectureLayout.jsx +++ b/frontend/src/components/Layout/LectureLayout.jsx @@ -10,7 +10,7 @@ export default function LectureLayout() { const { lectureId } = useParams(); const { data } = useLectureInfo(lectureId); const lecture = data?.data; - + console.log(lecture); const userType = useBoundStore((state) => state.userType); return ( @@ -18,6 +18,7 @@ export default function LectureLayout() { diff --git a/frontend/src/hooks/api/useLectureCreate.js b/frontend/src/hooks/api/useLectureCreate.js new file mode 100644 index 00000000..d7d7359f --- /dev/null +++ b/frontend/src/hooks/api/useLectureCreate.js @@ -0,0 +1,15 @@ +import instance from '../../utils/axios/instance'; +import { API_URL } from '../../constants'; + +export function useLectureCreate() { + const lectureCreate = (formData) => { + // return instance.post(`${API_URL}/lecture`, lectureObject, image); + return instance.post(`${API_URL}/lecture`, formData, { + headers: { + 'Content-type': 'multipart/form-data', + }, + }); + }; + + return { lectureCreate }; +} diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx index 2eae1378..40b9e766 100644 --- a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx +++ b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx @@ -1,26 +1,42 @@ import styles from './LectureCreatePage.module.css'; import { useRef } from 'react'; +import { useLectureCreate } from '../../hooks/api/useLectureCreate'; export default function LectureCreatePage() { - // TODO: 디자인 후 적용 - const title = useRef(''); - const description = useRef(''); - const plan = useRef(''); - const startDate = useRef(''); - const endDate = useRef(''); - const time = useRef(''); + // TODO: 디자인 필요 + const titleRef = useRef(''); + const descriptionRef = useRef(''); + const planRef = useRef(''); + const startDateRef = useRef(''); + const endDateRef = useRef(''); + const timeRef = useRef(null); + const imageFileRef = useRef(''); - const handleSubmit = (e) => { + const { lectureCreate } = useLectureCreate(); + + const handleSubmit = async (e) => { e.preventDefault(); - const payload = { - title: title.current.value, - description: description.current.value, - plan: plan.current.value, - startDate: startDate.current.value, - endDate: endDate.current.value, - time: time.current.value, + + const lectureObject = { + title: titleRef.current.value, + description: descriptionRef.current.value, + plan: planRef.current.value, + startDate: new Date(startDateRef.current.value).toISOString(), + endDate: new Date(endDateRef.current.value).toISOString(), + time: timeRef.current.value, }; - console.log(payload); + + const formData = new FormData(); + + formData.append('lectureCreateRequest', new Blob([JSON.stringify(lectureObject)], { type: 'application/json' })); + + const imageFile = imageFileRef.current.files[0] ?? null; + if (imageFile) { + formData.append('image', imageFile); + } + + const response = await lectureCreate(formData); + console.log(response?.data); }; return ( @@ -32,7 +48,7 @@ export default function LectureCreatePage() { @@ -40,7 +56,7 @@ export default function LectureCreatePage() {
@@ -48,7 +64,7 @@ export default function LectureCreatePage() {
@@ -57,12 +73,12 @@ export default function LectureCreatePage() {
@@ -70,11 +86,19 @@ export default function LectureCreatePage() {
+
+ + +