[feat/CK-218] 로드맵 리스트 페이지 모바일 대응을 한다. (#178)

* style: 로드맵 리스트 페이지 모바일 대응 * style: 불필요한 코드 삭제 * fix: 오타수정 * refactor: 검색 카테고리 클릭 시 cursor:pointer 적용
woowacourse-teams · Oct 10, 2023 · a0b62b5 · a0b62b5
1 parent 0f035b1
commit a0b62b5
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 92 deletions.
diff --git a/client/src/components/_common/roadmapItem/RoadmapItem.styles.ts b/client/src/components/_common/roadmapItem/RoadmapItem.styles.ts
@@ -1,9 +1,7 @@
 import { styled } from 'styled-components';
 
 export const RoadmapItem = styled.div<{ hasBorder: boolean }>`
-  position: relative;
-
-  flex-shrink: 0;
+  /* flex-shrink: 0; */
 
   width: 30rem;
   height: fit-content;
@@ -32,34 +30,39 @@ export const ReviewersCount = styled.div`
 
 export const RoadmapTitle = styled.div`
   ${({ theme }) => theme.fonts.h1}
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* white-space: nowrap; */
+  /* overflow: hidden; */
+  /* text-overflow: ellipsis; */
+  height: 6rem;
 `;
 
 export const Description = styled.div`
   ${({ theme }) => theme.fonts.description5}
-  margin: 1.6rem 0 3rem 0;
+  color: ${({ theme }) => theme.colors.gray300};
+
+  margin: 1rem 0 1rem 0;
+
   white-space: nowrap;
+
   overflow: hidden;
+
   text-overflow: ellipsis;
 `;
 
 export const HoverDescription = styled.article`
-  ${({ theme }) => theme.fonts.description2};
+  ${({ theme }) => theme.fonts.description3};
   position: absolute;
   top: 11rem;
 
   width: 25rem;
   padding: 2rem 2rem;
 
-  color: ${({ theme }) => theme.colors.gray300};
+  color: ${({ theme }) => theme.colors.black};
   word-wrap: break-word;
   overflow-wrap: break-word;
   white-space: normal;
 
-  background-color: ${({ theme }) => theme.colors.gray100};
-  border: 0.2rem solid ${({ theme }) => theme.colors.gray300};
+  background-color: ${({ theme }) => theme.colors.main_middle};
   border-radius: 10px;
 `;
 
@@ -92,19 +95,20 @@ export const ItemExtraInfos = styled.div`
 
   width: 100%;
   height: 10rem;
+  padding: 0.5rem;
 
   background: ${({ theme }) => theme.colors.gray100};
   border-radius: 8px;
 `;
 
 export const ExtraInfoBox = styled.div`
-  ${({ theme }) => theme.fonts.description4}
+  ${({ theme }) => theme.fonts.description3}
   display: flex;
   align-items: center;
   justify-content: center;
 
-  width: 8rem;
-  height: 8rem;
+  width: 6.5rem;
+  height: 6.5rem;
 
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 8px;
@@ -143,8 +147,10 @@ export const ExtraInfoCol = styled.div`
 
 export const ItemFooter = styled.div`
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
+  align-items: flex-start;
   justify-content: space-between;
+
   margin-top: 2.5rem;
 `;
 
@@ -155,9 +161,12 @@ export const CreatedBy = styled.div`
 `;
 
 export const Tags = styled.div`
-  ${({ theme }) => theme.fonts.description4}
+  ${({ theme }) => theme.fonts.description3}
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  height: 6rem;
+
   color: ${({ theme }) => theme.colors.main_dark};
 `;
diff --git a/client/src/components/_common/roadmapItem/RoadmapItem.tsx b/client/src/components/_common/roadmapItem/RoadmapItem.tsx
@@ -68,12 +68,12 @@ const RoadmapItem = ({ item, hasBorder = true, roadmapId }: RoadmapItemProps) =>
         {hasBorder ? '자세히 보기' : '진행중인 모임 보기'}
       </Button>
       <S.ItemFooter>
-        <S.CreatedBy>Created by {item.creator.name}</S.CreatedBy>
         <S.Tags>
           {item.tags.map((tag) => {
             return <span># {tag.name}</span>;
           })}
         </S.Tags>
+        <S.CreatedBy>Created by {item.creator.name}</S.CreatedBy>
       </S.ItemFooter>
     </S.RoadmapItem>
   );

diff --git a/client/src/components/roadmapListPage/categories/Categories.styles.ts b/client/src/components/roadmapListPage/categories/Categories.styles.ts
@@ -44,6 +44,11 @@ export const Category = styled.button<{ selected: boolean }>`
     color: ${({ theme }) => theme.colors.main_dark};
     transition: all ease-in-out 0.1s;
   }
+
+  ${media.tablet`
+  width: 6rem;
+  height: 6rem;
+  `}
 `;
 
 export const CategoryName = styled.div`

diff --git a/client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts b/client/src/components/roadmapListPage/roadmapList/RoadmapList.styles.ts
@@ -2,21 +2,26 @@ import media from '@/styles/media';
 import styled from 'styled-components';
 
 export const RoadmapList = styled.div`
+  position: relative;
+
   display: grid;
-  grid-gap: 3rem;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(30rem, auto));
   justify-items: center;
 
   margin-bottom: 8rem;
   min-height: 100vh;
