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/ChatList/ChatList.js b/frontend/src/component/ChatList/ChatList.js index 382eff0a..a09225c1 100644 --- a/frontend/src/component/ChatList/ChatList.js +++ b/frontend/src/component/ChatList/ChatList.js @@ -8,17 +8,14 @@ const ChatListContainer = styled.div` // flex: 1; // padding: 20px; background-color: #ffffff; - border-left: 0.7px solid #D9D9D9; - border-right: 0.7px solid #D9D9D9; - border-bottom : 0.7px solid #D9D9D9; + border: 1px solid #D9D9D9; // overflow-y: auto; // margin-right: 1px; flex: none; - height: 550px; - // width: 230px; - // padding: 20px; - padding: 30px 30px; + height: 512px; + width: 230px; + padding: 20px; // background-color: rgb(255 239 221); // border-right: 2px solid #ccc; overflow-y: auto; @@ -26,16 +23,15 @@ const ChatListContainer = styled.div` `; const StyledChatH3 = styled.h3` - font-size: 1.0rem; - font-weight : 500; - color: #FFFFFF; + font-size: 17px; + color: #414141; text-align: center; `; + const Wrapper = styled.header` width: 100%; - border-left: 0.9px solid #D9D9D9; - border-right: 0.9px solid #D9D9D9; + border: 1px solid #D9D9D9; // background-color: #ff8a00; // background-color: #ff9416; background-color: #FFB697; @@ -43,7 +39,9 @@ const Wrapper = styled.header` position: relative; display: flex; align-items: center; - padding: 10px 30px; + justify-content: space-between; + padding: 0 10px; + flex-direction: row-reverse; & span { color:#FFFFFF; @@ -80,6 +78,8 @@ const Wrapper = styled.header` } `; + + const ChatList = (props) => { console.log("props", props); const accessToken = localStorage.getItem("access_token"); @@ -127,22 +127,38 @@ const ChatList = (props) => { return (
- 참여중인 채팅방 + 참여중인 채팅방
{chatlist.map((chatRoom) => (
{chatRoom.chatRoomOver === false && ( - <> -
handleChatRoom({ lessonId: chatRoom.lessonId, chatTitle: chatRoom.lessonTitle, chatOver: chatRoom.chatRoomOver })}> - {/* */} - {chatRoom.lessonTitle ? setSelectedRoom(chatRoom.lessonId)} >{chatRoom.lessonTitle} :

참여중인 채팅방이 없습니다.

} +
+
handleChatRoom({ lessonId: chatRoom.lessonId, chatTitle: chatRoom.lessonTitle, chatOver: chatRoom.chatRoomOver }),setSelectedRoom(chatRoom.lessonId)}> + onClick={() => { + handleChatRoom({ + lessonId: chatRoom.lessonId, + chatTitle: chatRoom.lessonTitle, + chatOver: chatRoom.chatRoomOver + }); + setSelectedRoom(chatRoom.lessonId); + }} + > + {/* */} + {chatRoom.lessonTitle ? {chatRoom.lessonTitle} :

참여중인 채팅방이 없습니다.

} {chatRoom.leastContent !== null ? (
-

{chatRoom.leastContent.length > 10 ? chatRoom.leastContent.slice(0, 12) + ".." : chatRoom.leastContent}

+

{chatRoom.leastContent.length > 10 ? chatRoom.leastContent.slice(0, 12) + ".." : chatRoom.leastContent}

{/* {formatTime(chatRoom.lestCreateTime)} */} - + {new Date(chatRoom.lestCreateTime).toLocaleDateString("ko-KR", { month: "2-digit", day: "2-digit", @@ -156,18 +172,30 @@ const ChatList = (props) => {

)}
- +
)} {chatRoom.chatRoomOver === true && ( <> - {/*

종료된 채팅방

*/} 종료된 채팅방 -
handleChatRoom({ lessonId: chatRoom.lessonId, chatTitle: chatRoom.leastContent, chatOver: chatRoom.chatRoomOver })}> - {/* */} - setSelectedRoom(chatRoom.lessonId)} >{chatRoom.lessonTitle} - {/*

{chatRoom.lessonTitle}

*/} - {/*

마지막 메세지: {chatRoom.leastContent}

*/} +
handleChatRoom({ lessonId: chatRoom.lessonId, chatTitle: chatRoom.leastContent, chatOver: chatRoom.chatRoomOver })}> + onClick={() => { + handleChatRoom({ + lessonId: chatRoom.lessonId, + chatTitle: chatRoom.lessonTitle, + chatOver: chatRoom.chatRoomOver + }); + setSelectedRoom(chatRoom.lessonId); + }} + > + setSelectedRoom(chatRoom.lessonId)} >{chatRoom.lessonTitle}

{chatRoom.leastContent.length > 10 ? chatRoom.leastContent.slice(0, 12) + "..." : chatRoom.leastContent}

{/* 종료 시간: {formatTime(chatRoom.lestCreateTime)} */} @@ -190,4 +218,4 @@ const ChatList = (props) => { ); }; -export default ChatList; +export default ChatList; \ No newline at end of file diff --git a/frontend/src/component/ChatRoom/HeaderChat.js b/frontend/src/component/ChatRoom/HeaderChat.js index f693e324..7350ee8a 100644 --- a/frontend/src/component/ChatRoom/HeaderChat.js +++ b/frontend/src/component/ChatRoom/HeaderChat.js @@ -30,8 +30,7 @@ const Wrapper = styled.header` align-items: center; justify-content: center; display:flex; - width: 60px; - height: 30px; + padding: 0.3rem 0.7rem; font-size: 15px; background-color: #FF7A42; diff --git a/frontend/src/component/ChatRoom/InputChat.js b/frontend/src/component/ChatRoom/InputChat.js index 0f2fc00b..686ad084 100644 --- a/frontend/src/component/ChatRoom/InputChat.js +++ b/frontend/src/component/ChatRoom/InputChat.js @@ -22,7 +22,6 @@ const Wrapper = styled.footer` // border: 1px solid rgb(255 239 221); border-top: 0.7px solid #D9D9D9; - border-bottom: 0.7px solid #D9D9D9; align-items: center; diff --git a/frontend/src/component/ChatRoom/ShowChat.js b/frontend/src/component/ChatRoom/ShowChat.js index 07059af1..22eb95db 100644 --- a/frontend/src/component/ChatRoom/ShowChat.js +++ b/frontend/src/component/ChatRoom/ShowChat.js @@ -122,7 +122,7 @@ const ShowChat = ({lessonId, chatTitle, chatOver}) => { {messageList.map((chat, index) => { if (chat.type === "CHAT") { // return - return chat.userId !== id ? () + return chat.userId !== id ? () : ( ) } diff --git a/frontend/src/component/Header/NavBar.js b/frontend/src/component/Header/NavBar.js index cd2f4f62..d09f2f9d 100644 --- a/frontend/src/component/Header/NavBar.js +++ b/frontend/src/component/Header/NavBar.js @@ -36,10 +36,31 @@ function NavBar() { setUserDropdown(data) // setUserDropdown((prev) => !prev) } - + const location = useLocation(); const mainPageStyle = location.pathname === '/'; + useEffect(() => { + const handleScroll = () => { + const scrollY = window.scrollY; + const navbarMain = document.querySelector(".navbar-main"); + + if (location.pathname === '/' && scrollY > 1) { + navbarMain.classList.add("scroll"); + } else { + navbarMain.classList.remove("scroll"); + } + }; + + if (location.pathname === '/') { + window.addEventListener("scroll", handleScroll); + } + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, [location]); + useEffect(() => { // 레슨 정보 받아오는 부분 // 누를때마다 요청되므로 나중에 스토어에 저장하던지 위치 바꿔주기 if (access_token && role === 'COOKIEE') { axios.get( @@ -67,6 +88,8 @@ function NavBar() { }, [access_token, role]) return ( +
+ {/*
*/}
@@ -120,6 +143,7 @@ function NavBar() { )} {/* {role === 'COOKYER' ? : null} */}
+
); } diff --git a/frontend/src/component/Header/SearchBar.js b/frontend/src/component/Header/SearchBar.js index 86b40f41..efa3454c 100644 --- a/frontend/src/component/Header/SearchBar.js +++ b/frontend/src/component/Header/SearchBar.js @@ -51,6 +51,7 @@ function SearchBar() { setIsOpen(result.length > 0 && keyword !== ''); }, [result, keyword]); + //검색 후 item 누르면 이동 const searchResClick = (lessonId) => { dispatch(setLessonId(lessonId)); setIsOpen(false); @@ -61,11 +62,12 @@ function SearchBar() { if (e.key === 'Enter') { navigate(`/lesson`) window.scrollTo({ top: 0, behavior: 'smooth' }); - dispatch(setSearchBarKeyword(keyword)) + console.log(keyword) setKeyword('') } }; + document.addEventListener('DOMContentLoaded', () => { const searchResult = document.getElementById('searchResult'); const searchInput = document.getElementById('searchInput'); diff --git a/frontend/src/component/LessonDetail/LessonReview.js b/frontend/src/component/LessonDetail/LessonReview.js index c2f4c1b0..58dd6ea7 100644 --- a/frontend/src/component/LessonDetail/LessonReview.js +++ b/frontend/src/component/LessonDetail/LessonReview.js @@ -7,6 +7,7 @@ function LessonReview() { const lessonId = useSelector((state) => state.lessonInfo.lessonId); const [ReviewGrade, setReviewGrade] = useState(""); const [Reviews, setReveiws] = useState([]); + const [cookyerId, setCookyerId] = useState(null); //평점 불러오기 // useEffect(() => { @@ -27,8 +28,13 @@ function LessonReview() { // } // }, [lessonId]); - const cookyerId = ReviewGrade.cookyerId; + useEffect(() => { + if (ReviewGrade) { + setCookyerId(ReviewGrade.cookyerId); + } + }, [ReviewGrade]); + // const cookyerId = ReviewGrade.cookyerId; useEffect(() => { if (lessonId) { @@ -53,27 +59,23 @@ function LessonReview() { //리뷰불러오기 useEffect(() => { - - if (cookyerId) { - + if (accessToken && cookyerId) { axios - .get(`api/v1/review/${cookyerId}`, { + .get(`/api/v1/review/${cookyerId}`, { headers: { Access_Token: accessToken, }, }) .then((res) => { setReveiws(res.data); - console.log("리뷰리스트",res) }) .catch((err) => { console.log("리뷰에러", err); }); - } - }, [accessToken, Reviews]); - - - + } + }, [accessToken, cookyerId]); + + console.log("리뷰리스트", Reviews); return (
리뷰 -
리뷰평균:{ReviewGrade.reviewAvg}
-
리뷰갯수:{ReviewGrade.reviewCnt}
+
리뷰평균: {ReviewGrade.reviewAvg}점
+
리뷰갯수: {ReviewGrade.reviewCnt}개
+
리뷰목록
+
+ {Reviews.map((content, reviewId)=>( +
{content.reviewContents}
+ ))} +
); } diff --git a/frontend/src/component/MyPageS/Account.js b/frontend/src/component/MyPageS/Account.js index 14c3e83d..79fb7ed2 100644 --- a/frontend/src/component/MyPageS/Account.js +++ b/frontend/src/component/MyPageS/Account.js @@ -265,7 +265,7 @@ function Account() { }; return ( -
+
정보수정
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 51a6c854..8a8f8237 100644 --- a/frontend/src/component/MyPageT/ClassList.js +++ b/frontend/src/component/MyPageT/ClassList.js @@ -253,223 +253,88 @@ 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}
+
{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 "알 수 없음"; + } + })()}
+ {new Date(lesson.lessonDate) <= new Date((new Date()).setHours(new Date().getHours() + 1)) ? ( + + ) : ( + + )}
- )) - ) : ( -

신청한 과외가 없습니다.

- )} -
-
-

