fix: Dropdown의 위치가 올바르지 않게 되는 오류 수정

woowacourse · Jan 9, 2024 · aaf5b46 · aaf5b46
1 parent d07b943
commit aaf5b46
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 81 deletions.
diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.styles.ts b/frontend/src/components/DropdownMenu/DropdownMenu.styles.ts
@@ -2,8 +2,6 @@ import { InterpolationWithTheme } from '@emotion/core';
 import { Theme } from '@emotion/react';
 import styled from '@emotion/styled';
 import COLOR from '../../constants/color';
-import { css } from '@emotion/react';
-import MEDIA_QUERY from '../../constants/mediaQuery';
 
 const Container = styled.div<{ css?: InterpolationWithTheme<Theme> }>`
   height: fit-content;
@@ -13,60 +11,15 @@ const Container = styled.div<{ css?: InterpolationWithTheme<Theme> }>`
   background-color: ${COLOR.WHITE};
   border-radius: 1.2rem;
   box-shadow: 0px 0px 6px ${COLOR.BLACK_OPACITY_300};
+  margin-top: 1rem;
   padding: 1rem 1.2rem;
   position: absolute;
   z-index: 100;
-  right: 30px;
-  top: 50px;
-
-  ${MEDIA_QUERY.xs} {
-    right: 10px;
-    top: 40px;
-  }
-  /* transform: translateY(30%); */
 
   && {
     ${({ css }) => css}
   }
 
-  /* &:before {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: -1;
-    content: ' ';
-    background-color: rgba(0, 0, 0, 0.4);
-  } */
-
-  /* 삼각형 입니다 ^^
-    &:before {
-    content: '';
-    position: absolute;
-    border-style: solid;
-    border-width: 0 14px 15px;
-    border-color: #ffffff transparent;
-    display: block;
-    width: 0;
-    z-index: 0;
-    top: -14px;
-    right: 16px;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    border-style: solid;
-    border-width: 0 14px 15px;
-    border-color: #ffffff transparent;
-    display: block;
-    width: 0;
-    z-index: 0;
-    top: -14px;
-    right: 16px;
-  } */
-
   & li {
     height: 4rem;
     display: flex;
@@ -87,12 +40,6 @@ const Container = styled.div<{ css?: InterpolationWithTheme<Theme> }>`
   & li:not(:last-child) {
     border-bottom: 0.7px solid ${COLOR.LIGHT_GRAY_700};
   }
-
-  /* & li:hover {
-    & > * {
-      font-size: 2.2rem;
-    }
-  } */
 `;
 
 export { Container };
diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.tsx b/frontend/src/components/DropdownMenu/DropdownMenu.tsx
@@ -5,7 +5,7 @@ import { Container } from './DropdownMenu.styles';
 import { css } from '@emotion/react';
 
 export interface DropdownMenuProps {
-  css: ReturnType<typeof css>;
+  css?: ReturnType<typeof css>;
 }
 
 const DropdownMenu = ({ children, css }: React.PropsWithChildren<DropdownMenuProps>) => {

diff --git a/frontend/src/pages/EssayAnswerListPage/components/RoadmapFilter/RoadmapFilter.styles.ts b/frontend/src/pages/EssayAnswerListPage/components/RoadmapFilter/RoadmapFilter.styles.ts
@@ -1,4 +1,3 @@
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import COLOR from '../../../../constants/color';
 import MEDIA_QUERY from '../../../../constants/mediaQuery';
@@ -55,10 +54,6 @@ export const FilterContainer = styled.div`
   }
 `;
 
-export const DropdownStyle = css`
-  padding-top: 0;
-`;
-
 export const ResetFilterButton = styled.button`
   cursor: pointer;
 `;
diff --git a/frontend/src/pages/EssayAnswerListPage/components/RoadmapFilter/RoadmapFilter.tsx b/frontend/src/pages/EssayAnswerListPage/components/RoadmapFilter/RoadmapFilter.tsx
@@ -1,16 +1,17 @@
+import { css } from '@emotion/react';
 import { useEffect, useState } from 'react';
 import DropdownMenu from '../../../../components/DropdownMenu/DropdownMenu';
 import { useGetQuizzes } from '../../../../hooks/queries/essayanswer';
 import { useGetMembers } from '../../../../hooks/queries/filters';
 import { useRoadmap } from '../../../../hooks/queries/keywords';
 import { KeywordResponse } from '../../../../models/Keywords';
-import { Container, DropdownStyle, FilterContainer } from './RoadmapFilter.styles';
+import { Container, FilterContainer } from './RoadmapFilter.styles';
 
 const filterKoreanNames: Record<string, string> = {
   keywordId: '주제',
   memberIds: '회원',
   quizIds: '질문',
-}
+};
 
 const useGetKeywords = ({ curriculumId }: { curriculumId: number }) => {
   const { data: roadmap } = useRoadmap({ curriculumId });
@@ -104,25 +105,28 @@ const RoadmapFilter = ({ curriculumId, filter, onFilterChange }: RoadmapFilterPr
   return (
     <Container>
       <FilterContainer>
-        {
-          Object.keys(filterData).map((filterKeyword, index) => (
-            <div key={index} onClick={(event) => event.stopPropagation()}>
-              <button
-                onClick={() => setActiveFilterKeyword(filterKeyword)}
-              >
-                {filterKoreanNames[filterKeyword]}
-              </button>
-              {activeFilterKeyword === filterKeyword && (
-                <DropdownMenu css={DropdownStyle}>
-                  <ul>
-                    {filterData[filterKeyword].map((item) => (
-                      <li onClick={() => handleFilter(filterKeyword, item.key)}>{item.label}</li>
-                    ))}
-                  </ul>
-                </DropdownMenu>
-              )}
-            </div>
-          ))}
+        {Object.keys(filterData).map((filterKeyword, index) => (
+          <div
+            key={index}
+            onClick={(event) => event.stopPropagation()}
+            css={css`
+              position: relative;
+            `}
+          >
+            <button onClick={() => setActiveFilterKeyword(filterKeyword)}>
+              {filterKoreanNames[filterKeyword]}
+            </button>
+            {activeFilterKeyword === filterKeyword && (
+              <DropdownMenu>
+                <ul>
+                  {filterData[filterKeyword].map((item) => (
+                    <li onClick={() => handleFilter(filterKeyword, item.key)}>{item.label}</li>
+                  ))}
+                </ul>
+              </DropdownMenu>
+            )}
+          </div>
+        ))}
       </FilterContainer>
       {Object.keys(filter).length !== 0 && <button onClick={resetFilter}>필터 초기화 ⟳</button>}
     </Container>

diff --git a/frontend/src/pages/EssayAnswerListPage/index.tsx b/frontend/src/pages/EssayAnswerListPage/index.tsx
@@ -79,6 +79,7 @@ const EssayAnswerListPage = () => {
           </h1>
         </div>
       </HeaderContainer>
+
       <RoadmapFilter curriculumId={Number(curriculumId)} filter={filter} onFilterChange={handleFilterChange} />
 
       <PostListContainer>