refactor: search 페이지 최적화(메인,검색 필터선택 제작)

team-suwiki · Jan 13, 2023 · 0c51e51 · 0c51e51
2 parents 3885359 + 357b03e
commit 0c51e51
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 94 deletions.
diff --git 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
@@ -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 (
+    <OptionBox
+      id={String(isMain)}
+      select={select}
+      icon={isMain ? selectedOption.icon : undefined}
+      onClick={(e) => {
+        e.stopPropagation;
+        onSelect(!select);
+      }}
+    >
+      <SelectedOption id={String(isMain)}>{OptionName}</SelectedOption>
+      <Arrows src={`/images/icon_${select ? 'up' : 'down'}_arrow_solid_24.svg`} />
+      {select && (
+        <Options>
+          {detail.map((option) => {
+            return (
+              <Option
+                className={String(isMain)}
+                id={option[isMain ? 'name' : 'sub'] === OptionName ? 'selected' : undefined}
+                key={option.name}
+                onClick={() => handleSelect(option.option)}
+              >
+                {isMain ? (
+                  <img
+                    alt={option.icon}
+                    src={`/images/icon_color_${option.icon}_36.svg`}
+                    style={{ marginRight: '10px' }}
+                  />
+                ) : null}
+                {isMain ? option.name : option.sub}
+              </Option>
+            );
+          })}
+        </Options>
+      )}
+    </OptionBox>
+  );
+};
+
+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
@@ -37,41 +37,33 @@ const Login = () => {
       <AuthWrapper>
         <Title>로그인</Title>
         <CssTextField
+          variant="standard"
           margin="normal"
           required
-          fullWidth
-          id="email"
           label="아이디"
-          name="email"
-          autoComplete="email"
           inputRef={userId}
           onKeyPress={onKeypress}
         />
         <CssTextField
+          variant="standard"
           margin="normal"
           required
-          fullWidth
-          name="password"
           label="비밀번호"
           type="password"
-          id="password"
-          autoComplete="current-password"
           inputRef={password}
           onKeyPress={onKeypress}
         />
         <SearchWrapper>
           <div>
-            <SearchButton onClick={() => navigate('/idsearch')}>아이디 찾기</SearchButton>
-            <SearchButton onClick={() => navigate('/pwsearch')}>비밀번호 찾기</SearchButton>
+            <SearchButton type="button" onClick={() => navigate('/idsearch')}>
+              아이디 찾기
+            </SearchButton>
+            <SearchButton type="button" onClick={() => navigate('/pwsearch')}>
+              비밀번호 찾기
+            </SearchButton>
           </div>
         </SearchWrapper>
-        <Button
-          background="#336af8"
-          type="submit"
-          fullWidth
-          variant="contained"
-          onClick={loginAttempt}
-        >
+        <Button background="#336af8" type="button" onClick={loginAttempt}>
           로그인
         </Button>
       </AuthWrapper>

diff --git 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 (
-    <div>
+    <div role="presentation" onClick={() => select && onSelect(false)}>
       <Banner>
         <BannerWrapper>
           <div>
@@ -78,18 +51,10 @@ const Main = () => {
                 ))}
               </SortSelect> */}
             </FlexWrapper>
-            {/* <CustomSelect defaultValue={'modifiedDate'} onChange={onChangeHandler}>
-              {options.map((index) => (
-                <StyledOption key={index.name} value={index.lec}>
-                  <Soption>
-                    <Img alt="option-icon" width="22" height="22" src={index.imgs} /> {index.name}
-                  </Soption>
-                </StyledOption>
-              ))}
-            </CustomSelect> */}
+            <OptionSelect select={select} onSelect={onSelect} />
           </HeadSelection>
           <HeadSelection>
-            <MainList lecture={lecture} checkClass={checkClass} />
+            <MainList checkClass={checkClass} />
           </HeadSelection>
         </SearchWrapper>
         <Button

diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
@@ -6,27 +6,17 @@ import LectureSearch from '../components/LectureSearch';
 import LectureList from '../components/List/LectureList';
 import MajorSearch from '../components/MajorSearch';
 import Meta from '../components/Meta';
+import OptionSelect from '../components/OptionSelect';
 
 // const majorList = ['전체'];
-// const detail = [
-//   { name: '만족도', option: 'lectureSatisfactionAvg' },
-//   { name: '꿀강', option: 'lectureHoneyAvg' },
-//   { name: '배움', option: 'lectureLearningAvg' },
-//   { name: '날짜', option: 'modifiedDate' },
-//   { name: '종합', option: 'lectureTotalAvg' },
-// ];
 
 const Search = () => {
-  // const [searchParams] = useSearchParams();
-  // const onSelect = (e) => {
-  //   navigate(`/search?q=${searchValue}&option=${e}&majorType=${majorType}`);
-  // };
-
   const [count, setCount] = useState(0);
   const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [select, onSelect] = useState(false);
 
   return (
-    <div>
+    <div role="presentation" onClick={() => select && onSelect(false)}>
       <Meta title="SUWIKI : 검색" />
       <Container>
         <LectureSearch />
@@ -42,13 +32,7 @@ const Search = () => {
               </SortSelect> */}
             </FlexWrapper>
             <FlexWrapper>
-              {/* <SortSelect id="sort" value={option} onChange={onSelect}>
-                {detail.map((index) => (
-                  <StyledOption id="semester" key={index.option} value={index.option}>
-                    <Soption id="semester">{index.name}</Soption>
-                  </StyledOption>
-                ))}
-              </SortSelect> */}
+              <OptionSelect select={select} onSelect={onSelect} />
             </FlexWrapper>
           </div>
 

diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
@@ -184,7 +184,10 @@ const SignUp = () => {
             상세보기
           </AgreeButton>
         </Label>
-        <Button disabled={!isValid || !emailCheck || checkList.length !== 2} background="#336af8">
+        <Button
+          disabled={!isValid || !idCheck || !emailCheck || checkList.length !== 2}
+          background="#336af8"
+        >
           회원가입
         </Button>
       </AuthWrapper>

diff --git 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;