Merge branch 'dev' into feature/auth

JECT-Study · Dec 25, 2024 · ee0e66e · ee0e66e
2 parents 43b9078 + 8da7cff
commit ee0e66e
Show file tree

Hide file tree

Showing 23 changed files with 422 additions and 118 deletions.
diff --git a/src/app/fonts/Pretendard-Medium.woff b/src/app/fonts/Pretendard-Medium.woff
diff --git a/src/app/fonts/Pretendard-SemiBold.woff b/src/app/fonts/Pretendard-SemiBold.woff
diff --git a/src/app/fonts/index.ts 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
@@ -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 (
     <html lang='ko'>
-      <body className={`${PretendardRegular.variable}`}>
+      <body className={`${pretendard} ${montserrat.variable}`}>
         <MSWProvider>
           <ReactQueryProvider>
             <AppShell>{children}</AppShell>
@@ -39,4 +33,6 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+};
+
+export default RootLayout;
diff --git a/src/components/Button/CategoryButton.tsx b/src/components/Button/CategoryButton.tsx
@@ -1,16 +1,14 @@
 import { CategoryButtonProps } from '@/types';
 
-import { FC } from 'react';
-
-const CategoryButton: FC<CategoryButtonProps> = ({
+const CategoryButton = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-gray-300',
   textSize,
   children,
 
   onClick,
   ariaLabel,
-}) => {
+}: CategoryButtonProps) => {
   return (
     <button
       onClick={onClick}

diff --git a/src/components/Button/FollowButton.tsx b/src/components/Button/FollowButton.tsx
@@ -1,19 +1,19 @@
 'use client';
 
-import { FC, useState } from 'react';
+import { useState } from 'react';
 
 import { FollowButtonProps } from '@/types/buttons/FollowButtonProps';
 
 import Icon from '../Icon/Icon';
 
-const FollowButton: FC<FollowButtonProps> = ({
+const FollowButton = ({
   backgroundColor = 'bg-gray-900',
   textColor = 'text-white',
   textSize = 'button-s',
 
   onClick,
   ariaLabel,
-}) => {
+}: FollowButtonProps) => {
   const [isFollowing, setIsFollowing] = useState(false);
 
   const toggleFollow = () => {

diff --git a/src/components/Button/SquareButtonL.tsx b/src/components/Button/SquareButtonL.tsx
@@ -1,8 +1,6 @@
 import { SquareButtonLProps } from '@/types';
 
-import { FC } from 'react';
-
-const SquareButtonL: FC<SquareButtonLProps> = ({
+const SquareButtonL = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-white',
   textSize,
@@ -15,7 +13,7 @@ const SquareButtonL: FC<SquareButtonLProps> = ({
   icon,
   iconPosition,
   type = 'button',
-}) => {
+}: SquareButtonLProps) => {
   return (
     <button
       type={type}

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import Icon from '../Icon/Icon';
+
+interface FilterDropdownProps {
+  options: string[];
+  selected: string;
+  onChange: (value: string) => void;
+}
+
+const FilterDropdown = ({
+  options,
+  selected,
+  onChange,
+}: FilterDropdownProps) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleOptionSelect = (option: string) => {
+    onChange(option);
+    setIsDropdownOpen(false);
+  };
+
+  return (
+    <div className='body2 relative inline-block text-left' ref={dropdownRef}>
+      <button
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        aria-label={`Currently selected filter: ${selected}`}
+        aria-expanded={isDropdownOpen}
+        className='flex items-center justify-between w-[149px] h-[44px] px-[23px] py-[10px]
+        text-white bg-gray-900 rounded-[5px] gap-[36px] shadow-sm
+        hover:bg-gray-800 focus:outline-none'
+      >
+        {selected}
+        <span className='text-gray-700'>
+          {isDropdownOpen ? (
+            <Icon name='Dropup' size='m' />
+          ) : (
+            <Icon name='Dropdown' size='m' />
+          )}
+        </span>
+      </button>
+
+      {isDropdownOpen && (
+        <div
+          className='w-full mt-3 bg-gray-900 rounded-[5px] shadow-lg'
+          role='menu'
+        >
+          <ul className='py-1'>
+            {options.map((option, index) => (
+              <li
+                key={index}
+                onClick={() => 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}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterDropdown;
diff --git 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 (
-    <footer className='bg-black text-white px-14 py-24'>
+    <footer className='bg-black text-white px-[32px] lg:px-[140px] py-24'>
       <Link href='/'>
         <Image src={logo} alt='모멘티아 로고' width={45} priority />
       </Link>
 
       <div className='flex flex-wrap wrap-reverse items-center mt-10'>
         <div className='w-full'>
-          <p className='body1 mb-2 text-gray-300'>
+          <p className='font-sans body1 mb-2 text-gray-300'>
             Exhibitions, for Artists' Moments
           </p>
           <div className='flex flex-col justify-between md:flex-row'>

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType } from 'react';
 
 import iconSizes, { IconSize } from './iconSizes';
 import { iconsNames } from './iconsNames';
@@ -10,12 +10,7 @@ interface IconProps {
   onClick?: () => void;
 }
 
-const Icon: FC<IconProps> = ({
-  name,
-  size = 'm',
-  className = '',
-  onClick,
-}: IconProps) => {
+const Icon = ({ name, size = 'm', className = '', onClick }: IconProps) => {
   const Component = iconsNames[name] as ComponentType<{
     className?: string;
     onClick?: () => void;

diff --git a/src/components/Icon/icons/Close.tsx b/src/components/Icon/icons/Close.tsx
@@ -1,9 +1,12 @@
-import { FC } from 'react';
+import { ReactNode } from 'react';
 
-const Close: FC<{ className?: string; onClick?: () => void }> = ({
+const Close = ({
   className,
   onClick,
-}) => {
+}: {
+  className?: string;
+  onClick?: () => void;
+}): ReactNode => {
   return (
     <svg
       className={className}

diff --git a/src/components/Icon/icons/DropDown.tsx b/src/components/Icon/icons/DropDown.tsx
@@ -0,0 +1,17 @@
+const Dropdown = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      viewBox='0 0 18 18'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8.20759 12.9706C8.6079 13.4906 9.3921 13.4906 9.79241 12.9706L14.6888 6.60999C15.195 5.95243 14.7263 5 13.8964 5H4.10358C3.27374 5 2.80497 5.95243 3.31117 6.60999L8.20759 12.9706Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default Dropdown;
diff --git a/src/components/Icon/icons/DropUp.tsx b/src/components/Icon/icons/DropUp.tsx
@@ -0,0 +1,17 @@
+const Dropup = ({ className }: { className?: string }) => {
+  return (
+    <svg
+      className={className}
+      viewBox='0 0 18 18'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M8.20759 5.02937C8.6079 4.50936 9.3921 4.50936 9.79241 5.02937L14.6888 11.39C15.195 12.0476 14.7263 13 13.8964 13H4.10358C3.27374 13 2.80497 12.0476 3.31117 11.39L8.20759 5.02937Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default Dropup;
diff --git a/src/components/Icon/icons/Lock.tsx b/src/components/Icon/icons/Lock.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+const Lock = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}): ReactNode => {
+  return (
+    <svg
+      className={className}
+      onClick={onClick}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M17 9.65V7.75C17 6.49022 16.4732 5.28204 15.5355 4.39124C14.5979 3.50044 13.3261 3 12 3C10.6739 3 9.40215 3.50044 8.46447 4.39124C7.52678 5.28204 7 6.49022 7 7.75V9.65C6.20435 9.65 5.44129 9.95027 4.87868 10.4847C4.31607 11.0192 4 11.7441 4 12.5V19.15C4 19.9059 4.31607 20.6308 4.87868 21.1653C5.44129 21.6997 6.20435 22 7 22H17C17.7956 22 18.5587 21.6997 19.1213 21.1653C19.6839 20.6308 20 19.9059 20 19.15V12.5C20 11.7441 19.6839 11.0192 19.1213 10.4847C18.5587 9.95027 17.7956 9.65 17 9.65ZM9 7.75C9 6.99413 9.31607 6.26922 9.87868 5.73475C10.4413 5.20027 11.2044 4.9 12 4.9C12.7956 4.9 13.5587 5.20027 14.1213 5.73475C14.6839 6.26922 15 6.99413 15 7.75V9.65H9V7.75Z'
+        fill='currentColor'
+      />
+      <rect x='11' y='14' width='2' height='4' rx='1' fill='white' />
+    </svg>
+  );
+};
+
+export default Lock;
diff --git a/src/components/Icon/icons/Menu.tsx b/src/components/Icon/icons/Menu.tsx
@@ -1,8 +1,9 @@
-import { FC } from 'react';
-
-const Menu: FC<{ className?: string; onClick?: () => void }> = ({
+const Menu = ({
   className,
   onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
 }) => {
   return (
     <svg

diff --git a/src/components/Icon/icons/Unlock.tsx b/src/components/Icon/icons/Unlock.tsx
@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+const Unlock = ({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}): ReactNode => {
+  return (
+    <svg
+      className={className}
+      onClick={onClick}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M9 8.65032H17C17.7956 8.65032 18.5587 8.95061 19.1213 9.48511C19.6839 10.0196 20 10.7446 20 11.5005V18.1508C20 18.9067 19.6839 19.6317 19.1213 20.1662C18.5587 20.7007 17.7956 21.001 17 21.001H7C6.20435 21.001 5.44129 20.7007 4.87868 20.1662C4.31607 19.6317 4 18.9067 4 18.1508V11.5005C4 10.7446 4.31607 10.0196 4.87868 9.48511C5.44129 8.95061 6.20435 8.65032 7 8.65032V6.75022C7.00021 5.81143 7.29321 4.89375 7.84201 4.11305C8.3908 3.33235 9.17078 2.72365 10.0835 2.3638C10.9961 2.00395 12.0006 1.9091 12.97 2.09122C13.9393 2.27334 14.8302 2.72426 15.53 3.38705C16.1603 3.99027 16.6122 4.74068 16.84 5.56266C16.8728 5.68368 16.8802 5.80966 16.8618 5.9334C16.8434 6.05715 16.7995 6.17623 16.7327 6.28386C16.6658 6.39149 16.5773 6.48555 16.4722 6.56068C16.3671 6.63581 16.2474 6.69053 16.12 6.72172C15.9926 6.75291 15.86 6.75996 15.7298 6.74247C15.5995 6.72497 15.4742 6.68327 15.3609 6.61975C15.2476 6.55623 15.1486 6.47214 15.0695 6.37227C14.9904 6.2724 14.9328 6.15871 14.9 6.03769C14.7649 5.54349 14.4959 5.0915 14.12 4.72662C13.6999 4.32795 13.1646 4.0567 12.5821 3.94724C11.9996 3.83777 11.3959 3.89501 10.8477 4.11171C10.2994 4.3284 9.83118 4.6948 9.50226 5.1645C9.17334 5.6342 8.99854 6.18607 9 6.75022V8.65032Z'
+        fill='currentColor'
+      />
+      <rect x='11' y='13' width='2' height='4' rx='1' fill='white' />
+    </svg>
+  );
+};
+
+export default Unlock;