diff --git a/src/components/footer/FooterStyle.ts b/src/components/footer/FooterStyle.ts index c487bdd..cd0bcfa 100644 --- a/src/components/footer/FooterStyle.ts +++ b/src/components/footer/FooterStyle.ts @@ -25,9 +25,15 @@ export const footerStyle = (theme: Theme) => css` `; export const subtitleStyle = (theme: Theme) => css` + display: flex; + flex-direction: column; + gap: 1rem; + ${theme.fonts.kor.bodyBold13} + color: ${theme.colors.gray10}; `; export const desc = (theme: Theme) => css` ${theme.fonts.kor.captionMedium11}; + color: ${theme.colors.gray7}; `; diff --git a/src/components/header/productHeader/CategoryStyle.ts b/src/components/header/productHeader/CategoryStyle.ts index 5a34887..3b65b7d 100644 --- a/src/components/header/productHeader/CategoryStyle.ts +++ b/src/components/header/productHeader/CategoryStyle.ts @@ -9,6 +9,12 @@ export const CategoryLayout = css` gap: 0; align-items: center; justify-content: center; + + box-shadow: + 0 0.6rem 1.2rem 0 rgb(0 0 0 / 12%), + 0 0.4rem 0.8rem 0 rgb(0 0 0 / 8%), + 0 0 0.4rem 0 rgb(0 0 0 / 8%); + border-radius: 12px; `; export const CategoryContainerStyle = (theme: Theme) => css` diff --git a/src/components/header/productHeader/MyListStyle.ts b/src/components/header/productHeader/MyListStyle.ts index aed2d4d..d6bcd67 100644 --- a/src/components/header/productHeader/MyListStyle.ts +++ b/src/components/header/productHeader/MyListStyle.ts @@ -9,6 +9,12 @@ export const MyLayoutStyle = css` gap: 0; align-items: center; justify-content: center; + + box-shadow: + 0 0.6rem 1.2rem 0 rgb(0 0 0 / 12%), + 0 0.4rem 0.8rem 0 rgb(0 0 0 / 8%), + 0 0 0.4rem 0 rgb(0 0 0 / 8%); + border-radius: 12px; `; export const MyContainerStyle = (theme: Theme) => css` diff --git a/src/components/productPage/review/review/FilterBtn.tsx b/src/components/productPage/review/review/FilterBtn.tsx index 6f6f1a0..4993dec 100644 --- a/src/components/productPage/review/review/FilterBtn.tsx +++ b/src/components/productPage/review/review/FilterBtn.tsx @@ -1,5 +1,6 @@ import { IcArrowbottomGray12 } from '@assets/icons/index'; import { + relativeStyle, fontStyle, FilterBtnContainer, dropDownLayoutStyle, @@ -11,7 +12,7 @@ const FilterBtn = () => { const [isHovered, setIsHovered] = useState(false); return ( -
+
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>

최근 작성된 리뷰

diff --git a/src/components/productPage/review/review/FilterBtnStyle.ts b/src/components/productPage/review/review/FilterBtnStyle.ts index 8bee49b..192f77a 100644 --- a/src/components/productPage/review/review/FilterBtnStyle.ts +++ b/src/components/productPage/review/review/FilterBtnStyle.ts @@ -1,7 +1,10 @@ import { Theme, css } from '@emotion/react'; -export const FilterBtnContainer = (theme: Theme) => css` +export const relativeStyle = css` position: relative; +`; + +export const FilterBtnContainer = (theme: Theme) => css` display: flex; align-items: center; justify-content: space-between; @@ -20,7 +23,7 @@ export const fontStyle = (theme: Theme) => css` export const dropDownLayoutStyle = (theme: Theme) => css` position: absolute; - top: 5rem; + top: 3.2rem; width: 15.4rem; background-color: ${theme.colors.gray1}; diff --git a/src/components/productPage/review/reviewTop/Title.tsx b/src/components/productPage/review/reviewTop/Title.tsx index 9a2cc58..9389dcd 100644 --- a/src/components/productPage/review/reviewTop/Title.tsx +++ b/src/components/productPage/review/reviewTop/Title.tsx @@ -4,7 +4,6 @@ import { titleContainer, fontKoStyle, fontEnStyle, - alignStyle, toolStyle, } from '@components/productPage/review/reviewTop/TitleStyle'; import { useState } from 'react'; @@ -20,7 +19,7 @@ const Title = () => {

리뷰

(497)

- + {isHovered &&
{TOOL_MSG}
}
); diff --git a/src/components/productPage/review/reviewTop/TitleStyle.ts b/src/components/productPage/review/reviewTop/TitleStyle.ts index 1a0cc76..5db074a 100644 --- a/src/components/productPage/review/reviewTop/TitleStyle.ts +++ b/src/components/productPage/review/reviewTop/TitleStyle.ts @@ -19,11 +19,6 @@ export const fontEnStyle = (theme: Theme) => css` ${theme.fonts.eng.titleBold20} `; -export const alignStyle = css` - margin-top: 0.2rem; - - cursor: pointer; -`; export const toolStyle = (theme: Theme) => css` position: absolute; top: 2.8rem;