diff --git a/src/app/fonts/Pretendard-Medium.woff b/src/app/fonts/Pretendard-Medium.woff new file mode 100644 index 0000000..5370409 Binary files /dev/null and b/src/app/fonts/Pretendard-Medium.woff differ diff --git a/src/app/fonts/Pretendard-SemiBold.woff b/src/app/fonts/Pretendard-SemiBold.woff new file mode 100644 index 0000000..682e7a4 Binary files /dev/null and b/src/app/fonts/Pretendard-SemiBold.woff differ diff --git a/src/app/fonts/index.ts b/src/app/fonts/index.ts new file mode 100644 index 0000000..70002a1 --- /dev/null +++ b/src/app/fonts/index.ts @@ -0,0 +1,19 @@ +import { Montserrat } from 'next/font/google'; +import localFont from 'next/font/local'; + +export const pretendard = localFont({ + src: [ + { path: './Pretendard-Regular.woff', weight: '400', style: 'normal' }, + { path: './Pretendard-Medium.woff', weight: '500', style: 'normal' }, + { + path: './Pretendard-SemiBold.woff', + weight: '600', + style: 'normal', + }, + ], +}); + +export const montserrat = Montserrat({ + subsets: ['latin'], + variable: '--font-montserrat', +}); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b9fcd15..8cec845 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,4 @@ import type { Metadata } from 'next'; -import localFont from 'next/font/local'; import { ReactNode } from 'react'; import '../styles/globals.css'; @@ -10,26 +9,21 @@ import ReactQueryProvider from './providers/ReactQueryProvider'; import AppShell from '../components/Layout/AppShell'; -const PretendardRegular = localFont({ - src: './fonts/Pretendard-Regular.woff', - variable: '--font-geist-sans', - weight: '400', - style: 'normal', -}); +import { montserrat, pretendard } from './fonts'; export const metadata: Metadata = { title: '', description: '', }; -export default function RootLayout({ +const RootLayout = ({ children, }: Readonly<{ children: ReactNode; -}>) { +}>) => { return ( - + {children} @@ -39,4 +33,6 @@ export default function RootLayout({ ); -} +}; + +export default RootLayout; diff --git a/src/components/Button/CategoryButton.tsx b/src/components/Button/CategoryButton.tsx index e3a14fb..927ae96 100644 --- a/src/components/Button/CategoryButton.tsx +++ b/src/components/Button/CategoryButton.tsx @@ -1,8 +1,6 @@ import { CategoryButtonProps } from '@/types'; -import { FC } from 'react'; - -const CategoryButton: FC = ({ +const CategoryButton = ({ backgroundColor = 'bg-gray-800', textColor = 'text-gray-300', textSize, @@ -10,7 +8,7 @@ const CategoryButton: FC = ({ onClick, ariaLabel, -}) => { +}: CategoryButtonProps) => { return ( + + {isDropdownOpen && ( +
+
    + {options.map((option, index) => ( +
  • handleOptionSelect(option)} + aria-current={option === selected ? 'true' : undefined} + className={`block w-[149px] h-[44px] px-[23px] py-[10px] + text-gray-400 cursor-pointer + ${option === selected && isDropdownOpen ? 'text-white' : 'text-gray-400'} + hover:bg-gray-800`} + > + {option} +
    • + ))} +
+
+ )} + + ); +}; + +export default FilterDropdown; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 9db09c5..9f2611a 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -5,14 +5,14 @@ import logo from '../../../public/images/momentiaLogoSymbol.png'; const Footer = () => { return ( -