From 88d72fcabd173ce1451eb97ad69a4fc51354e969 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Thu, 16 Jan 2025 18:28:25 +0900
Subject: [PATCH 01/23] =?UTF-8?q?feat:=20=EC=9E=91=ED=92=88=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx | 5 +++++
 src/constants/routes.ts         | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 src/app/artwork/upload/page.tsx

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
new file mode 100644
index 0000000..bb95d1d
--- /dev/null
+++ b/src/app/artwork/upload/page.tsx
@@ -0,0 +1,5 @@
+const ArtworkUpload = () => {
+  return <div>ArtworkUpload</div>;
+};
+
+export default ArtworkUpload;
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 5007b5b..b8ddb09 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -3,6 +3,7 @@ const ROUTE = {
   signIn: '/auth/sign-in',
   signUp: '/auth/sign-up',
   artworkList: '/artwork/list',
+  artworkUpload: '/artwork/upload',
 };
 
 export default ROUTE;

From af560123eec10bceffd7fbfa86c5ab165ca99a05 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Thu, 16 Jan 2025 18:40:30 +0900
Subject: [PATCH 02/23] =?UTF-8?q?move:=20=EC=9E=91=ED=92=88=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20onC?=
 =?UTF-8?q?lick=20=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Navbar/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index e3de8e6..74640ff 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -101,11 +101,9 @@ const Navbar = () => {
                   <OvalButton
                     variant='primary'
                     buttonSize='s'
-                    onClick={moveToArtworkList}
+                    onClick={moveToArtworkUpload}
                   >
-                    <p className='placholder' onClick={moveToArtworkUpload}>
-                      작품 업로드
-                    </p>
+                    <p className='placholder'>작품 업로드</p>
                   </OvalButton>
                 </>
               ) : (

From 78d5471bb431ff52d1f53f7230fb6d4e853ac79f Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Thu, 16 Jan 2025 21:24:15 +0900
Subject: [PATCH 03/23] =?UTF-8?q?style:OvalButton=EC=9D=B4=20padding=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=A0=20line-height=EA=B0=80=20=EB=86=92=EC=9D=B4?=
 =?UTF-8?q?=EB=A5=BC=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EB=A5=BC=20=EC=A4=91=EC=95=99=EC=97=90=20?=
 =?UTF-8?q?=EB=B0=B0=EC=B9=98=ED=95=98=EB=8F=84=EB=A1=9D=20CSS=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

---
 src/components/Button/OvalButton.tsx | 6 ++++--
 src/components/Navbar/index.tsx      | 1 +
 src/types/buttons/OvalButtonProps.ts | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/OvalButton.tsx b/src/components/Button/OvalButton.tsx
index 58aea34..2cf9f5d 100644
--- a/src/components/Button/OvalButton.tsx
+++ b/src/components/Button/OvalButton.tsx
@@ -3,6 +3,7 @@ import { OvalButtonProps } from '@/types';
 const OvalButton = ({
   variant = 'primary',
   buttonSize,
+  className,
   children,
 
   onClick,
@@ -27,8 +28,8 @@ const OvalButton = ({
   };
 
   const buttonSizeClasses = {
-    m: 'h-[69px] px-[46px] py-[17px]',
-    s: 'h-[50px] px-[34px] py-[20px]',
+    m: 'leading-[69px]',
+    s: 'leading-[50px]',
   };
 
   return (
@@ -42,6 +43,7 @@ const OvalButton = ({
         ${hoverBgColorClasses[variant]}
         ${textColorClasses[variant]}
         ${buttonSizeClasses[buttonSize]}
+        ${className}
       `}
     >
       {buttonSize === 'm' ? (
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 74640ff..f55e47b 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -102,6 +102,7 @@ const Navbar = () => {
                     variant='primary'
                     buttonSize='s'
                     onClick={moveToArtworkUpload}
+                    className='w-[124px]'
                   >
                     <p className='placholder'>작품 업로드</p>
                   </OvalButton>
diff --git a/src/types/buttons/OvalButtonProps.ts b/src/types/buttons/OvalButtonProps.ts
index db5789f..e155510 100644
--- a/src/types/buttons/OvalButtonProps.ts
+++ b/src/types/buttons/OvalButtonProps.ts
@@ -6,4 +6,5 @@ export interface OvalButtonProps
     'disabled' | 'loading' | 'icon' | 'iconPosition' | 'type'
   > {
   buttonSize: 's' | 'm';
+  className?: string;
 }

From 9e1be90fe7aa83bcdfc8e67a5e9ec2941ef7b63e Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Thu, 16 Jan 2025 23:42:52 +0900
Subject: [PATCH 04/23] =?UTF-8?q?refactor:=20custom-label=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/globals.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 464618a..24244b6 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -51,8 +51,7 @@
   }
 
   .body2,
-  .placeholder,
-  .custom-label {
+  .placeholder {
     font-size: 1rem; /* 16px */
   }
 
@@ -72,7 +71,6 @@
     font-weight: 600; /* SemiBold */
   }
 
-  .custom-label,
   .subtitle2,
   .placeholder,
   .button-l,

From 8d6e1c932c594e64ef18504291a4d5c677303747 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 01:52:07 +0900
Subject: [PATCH 05/23] =?UTF-8?q?style:=20FilterDropdown=EC=9D=98=20width?=
 =?UTF-8?q?=EB=A5=BC=20className=EC=9C=BC=EB=A1=9C=20=EB=B0=9B=EC=95=84?=
 =?UTF-8?q?=EC=84=9C=20=EC=B2=98=EB=A6=AC=EB=90=A0=20=EC=88=98=20=EC=9E=88?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ArtworkPage/ArtworkFilter.tsx |  1 +
 src/components/FilterDropdown/index.tsx      | 34 ++++++++++++++++----
 src/components/Navbar/index.tsx              |  1 -
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/ArtworkPage/ArtworkFilter.tsx b/src/components/ArtworkPage/ArtworkFilter.tsx
index fd383b4..ca9e67e 100644
--- a/src/components/ArtworkPage/ArtworkFilter.tsx
+++ b/src/components/ArtworkPage/ArtworkFilter.tsx
@@ -77,6 +77,7 @@ const ArtworkFilter = ({
           options={FILTER_OPTIONS}
           selected={selectedFilter}
           onChange={handleFilterChange}
+          className='w-[149px]'
         />
       </div>
     </>
diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index b555b95..9d88a8a 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -10,12 +10,19 @@ interface FilterDropdownProps {
   options: string[];
   selected: string;
   onChange: (value: string) => void;
+
+  label?: string;
+  placeholder?: string;
+  className?: string;
 }
 
 const FilterDropdown = ({
   options,
   selected,
   onChange,
+  label,
+  placeholder,
+  className,
 }: FilterDropdownProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
@@ -29,16 +36,29 @@ const FilterDropdown = ({
   };
 
   return (
-    <div className='body2 relative inline-block text-left' ref={dropdownRef}>
+    <div
+      className={`body2 relative inline-block text-left ${className}`}
+      ref={dropdownRef}
+    >
+      {label && (
+        <label className='placeholder block pb-[7px] text-gray-400'>
+          {label}
+        </label>
+      )}
+
       <button
         onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-        aria-label={`Currently selected filter: ${selected}`}
+        aria-label={`Currently selected filter: ${selected || placeholder}`}
         aria-expanded={isDropdownOpen}
-        className='flex items-center justify-between w-[149px] h-[44px] px-[23px] py-[10px]
+        className={`flex items-center justify-between px-[20px] leading-[60px]
         text-white bg-gray-900 rounded-[5px] gap-[36px] shadow-sm
-        hover:bg-gray-800 focus:outline-none'
+        hover:bg-gray-800 focus:outline-none
+        ${className}
+        `}
       >
-        {selected}
+        {selected || (
+          <span className='placeholder text-gray-700'>{placeholder}</span>
+        )}
         <span className='text-gray-700'>
           {isDropdownOpen ? (
             <Icon name='Dropup' size='m' />
@@ -50,7 +70,7 @@ const FilterDropdown = ({
 
       {isDropdownOpen && (
         <div
-          className='absolute z-10 w-full mt-3 bg-gray-900 rounded-[5px] shadow-lg'
+          className={`absolute z-10 mt-3 bg-gray-900 rounded-[5px] shadow-lg ${className}`}
           role='menu'
         >
           <ul className='py-1'>
@@ -59,7 +79,7 @@ const FilterDropdown = ({
                 key={index}
                 onClick={() => handleOptionSelect(option)}
                 aria-current={option === selected ? 'true' : undefined}
-                className={`block w-[149px] h-[44px] px-[23px] py-[10px]
+                className={`block px-[23px] leading-[60px]
                   text-gray-400 cursor-pointer
                   ${option === selected && isDropdownOpen ? 'text-white' : 'text-gray-400'}
                   hover:bg-background-overlay`}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index f55e47b..74640ff 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -102,7 +102,6 @@ const Navbar = () => {
                     variant='primary'
                     buttonSize='s'
                     onClick={moveToArtworkUpload}
-                    className='w-[124px]'
                   >
                     <p className='placholder'>작품 업로드</p>
                   </OvalButton>

From 61e6168ba936f6de338885d2bdba760a7e1bcc41 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 01:53:52 +0900
Subject: [PATCH 06/23] =?UTF-8?q?refactor:=20custom-label=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=EC=9D=B4=20=EC=A0=81=EC=9A=A9=EB=90=90?=
 =?UTF-8?q?=EB=8D=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20pla?=
 =?UTF-8?q?ceholder=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/EmailInput.tsx    | 2 +-
 src/components/Input/NicknameInput.tsx | 2 +-
 src/components/Input/PasswordInput.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Input/EmailInput.tsx b/src/components/Input/EmailInput.tsx
index f3822d3..0d368b1 100644
--- a/src/components/Input/EmailInput.tsx
+++ b/src/components/Input/EmailInput.tsx
@@ -45,7 +45,7 @@ const EmailInput = ({ mode }: EmailInputProps) => {
         placeholder='이메일을 입력해주세요.'
         isInvalid={false}
         classNames={{
-          label: 'custom-label',
+          label: 'placeholder',
           input: 'placeholder:text-gray-700',
           inputWrapper: ['bg-gray-900', 'rounded-md'],
         }}
diff --git a/src/components/Input/NicknameInput.tsx b/src/components/Input/NicknameInput.tsx
index 813f59c..9fac990 100644
--- a/src/components/Input/NicknameInput.tsx
+++ b/src/components/Input/NicknameInput.tsx
@@ -48,7 +48,7 @@ const NicknameInput = () => {
         placeholder='닉네임을 입력해주세요.'
         maxLength={MAX_NICKNAME_LENGTH}
         classNames={{
-          label: 'custom-label',
+          label: 'placeholder',
           input: 'placeholder:text-gray-700',
           inputWrapper: ['bg-gray-900', 'rounded-md'],
         }}
diff --git a/src/components/Input/PasswordInput.tsx b/src/components/Input/PasswordInput.tsx
index 868af71..1cf5c21 100644
--- a/src/components/Input/PasswordInput.tsx
+++ b/src/components/Input/PasswordInput.tsx
@@ -45,7 +45,7 @@ const PasswordInput = ({ mode }: PasswordnputProps) => {
         labelPlacement='outside'
         placeholder='비밀번호를 입력해주세요.'
         classNames={{
-          label: 'custom-label',
+          label: 'placeholder',
           input: 'placeholder:text-gray-700',
           inputWrapper: ['bg-gray-900', 'rounded-md'],
         }}

From 30b9f808cc95275539c684c0c1895906a5c7ed57 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 01:55:19 +0900
Subject: [PATCH 07/23] =?UTF-8?q?style:=20OvalButton=EC=9D=98=20padding=20?=
 =?UTF-8?q?CSS=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/OvalButton.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Button/OvalButton.tsx b/src/components/Button/OvalButton.tsx
index 2cf9f5d..52202d1 100644
--- a/src/components/Button/OvalButton.tsx
+++ b/src/components/Button/OvalButton.tsx
@@ -3,10 +3,10 @@ import { OvalButtonProps } from '@/types';
 const OvalButton = ({
   variant = 'primary',
   buttonSize,
-  className,
   children,
-
   onClick,
+
+  className,
   ariaLabel,
 }: OvalButtonProps) => {
   const bgColorClasses = {
@@ -28,8 +28,8 @@ const OvalButton = ({
   };
 
   const buttonSizeClasses = {
-    m: 'leading-[69px]',
-    s: 'leading-[50px]',
+    m: 'px-[46px] leading-[69px]',
+    s: 'px-[20px] leading-[50px]',
   };
 
   return (
@@ -38,7 +38,7 @@ const OvalButton = ({
       aria-label={ariaLabel}
       className={`
         flex items-center justify-center rounded-full gap-[10px]
-        transition-all duration-300 ease-in-out active:scale-95 w-full
+        transition-all duration-300 ease-in-out active:scale-95
         ${bgColorClasses[variant]}
         ${hoverBgColorClasses[variant]}
         ${textColorClasses[variant]}

From e3bd74cfe8002e7d70c4e7d932cbacd2bea297f2 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 01:58:42 +0900
Subject: [PATCH 08/23] =?UTF-8?q?style:=20BasicInput=20CSS=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

---
 src/components/Input/BasicInput.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index f81f424..a173381 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -74,6 +74,7 @@ const BasicInput = ({
                 aria-label='toggle password visibility'
                 onClick={togglePasswordVisibility}
                 disabled={value === ''}
+                className='px-[10px]'
               >
                 <Icon
                   name={isPasswordVisible ? 'Eye' : 'EyeOff'}
@@ -84,7 +85,7 @@ const BasicInput = ({
             )}
 
             {showTextLength && maxLength && (
-              <div className='flex items-center'>
+              <div className='flex items-center px-[10px]'>
                 <span className={`placeholder ${textLengthColor}`}>
                   {currentTextLength}
                 </span>
@@ -94,9 +95,9 @@ const BasicInput = ({
           </>
         }
         classNames={{
-          label: ['custom-label', 'top-5', '!text-gray-400'],
-          input: 'placeholder:text-gray-700',
-          inputWrapper: ['bg-gray-900', 'rounded-md', 'h-15'],
+          label: ['!placeholder', '!top-5', '!text-gray-400'],
+          input: ['!placeholder', 'text-gray-700', 'px-[10px]'],
+          inputWrapper: ['bg-gray-900', 'rounded-md', 'h-15', 'leading-[60px]'],
         }}
       />
       <div className='flex items-center mt-[3px] h-[26px]'>

From 007f2acf288282d93d6cc2199f75f73e70c9e9d2 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 03:06:04 +0900
Subject: [PATCH 09/23] =?UTF-8?q?feat:=20BasicInput=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=EC=9D=B4=20textarea=EC=9D=BC=20=EA=B2=BD=EC=9A=B0,=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=ED=95=84=EB=93=9C=EC=9D=98=20=EB=86=92=EC=9D=B4?=
 =?UTF-8?q?=EA=B0=80=20=EC=9E=85=EB=A0=A5=ED=95=9C=20=EB=82=B4=EC=9A=A9?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=9E=90=EB=8F=99=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=ED=99=95=EC=9E=A5=EB=90=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/BasicInput.tsx | 142 +++++++++++++++++++---------
 1 file changed, 96 insertions(+), 46 deletions(-)

diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index a173381..e4d3d7e 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Input } from '@nextui-org/react';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 
 import Icon from '../Icon/Icon';
 
@@ -11,7 +11,7 @@ interface BasicInputProps {
   placeholder?: string;
 
   value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 
   showClear?: boolean;
   onClear?: () => void;
@@ -41,6 +41,7 @@ const BasicInput = ({
   successMessage,
 }: BasicInputProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   const togglePasswordVisibility = () =>
     setIsPasswordVisible(!isPasswordVisible);
@@ -53,53 +54,102 @@ const BasicInput = ({
         ? 'text-system-error'
         : 'text-white';
 
+  const handleInputChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    onChange(e);
+    if (type === 'textarea' && textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  };
+
   return (
     <div>
-      <Input
-        type={showEyeIcon && isPasswordVisible ? 'text' : type || 'text'}
-        label={label}
-        labelPlacement='outside'
-        placeholder={placeholder}
-        value={value}
-        onChange={onChange}
-        onClear={showClear ? onClear : undefined}
-        isInvalid={false}
-        minLength={minLength}
-        maxLength={maxLength}
-        endContent={
-          <>
-            {showEyeIcon && (
-              <button
-                type='button'
-                aria-label='toggle password visibility'
-                onClick={togglePasswordVisibility}
-                disabled={value === ''}
-                className='px-[10px]'
-              >
-                <Icon
-                  name={isPasswordVisible ? 'Eye' : 'EyeOff'}
-                  size='m'
-                  className={`text-gray-200 ${value === '' ? 'text-gray-800' : ''}`}
-                />
-              </button>
-            )}
+      {type === 'textarea' ? (
+        <>
+          <label className='placeholder block pb-[7px] text-gray-400'>
+            {label}
+          </label>
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
+              ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
+              ${isInvalid ? 'border border-system-error' : 'border border-transparent'} 
+              focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
+              `}
+            style={{
+              minHeight: '256px',
+              padding: '20px',
+            }}
+          />
+          {showTextLength && maxLength && (
+            <div className='flex justify-end items-center px-[10px]'>
+              <span className={`placeholder ${textLengthColor}`}>
+                {currentTextLength}
+              </span>
+              <span className='placeholder text-gray-700'>/{maxLength}</span>
+            </div>
+          )}
+        </>
+      ) : (
+        <Input
+          type={showEyeIcon && isPasswordVisible ? 'text' : type || 'text'}
+          label={label}
+          labelPlacement='outside'
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onClear={showClear ? onClear : undefined}
+          isInvalid={false}
+          minLength={minLength}
+          maxLength={maxLength}
+          endContent={
+            <>
+              {showEyeIcon && (
+                <button
+                  type='button'
+                  aria-label='toggle password visibility'
+                  onClick={togglePasswordVisibility}
+                  disabled={value === ''}
+                  className='px-[10px]'
+                >
+                  <Icon
+                    name={isPasswordVisible ? 'Eye' : 'EyeOff'}
+                    size='m'
+                    className={`text-gray-200 ${value === '' ? 'text-gray-800' : ''}`}
+                  />
+                </button>
+              )}
 
-            {showTextLength && maxLength && (
-              <div className='flex items-center px-[10px]'>
-                <span className={`placeholder ${textLengthColor}`}>
-                  {currentTextLength}
-                </span>
-                <span className='placeholder text-gray-700'>/{maxLength}</span>
-              </div>
-            )}
-          </>
-        }
-        classNames={{
-          label: ['!placeholder', '!top-5', '!text-gray-400'],
-          input: ['!placeholder', 'text-gray-700', 'px-[10px]'],
-          inputWrapper: ['bg-gray-900', 'rounded-md', 'h-15', 'leading-[60px]'],
-        }}
-      />
+              {showTextLength && maxLength && (
+                <div className='flex items-center px-[10px]'>
+                  <span className={`placeholder ${textLengthColor}`}>
+                    {currentTextLength}
+                  </span>
+                  <span className='placeholder text-gray-700'>
+                    /{maxLength}
+                  </span>
+                </div>
+              )}
+            </>
+          }
+          classNames={{
+            label: ['!placeholder', '!top-5', '!text-gray-400'],
+            input: ['!placeholder', 'placeholder:text-gray-700', 'px-[10px]'],
+            inputWrapper: [
+              'bg-gray-900',
+              'rounded-md',
+              'h-15',
+              'leading-[60px]',
+            ],
+          }}
+        />
+      )}
       <div className='flex items-center mt-[3px] h-[26px]'>
         {isInvalid && errorMessage ? (
           <>

From a3be4207a806cf156078af7ebd2c0fb631f75a22 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 03:17:30 +0900
Subject: [PATCH 10/23] =?UTF-8?q?style:=20textarea=20=EB=82=B4=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EA=B8=B8=EC=9D=B4?=
 =?UTF-8?q?=EA=B0=80=20=EB=B3=B4=EC=9D=B4=EB=8F=84=EB=A1=9D=20CSS=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/BasicInput.tsx | 50 +++++++++++++++--------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index e4d3d7e..6199a81 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -71,30 +71,32 @@ const BasicInput = ({
           <label className='placeholder block pb-[7px] text-gray-400'>
             {label}
           </label>
-          <textarea
-            ref={textareaRef}
-            value={value}
-            onChange={handleInputChange}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
-              ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
-              ${isInvalid ? 'border border-system-error' : 'border border-transparent'} 
-              focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
-              `}
-            style={{
-              minHeight: '256px',
-              padding: '20px',
-            }}
-          />
-          {showTextLength && maxLength && (
-            <div className='flex justify-end items-center px-[10px]'>
-              <span className={`placeholder ${textLengthColor}`}>
-                {currentTextLength}
-              </span>
-              <span className='placeholder text-gray-700'>/{maxLength}</span>
-            </div>
-          )}
+          <div className='relative w-full h-auto'>
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={handleInputChange}
+              placeholder={placeholder}
+              maxLength={maxLength}
+              className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
+      ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
+      ${isInvalid ? 'border border-system-error' : 'border border-transparent'} 
+      focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
+    `}
+              style={{
+                minHeight: '256px',
+                padding: '20px',
+              }}
+            />
+            {showTextLength && maxLength && (
+              <div className='absolute bottom-[20px] right-[20px]'>
+                <span className={`placeholder ${textLengthColor}`}>
+                  {currentTextLength}
+                </span>
+                <span className='placeholder text-gray-700'>/{maxLength}</span>
+              </div>
+            )}
+          </div>
         </>
       ) : (
         <Input

From 6362f98ba7c7570510e95ff8ca02462f1fc896c8 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 03:41:46 +0900
Subject: [PATCH 11/23] =?UTF-8?q?style:=20=EC=9E=91=ED=92=88=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx      | 161 ++++++++++++++++++++++++++-
 src/components/Button/OvalButton.tsx |   2 +-
 2 files changed, 161 insertions(+), 2 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index bb95d1d..6cd4bde 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -1,5 +1,164 @@
+'use client';
+
+import { useState } from 'react';
+
+import OvalButton from '@/components/Button/OvalButton';
+import FilterDropdown from '@/components/FilterDropdown';
+import Icon from '@/components/Icon/Icon';
+import BasicInput from '@/components/Input/BasicInput';
+
+const MAX_TITLE_LENGTH = 50;
+const MAX_DESCRIPTION_LENGTH = 1000;
+
+const PRIVACY_SETTING_OPTIONS = [
+  {
+    name: '전체공개',
+    value: 'PUBLIC',
+  },
+  {
+    name: '비공개',
+    value: 'PRIVATE',
+  },
+];
+
+const ARTWORK_FIELDS = [
+  { name: '전체', value: 'ALL' },
+  { name: '회화', value: 'PAINTING' },
+  { name: '공예/조각', value: 'CRAFTSCULPTURE' },
+  { name: '드로잉', value: 'DRAWING' },
+  { name: '판화', value: 'PRINTMAKING' },
+  { name: '서예', value: 'CALLIGRAPHY' },
+  { name: '일러스트', value: 'ILLUSTRATION' },
+  { name: '디지털아트', value: 'DIGITALART' },
+  { name: '사진', value: 'PHOTOGRAPHY' },
+  { name: '기타', value: 'OTHERS' },
+];
+
+interface ArtworkFilterProps {
+  selectedArtworkField: string;
+  setSelectedArtworkField: (value: string | ((prev: string) => string)) => void;
+  selectedFilter: string;
+  setSelectedFilter: (value: string | ((prev: string) => string)) => void;
+  setCurrentPage: (value: number | ((prev: number) => number)) => void;
+}
+
+interface ArtworkField {
+  name: string;
+  value: string;
+}
+
 const ArtworkUpload = () => {
-  return <div>ArtworkUpload</div>;
+  const [artworkTitle, setArtworkTitle] = useState('');
+  const [selectedArtworkField, setSelectedArtworkField] = useState('');
+  const [privacySetting, setPrivacySetting] = useState<'public' | 'private'>(
+    'public',
+  );
+  const [artworkDescription, setArtworkDescription] = useState('');
+
+  const handleArtworkTitleOnChange = (e: any) => {
+    setArtworkTitle(e.target.value);
+  };
+
+  const selectedArtworkFieldName =
+    ARTWORK_FIELDS.find((field) => field.value === selectedArtworkField)
+      ?.name || '전체';
+
+  const handleArtworkFieldClick = (artworkField: string) => {
+    setSelectedArtworkField(artworkField);
+  };
+
+  const handlePrivacySettingChange = (
+    newPrivacySetting: 'public' | 'private',
+  ) => {
+    setPrivacySetting(newPrivacySetting);
+  };
+
+  const handlertworkDescriptionOnChange = (e: any) => {
+    setArtworkDescription(e.target.value);
+  };
+
+  return (
+    <div className='max-w-[1920px] m-auto px-[36px] lg:px-[140px]'>
+      <h1 className='py-[70px]'>작품 업로드</h1>
+      <div className='pb-[40px]'>
+        <BasicInput
+          type='text'
+          label='작품 제목'
+          placeholder='작품 제목을 입력하세요.'
+          value={artworkTitle}
+          onChange={handleArtworkTitleOnChange}
+          showTextLength={true}
+          maxLength={MAX_TITLE_LENGTH}
+          // isInvalid={!!errors.artworkTitle}
+          // errorMessage={errors.artworkTitle?.message as string}
+        />
+      </div>
+      <div className='flex items-start self-stretch gap-[50px] pb-[78px]'>
+        <FilterDropdown
+          label='작품 카테고리'
+          placeholder='카테고리 선택'
+          options={ARTWORK_FIELDS}
+          selected={selectedArtworkField}
+          onClick={() => handleArtworkFieldClick(artworkField.value)}
+          className='w-full'
+        />
+        <FilterDropdown
+          label='공개범위'
+          options={PRIVACY_SETTING_OPTIONS}
+          selected={privacySetting}
+          onChange={() => handlePrivacySettingChange(privacySetting)}
+          className='w-full'
+        />
+      </div>
+      <div className='relative'>
+        <div
+          className='flex flex-col justify-center items-center gap-[15px] p-[140px] h-[853px]'
+          style={{
+            border: '2px dashed transparent',
+            borderImage:
+              'repeating-linear-gradient(45deg, gray 0, gray 10px, transparent 10px, transparent 20px) 1',
+          }}
+        >
+          <p className='body2 text-center text-gray-500 self-stretch'>
+            첨부할 작품 이미지를 끌어오거나,
+            <br />
+            작품 업로드 버튼을 눌러 이미지를 선택하세요.
+          </p>
+          <OvalButton variant='primary' buttonSize='s'>
+            <Icon name='UploadShare' size='m' className='mr-2.5' />
+            작품 업로드
+          </OvalButton>
+          <p className='button-s text-center text-gray-500'>
+            작품 이미지는 1장만 업로드 가능합니다.
+          </p>
+        </div>
+      </div>
+
+      <div className='py-[70px]'>
+        <BasicInput
+          type='textarea'
+          label='작품 설명'
+          placeholder='작품 설명을 입력하세요.'
+          value={artworkDescription}
+          onChange={handlertworkDescriptionOnChange}
+          showTextLength={true}
+          maxLength={MAX_DESCRIPTION_LENGTH}
+        />
+        <div className='pt-[30px] flex justify-end items-center gap-[20px]'>
+          <button
+            className='button-s text-gray-300 flex items-center justify-center rounded-full
+            gap-[10px] px-[28px] leading-[50px]
+            transition-all duration-300 ease-in-out active:scale-95'
+          >
+            취소
+          </button>
+          <OvalButton variant='primary' buttonSize='s'>
+            업로드
+          </OvalButton>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default ArtworkUpload;
diff --git a/src/components/Button/OvalButton.tsx b/src/components/Button/OvalButton.tsx
index 52202d1..b4f271f 100644
--- a/src/components/Button/OvalButton.tsx
+++ b/src/components/Button/OvalButton.tsx
@@ -29,7 +29,7 @@ const OvalButton = ({
 
   const buttonSizeClasses = {
     m: 'px-[46px] leading-[69px]',
-    s: 'px-[20px] leading-[50px]',
+    s: 'px-[28px] leading-[50px]',
   };
 
   return (

From 146466b65ffc8ce6c9c085181073d055a0e77ad3 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 04:41:56 +0900
Subject: [PATCH 12/23] =?UTF-8?q?style:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B2=84=ED=8A=BC=20=EB=B0=8F=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx     | 62 +++++++++++++++++------------
 src/components/Input/BasicInput.tsx |  8 ++--
 2 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index 6cd4bde..7da9b3c 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -78,9 +78,9 @@ const ArtworkUpload = () => {
   };
 
   return (
-    <div className='max-w-[1920px] m-auto px-[36px] lg:px-[140px]'>
-      <h1 className='py-[70px]'>작품 업로드</h1>
-      <div className='pb-[40px]'>
+    <div className='max-w-[1920px] m-auto px-[36px] py-[70px] lg:px-[140px]'>
+      <h1>작품 업로드</h1>
+      <div className='pt-[70px] pb-[30px] md:pb-[40px]'>
         <BasicInput
           type='text'
           label='작품 제목'
@@ -93,7 +93,7 @@ const ArtworkUpload = () => {
           // errorMessage={errors.artworkTitle?.message as string}
         />
       </div>
-      <div className='flex items-start self-stretch gap-[50px] pb-[78px]'>
+      <div className='flex flex-col md:flex-row items-start self-stretch gap-[38px] md:gap-[50px] pb-[78px]'>
         <FilterDropdown
           label='작품 카테고리'
           placeholder='카테고리 선택'
@@ -110,9 +110,10 @@ const ArtworkUpload = () => {
           className='w-full'
         />
       </div>
-      <div className='relative'>
+
+      <div className='relative pb-[70px]'>
         <div
-          className='flex flex-col justify-center items-center gap-[15px] p-[140px] h-[853px]'
+          className='flex flex-col justify-center items-center gap-[15px] p-[140px] h-[511px] md:h-[853px]'
           style={{
             border: '2px dashed transparent',
             borderImage:
@@ -131,32 +132,41 @@ const ArtworkUpload = () => {
           <p className='button-s text-center text-gray-500'>
             작품 이미지는 1장만 업로드 가능합니다.
           </p>
-        </div>
-      </div>
 
-      <div className='py-[70px]'>
-        <BasicInput
-          type='textarea'
-          label='작품 설명'
-          placeholder='작품 설명을 입력하세요.'
-          value={artworkDescription}
-          onChange={handlertworkDescriptionOnChange}
-          showTextLength={true}
-          maxLength={MAX_DESCRIPTION_LENGTH}
-        />
-        <div className='pt-[30px] flex justify-end items-center gap-[20px]'>
           <button
-            className='button-s text-gray-300 flex items-center justify-center rounded-full
-            gap-[10px] px-[28px] leading-[50px]
-            transition-all duration-300 ease-in-out active:scale-95'
+            aria-label='Button to change artwork image'
+            className='flex justify-center items-center w-[57px] h-[57px] md:w-[77px] md:h-[77px]
+            absolute right-[30px] bottom-[30px] rounded-full
+            bg-[rgba(35,34,37,0.5)] backdrop-blur-[12px]
+            shadow-lg hover:bg-[rgba(35,34,37,0.7)] transition'
           >
-            취소
+            <Icon name='Image' size='m' className='block md:hidden' />
+            <Icon name='Image' size='l' className='hidden md:block' />
           </button>
-          <OvalButton variant='primary' buttonSize='s'>
-            업로드
-          </OvalButton>
         </div>
       </div>
+
+      <BasicInput
+        type='textarea'
+        label='작품 설명'
+        placeholder='작품 설명을 입력하세요.'
+        value={artworkDescription}
+        onChange={handlertworkDescriptionOnChange}
+        showTextLength={true}
+        maxLength={MAX_DESCRIPTION_LENGTH}
+      />
+      <div className='pt-[30px] flex justify-end items-center gap-[20px]'>
+        <button
+          className='button-s text-gray-300 flex items-center justify-center rounded-full
+            gap-[10px] px-[28px] leading-[50px]
+            transition-all duration-300 ease-in-out active:scale-95 hover:opacity-70'
+        >
+          취소
+        </button>
+        <OvalButton variant='primary' buttonSize='s'>
+          업로드
+        </OvalButton>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index 6199a81..04a1163 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -79,10 +79,10 @@ const BasicInput = ({
               placeholder={placeholder}
               maxLength={maxLength}
               className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
-      ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
-      ${isInvalid ? 'border border-system-error' : 'border border-transparent'} 
-      focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
-    `}
+                ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
+                ${isInvalid ? 'border border-system-error' : 'border border-transparent'}
+                focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
+                `}
               style={{
                 minHeight: '256px',
                 padding: '20px',

From 1ec3ceafb44cdeaa801ec184c5056294215b01a7 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 05:39:44 +0900
Subject: [PATCH 13/23] =?UTF-8?q?feat:=20OvalButton=EC=97=90=20disabled=20?=
 =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/OvalButton.tsx | 2 ++
 src/types/buttons/OvalButtonProps.ts | 5 +----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Button/OvalButton.tsx b/src/components/Button/OvalButton.tsx
index b4f271f..2b0976c 100644
--- a/src/components/Button/OvalButton.tsx
+++ b/src/components/Button/OvalButton.tsx
@@ -7,6 +7,7 @@ const OvalButton = ({
   onClick,
 
   className,
+  disabled,
   ariaLabel,
 }: OvalButtonProps) => {
   const bgColorClasses = {
@@ -35,6 +36,7 @@ const OvalButton = ({
   return (
     <button
       onClick={onClick}
+      disabled={disabled}
       aria-label={ariaLabel}
       className={`
         flex items-center justify-center rounded-full gap-[10px]
diff --git a/src/types/buttons/OvalButtonProps.ts b/src/types/buttons/OvalButtonProps.ts
index e155510..57c3f0b 100644
--- a/src/types/buttons/OvalButtonProps.ts
+++ b/src/types/buttons/OvalButtonProps.ts
@@ -1,10 +1,7 @@
 import { BaseButtonProps } from './BaseButtonProps';
 
 export interface OvalButtonProps
-  extends Omit<
-    BaseButtonProps,
-    'disabled' | 'loading' | 'icon' | 'iconPosition' | 'type'
-  > {
+  extends Omit<BaseButtonProps, 'loading' | 'icon' | 'iconPosition' | 'type'> {
   buttonSize: 's' | 'm';
   className?: string;
 }

From eb4034940feb6ea97611eef5941ebec049ad0b1b Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 06:36:23 +0900
Subject: [PATCH 14/23] =?UTF-8?q?feat:=20FilterDropdown=EC=97=90=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 17 +++++++++++++++++
 src/components/Input/BasicInput.tsx     |  1 -
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index 9d88a8a..21e8331 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -13,6 +13,8 @@ interface FilterDropdownProps {
 
   label?: string;
   placeholder?: string;
+  isInvalid?: boolean;
+  errorMessage?: string;
   className?: string;
 }
 
@@ -22,6 +24,8 @@ const FilterDropdown = ({
   onChange,
   label,
   placeholder,
+  isInvalid = false,
+  errorMessage,
   className,
 }: FilterDropdownProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -90,6 +94,19 @@ const FilterDropdown = ({
           </ul>
         </div>
       )}
+
+      <div className='flex items-center mt-[3px] h-[26px]'>
+        {isInvalid && errorMessage && (
+          <>
+            <Icon
+              name='CheckCircleFilled'
+              size='s'
+              className='text-system-error mr-2'
+            />
+            <p className='button-s text-system-error'>{errorMessage}</p>
+          </>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index 04a1163..73485a8 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -80,7 +80,6 @@ const BasicInput = ({
               maxLength={maxLength}
               className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
                 ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
-                ${isInvalid ? 'border border-system-error' : 'border border-transparent'}
                 focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
                 `}
               style={{

From cdd38a2600e4f487a36718a2051d79ee8202745b Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 07:05:46 +0900
Subject: [PATCH 15/23] =?UTF-8?q?style:=20=EC=9E=98=EB=AA=BB=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95=EB=90=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=98=AC?=
 =?UTF-8?q?=EB=B0=94=EB=A5=B4=EA=B2=8C=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 2 +-
 src/components/Input/BasicInput.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index 21e8331..9138684 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -99,7 +99,7 @@ const FilterDropdown = ({
         {isInvalid && errorMessage && (
           <>
             <Icon
-              name='CheckCircleFilled'
+              name='AlertCircle'
               size='s'
               className='text-system-error mr-2'
             />
diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index 73485a8..d2c2ae6 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -155,7 +155,7 @@ const BasicInput = ({
         {isInvalid && errorMessage ? (
           <>
             <Icon
-              name='CheckCircleFilled'
+              name='AlertCircle'
               size='s'
               className='text-system-error mr-2'
             />
@@ -165,7 +165,7 @@ const BasicInput = ({
           successMessage && (
             <>
               <Icon
-                name='AlertCircle'
+                name='CheckCircleFilled'
                 size='s'
                 className='text-gray-400 mr-2'
               />

From 2722009cc6e171e3e9ad7b88ae6b5d9b79b934fe Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 07:12:36 +0900
Subject: [PATCH 16/23] =?UTF-8?q?feat:=20=ED=95=84=EC=88=98=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=EC=9D=98=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx | 173 ++++++++++++++++++++++++--------
 1 file changed, 132 insertions(+), 41 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index 7da9b3c..9431ba5 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -1,28 +1,26 @@
 'use client';
 
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 import OvalButton from '@/components/Button/OvalButton';
 import FilterDropdown from '@/components/FilterDropdown';
 import Icon from '@/components/Icon/Icon';
 import BasicInput from '@/components/Input/BasicInput';
 
+interface ArtworkField {
+  name: string;
+  value: string;
+}
+
 const MAX_TITLE_LENGTH = 50;
 const MAX_DESCRIPTION_LENGTH = 1000;
 
 const PRIVACY_SETTING_OPTIONS = [
-  {
-    name: '전체공개',
-    value: 'PUBLIC',
-  },
-  {
-    name: '비공개',
-    value: 'PRIVATE',
-  },
+  { name: '전체공개', value: 'PUBLIC' },
+  { name: '비공개', value: 'PRIVATE' },
 ];
 
-const ARTWORK_FIELDS = [
-  { name: '전체', value: 'ALL' },
+const ARTWORK_FIELDS: ArtworkField[] = [
   { name: '회화', value: 'PAINTING' },
   { name: '공예/조각', value: 'CRAFTSCULPTURE' },
   { name: '드로잉', value: 'DRAWING' },
@@ -34,47 +32,105 @@ const ARTWORK_FIELDS = [
   { name: '기타', value: 'OTHERS' },
 ];
 
-interface ArtworkFilterProps {
-  selectedArtworkField: string;
-  setSelectedArtworkField: (value: string | ((prev: string) => string)) => void;
-  selectedFilter: string;
-  setSelectedFilter: (value: string | ((prev: string) => string)) => void;
-  setCurrentPage: (value: number | ((prev: number) => number)) => void;
-}
-
-interface ArtworkField {
-  name: string;
-  value: string;
-}
-
 const ArtworkUpload = () => {
   const [artworkTitle, setArtworkTitle] = useState('');
   const [selectedArtworkField, setSelectedArtworkField] = useState('');
-  const [privacySetting, setPrivacySetting] = useState<'public' | 'private'>(
-    'public',
+  const [privacySetting, setPrivacySetting] = useState<'전체공개' | '비공개'>(
+    '전체공개',
   );
+  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
   const [artworkDescription, setArtworkDescription] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<{
+    artworkTitle?: string;
+    selectedArtworkField?: string;
+    uploadedImage?: string;
+  }>({
+    artworkTitle: '',
+    selectedArtworkField: '',
+    uploadedImage: '',
+  });
 
-  const handleArtworkTitleOnChange = (e: any) => {
+  const handleArtworkTitleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
     setArtworkTitle(e.target.value);
+
+    if (errors.artworkTitle) {
+      setErrors((prevErrors) => ({ ...prevErrors, artworkTitle: '' }));
+    }
   };
 
-  const selectedArtworkFieldName =
-    ARTWORK_FIELDS.find((field) => field.value === selectedArtworkField)
-      ?.name || '전체';
+  const handlertworkDescriptionOnChange = (
+    e: ChangeEvent<HTMLInputElement>,
+  ) => {
+    setArtworkDescription(e.target.value);
+  };
 
   const handleArtworkFieldClick = (artworkField: string) => {
     setSelectedArtworkField(artworkField);
+
+    if (!artworkTitle.trim()) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        artworkTitle: '필수 항목입니다.',
+      }));
+    } else {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        artworkTitle: '',
+      }));
+    }
+
+    if (errors.selectedArtworkField) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        selectedArtworkField: '',
+      }));
+    }
   };
 
   const handlePrivacySettingChange = (
-    newPrivacySetting: 'public' | 'private',
+    newPrivacySetting: '전체공개' | '비공개',
   ) => {
     setPrivacySetting(newPrivacySetting);
   };
 
-  const handlertworkDescriptionOnChange = (e: any) => {
-    setArtworkDescription(e.target.value);
+  const handleImageUpload = () => {
+    // TODO: 실제 이미지 업로드 로직 구현
+    setUploadedImage('uploaded-image-url'); // 테스트용
+
+    if (errors.uploadedImage) {
+      setErrors((prevErrors) => ({ ...prevErrors, uploadedImage: '' }));
+    }
+  };
+
+  const validateArtworkUploadForm = () => {
+    const newErrors: {
+      artworkTitle?: string;
+      selectedArtworkField?: string;
+      uploadedImage?: string;
+    } = {};
+
+    if (!artworkTitle.trim()) newErrors.artworkTitle = '필수 항목입니다.';
+    if (!selectedArtworkField.trim())
+      newErrors.selectedArtworkField = '필수 항목입니다.';
+    if (!uploadedImage) newErrors.uploadedImage = '이미지를 업로드해주세요.';
+    setErrors(newErrors);
+
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const isFormValid =
+    artworkTitle && selectedArtworkField && uploadedImage && !isSubmitting;
+
+  const handleArtworkUpload = () => {
+    if (!validateArtworkUploadForm()) return;
+    setIsSubmitting(true);
+
+    // TODO: 업로드 성공 시, 작성한 글 상세 페이지로 이동
+    // [테스트용] 업로드 처리 (API 호출)
+    setTimeout(() => {
+      console.log('업로드 완료');
+    }, 2000);
   };
 
   return (
@@ -89,22 +145,25 @@ const ArtworkUpload = () => {
           onChange={handleArtworkTitleOnChange}
           showTextLength={true}
           maxLength={MAX_TITLE_LENGTH}
-          // isInvalid={!!errors.artworkTitle}
-          // errorMessage={errors.artworkTitle?.message as string}
+          isInvalid={!!errors.artworkTitle}
+          errorMessage={errors.artworkTitle}
         />
       </div>
       <div className='flex flex-col md:flex-row items-start self-stretch gap-[38px] md:gap-[50px] pb-[78px]'>
         <FilterDropdown
           label='작품 카테고리'
           placeholder='카테고리 선택'
-          options={ARTWORK_FIELDS}
+          options={ARTWORK_FIELDS.map((field) => field.name)}
           selected={selectedArtworkField}
-          onClick={() => handleArtworkFieldClick(artworkField.value)}
+          onChange={(value) => handleArtworkFieldClick(value)}
+          isInvalid={!!errors.selectedArtworkField}
+          errorMessage={errors.selectedArtworkField}
           className='w-full'
         />
+
         <FilterDropdown
           label='공개범위'
-          options={PRIVACY_SETTING_OPTIONS}
+          options={PRIVACY_SETTING_OPTIONS.map((option) => option.name)}
           selected={privacySetting}
           onChange={() => handlePrivacySettingChange(privacySetting)}
           className='w-full'
@@ -125,14 +184,39 @@ const ArtworkUpload = () => {
             <br />
             작품 업로드 버튼을 눌러 이미지를 선택하세요.
           </p>
-          <OvalButton variant='primary' buttonSize='s'>
+          <OvalButton
+            variant='primary'
+            buttonSize='s'
+            onClick={handleImageUpload}
+          >
             <Icon name='UploadShare' size='m' className='mr-2.5' />
-            작품 업로드
+            이미지 업로드
           </OvalButton>
           <p className='button-s text-center text-gray-500'>
             작품 이미지는 1장만 업로드 가능합니다.
           </p>
 
+          {errors.uploadedImage && (
+            <div className='flex items-center mt-[3px] h-[26px]'>
+              <Icon
+                name='AlertCircle'
+                size='s'
+                className='text-system-error mr-2'
+              />
+              <p className='button-s text-system-error'>
+                {errors.uploadedImage}
+              </p>
+            </div>
+          )}
+
+          {uploadedImage && (
+            <img
+              src={uploadedImage}
+              alt='Uploaded Artwork'
+              className='mt-4 max-h-[200px] object-contain'
+            />
+          )}
+
           <button
             aria-label='Button to change artwork image'
             className='flex justify-center items-center w-[57px] h-[57px] md:w-[77px] md:h-[77px]
@@ -163,7 +247,14 @@ const ArtworkUpload = () => {
         >
           취소
         </button>
-        <OvalButton variant='primary' buttonSize='s'>
+
+        {/* hover:cursor-not-allowed */}
+        <OvalButton
+          variant={`${!isSubmitting && isFormValid ? 'primary' : 'secondary'}`}
+          buttonSize='s'
+          disabled={isSubmitting && !isFormValid}
+          onClick={handleArtworkUpload}
+        >
           업로드
         </OvalButton>
       </div>

From 504ab773061f17e0fcd8f38e857671ea5a31c804 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 17 Jan 2025 07:15:51 +0900
Subject: [PATCH 17/23] =?UTF-8?q?feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EB=B9=84=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94(disabled)=20=EC=83=81=ED=83=9C=EC=9D=BC=20=EB=95=8C?=
 =?UTF-8?q?=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=83=81=EB=8B=A8=EC=9C=BC=EB=A1=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=98=AC=EB=9D=BC=EA=B0=80=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index 9431ba5..62cbb26 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -123,7 +123,10 @@ const ArtworkUpload = () => {
     artworkTitle && selectedArtworkField && uploadedImage && !isSubmitting;
 
   const handleArtworkUpload = () => {
-    if (!validateArtworkUploadForm()) return;
+    if (!validateArtworkUploadForm()) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      return;
+    }
     setIsSubmitting(true);
 
     // TODO: 업로드 성공 시, 작성한 글 상세 페이지로 이동

From d291e82d39cfff8498a95d37c3f87199b43ff168 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 18 Jan 2025 13:15:24 +0900
Subject: [PATCH 18/23] =?UTF-8?q?style:=20=EC=9E=91=ED=92=88=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=B2=84=ED=8A=BC=20CSS=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

---
 src/app/artwork/upload/page.tsx | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index 62cbb26..462c512 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -139,7 +139,7 @@ const ArtworkUpload = () => {
   return (
     <div className='max-w-[1920px] m-auto px-[36px] py-[70px] lg:px-[140px]'>
       <h1>작품 업로드</h1>
-      <div className='pt-[70px] pb-[30px] md:pb-[40px]'>
+      <div className='pt-[70px] pb-[58px] md:pb-[40px]'>
         <BasicInput
           type='text'
           label='작품 제목'
@@ -251,15 +251,23 @@ const ArtworkUpload = () => {
           취소
         </button>
 
-        {/* hover:cursor-not-allowed */}
-        <OvalButton
-          variant={`${!isSubmitting && isFormValid ? 'primary' : 'secondary'}`}
-          buttonSize='s'
-          disabled={isSubmitting && !isFormValid}
-          onClick={handleArtworkUpload}
-        >
-          업로드
-        </OvalButton>
+        {!isSubmitting && isFormValid ? (
+          <OvalButton
+            variant='primary'
+            buttonSize='s'
+            onClick={handleArtworkUpload}
+          >
+            업로드
+          </OvalButton>
+        ) : (
+          <button
+            className='button-s text-gray-300 bg-gray-700 px-[28px] leading-[50px]
+            flex items-center justify-center rounded-full gap-[10px]
+            transition-all duration-300 ease-in-out active:scale-95 hover:opacity-70 hover:cursor-not-allowed'
+          >
+            업로드
+          </button>
+        )}
       </div>
     </div>
   );

From 2825d48f43d9950654e861468a14b2b870c909c9 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 18 Jan 2025 14:48:31 +0900
Subject: [PATCH 19/23] =?UTF-8?q?chore:=20=ED=95=84=EC=88=98=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=20=EC=9E=91=EC=84=B1=20=EC=95=88=20=ED=95=98=EA=B3=A0?=
 =?UTF-8?q?=20=ED=99=9C=EC=84=B1=ED=99=94=EB=90=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=9D=80=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EB=88=8C=EB=A0=80=EC=9D=84=20=EC=8B=9C=EC=9D=98=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index 462c512..b70f897 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -122,11 +122,16 @@ const ArtworkUpload = () => {
   const isFormValid =
     artworkTitle && selectedArtworkField && uploadedImage && !isSubmitting;
 
+  const handleScrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleRequiredFieldsNotFilledOut = () => {
+    validateArtworkUploadForm();
+    handleScrollToTop();
+  };
+
   const handleArtworkUpload = () => {
-    if (!validateArtworkUploadForm()) {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-      return;
-    }
     setIsSubmitting(true);
 
     // TODO: 업로드 성공 시, 작성한 글 상세 페이지로 이동
@@ -261,6 +266,7 @@ const ArtworkUpload = () => {
           </OvalButton>
         ) : (
           <button
+            onClick={handleRequiredFieldsNotFilledOut}
             className='button-s text-gray-300 bg-gray-700 px-[28px] leading-[50px]
             flex items-center justify-center rounded-full gap-[10px]
             transition-all duration-300 ease-in-out active:scale-95 hover:opacity-70 hover:cursor-not-allowed'

From 94d5a0ac544479d35781686fb28bd3d70f86d914 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 18 Jan 2025 16:20:57 +0900
Subject: [PATCH 20/23] =?UTF-8?q?refactor:=20=EC=9E=91=ED=92=88=20?=
 =?UTF-8?q?=EB=B6=84=EC=95=BC=20=EC=83=81=EC=88=98=ED=99=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=94=B0=EB=A1=9C=20=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ArtworkPage/ArtworkFilter.tsx | 20 +++-----------------
 src/constants/artworkFields.ts               | 14 ++++++++++++++
 src/types/artwork.ts                         |  5 +++++
 3 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 src/constants/artworkFields.ts

diff --git a/src/components/ArtworkPage/ArtworkFilter.tsx b/src/components/ArtworkPage/ArtworkFilter.tsx
index ca9e67e..473a2a3 100644
--- a/src/components/ArtworkPage/ArtworkFilter.tsx
+++ b/src/components/ArtworkPage/ArtworkFilter.tsx
@@ -1,3 +1,6 @@
+import { ArtworkField } from '@/types';
+
+import ARTWORK_FIELDS from '../../constants/artworkFields';
 import OvalButton from '../Button/OvalButton';
 import DefaultCarousel from '../Carousel/DefaultCarousel';
 import FilterDropdown from '../FilterDropdown';
@@ -10,23 +13,6 @@ interface ArtworkFilterProps {
   setCurrentPage: (value: number | ((prev: number) => number)) => void;
 }
 
-interface ArtworkField {
-  name: string;
-  value: string;
-}
-
-const ARTWORK_FIELDS = [
-  { name: '전체', value: 'ALL' },
-  { name: '회화', value: 'PAINTING' },
-  { name: '공예/조각', value: 'CRAFTSCULPTURE' },
-  { name: '드로잉', value: 'DRAWING' },
-  { name: '판화', value: 'PRINTMAKING' },
-  { name: '서예', value: 'CALLIGRAPHY' },
-  { name: '일러스트', value: 'ILLUSTRATION' },
-  { name: '디지털아트', value: 'DIGITALART' },
-  { name: '사진', value: 'PHOTOGRAPHY' },
-  { name: '기타', value: 'OTHERS' },
-];
 const FILTER_OPTIONS = ['최신순', '인기순', '조회순'];
 
 const ArtworkFilter = ({
diff --git a/src/constants/artworkFields.ts b/src/constants/artworkFields.ts
new file mode 100644
index 0000000..384cfa2
--- /dev/null
+++ b/src/constants/artworkFields.ts
@@ -0,0 +1,14 @@
+const ARTWORK_FIELDS = [
+  { name: '전체', value: 'ALL' },
+  { name: '회화', value: 'PAINTING' },
+  { name: '공예/조각', value: 'CRAFTSCULPTURE' },
+  { name: '드로잉', value: 'DRAWING' },
+  { name: '판화', value: 'PRINTMAKING' },
+  { name: '서예', value: 'CALLIGRAPHY' },
+  { name: '일러스트', value: 'ILLUSTRATION' },
+  { name: '디지털아트', value: 'DIGITALART' },
+  { name: '사진', value: 'PHOTOGRAPHY' },
+  { name: '기타', value: 'OTHERS' },
+];
+
+export default ARTWORK_FIELDS;
diff --git a/src/types/artwork.ts b/src/types/artwork.ts
index 67aab4d..824a6a8 100644
--- a/src/types/artwork.ts
+++ b/src/types/artwork.ts
@@ -24,3 +24,8 @@ export interface ArtworkListResponse {
   data: ArtworkInfoType[];
   page: PaginationType;
 }
+
+export interface ArtworkField {
+  name: string;
+  value: string;
+}

From 934cc50d89670a089e3ce03003c0bafad633cddd Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 18 Jan 2025 17:38:06 +0900
Subject: [PATCH 21/23] =?UTF-8?q?refactor:=20=EB=AA=85=ED=99=95=ED=95=9C?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=EC=A7=80=EC=A0=95=EC=9D=84=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=B4=20BasicInput=EA=B3=BC=20Textarea=EB=A5=BC=20=EB=94=B0?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Input/BasicInput.tsx | 134 +++++++++-------------------
 src/components/Input/Textarea.tsx   |  77 ++++++++++++++++
 2 files changed, 119 insertions(+), 92 deletions(-)
 create mode 100644 src/components/Input/Textarea.tsx

diff --git a/src/components/Input/BasicInput.tsx b/src/components/Input/BasicInput.tsx
index d2c2ae6..4930ebc 100644
--- a/src/components/Input/BasicInput.tsx
+++ b/src/components/Input/BasicInput.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Input } from '@nextui-org/react';
-import { ChangeEvent, useRef, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 import Icon from '../Icon/Icon';
 
@@ -11,7 +11,7 @@ interface BasicInputProps {
   placeholder?: string;
 
   value: string;
-  onChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 
   showClear?: boolean;
   onClear?: () => void;
@@ -41,7 +41,6 @@ const BasicInput = ({
   successMessage,
 }: BasicInputProps) => {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   const togglePasswordVisibility = () =>
     setIsPasswordVisible(!isPasswordVisible);
@@ -54,103 +53,54 @@ const BasicInput = ({
         ? 'text-system-error'
         : 'text-white';
 
-  const handleInputChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    onChange(e);
-    if (type === 'textarea' && textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
-    }
-  };
-
   return (
-    <div>
-      {type === 'textarea' ? (
-        <>
-          <label className='placeholder block pb-[7px] text-gray-400'>
-            {label}
-          </label>
-          <div className='relative w-full h-auto'>
-            <textarea
-              ref={textareaRef}
-              value={value}
-              onChange={handleInputChange}
-              placeholder={placeholder}
-              maxLength={maxLength}
-              className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
-                ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
-                focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
-                `}
-              style={{
-                minHeight: '256px',
-                padding: '20px',
-              }}
-            />
+    <>
+      <Input
+        type={showEyeIcon && isPasswordVisible ? 'text' : type || 'text'}
+        label={label}
+        labelPlacement='outside'
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onClear={showClear ? onClear : undefined}
+        isInvalid={false}
+        minLength={minLength}
+        maxLength={maxLength}
+        endContent={
+          <>
+            {showEyeIcon && (
+              <button
+                type='button'
+                aria-label='toggle password visibility'
+                onClick={togglePasswordVisibility}
+                disabled={value === ''}
+                className='px-[10px]'
+              >
+                <Icon
+                  name={isPasswordVisible ? 'Eye' : 'EyeOff'}
+                  size='m'
+                  className={`text-gray-200 ${value === '' ? 'text-gray-800' : ''}`}
+                />
+              </button>
+            )}
+
             {showTextLength && maxLength && (
-              <div className='absolute bottom-[20px] right-[20px]'>
+              <div className='flex items-center px-[10px]'>
                 <span className={`placeholder ${textLengthColor}`}>
                   {currentTextLength}
                 </span>
                 <span className='placeholder text-gray-700'>/{maxLength}</span>
               </div>
             )}
-          </div>
-        </>
-      ) : (
-        <Input
-          type={showEyeIcon && isPasswordVisible ? 'text' : type || 'text'}
-          label={label}
-          labelPlacement='outside'
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onClear={showClear ? onClear : undefined}
-          isInvalid={false}
-          minLength={minLength}
-          maxLength={maxLength}
-          endContent={
-            <>
-              {showEyeIcon && (
-                <button
-                  type='button'
-                  aria-label='toggle password visibility'
-                  onClick={togglePasswordVisibility}
-                  disabled={value === ''}
-                  className='px-[10px]'
-                >
-                  <Icon
-                    name={isPasswordVisible ? 'Eye' : 'EyeOff'}
-                    size='m'
-                    className={`text-gray-200 ${value === '' ? 'text-gray-800' : ''}`}
-                  />
-                </button>
-              )}
+          </>
+        }
+        classNames={{
+          label: ['!placeholder', '!top-5', '!text-gray-400'],
+          input: ['!placeholder', 'placeholder:text-gray-700', 'px-[10px]'],
+          inputWrapper: ['bg-gray-900', 'rounded-md', 'h-15', 'leading-[60px]'],
+        }}
+      />
 
-              {showTextLength && maxLength && (
-                <div className='flex items-center px-[10px]'>
-                  <span className={`placeholder ${textLengthColor}`}>
-                    {currentTextLength}
-                  </span>
-                  <span className='placeholder text-gray-700'>
-                    /{maxLength}
-                  </span>
-                </div>
-              )}
-            </>
-          }
-          classNames={{
-            label: ['!placeholder', '!top-5', '!text-gray-400'],
-            input: ['!placeholder', 'placeholder:text-gray-700', 'px-[10px]'],
-            inputWrapper: [
-              'bg-gray-900',
-              'rounded-md',
-              'h-15',
-              'leading-[60px]',
-            ],
-          }}
-        />
-      )}
       <div className='flex items-center mt-[3px] h-[26px]'>
         {isInvalid && errorMessage ? (
           <>
@@ -174,7 +124,7 @@ const BasicInput = ({
           )
         )}
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/Input/Textarea.tsx b/src/components/Input/Textarea.tsx
new file mode 100644
index 0000000..2d4f064
--- /dev/null
+++ b/src/components/Input/Textarea.tsx
@@ -0,0 +1,77 @@
+import { ChangeEvent, useRef } from 'react';
+
+interface TextareaProps {
+  label?: string;
+  placeholder?: string;
+
+  value: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+
+  showTextLength?: boolean;
+  isInvalid?: boolean;
+  maxLength?: number;
+  errorMessage?: string;
+}
+
+const Textarea = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  maxLength,
+  showTextLength,
+}: TextareaProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const currentTextLength = value.length;
+  const textLengthColor =
+    currentTextLength === 0
+      ? 'text-gray-700'
+      : maxLength && currentTextLength > maxLength
+        ? 'text-system-error'
+        : 'text-white';
+
+  const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(e);
+
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    }
+  };
+
+  return (
+    <>
+      <label className='placeholder block pb-[7px] text-gray-400'>
+        {label}
+      </label>
+      <div className='relative w-full h-auto'>
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleInputChange}
+          placeholder={placeholder}
+          maxLength={maxLength}
+          className={`placeholder bg-gray-900 rounded-md w-full h-auto resize-none
+                ${value.length ? 'text-white' : 'placeholder:text-gray-700'}
+                focus:outline-none focus:ring-0 bg-gray-900 hover:bg-[#18181b] focus:bg-[#18181b]
+                `}
+          style={{
+            minHeight: '256px',
+            padding: '20px',
+          }}
+        />
+        {showTextLength && maxLength && (
+          <div className='absolute bottom-[20px] right-[20px]'>
+            <span className={`placeholder ${textLengthColor}`}>
+              {currentTextLength}
+            </span>
+            <span className='placeholder text-gray-700'>/{maxLength}</span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Textarea;

From af21a4066058944ae71b9c6df63c2e8fd6161819 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 18 Jan 2025 17:52:39 +0900
Subject: [PATCH 22/23] =?UTF-8?q?refactor:=20=EB=B0=98=EB=B3=B5=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/artwork/upload/page.tsx | 122 ++++++++++++++------------------
 1 file changed, 52 insertions(+), 70 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index b70f897..abc9372 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -6,31 +6,28 @@ import OvalButton from '@/components/Button/OvalButton';
 import FilterDropdown from '@/components/FilterDropdown';
 import Icon from '@/components/Icon/Icon';
 import BasicInput from '@/components/Input/BasicInput';
+import ARTWORK_FIELDS from '@/constants/artworkFields';
 
-interface ArtworkField {
-  name: string;
-  value: string;
+import Textarea from '../../../components/Input/Textarea';
+
+interface ArtworkFieldsErrors {
+  artworkTitleError?: string;
+  selectedArtworkFieldError?: string;
+  uploadedImageError?: string;
 }
 
 const MAX_TITLE_LENGTH = 50;
 const MAX_DESCRIPTION_LENGTH = 1000;
+const REQUIRED_FIELDS_ERROR_MESSAGE = '필수 항목입니다.';
 
 const PRIVACY_SETTING_OPTIONS = [
   { name: '전체공개', value: 'PUBLIC' },
   { name: '비공개', value: 'PRIVATE' },
 ];
 
-const ARTWORK_FIELDS: ArtworkField[] = [
-  { name: '회화', value: 'PAINTING' },
-  { name: '공예/조각', value: 'CRAFTSCULPTURE' },
-  { name: '드로잉', value: 'DRAWING' },
-  { name: '판화', value: 'PRINTMAKING' },
-  { name: '서예', value: 'CALLIGRAPHY' },
-  { name: '일러스트', value: 'ILLUSTRATION' },
-  { name: '디지털아트', value: 'DIGITALART' },
-  { name: '사진', value: 'PHOTOGRAPHY' },
-  { name: '기타', value: 'OTHERS' },
-];
+const ARTWORK_FIELDS_NOT_INCLUDED_ALL = ARTWORK_FIELDS.filter(
+  (field) => field.value !== 'ALL',
+);
 
 const ArtworkUpload = () => {
   const [artworkTitle, setArtworkTitle] = useState('');
@@ -38,29 +35,27 @@ const ArtworkUpload = () => {
   const [privacySetting, setPrivacySetting] = useState<'전체공개' | '비공개'>(
     '전체공개',
   );
-  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
+  const [uploadedImage, setUploadedImage] = useState<string>('');
   const [artworkDescription, setArtworkDescription] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errors, setErrors] = useState<{
-    artworkTitle?: string;
-    selectedArtworkField?: string;
-    uploadedImage?: string;
-  }>({
-    artworkTitle: '',
-    selectedArtworkField: '',
-    uploadedImage: '',
+  const [errors, setErrors] = useState<ArtworkFieldsErrors>({
+    artworkTitleError: '',
+    selectedArtworkFieldError: '',
+    uploadedImageError: '',
   });
 
-  const handleArtworkTitleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const clearErrorMessage = (targetField: string) => {
+    setErrors((prevErrors) => ({ ...prevErrors, [targetField]: '' }));
+  };
+
+  const handleArtworkTitleChanged = (e: ChangeEvent<HTMLInputElement>) => {
     setArtworkTitle(e.target.value);
 
-    if (errors.artworkTitle) {
-      setErrors((prevErrors) => ({ ...prevErrors, artworkTitle: '' }));
-    }
+    if (errors.artworkTitleError) clearErrorMessage('artworkTitleError');
   };
 
-  const handlertworkDescriptionOnChange = (
-    e: ChangeEvent<HTMLInputElement>,
+  const handleArtworkDescriptionOnChange = (
+    e: ChangeEvent<HTMLTextAreaElement>,
   ) => {
     setArtworkDescription(e.target.value);
   };
@@ -71,21 +66,14 @@ const ArtworkUpload = () => {
     if (!artworkTitle.trim()) {
       setErrors((prevErrors) => ({
         ...prevErrors,
-        artworkTitle: '필수 항목입니다.',
+        artworkTitleError: REQUIRED_FIELDS_ERROR_MESSAGE,
       }));
     } else {
-      setErrors((prevErrors) => ({
-        ...prevErrors,
-        artworkTitle: '',
-      }));
+      clearErrorMessage('artworkTitleError');
     }
 
-    if (errors.selectedArtworkField) {
-      setErrors((prevErrors) => ({
-        ...prevErrors,
-        selectedArtworkField: '',
-      }));
-    }
+    if (errors.selectedArtworkFieldError)
+      clearErrorMessage('selectedArtworkFieldError');
   };
 
   const handlePrivacySettingChange = (
@@ -98,28 +86,24 @@ const ArtworkUpload = () => {
     // TODO: 실제 이미지 업로드 로직 구현
     setUploadedImage('uploaded-image-url'); // 테스트용
 
-    if (errors.uploadedImage) {
-      setErrors((prevErrors) => ({ ...prevErrors, uploadedImage: '' }));
-    }
+    if (errors.uploadedImageError) clearErrorMessage('uploadedImageError');
   };
 
   const validateArtworkUploadForm = () => {
-    const newErrors: {
-      artworkTitle?: string;
-      selectedArtworkField?: string;
-      uploadedImage?: string;
-    } = {};
+    const newErrors: ArtworkFieldsErrors = {};
 
-    if (!artworkTitle.trim()) newErrors.artworkTitle = '필수 항목입니다.';
+    if (!artworkTitle.trim())
+      newErrors.artworkTitleError = REQUIRED_FIELDS_ERROR_MESSAGE;
     if (!selectedArtworkField.trim())
-      newErrors.selectedArtworkField = '필수 항목입니다.';
-    if (!uploadedImage) newErrors.uploadedImage = '이미지를 업로드해주세요.';
+      newErrors.selectedArtworkFieldError = REQUIRED_FIELDS_ERROR_MESSAGE;
+    if (!uploadedImage)
+      newErrors.uploadedImageError = REQUIRED_FIELDS_ERROR_MESSAGE;
     setErrors(newErrors);
 
     return Object.keys(newErrors).length === 0;
   };
 
-  const isFormValid =
+  const isRequiredFieldsValid =
     artworkTitle && selectedArtworkField && uploadedImage && !isSubmitting;
 
   const handleScrollToTop = () => {
@@ -134,11 +118,8 @@ const ArtworkUpload = () => {
   const handleArtworkUpload = () => {
     setIsSubmitting(true);
 
-    // TODO: 업로드 성공 시, 작성한 글 상세 페이지로 이동
-    // [테스트용] 업로드 처리 (API 호출)
-    setTimeout(() => {
-      console.log('업로드 완료');
-    }, 2000);
+    console.log('업로드 완료'); // [테스트용] 업로드 처리 (API 호출)
+    // TODO: 작성한 글 상세 페이지로 이동
   };
 
   return (
@@ -150,22 +131,23 @@ const ArtworkUpload = () => {
           label='작품 제목'
           placeholder='작품 제목을 입력하세요.'
           value={artworkTitle}
-          onChange={handleArtworkTitleOnChange}
+          onChange={handleArtworkTitleChanged}
           showTextLength={true}
           maxLength={MAX_TITLE_LENGTH}
-          isInvalid={!!errors.artworkTitle}
-          errorMessage={errors.artworkTitle}
+          isInvalid={!!errors.artworkTitleError}
+          errorMessage={errors.artworkTitleError}
         />
       </div>
+
       <div className='flex flex-col md:flex-row items-start self-stretch gap-[38px] md:gap-[50px] pb-[78px]'>
         <FilterDropdown
           label='작품 카테고리'
           placeholder='카테고리 선택'
-          options={ARTWORK_FIELDS.map((field) => field.name)}
+          options={ARTWORK_FIELDS_NOT_INCLUDED_ALL.map((field) => field.name)}
           selected={selectedArtworkField}
           onChange={(value) => handleArtworkFieldClick(value)}
-          isInvalid={!!errors.selectedArtworkField}
-          errorMessage={errors.selectedArtworkField}
+          isInvalid={!!errors.selectedArtworkFieldError}
+          errorMessage={errors.selectedArtworkFieldError}
           className='w-full'
         />
 
@@ -204,15 +186,15 @@ const ArtworkUpload = () => {
             작품 이미지는 1장만 업로드 가능합니다.
           </p>
 
-          {errors.uploadedImage && (
-            <div className='flex items-center mt-[3px] h-[26px]'>
+          {errors.uploadedImageError && (
+            <div className='flex items-center'>
               <Icon
                 name='AlertCircle'
                 size='s'
                 className='text-system-error mr-2'
               />
               <p className='button-s text-system-error'>
-                {errors.uploadedImage}
+                {errors.uploadedImageError}
               </p>
             </div>
           )}
@@ -238,15 +220,15 @@ const ArtworkUpload = () => {
         </div>
       </div>
 
-      <BasicInput
-        type='textarea'
+      <Textarea
         label='작품 설명'
         placeholder='작품 설명을 입력하세요.'
         value={artworkDescription}
-        onChange={handlertworkDescriptionOnChange}
+        onChange={handleArtworkDescriptionOnChange}
         showTextLength={true}
         maxLength={MAX_DESCRIPTION_LENGTH}
       />
+
       <div className='pt-[30px] flex justify-end items-center gap-[20px]'>
         <button
           className='button-s text-gray-300 flex items-center justify-center rounded-full
@@ -256,7 +238,7 @@ const ArtworkUpload = () => {
           취소
         </button>
 
-        {!isSubmitting && isFormValid ? (
+        {!isSubmitting && isRequiredFieldsValid ? (
           <OvalButton
             variant='primary'
             buttonSize='s'

From b6e70b3d04a455f9c5397df36f9162dad8d5ffb2 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sun, 19 Jan 2025 19:01:02 +0900
Subject: [PATCH 23/23] =?UTF-8?q?refactor:=20ARTWORK=5FFIELDS=EC=9D=98=20'?=
 =?UTF-8?q?=EC=A0=84=EC=B2=B4'=20=EC=98=B5=EC=85=98=EC=9D=84=20ArtworkFilt?=
 =?UTF-8?q?er=EC=97=90=EC=84=9C=20=EC=B6=94=EA=B0=80=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=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

---
 src/app/artwork/upload/page.tsx              |  6 +-----
 src/components/ArtworkPage/ArtworkFilter.tsx | 12 +++++++++---
 src/constants/artworkFields.ts               |  1 -
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/artwork/upload/page.tsx b/src/app/artwork/upload/page.tsx
index abc9372..d90fc58 100644
--- a/src/app/artwork/upload/page.tsx
+++ b/src/app/artwork/upload/page.tsx
@@ -25,10 +25,6 @@ const PRIVACY_SETTING_OPTIONS = [
   { name: '비공개', value: 'PRIVATE' },
 ];
 
-const ARTWORK_FIELDS_NOT_INCLUDED_ALL = ARTWORK_FIELDS.filter(
-  (field) => field.value !== 'ALL',
-);
-
 const ArtworkUpload = () => {
   const [artworkTitle, setArtworkTitle] = useState('');
   const [selectedArtworkField, setSelectedArtworkField] = useState('');
@@ -143,7 +139,7 @@ const ArtworkUpload = () => {
         <FilterDropdown
           label='작품 카테고리'
           placeholder='카테고리 선택'
-          options={ARTWORK_FIELDS_NOT_INCLUDED_ALL.map((field) => field.name)}
+          options={ARTWORK_FIELDS.map((field) => field.name)}
           selected={selectedArtworkField}
           onChange={(value) => handleArtworkFieldClick(value)}
           isInvalid={!!errors.selectedArtworkFieldError}
diff --git a/src/components/ArtworkPage/ArtworkFilter.tsx b/src/components/ArtworkPage/ArtworkFilter.tsx
index 473a2a3..3f9c826 100644
--- a/src/components/ArtworkPage/ArtworkFilter.tsx
+++ b/src/components/ArtworkPage/ArtworkFilter.tsx
@@ -13,6 +13,11 @@ interface ArtworkFilterProps {
   setCurrentPage: (value: number | ((prev: number) => number)) => void;
 }
 
+const ARTWORK_FIELDS_WITH_ALL_OPTION = [
+  { name: '전체', value: 'ALL' },
+  ...ARTWORK_FIELDS,
+];
+
 const FILTER_OPTIONS = ['최신순', '인기순', '조회순'];
 
 const ArtworkFilter = ({
@@ -23,8 +28,9 @@ const ArtworkFilter = ({
   setCurrentPage,
 }: ArtworkFilterProps) => {
   const selectedArtworkFieldName =
-    ARTWORK_FIELDS.find((field) => field.value === selectedArtworkField)
-      ?.name || '전체';
+    ARTWORK_FIELDS_WITH_ALL_OPTION.find(
+      (field) => field.value === selectedArtworkField,
+    )?.name || '전체';
 
   const handleArtworkFieldClick = (artworkField: string) => {
     setSelectedArtworkField(artworkField);
@@ -39,7 +45,7 @@ const ArtworkFilter = ({
     <>
       <div className='flex w-full justify-between items-end pb-[59px] overflow-x-auto'>
         <DefaultCarousel
-          slides={ARTWORK_FIELDS}
+          slides={ARTWORK_FIELDS_WITH_ALL_OPTION}
           renderSlide={(artworkField: ArtworkField) => (
             <OvalButton
               key={artworkField.value}
diff --git a/src/constants/artworkFields.ts b/src/constants/artworkFields.ts
index 384cfa2..5ef04b2 100644
--- a/src/constants/artworkFields.ts
+++ b/src/constants/artworkFields.ts
@@ -1,5 +1,4 @@
 const ARTWORK_FIELDS = [
-  { name: '전체', value: 'ALL' },
   { name: '회화', value: 'PAINTING' },
   { name: '공예/조각', value: 'CRAFTSCULPTURE' },
   { name: '드로잉', value: 'DRAWING' },