완료한 과외

- {completedData !== null && completedData !== undefined && completedData ? ( - completedData.map((lesson)=> ( -
-
-
- - {/* */} + +
+ 수강아이콘 + "{lesson.remaining}"명 남음. + 최대인원:{lesson.maximum}명 +
+ +
+
+
+ {/* ... (rest of the code) ... */}
+
+ + + {/* */} + {showAlert ? ( + + ) : null} + {showCompletedAlert ? ( + + ) : null} +
+
- )) + + )) ) : ( -

완료한 과외가 없습니다.

+

신청한 과외가 없습니다.

)} -
+
+
-
); } diff --git a/frontend/src/component/TotalLessons/LessonList.js b/frontend/src/component/TotalLessons/LessonList.js index 13c5f5b4..bd8d0234 100644 --- a/frontend/src/component/TotalLessons/LessonList.js +++ b/frontend/src/component/TotalLessons/LessonList.js @@ -1,88 +1,110 @@ -import React, { useState, useEffect } from 'react'; -import LessonItem from './LessonItem'; -import { useDispatch, useSelector } from 'react-redux'; -import axios from 'axios'; -import '../../style/lesson/lessonListCss.css'; -import { useNavigate } from 'react-router-dom'; -import { setLessonId } from '../../store/lesson/lessonInfo'; +import React, { useState, useEffect } from "react"; +import LessonItem from "./LessonItem"; +import { useDispatch, useSelector } from "react-redux"; +import axios from "axios"; +import "../../style/lesson/lessonListCss.css"; +import { useNavigate } from "react-router-dom"; +import { setLessonId } from "../../store/lesson/lessonInfo"; +import { resetlessonSearch, setResult } from "../../store/lesson/lessonSearch"; + function LessonList() { - const navigate = useNavigate() - const dispatch = useDispatch() - const [lessons, setLessons] = useState([]); + const navigate = useNavigate(); + const dispatch = useDispatch(); + // const [lessons, setLessons] = useState([]); const type = useSelector((state) => state.lessonSearch.type); const deadline = useSelector((state) => state.lessonSearch.deadline); const order = useSelector((state) => state.lessonSearch.order); const category = useSelector((state) => state.lessonSearch.category); const keyword = useSelector((state) => state.lessonSearch.keyword); - const isLogin = useSelector((state) => state.auth.isLogin) - const keywordFromSearchBar = useSelector((state) => state.searchBarKeyword.keyword) - + const isLogin = useSelector((state) => state.auth.isLogin); + const lessons = useSelector((state) => state.lessonSearch.result) + const keywordFromSearchBar = useSelector( + (state) => state.searchBarKeyword.keyword + ); + // const typeFromSearchBar = useSelector((state) => state.searchBarKeyword.type); + + // const categoryFromSearchBar = useSelector( + // (state) => state.searchBarKeyword.category + // ); + // const orderFromSearchBar = useSelector( + // (state) => state.searchBarKeyword.order + // ); + // const deadlineFromSearchBar = useSelector( + // (state) => state.searchBarKeyword.deadline + // ); + const handleLessonDetail = (lessonId) => { - navigate(`/lesson/${lessonId}`) - window.scrollTo({ top: 0, behavior: 'smooth' }); - } + navigate(`/lesson/${lessonId}`); + window.scrollTo({ top: 0, behavior: "smooth" }); + }; const gotoLogin = () => { - alert('로그인 후 확인할 수 있습니다!') - navigate('/login') - window.scrollTo({ top: 0, behavior: 'smooth' }); - } + alert("로그인 후 확인할 수 있습니다!"); + navigate("/login"); + window.scrollTo({ top: 0, behavior: "smooth" }); + }; useEffect(() => { - axios.get(`/api/v1/lesson`, { - params: { - type, - keyword, - category, - order, - deadline, - } - }) - .then((res) => { - setLessons(res.data) - }) - .catch((err) => { - console.error(err) - }); - }, [type, keyword, category, order, deadline]) + if ( + keywordFromSearchBar !== '' + ) { + axios + .get(`/api/v1/lesson`, { + params: { + type, + keyword: keywordFromSearchBar, + category, + order, + deadline, + }, + }) + .then((res) => { + console.log('내브바 서치바') + dispatch(setResult(res.data)); + }) + .catch((err) => { + console.error(err); + }); + } else { + axios + .get(`/api/v1/lesson`, { + params: { + type, + keyword, + category, + order, + deadline, + }, + }) + .then((res) => { + dispatch(setResult(res.data)); + console.log('메인 서치바') + + }) + .catch((err) => { + console.error(err); + }); + } + }, [keywordFromSearchBar, type, order, keyword, category, deadline]); - //서치바 검색 - useEffect(() => { - axios.get(`/api/v1/lesson`, { - params: { - deadline : true, - type : "title", - order : "title", - category : [], - keyword : keywordFromSearchBar - } - }) - .then((res) => { - setLessons(res.data) - }) - .catch((err) => { - console.error(err) - }); - }, [keywordFromSearchBar]) - return ( -
+
{lessons.length > 0 ? ( lessons.map((lesson) => ( -
{ if (isLogin) { - dispatch(setLessonId(lesson.lessonId)) + dispatch(setLessonId(lesson.lessonId)); handleLessonDetail(lesson.lessonId); } else { gotoLogin(); } - }} + }} >
)) @@ -100,7 +122,7 @@ function LessonList() {

아직 과외가 개설되지 않았습니다.

)}
- ); + ); } export default LessonList; diff --git a/frontend/src/component/TotalLessons/LessonListFliter.js b/frontend/src/component/TotalLessons/LessonListFliter.js index c5707367..291f8671 100644 --- a/frontend/src/component/TotalLessons/LessonListFliter.js +++ b/frontend/src/component/TotalLessons/LessonListFliter.js @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { setDeadLine, setOrder } from '../../store/lesson/lessonSearch'; import '../../style/lesson/lessonListFilterCss.css'; +import { FiChevronDown } from 'react-icons/fi'; function LessonListFliter() { const dispatch = useDispatch(); @@ -24,9 +25,9 @@ function LessonListFliter() { return (
-
+
+
-
+
-
diff --git a/frontend/src/component/TotalLessons/SearchBar.js b/frontend/src/component/TotalLessons/SearchBar.js index 1fe9216a..62dc7a17 100644 --- a/frontend/src/component/TotalLessons/SearchBar.js +++ b/frontend/src/component/TotalLessons/SearchBar.js @@ -1,74 +1,63 @@ -import React, {useEffect, useState} from 'react'; -import { setKeyword, setType } from '../../store/lesson/lessonSearch'; +import React, { useEffect, useState } from 'react'; +import { setKeyword, setType, resetlessonSearch, setResult } from '../../store/lesson/lessonSearch'; import { useDispatch, useSelector } from 'react-redux'; import axios from 'axios'; import '../../style/lesson/searchBarCss.css'; import { BiSearch } from 'react-icons/bi'; +import { FiChevronDown } from 'react-icons/fi'; +import { setSearchBarKeyword } from '../../store/lesson/searchBarKeyword'; function SearchBar() { const dispatch = useDispatch() const [keyword, setInputKeyword] = useState('') const [type, setInputType] = useState('all') - const order = useSelector((state) => state.lessonSearch.order) - const deadline = useSelector((state) => state.lessonSearch.deadline) - const category = useSelector((state) => state.lessonSearch.category) const handleSearchBar = (e) => { const newKeyword = e.target.value; setInputKeyword(newKeyword); dispatch(setKeyword(newKeyword)) + dispatch(setSearchBarKeyword('')) } const handleTypeChange = (e) => { const newType = e.target.value; setInputType(newType); dispatch(setType(newType)) + // dispatch(setSearchBarKeyword('')) } - useEffect(() => { - axios.get(`/api/v1/lesson`, { - params : { - type, - keyword, - category, - order, - deadline - } - }) - .then((res) => { - console.log(res) - }) - .catch((err) => { - console.log(err) - }) - }, [type, keyword, category, order, deadline]) return (
- +
+ + +
- - +
); } -export default SearchBar; \ No newline at end of file +export default SearchBar; diff --git a/frontend/src/component/Video/Cookiee/OtherCookiees.js b/frontend/src/component/Video/Cookiee/OtherCookiees.js index 038e357d..509d8f30 100644 --- a/frontend/src/component/Video/Cookiee/OtherCookiees.js +++ b/frontend/src/component/Video/Cookiee/OtherCookiees.js @@ -22,7 +22,7 @@ function OtherCookiees() {
{cookiees && Object.keys(cookiees).length ? ( cookiees.map((sub, i) => ( -
+
-
+

{this.getNicknameTag()}

diff --git a/frontend/src/index.css b/frontend/src/index.css index b60e0948..5c7add16 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -16,12 +16,12 @@ iframe { } .container { - padding: 0 15rem; + padding: 4.3rem 15rem; } @media screen and (max-width: 1350px) { .container { - padding: 0 8rem; + padding: 4.3rem 8rem; } } @@ -33,6 +33,6 @@ iframe { @media screen and (max-width: 646px) { .container { - padding: 0 3rem; /* 화면 크기가 768px 미만일 때 padding 값을 조정 */ + padding: 4.3rem 3rem; /* 화면 크기가 768px 미만일 때 padding 값을 조정 */ } } \ No newline at end of file diff --git a/frontend/src/pages/chatRoom.js b/frontend/src/pages/chatRoom.js index 27e71d22..1dae2f56 100644 --- a/frontend/src/pages/chatRoom.js +++ b/frontend/src/pages/chatRoom.js @@ -31,7 +31,6 @@ function ChatRoom() { backgroundColor: '#FFFFFF', height: '510px', position: 'relative', - borderBottom: '0.7px solid #d9d9d9' }; return ( diff --git a/frontend/src/pages/totalLessons.js b/frontend/src/pages/totalLessons.js index 82ae0396..002d29fd 100644 --- a/frontend/src/pages/totalLessons.js +++ b/frontend/src/pages/totalLessons.js @@ -9,11 +9,10 @@ import { setLessonId } from '../store/lesson/lessonInfo'; import '../style/lesson/totalLessonsCss.css'; function TotalLessons() { - const dispatch = useDispatch(); + const dispatch = useDispatch() useEffect(() => { dispatch(resetlessonSearch()) - }) - + }, []) return (
@@ -30,7 +29,7 @@ function TotalLessons() {
-
+
diff --git a/frontend/src/store/lesson/lessonSearch.js b/frontend/src/store/lesson/lessonSearch.js index 58db29c4..6ccc90de 100644 --- a/frontend/src/store/lesson/lessonSearch.js +++ b/frontend/src/store/lesson/lessonSearch.js @@ -6,7 +6,8 @@ const initialState = { deadline : true, category : [], keyword : "", - lessonId : "" + lessonId : "", + result : [] } const lessonSearch = createSlice({ @@ -31,6 +32,9 @@ const lessonSearch = createSlice({ setLessonId : (state, action) => { state.lessonId = action.payload }, + setResult : (state, action) => { + state.result = action.payload + }, resetlessonSearch : (state) => { return initialState } @@ -38,6 +42,6 @@ const lessonSearch = createSlice({ }) export const { - setOrder, setDeadLine, setCategories, setKeyword, setType, setLessonId, resetlessonSearch + setOrder, setDeadLine, setCategories, setKeyword, setType,setResult, setLessonId, resetlessonSearch } = lessonSearch.actions export default lessonSearch.reducer \ No newline at end of file diff --git a/frontend/src/store/lesson/searchBarKeyword.js b/frontend/src/store/lesson/searchBarKeyword.js index 8dd64329..29d995d7 100644 --- a/frontend/src/store/lesson/searchBarKeyword.js +++ b/frontend/src/store/lesson/searchBarKeyword.js @@ -1,15 +1,20 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - keyword: "", -}; - + type : 'all', + order : "title", + deadline : true, + category : [], + keyword : "", + lessonId : "" +} const searchBarKeyword = createSlice({ name: 'searchBarKeyword', initialState, reducers: { setSearchBarKeyword: (state, action) => { state.keyword = action.payload; + console.log(action) }, }, }); diff --git a/frontend/src/style/chat/chatroom.css b/frontend/src/style/chat/chatroom.css index ed74adb2..aeac89d7 100644 --- a/frontend/src/style/chat/chatroom.css +++ b/frontend/src/style/chat/chatroom.css @@ -14,10 +14,8 @@ .chat-room-content { flex: 3; -} - -.ChatSpace { - border-right: 0.7px solid #D9D9D9; + border-bottom: 0.7px solid #d9d9d9; + border-right: 0.7px solid #d9d9d9; } .Emptychat { 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/lesson/lessonDetailCss.css b/frontend/src/style/lesson/lessonDetailCss.css index d02fd38c..fb52f251 100644 --- a/frontend/src/style/lesson/lessonDetailCss.css +++ b/frontend/src/style/lesson/lessonDetailCss.css @@ -23,18 +23,17 @@ .detailCategory{ display: inline-block; width: auto; - padding: 5px 11px; justify-content: center; align-items: center; text-align: center; - border-radius: 50px; - border: 1px solid #CBCBCB; - background: #FFF; + + margin-right: 10px; + padding: 6px 12px; + border-style: none; + border-radius: 5px; + background: #F4F4F4; color: #656363; - text-align: center; font-size: 12px; - font-style: normal; - margin-right: 10px; } .detailLessonTitle{ diff --git a/frontend/src/style/lesson/lessonListFilterCss.css b/frontend/src/style/lesson/lessonListFilterCss.css index f9c88e48..97a9e534 100644 --- a/frontend/src/style/lesson/lessonListFilterCss.css +++ b/frontend/src/style/lesson/lessonListFilterCss.css @@ -1,27 +1,37 @@ -.sortSelect { +.lessonSortSelect { width: 150px; height: 40px; flex-shrink: 0; border-radius: 4px; border: 0.7px solid #D9D9D9; - background: #FFF; + background: #FFFFFF00; padding-left: 20px; font-size: 0.9rem; color: #4b4b4b; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + z-index: 1; +} + +.sort-icon { + position: absolute; + left : 7.7rem; + color: #4b4b4b; } -.sortSelectContainer { +.lessonSortSelectContainer { display: flex; align-items: center; } -.deadlineContainer { +.lessonDeadlineContainer { display: flex; align-items: center; margin-top: 1rem; } -.deadlineCheckbox { +.lessonDeadlineCheckbox { appearance: none; width: 14px; height: 14px; @@ -32,7 +42,7 @@ position: relative; vertical-align: middle; } -.deadlineCheckbox:checked::before { +.lessonDeadlineCheckbox:checked::before { content: '\2713'; margin: -1px; width: 14px; @@ -46,7 +56,7 @@ justify-content: center; } -.deadlineLabel { +.lessonDeadlineLabel { font-size: 0.9rem; color: #4b4b4b; cursor: pointer; diff --git a/frontend/src/style/lesson/searchBarCss.css b/frontend/src/style/lesson/searchBarCss.css index f88c9c25..435e739b 100644 --- a/frontend/src/style/lesson/searchBarCss.css +++ b/frontend/src/style/lesson/searchBarCss.css @@ -7,23 +7,42 @@ } .categorySelect{ - height: 56px; - border: 0.7px solid #FF7A42; - border-right: none; - padding: 1rem 1rem 1rem 3.5rem; - border-radius: 50px 0px 0px 50px; - box-shadow: 0px 8px 24px 0px #FFF7F5; - color: #FF7A42; - font-size: 1rem; - /* appearance: none; + border: 0.7px solid #FF7A42; + padding: 1rem 1rem 1rem 3.5rem; + border-radius: 50px 0px 0px 50px; + color: #FF7A42; + font-size: 1rem; + appearance: none; -webkit-appearance: none; - -moz-appearance: none; */ + -moz-appearance: none; + width: 100%; + height: 100%; } .categorySelect:focus { outline: none; /* 선택됐을 때의 기본 외곽선 제거 */ border-color: #FF7A42; /* 선택됐을 때의 border 색상 설정 */ } +.category-select-wrap { + display: inline-block; /* 높이를 따르는 인라인 블록 요소로 설정 */ + position: relative; /* 내부 요소를 포함하는 컨테이너로 설정 */ + height: 56px; + width: 195.5px; + border-right: none; + border-radius: 50px 0px 0px 50px; + box-shadow: 0px 8px 24px 0px #FFF7F5; +} + +.select-icon { + position: absolute; + top: 50%; + right: 0.2rem; + transform: translateY(-50%); + width: 20px; + height: 20px; + color : #FF7A42; +} + .inputContainer{ box-sizing: border-box; height: 56px; diff --git a/frontend/src/style/lesson/totalLessonsCss.css b/frontend/src/style/lesson/totalLessonsCss.css index ef62a291..550757c8 100644 --- a/frontend/src/style/lesson/totalLessonsCss.css +++ b/frontend/src/style/lesson/totalLessonsCss.css @@ -25,4 +25,10 @@ .mainContent { flex: 1; -} \ No newline at end of file +} + +.lessonSidebar { + position: fixed; + margin-top: 140px; + margin-left: 1000px; +} \ No newline at end of file diff --git a/frontend/src/style/mypage/account.css b/frontend/src/style/mypage/account.css index dc09ce28..18f80b33 100644 --- a/frontend/src/style/mypage/account.css +++ b/frontend/src/style/mypage/account.css @@ -1,3 +1,7 @@ +.account-container { + padding : 0rem 15rem; +} + .account input { border-radius: 7px; border: 0.7px solid #D9D9D9; 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; +} diff --git a/frontend/src/style/navbar.css b/frontend/src/style/navbar.css index d5378b1a..1a907374 100644 --- a/frontend/src/style/navbar.css +++ b/frontend/src/style/navbar.css @@ -1,3 +1,10 @@ +.nav-wrap { + position: fixed; + z-index: 1001; + right: 0%; + left: 0%; +} + .navbar { background-color: #ffffff; padding: 0.9rem 15rem; @@ -9,10 +16,13 @@ } .navbar-main { - background-color: #ffffff00; border-bottom: #ffffff00 solid 0.7px; } +.navbar-main.scroll { + border-bottom: #d9d9d9 solid 0.7px; +} + .logo { /* width: 10rem; */ height: 1.2rem; diff --git a/frontend/src/style/video/common.css b/frontend/src/style/video/common.css index f0e93dad..b7e0a20d 100644 --- a/frontend/src/style/video/common.css +++ b/frontend/src/style/video/common.css @@ -13,14 +13,16 @@ video { } /* 비디오 닉네임 */ -.stream-component div { +.video-common-nickname { position: absolute; top: 10px; left: 15px; - /* font-size: 1em; */ - /* font-weight: bold; */ - /* bottom: 30px; - left: 30px; */ +} + +.video-common-nickname p { + /* position: absolute; + top: 10px; + left: 15px; */ } .video-page, .video-background { diff --git a/frontend/src/style/video/cookieeScreen.css b/frontend/src/style/video/cookieeScreen.css index ed3882c6..2e9f44a8 100644 --- a/frontend/src/style/video/cookieeScreen.css +++ b/frontend/src/style/video/cookieeScreen.css @@ -165,6 +165,15 @@ animation: widgetFadeInAnimation 0.5s ease forwards; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; +} + +.other-cookiee { + position: relative; + width: 126px; + height: 82px; } .cookiee-nocookiees p { diff --git a/frontend/src/style/video/videoModals.css b/frontend/src/style/video/videoModals.css index 180e5248..42011d3b 100644 --- a/frontend/src/style/video/videoModals.css +++ b/frontend/src/style/video/videoModals.css @@ -97,6 +97,7 @@ color: white; border-radius: 5px; border: none; + cursor: pointer; }