From 357b03e0c5d3dd2fdc93fc71748b74a60679e54c Mon Sep 17 00:00:00 2001 From: truewayy Date: Fri, 13 Jan 2023 17:07:30 +0900 Subject: [PATCH] =?UTF-8?q?refac:=20search=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EC=B5=9C=EC=A0=81=ED=99=94(=EB=A9=94=EC=9D=B8,=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=ED=95=84=ED=84=B0=EC=84=A0=ED=83=9D=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/List/MainList.jsx | 5 +- src/components/OptionSelect.jsx | 141 +++++++++++++++++++++++++++++++ src/pages/Login.jsx | 26 ++---- src/pages/Main.jsx | 45 ++-------- src/pages/Search.jsx | 24 +----- src/pages/SignUp.jsx | 5 +- src/styles/Common.jsx | 15 ---- 7 files changed, 167 insertions(+), 94 deletions(-) create mode 100644 src/components/OptionSelect.jsx diff --git a/src/components/List/MainList.jsx b/src/components/List/MainList.jsx index ec4bc5fa..67807795 100644 --- a/src/components/List/MainList.jsx +++ b/src/components/List/MainList.jsx @@ -2,8 +2,11 @@ import { useQuery } from 'react-query'; import LectureContainer from '../Lecture/LectureContainer'; import Lecture from '../../api/Lecture'; import { fakeLectureList } from '../placeholderData'; +import { useSearchParams } from 'react-router-dom'; -const MainList = ({ lecture, checkClass }) => { +const MainList = ({ checkClass }) => { + const [searchParams] = useSearchParams(); + const lecture = searchParams.get('option') || 'modifiedDate'; // 메인 강의 리스트 API const lectures = Lecture(); // 선택된 전공 diff --git a/src/components/OptionSelect.jsx b/src/components/OptionSelect.jsx new file mode 100644 index 00000000..f7c4f158 --- /dev/null +++ b/src/components/OptionSelect.jsx @@ -0,0 +1,141 @@ +import styled from '@emotion/styled'; +import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'; + +const detail = [ + { sub: '날짜', name: '최근 올라온 강의', option: 'modifiedDate', icon: 'fire' }, + { sub: '꿀강', name: '꿀 강의', option: 'lectureHoneyAvg', icon: 'bee' }, + { sub: '만족도', name: '만족도가 높은 강의', option: 'lectureSatisfactionAvg', icon: 'thumbs' }, + { sub: '배움', name: '배울게 많은 강의', option: 'lectureLearningAvg', icon: 'book' }, + { sub: '종합', name: 'BEST 강의', option: 'lectureTotalAvg', icon: 'best' }, +]; + +const OptionSelect = ({ select, onSelect }) => { + const navigate = useNavigate(); + const { pathname } = useLocation(); + const [searchParams] = useSearchParams(); + const isMain = pathname === '/'; + const option = searchParams.get('option') || 'modifiedDate'; + const selectedOption = detail.find((row) => row.option === option); + const OptionName = isMain ? selectedOption.name : selectedOption.sub; + const handleSelect = (e) => { + isMain + ? navigate(`/?option=${e}&majorType=전체`) + : navigate(`/search?q=${searchParams.get('q')}&option=${e}&majorType=전체`); + }; + + return ( + { + e.stopPropagation; + onSelect(!select); + }} + > + {OptionName} + + {select && ( + + {detail.map((option) => { + return ( + + ); + })} + + )} + + ); +}; + +export default OptionSelect; + +const Options = styled.ul` + position: absolute; + z-index: 1; + left: 0; + top: 50px; + align-items: center; + justify-content: center; + width: 100%; + border: 1px solid #e0e0e0; + border-radius: 10px; + background-color: #fff; + padding: 5px; + min-width: 150px; + cursor: default; +`; + +const Option = styled.li` + padding: 10px; + border-radius: 10px; + display: flex; + align-items: center; + &.true { + padding: 7px 10px; + } + &:hover { + background-color: #e7ebf0; + } + &#selected { + background-color: #daecff; + } +`; + +const SelectedOption = styled.span` + color: #336af8; + &#true { + color: #000; + } +`; + +const Arrows = styled.img` + position: absolute; + right: 9px; + bottom: 12px; +`; + +const OptionBox = styled.div` + z-index: 1; + border: 1px solid #e0e0e0; + border-radius: 10px; + padding: 12px 9px; + min-width: 150px; + position: relative; + cursor: default; + &::before { + content: ${({ icon }) => (icon ? `url(/images/icon_color_${icon}_36.svg)` : "'정렬'")}; + font-size: 15px; + font-weight: 500; + padding: 0; + margin-right: 10px; + } + ${({ select }) => + !select && + ` &:hover { + background-color: #e7ebf0; + border-color: #b2bac2; + } +`} + &#true { + width: 180px; + padding: 6px 9px; + display: flex; + align-items: center; + font-size: 14px; + } +`; diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index 43925b64..fa5c7959 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -37,41 +37,33 @@ const Login = () => { 로그인
- navigate('/idsearch')}>아이디 찾기 - navigate('/pwsearch')}>비밀번호 찾기 + navigate('/idsearch')}> + 아이디 찾기 + + navigate('/pwsearch')}> + 비밀번호 찾기 +
- diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx index e07b468c..e52f4837 100644 --- a/src/pages/Main.jsx +++ b/src/pages/Main.jsx @@ -8,47 +8,20 @@ import { MajorModalStyle } from '../components/Etc/ModalStyle'; import MainList from '../components/List/MainList'; import MajorSearch from '../components/MajorSearch'; import LectureSearch from '../components/LectureSearch'; - -// const options = [ -// { -// name: '최근 올라온 강의', -// lec: 'modifiedDate', -// imgs: 'images/icon_color_fire_36.svg', -// }, -// { -// name: '꿀 강의', -// lec: 'lectureHoneyAvg', -// imgs: 'images/icon_color_bee_36.svg', -// }, -// { -// name: '만족도가 높은 강의', -// lec: 'lectureSatisfactionAvg', -// imgs: 'images/icon_color_thumbs_36.svg', -// }, -// { -// name: '배울게 많은 강의', -// lec: 'lectureLearningAvg', -// imgs: 'images/icon_color_book_36.svg', -// }, -// { -// name: 'BEST 강의', -// lec: 'lectureTotalAvg', -// imgs: 'images/icon_color_best_36.svg', -// }, -// ]; +import OptionSelect from '../components/OptionSelect'; const Main = () => { const navigate = useNavigate(); - const [lecture] = useState('modifiedDate'); const [checkClass, setCheckClass] = useState('전체'); const [modalIsOpen, setModalIsOpen] = useState(false); + const [select, onSelect] = useState(false); const major = Major(); useEffect(() => { versionCheck(major); }, [major]); return ( -
+
select && onSelect(false)}>
@@ -78,18 +51,10 @@ const Main = () => { ))} */} - {/* - {options.map((index) => ( - - - option-icon {index.name} - - - ))} - */} + - + diff --git a/src/styles/Common.jsx b/src/styles/Common.jsx index 1d44f526..58b28abd 100644 --- a/src/styles/Common.jsx +++ b/src/styles/Common.jsx @@ -17,21 +17,6 @@ export const Container = styled.div` } `; -export const AppContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - width: 60%; - margin: 0 auto; - @media screen and (max-width: 960px) { - display: flex; - flex-direction: column; - align-items: center; - width: 90%; - margin: 0 auto; - } -`; - export const AuthWrapper = styled.form` display: flex; flex-direction: column;