+  padding: 0 2rem;
 
   ${media.tablet`
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(30rem, auto));
+
 
   `}
 
   ${media.mobile`
-  grid-template-columns: 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(30rem, auto));
+
   
   `}
 `;

diff --git a/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.styles.ts b/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.styles.ts
@@ -7,6 +7,13 @@ export const RoadmapListView = styled.div`
   margin-top: 8rem;
 `;
 
+export const ListTitle = styled.h1`
+  ${({ theme }) => theme.fonts.title_large}
+  display: flex;
+  margin-left: 2rem;
+  color: ${({ theme }) => theme.colors.main_dark};
+`;
+
 export const SelectWrapper = styled.div`
   ${({ theme }) => theme.fonts.description5}
   display: flex;

diff --git a/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.tsx b/client/src/components/roadmapListPage/roadmapListView/RoadmapListView.tsx
@@ -7,15 +7,21 @@ import RoadmapList from '../roadmapList/RoadmapList';
 import Spinner from '@components/_common/spinner/Spinner';
 import RoadmapSearch from '../roadmapSearch/RoadmapSearch';
 // import { Select } from '@/components/roadmapCreatePage/selector/SelectBox';
-import { Outlet } from 'react-router-dom';
+import { Link, Outlet } from 'react-router-dom';
 import useValidParams from '@/hooks/_common/useValidParams';
+import SVGIcon from '@/components/icons/SVGIcon';
 
 const RoadmapListView = () => {
   const [selectedCategoryId, selectCategory] = useSelectCategory();
   const { search } = useValidParams();
 
   return (
     <S.RoadmapListView aria-label='로드맵 뷰'>
+      <Link to='/roadmap-list'>
+        <S.ListTitle>
+          로드맵 둘러보기 <SVGIcon name='RoadmapIcon' color='#76a982' />
+        </S.ListTitle>
+      </Link>
       <RoadmapSearch />
       <Categories
         selectedCategoryId={selectedCategoryId}

diff --git a/client/src/components/roadmapListPage/roadmapSearch/RoadmapSearch.tsx b/client/src/components/roadmapListPage/roadmapSearch/RoadmapSearch.tsx
@@ -10,6 +10,12 @@ const searchCategoryKeyword = {
   3: 'creatorName',
 } as const;
 
+const searchCategorySelection = {
+  tagName: '태그',
+  roadmapTitle: '로드맵 제목',
+  creatorName: '크리에이터',
+};
+
 const RoadmapSearch = () => {
   const searchWordRef = useRef<HTMLInputElement | null>(null);
   const navigate = useNavigate();
@@ -31,50 +37,47 @@ const RoadmapSearch = () => {
     navigate(`/roadmap-list/${searchCategory}/${searchWordRef.current?.value}`);
   };
 
-  const resetSearchResult = () => {
-    if (searchWordRef.current === null) return;
-
-    searchWordRef.current.value = '';
-    navigate('/roadmap-list');
-  };
-
   return (
     <>
-      <S.SelectWrapper>
-        <Select defaultOpen externalSelectState={selectSearchCategory}>
-          <Select.OptionGroup asChild>
-            <S.SearchCategoryOptionGroup>
-              <Select.Option id={1} asChild defaultOpen>
-                <S.SearchCategoryOption>태그명</S.SearchCategoryOption>
-              </Select.Option>
-              <Select.Option id={2} asChild defaultSelected defaultOpen>
-                <S.SearchCategoryOption>로드맵 제목</S.SearchCategoryOption>
-              </Select.Option>
-              <Select.Option id={3} asChild defaultOpen>
-                <S.SearchCategoryOption>크리에이터</S.SearchCategoryOption>
-              </Select.Option>
-            </S.SearchCategoryOptionGroup>
-          </Select.OptionGroup>
-        </Select>
-        <p>(으)로 검색하기</p>
-      </S.SelectWrapper>
-      <S.InputFlex onSubmit={(e: FormEvent<HTMLFormElement>) => searchRoadmap(e)}>
+      <form onSubmit={(e: FormEvent<HTMLFormElement>) => searchRoadmap(e)}>
         <S.Wrapper>
-          <S.InputWrapper>
-            <S.SearchInput
-              placeholder='로드맵을 검색해주세요'
-              maxLength={20}
-              ref={searchWordRef}
-            />
-          </S.InputWrapper>
+          <S.SelectWrapper>
+            <Select externalSelectState={selectSearchCategory}>
+              <S.TriggerAndOptionWrapper>
+                <Select.Trigger asChild>
+                  <S.SelectTrigger>
+                    ⌵ {searchCategorySelection[searchCategory]}
+                    <div>|</div>
+                  </S.SelectTrigger>
+                </Select.Trigger>
+                <Select.OptionGroup asChild>
+                  <S.SearchCategoryOptionGroup>
+                    <Select.Option id={1} asChild>
+                      <S.SearchCategoryOption>태그</S.SearchCategoryOption>
+                    </Select.Option>
+                    <Select.Option id={2} asChild defaultSelected>
+                      <S.SearchCategoryOption>로드맵 제목</S.SearchCategoryOption>
+                    </Select.Option>
+                    <Select.Option id={3} asChild>
+                      <S.SearchCategoryOption>크리에이터</S.SearchCategoryOption>
+                    </Select.Option>
+                  </S.SearchCategoryOptionGroup>
+                </Select.OptionGroup>
+              </S.TriggerAndOptionWrapper>
+            </Select>
+            <S.InputWrapper>
+              <S.SearchInput
+                placeholder='로드맵을 검색해주세요'
+                maxLength={20}
+                ref={searchWordRef}
+              />
+            </S.InputWrapper>
+          </S.SelectWrapper>
           <S.SearchButton aria-label='검색버튼' type='submit'>
             <SearchIcon width='30px' height='30px' />
           </S.SearchButton>
         </S.Wrapper>
-        <S.ResetSearchButton onClick={resetSearchResult}>
-          전체결과로 돌아가기
-        </S.ResetSearchButton>
-      </S.InputFlex>
+      </form>
     </>
   );
 };