From aaf5b46d11e49e2c7b35309cda75d232d81e8c11 Mon Sep 17 00:00:00 2001 From: solo5star Date: Tue, 9 Jan 2024 12:33:48 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20Dropdown=EC=9D=98=20=EC=9C=84=EC=B9=98?= =?UTF-8?q?=EA=B0=80=20=EC=98=AC=EB=B0=94=EB=A5=B4=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EA=B2=8C=20=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenu/DropdownMenu.styles.ts | 55 +------------------ .../components/DropdownMenu/DropdownMenu.tsx | 2 +- .../RoadmapFilter/RoadmapFilter.styles.ts | 5 -- .../RoadmapFilter/RoadmapFilter.tsx | 46 +++++++++------- .../src/pages/EssayAnswerListPage/index.tsx | 1 + 5 files changed, 28 insertions(+), 81 deletions(-) diff --git a/frontend/src/components/DropdownMenu/DropdownMenu.styles.ts b/frontend/src/components/DropdownMenu/DropdownMenu.styles.ts index d4f980325..0e59d6838 100644 --- 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 }>` height: fit-content; @@ -13,60 +11,15 @@ const Container = styled.div<{ css?: InterpolationWithTheme }>` 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 }>` & 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 index 117152974..4e0aa7c5d 100644 --- 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; + css?: ReturnType; } const DropdownMenu = ({ children, css }: React.PropsWithChildren) => { diff --git a/frontend/src/pages/EssayAnswerListPage/components/RoadmapFilter/RoadmapFilter.styles.ts b/frontend/src/pages/EssayAnswerListPage/components/RoadmapFilter/RoadmapFilter.styles.ts index 8fa79dd9a..5773922a4 100644 --- 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 index 18c560177..99106c9ce 100644 --- 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 = { keywordId: '주제', memberIds: '회원', quizIds: '질문', -} +}; const useGetKeywords = ({ curriculumId }: { curriculumId: number }) => { const { data: roadmap } = useRoadmap({ curriculumId }); @@ -104,25 +105,28 @@ const RoadmapFilter = ({ curriculumId, filter, onFilterChange }: RoadmapFilterPr return ( - { - Object.keys(filterData).map((filterKeyword, index) => ( -
event.stopPropagation()}> - - {activeFilterKeyword === filterKeyword && ( - -
    - {filterData[filterKeyword].map((item) => ( -
  • handleFilter(filterKeyword, item.key)}>{item.label}
    • - ))} -
- - )} -
- ))} + {Object.keys(filterData).map((filterKeyword, index) => ( +
event.stopPropagation()} + css={css` + position: relative; + `} + > + + {activeFilterKeyword === filterKeyword && ( + +
    + {filterData[filterKeyword].map((item) => ( +
  • handleFilter(filterKeyword, item.key)}>{item.label}
    • + ))} +
+ + )} +
+ ))} {Object.keys(filter).length !== 0 && } diff --git a/frontend/src/pages/EssayAnswerListPage/index.tsx b/frontend/src/pages/EssayAnswerListPage/index.tsx index 18f6a0c4b..0f8d338ef 100644 --- a/frontend/src/pages/EssayAnswerListPage/index.tsx +++ b/frontend/src/pages/EssayAnswerListPage/index.tsx @@ -79,6 +79,7 @@ const EssayAnswerListPage = () => { +