diff --git a/src/app/auth/(authWithLayout)/sign-in/page.tsx b/src/app/auth/(authWithLayout)/sign-in/page.tsx index 8607c62..a64a154 100644 --- a/src/app/auth/(authWithLayout)/sign-in/page.tsx +++ b/src/app/auth/(authWithLayout)/sign-in/page.tsx @@ -53,7 +53,7 @@ const SignInPage = () => { 로그인 diff --git a/src/app/auth/(authWithLayout)/sign-up/page.tsx b/src/app/auth/(authWithLayout)/sign-up/page.tsx index 8030364..194c228 100644 --- a/src/app/auth/(authWithLayout)/sign-up/page.tsx +++ b/src/app/auth/(authWithLayout)/sign-up/page.tsx @@ -105,7 +105,7 @@ const SignUpPage = () => {

회원가입

 diff --git a/src/components/ArtworkPage/ArtworkFilter.tsx b/src/components/ArtworkPage/ArtworkFilter.tsx index bad23ef..fd383b4 100644 --- a/src/components/ArtworkPage/ArtworkFilter.tsx +++ b/src/components/ArtworkPage/ArtworkFilter.tsx @@ -60,7 +60,7 @@ const ArtworkFilter = ({ variant={ selectedArtworkField === artworkField.value ? 'primary' - : 'tertiaty' + : 'tertiary' } buttonSize='m' onClick={() => handleArtworkFieldClick(artworkField.value)} diff --git a/src/components/Button/OvalButton.tsx b/src/components/Button/OvalButton.tsx index a6ade1a..6e0f4d2 100644 --- a/src/components/Button/OvalButton.tsx +++ b/src/components/Button/OvalButton.tsx @@ -11,19 +11,19 @@ const OvalButton = ({ const bgColorClasses = { primary: 'bg-main', secondary: buttonSize === 'm' ? '' : 'bg-gray-200', - tertiaty: buttonSize === 'm' ? 'bg-gray-800' : 'bg-gray-700', + tertiary: buttonSize === 'm' ? 'bg-gray-800' : 'bg-gray-700', }; const hoverBgColorClasses = { primary: 'hover:bg-[#885DFF]', secondary: buttonSize === 'm' ? '' : 'hover:bg-gray-300', - tertiaty: '', + tertiary: '', }; const textColorClasses = { primary: 'text-white', secondary: buttonSize === 'm' ? 'text-transparent' : 'text-gray-600', - tertiaty: buttonSize === 'm' ? 'text-white' : 'text-gray-300', + tertiary: buttonSize === 'm' ? 'text-white' : 'text-gray-300', }; const buttonSizeClasses = { diff --git a/src/components/Button/SquareButtonL.tsx b/src/components/Button/SquareButtonL.tsx index cbe452d..3263cc3 100644 --- a/src/components/Button/SquareButtonL.tsx +++ b/src/components/Button/SquareButtonL.tsx @@ -1,7 +1,7 @@ import { SquareButtonLProps } from '@/types'; const SquareButtonL = ({ - variant = 'tertiaty', + variant = 'tertiary', children, onClick, @@ -15,19 +15,19 @@ const SquareButtonL = ({ const bgColorClasses = { primary: 'bg-main', secondary: 'bg-gray-200', - tertiaty: 'bg-gray-800', + tertiary: 'bg-gray-800', }; const hoverBgColorClasses = { primary: 'hover:bg-[#885DFF]', secondary: 'hover:bg-gray-300', - tertiaty: 'hover:bg-gray-700', + tertiary: 'hover:bg-gray-700', }; const textColorClasses = { primary: 'text-white', secondary: 'text-gray-500', - tertiaty: 'text-gray-300', + tertiary: 'text-gray-300', }; return ( diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx index 2ee36a0..b555b95 100644 --- a/src/components/FilterDropdown/index.tsx +++ b/src/components/FilterDropdown/index.tsx @@ -62,7 +62,7 @@ const FilterDropdown = ({ 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`} + hover:bg-background-overlay`} > {option} diff --git a/src/components/Icon/iconSizes.ts b/src/components/Icon/iconSizes.ts index 9a5a38f..f682012 100644 --- a/src/components/Icon/iconSizes.ts +++ b/src/components/Icon/iconSizes.ts @@ -1,10 +1,10 @@ export type IconSize = 'xl' | 'l' | 'm' | 's'; const iconSizes: Record = { - xl: 'w-15 h-15', - l: 'w-7.5 h-7.5', + xl: 'w-[60px] h-[60px]', + l: 'w-[30px] h-[30px]', m: 'w-6 h-6', - s: 'w-4.5 h-4.5', + s: 'w-[18px] h-[18px]', }; export default iconSizes; diff --git a/src/components/Icon/icons/MoreVertical.tsx b/src/components/Icon/icons/MoreVertical.tsx new file mode 100644 index 0000000..c446afd --- /dev/null +++ b/src/components/Icon/icons/MoreVertical.tsx @@ -0,0 +1,21 @@ +import { IconProps } from '@/types'; + +const MoreVertical = ({ className }: IconProps) => { + return ( + + + + ); +}; + +export default MoreVertical; diff --git a/src/components/Icon/iconsNames.ts b/src/components/Icon/iconsNames.ts index f1ccc7c..a128287 100644 --- a/src/components/Icon/iconsNames.ts +++ b/src/components/Icon/iconsNames.ts @@ -32,6 +32,7 @@ import Lock from './icons/Lock'; import Menu from './icons/Menu'; import Message from './icons/Message'; import MoreHorizontal from './icons/MoreHorizontal'; +import MoreVertical from './icons/MoreVertical'; import Notification from './icons/Notification'; import Pause from './icons/Pause'; import Person from './icons/Person'; @@ -81,6 +82,7 @@ export const iconsNames: Record< Menu, Message, MoreHorizontal, + MoreVertical, Notification, Pause, Person, diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx new file mode 100644 index 0000000..f81f424 --- /dev/null +++ b/src/components/Input/BasicInput.tsx @@ -0,0 +1,129 @@ +'use client'; + +import { Input } from '@nextui-org/react'; +import { ChangeEvent, useState } from 'react'; + +import Icon from '../Icon/Icon'; + +interface BasicInputProps { + type?: string; + label?: string; + placeholder?: string; + + value: string; + onChange: (e: ChangeEvent) => void; + + showClear?: boolean; + onClear?: () => void; + showEyeIcon?: boolean; + showTextLength?: boolean; + isInvalid?: boolean; + minLength?: number; + maxLength?: number; + errorMessage?: string; + successMessage?: string; +} + +const BasicInput = ({ + type, + label, + placeholder, + value, + onChange, + showClear = false, + onClear, + showEyeIcon = false, + showTextLength = false, + isInvalid = false, + minLength, + maxLength, + errorMessage, + successMessage, +}: BasicInputProps) => { + const [isPasswordVisible, setIsPasswordVisible] = useState(false); + + const togglePasswordVisibility = () => + setIsPasswordVisible(!isPasswordVisible); + + const currentTextLength = value.length; + const textLengthColor = + currentTextLength === 0 + ? 'text-gray-700' + : maxLength && currentTextLength > maxLength + ? 'text-system-error' + : 'text-white'; + + return ( +
+ + {showEyeIcon && ( + + )} + + {showTextLength && maxLength && ( +
+ + {currentTextLength} + + /{maxLength} +
+ )} + + } + classNames={{ + label: ['custom-label', 'top-5', '!text-gray-400'], + input: 'placeholder:text-gray-700', + inputWrapper: ['bg-gray-900', 'rounded-md', 'h-15'], + }} + /> +
+ {isInvalid && errorMessage ? ( + <> + +

{errorMessage}

+ + ) : ( + successMessage && ( + <> + +

{successMessage}

+ + ) + )} +
+
+ ); +}; + +export default BasicInput; diff --git a/src/types/buttons/BaseButtonProps.ts b/src/types/buttons/BaseButtonProps.ts index 49b1408..1e17489 100644 --- a/src/types/buttons/BaseButtonProps.ts +++ b/src/types/buttons/BaseButtonProps.ts @@ -1,7 +1,7 @@ import { ReactNode } from 'react'; export interface BaseButtonProps { - variant: 'primary' | 'secondary' | 'tertiaty'; + variant: 'primary' | 'secondary' | 'tertiary'; children: ReactNode; onClick?: () => void; diff --git a/tailwind.config.ts b/tailwind.config.ts index 823da95..a1fc01a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -10,7 +10,7 @@ const colors = { black: '#111111', white: '#FFFFFF', gray: { - 900: '#222222', + 900: '#1B1B1B', 800: '#2B2B2B', 700: '#616161', 600: '#757575', @@ -25,6 +25,7 @@ const colors = { subtitle: '#F5F5F5', background: { base: '#101010', + overlay: '#232225', }, }; @@ -42,12 +43,6 @@ export default { sans: ['var(--font-montserrat)'], }, colors, - spacing: { - '4.5': '18px', - '7.5': '30px', - '15': '60px', - '78.25': '313px', - }, }, screens: { mobile: '677px',