From 9211ba3e4e9fd819f16f0a159803783fe916bbf3 Mon Sep 17 00:00:00 2001 From: "Phabala(Kim Gihong)" Date: Thu, 17 Aug 2023 10:32:20 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[STYLE]=20Cookyer=20ClassList.js=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/MyPageT/ClassList.js | 303 ++++++-------------- 1 file changed, 94 insertions(+), 209 deletions(-) diff --git a/frontend/src/component/MyPageT/ClassList.js b/frontend/src/component/MyPageT/ClassList.js index 51a6c854..9d649eb8 100644 --- a/frontend/src/component/MyPageT/ClassList.js +++ b/frontend/src/component/MyPageT/ClassList.js @@ -253,223 +253,108 @@ function ClassList() { } return ( -
- -
-
-
-
-

과외목록

-
-
-
-
-

신청한 과외

- {classData !== null && classData !== undefined && classData ? ( - classData.map((lesson)=> ( -
-
-
-
- {/* */} -
-
- course_title.png -
-
-
-
-
-
goLesson(lesson.lessonId)}>과외명:{lesson.lessonTitle}
-
-
카테고리
-
- {(() => { - switch (lesson.categoryId) { - case 1: - return "한식"; - case 2: - return "양식"; - case 3: - return "중식"; - case 4: - return "일식"; - case 5: - return "아시안"; - case 6: - return "건강식"; - case 7: - return "디저트"; - default: - return "알 수 없음"; - } - })()} -
-
-
쿠커: {lesson.cookyerName}
-
-
-
- 기간아이콘 - "과외 날짜" -
- {/*
{lesson.lessonDate} 예정
*/} - {lesson ? -
- {displayTime(lesson.lessonDate)} -
: null} - {new Date(lesson.lessonDate) <= currentDate.setHours(currentDate.getHours() + 1) ? ( - - ) : ( - - )} -
-
- 수강아이콘 - "{lesson.remaining}"명 남음. - 최대인원:{lesson.maximum}명 -
-
-
-
-
- {/* ... (rest of the code) ... */} -
-
-

-
- - - {/* */} - {showAlert ? ( - - ) : null} - {showCompletedAlert ? ( - - ) : null} -
-
-
-
-
+
+ +
과외목록
+
+
신청한 과외
+ {/* {classData !== null && classData !== undefined && classData ? ( */} + {classData ? ( + + classData.map((lesson)=> ( +
+ course_title.png +
+
+
과외명
+
goLesson(lesson.lessonId)}>{lesson.lessonTitle}
+
+
+
카테고리
+
+ {(() => { + switch (lesson.categoryId) { + case 0: + return "한식"; + case 1: + return "양식"; + case 2: + return "중식"; + case 3: + return "일식"; + case 4: + return "아시안"; + case 5: + return "건강식"; + case 6: + return "디저트"; + default: + return "알 수 없음"; + } + })()}
- )) - ) : ( -

신청한 과외가 없습니다.

- )} -
-
-

완료한 과외

- {completedData !== null && completedData !== undefined && completedData ? ( - completedData.map((lesson)=> ( -
-
-
- - {/* */} +
+
쿠커
+
{lesson.cookyerName}
+
+
+
과외 날짜
+ {/* 기간아이콘 */} +
+ {lesson.lessonDate} 예정 +
+
+
{/**descibe 태그 끝 */} + {lesson ? ( +
{displayTime(lesson.lessonDate)}
+ ) : ( + null + )} + + {new Date(lesson.lessonDate) <= new Date((new Date()).setHours(new Date().getHours() + 1)) ? ( + + ) : ( + + )} + +
+ 수강아이콘 + "{lesson.remaining}"명 남음. + 최대인원:{lesson.maximum}명 +
+ +
+
+
+ {/* ... (rest of the code) ... */}
+
+ + + {/* */} + {showAlert ? ( + + ) : null} + {showCompletedAlert ? ( + + ) : null} +
- )) +
+ + )) ) : ( -

완료한 과외가 없습니다.

+

신청한 과외가 없습니다.

)} -
+
-
); } From 10ae5f321f2ed8055d6aa1eefabb711fcacee8ac Mon Sep 17 00:00:00 2001 From: "Phabala(Kim Gihong)" Date: Thu, 17 Aug 2023 17:13:21 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[STYLE]=20=EA=B3=BC=EC=99=B8=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20CSS=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.gitignore | 3 + frontend/src/component/MyPageS/ClassList.js | 169 ++++++++------------ frontend/src/component/MyPageT/ClassList.js | 48 ++---- frontend/src/style/classlist.css | 80 --------- frontend/src/style/mypage/classList.css | 84 ++++++++++ 5 files changed, 171 insertions(+), 213 deletions(-) delete mode 100644 frontend/src/style/classlist.css diff --git a/frontend/.gitignore b/frontend/.gitignore index 4d29575d..36e0460c 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +# back-up files +ClassList.js.bak \ No newline at end of file diff --git a/frontend/src/component/MyPageS/ClassList.js b/frontend/src/component/MyPageS/ClassList.js index f014e417..8c90b422 100644 --- a/frontend/src/component/MyPageS/ClassList.js +++ b/frontend/src/component/MyPageS/ClassList.js @@ -11,7 +11,7 @@ import { OpenVidu } from "openvidu-browser"; import { setClassData, setCompletedData } from "../../store/mypageS/accountS"; import { setLessonId } from "../../store/lesson/lessonInfo"; import "./../../style/mypage/mypage.css"; -import '../../style/classlist.css' +import '../../style/mypage/classlist.css' function ClassList() { const dispatch = useDispatch() @@ -190,6 +190,8 @@ function ClassList() { }, [lessonId]) return ( + <> +
과외목록
{isModalOpen ? ( @@ -197,64 +199,50 @@ function ClassList() {
) : null} -
과외목록
-
-
신청한 과외
+
신청한 과외
+
{classData !== null && classData !== undefined && classData ? ( classData.map((lesson)=> ( -
+
course_title.png -
-
-
과외명
-
goLesson(lesson.lessonId)}>{lesson.lessonTitle}
-
-
-
카테고리
-
- {(() => { - switch (lesson.categoryId) { - case 1: - return "한식"; - case 2: - return "양식"; - case 3: - return "중식"; - case 4: - return "일식"; - case 5: - return "아시안"; - case 6: - return "건강식"; - case 7: - return "디저트"; - default: - return "알 수 없음"; - } - })()} -
-
-
-
쿠커
-
{lesson.cookyerName}
-
-
-
과외 날짜
-
- {new Date(lesson.lessonDate).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short', hour: '2-digit', minute: '2-digit' })} 예정 -
-
+
goLesson(lesson.lessonId)}>{lesson.lessonTitle}
+
+ {lesson.cookyerName} | {new Date(lesson.lessonDate).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short', hour: '2-digit', minute: '2-digit' })} 예정 +
+
+
+ {(() => { + switch (lesson.categoryId) { + case 1: + return "한식"; + case 2: + return "양식"; + case 3: + return "중식"; + case 4: + return "일식"; + case 5: + return "아시안"; + case 6: + return "건강식"; + case 7: + return "디저트"; + default: + return "알 수 없음"; + } + })()} +
+ {lesson.sessionId === null ? ( + + ) : ( + + )}
- {lesson.sessionId === null ? ( - - ) : ( - - )}
)) ) : ( @@ -262,62 +250,44 @@ function ClassList() { )}
-
-
완료한 과외
+
완료한 과외
+
{completedData !== null && completedData !== undefined && completedData ? ( completedData.map((lesson)=> ( -
+
course_title.png -
-
goLesson(lesson.lessonId)}>과외명: {lesson.lessonTitle}
-
-
카테고리
-
- {(() => { - switch (lesson.categoryId) { - case 0: - return "한식"; - case 1: - return "양식"; - case 2: - return "중식"; - case 3: - return "일식"; - case 4: - return "아시안"; - case 5: - return "건강식"; - case 6: - return "디저트"; - default: - return "알 수 없음"; - } - })()} -
-
-
쿠커: {lesson.cookyerName}({lesson.cookyerId})
-
-
-
- 기간아이콘 - "과외 날짜" -
-
{new Date(lesson.lessonDate).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short', hour: '2-digit', minute: '2-digit' })} 예정
-
-
-
-
-
-
-
-
+
goLesson(lesson.lessonId)}>{lesson.lessonTitle}
+
{lesson.cookyerName} | {new Date(lesson.lessonDate).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short', hour: '2-digit', minute: '2-digit' })}
+
+
+ {(() => { + switch (lesson.categoryId) { + case 0: + return "한식"; + case 1: + return "양식"; + case 2: + return "중식"; + case 3: + return "일식"; + case 4: + return "아시안"; + case 5: + return "건강식"; + case 6: + return "디저트"; + default: + return "알 수 없음"; + } + })()}
- + +
)) ) : ( @@ -325,6 +295,7 @@ function ClassList() { )}
+ ); } diff --git a/frontend/src/component/MyPageT/ClassList.js b/frontend/src/component/MyPageT/ClassList.js index 9d649eb8..8a8f8237 100644 --- a/frontend/src/component/MyPageT/ClassList.js +++ b/frontend/src/component/MyPageT/ClassList.js @@ -257,26 +257,23 @@ function ClassList() {
과외목록
-
신청한 과외
+
신청한 과외
{/* {classData !== null && classData !== undefined && classData ? ( */} +
{classData ? ( classData.map((lesson)=> ( -
+
course_title.png -
-
-
과외명
-
goLesson(lesson.lessonId)}>{lesson.lessonTitle}
-
-
-
카테고리
-
+
goLesson(lesson.lessonId)}>{lesson.lessonTitle}
+
{lesson.cookyerName} | {new Date(lesson.lessonDate).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short', hour: '2-digit', minute: '2-digit' })}
+
+
{(() => { switch (lesson.categoryId) { case 0: @@ -298,30 +295,12 @@ function ClassList() { } })()}
+ {new Date(lesson.lessonDate) <= new Date((new Date()).setHours(new Date().getHours() + 1)) ? ( + + ) : ( + + )}
-
-
쿠커
-
{lesson.cookyerName}
-
-
-
과외 날짜
- {/* 기간아이콘 */} -
- {lesson.lessonDate} 예정 -
-
-
{/**descibe 태그 끝 */} - {lesson ? ( -
{displayTime(lesson.lessonDate)}
- ) : ( - null - )} - - {new Date(lesson.lessonDate) <= new Date((new Date()).setHours(new Date().getHours() + 1)) ? ( - - ) : ( - - )}
수강아이콘 @@ -353,6 +332,7 @@ function ClassList() { ) : (

신청한 과외가 없습니다.

)} +
); diff --git a/frontend/src/style/classlist.css b/frontend/src/style/classlist.css deleted file mode 100644 index 7efdfc75..00000000 --- a/frontend/src/style/classlist.css +++ /dev/null @@ -1,80 +0,0 @@ -.classlist-list { - display: flex; - align-items: start; -} - -.classlist-list img { - width: 150px; - height: 150px; - border-radius: 180px; - flex-shrink : 0; - margin-top: 70px; - margin-right: 20px; -} - -.classlist-list .describe { - flex-grow: 1; -} - -.describe { - border-radius: 7px; - border: 0.7px solid #D9D9D9; - margin-top: 60px; - height: 187px; - display: flex; - flex-direction: column; -} - -.describe .row { - display: flex; - /* justify-content: flex-start; */ - align-items: center; - flex-grow: 1; - border-bottom: 1px solid #e0e0e0; - padding: 5px 0; -} - -.describe .row:last-child { - border-bottom: none; -} - -.describe .row .col1 { - flex: 0 0 30%; - text-align: center; - border-right: 1px solid #e0e0e0; - /* padding-right: 10px; */ -} - -.describe .row .col2 { - /* text-align: left; */ - display: flex; - justify-content: space-between; - align-items: center; - flex: 1; - padding-left: 27px; -} - -.button { - flex: 0 0 auto; - font-size: 13px; - display: flex; - justify-content: center; - align-items: center; - padding: 5px 16px; - border-radius: 50px; - border: 0.7px solid #CBCBCB; - background: #FFF; - /* margin: 0 auto; */ - margin-right: 8px; - margin-left: auto; - cursor: pointer; - color: #333; - transition: background-color 0.3s, color 0.3s; -} - -.button.orange { - border-radius: 50px; - border: 0.7px solid #FF7A42; - background: #FFF4F0; - color: #FF7A42; -} \ No newline at end of file diff --git a/frontend/src/style/mypage/classList.css b/frontend/src/style/mypage/classList.css index e69de29b..d1ea11b8 100644 --- a/frontend/src/style/mypage/classList.css +++ b/frontend/src/style/mypage/classList.css @@ -0,0 +1,84 @@ +.container .classlist { + display: grid; + gap: 30px; + justify-items: center; + align-items: center; + padding-top: 0; + margin-top: 0; +} + +.lesson-section { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + min-width: 750px; + margin-left: auto; + margin-right: auto; +} + +.classlist-item-container { + width: 100%; + box-sizing: border-box; + padding: 20px; +} + +.thumbnail { + margin: 0 auto; + width: 100%; + height: 147px; + border-radius: 5px; +} + +.cl-title { + text-align: start; + font-weight: 500; + color: #414141; +} + +.flex-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.cl-category { + display: inline-block; + margin-right: 10px; + padding: 6px 12px; + border-style: none; + border-radius: 5px; + background: #F4F4F4; + color: #656363; +} + +.cl-cookyerdate { + margin-bottom: 20px; + color: #666666; + font-size: 0.9rem; +} + +.button { + flex: 0 0 auto; + font-size: 13px; + display: flex; + justify-content: center; + align-items: center; + padding: 5px 16px; + border-radius: 50px; + border: 0.7px solid #CBCBCB; + background: #FFF; + /* margin: 0 auto; */ + margin-right: 8px; + margin-left: auto; + margin-left: auto; + cursor: pointer; + color: #333; + transition: background-color 0.3s, color 0.3s; +} + +.button.orange { + border-radius: 50px; + border: 0.7px solid #FF7A42; + background: #FFF4F0; + color: #FF7A42; +}