From b6feb49b3ffa9f1d1241b7e48f4fab9cb0f055ca Mon Sep 17 00:00:00 2001
From: Lee Gaeul <91470334+gaeulzzang@users.noreply.github.com>
Date: Mon, 18 Aug 2025 15:16:54 +0900
Subject: [PATCH 1/2] =?UTF-8?q?#183=20[REFACTOR]=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=9D=B8=ED=92=8B=20=EC=97=90=EB=9F=AC=20=EB=9D=84=EC=9A=B0?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/regex.ts                        |  2 +-
 src/pages/setting/SettingMember.tsx           |  1 +
 .../components/modal/TeamCreateModal.tsx      | 24 ++++++++++++-------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/constants/regex.ts b/src/constants/regex.ts
index 71156b0e..f04bdce9 100644
--- a/src/constants/regex.ts
+++ b/src/constants/regex.ts
@@ -1 +1 @@
-export const TEAM_NAME_REGEX = /^[A-Za-z가-힣]{4,10}$/;
+export const TEAM_NAME_REGEX = /^[A-Za-z가-힣\s]{4,10}$/;
diff --git a/src/pages/setting/SettingMember.tsx b/src/pages/setting/SettingMember.tsx
index 1dfdb454..4f044151 100644
--- a/src/pages/setting/SettingMember.tsx
+++ b/src/pages/setting/SettingMember.tsx
@@ -35,6 +35,7 @@ const SettingMember = () => {
               .slice(1)
               .map((member, index) => (
                 <MemberItem
+                  className={`py-[1.2rem]`}
                   key={index}
                   profileImageUrl={member.profileImageUrl}
                   name={member.name}
diff --git a/src/pages/setting/components/modal/TeamCreateModal.tsx b/src/pages/setting/components/modal/TeamCreateModal.tsx
index c6d3011b..ed07ce5a 100644
--- a/src/pages/setting/components/modal/TeamCreateModal.tsx
+++ b/src/pages/setting/components/modal/TeamCreateModal.tsx
@@ -41,14 +41,22 @@ const TeamCreateModal = (props: TeamCreateModalProps) => {
             <h2 className={`text-gray-600 font-title-sub-b`}>팀원 초대</h2>
             <img src={IcX} alt={'닫기'} onClick={props.onClick} />
           </div>
-          <input
-            className={`text-start w-full border border-gray-300 px-[1.2rem] py-[0.7rem]
-          font-body-r text-gray-400 placeholder:text-gray-400 rounded-[0.6rem] focus:outline-none`}
-            type={'text'}
-            placeholder={'팀 이름을 입력하세요'}
-            value={teamName}
-            onChange={(e) => setTeamName(e.target.value)}
-          />
+          <div className={`flex flex-col`}>
+            <input
+              className={`text-start w-full border px-[1.2rem] py-[0.7rem]
+          font-body-r text-gray-400 placeholder:text-gray-400 rounded-[0.6rem] focus:outline-none 
+          ${!isNameValid && teamName ? 'border-error-400' : 'border-gray-300'}`}
+              type={'text'}
+              placeholder={'팀 이름을 입력하세요'}
+              value={teamName}
+              onChange={(e) => setTeamName(e.target.value)}
+            />
+            {!isNameValid && teamName && (
+              <span className="text-error-400 font-xsmall-r mt-[0.6rem]">
+                팀 이름은 4~10자, 한글/영문/띄어쓰기로 입력해주세요.
+              </span>
+            )}
+          </div>
           <p className={`font-body-r mt-[0.8rem]`}>팀원 추가</p>
         </section>
 

From 61d62c7b2bde2155328ced4e5eb54edf16e2d166 Mon Sep 17 00:00:00 2001
From: Lee Gaeul <91470334+gaeulzzang@users.noreply.github.com>
Date: Mon, 18 Aug 2025 15:29:45 +0900
Subject: [PATCH 2/2] =?UTF-8?q?#183=20[REFACTOR]=20=EB=93=9C=EB=A1=AD?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EC=B5=9C=EB=8C=80=20=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dropdown/ArrowDropdown.tsx       | 9 +++++++--
 src/components/Dropdown/Dropdown.tsx            | 6 +++++-
 src/components/Dropdown/MultiSelectDropdown.tsx | 6 +++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Dropdown/ArrowDropdown.tsx b/src/components/Dropdown/ArrowDropdown.tsx
index 3f6a8628..143647c1 100644
--- a/src/components/Dropdown/ArrowDropdown.tsx
+++ b/src/components/Dropdown/ArrowDropdown.tsx
@@ -37,12 +37,17 @@ const ArrowDropdown = ({
     <div
       ref={dropdownRef}
       onClick={(e) => e.stopPropagation()}
-      style={{ boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.15)' }}
+      style={{
+        boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.15)',
+        maxHeight: 'calc(2.9rem * 5 + 4.9rem)',
+        overflowY: 'auto',
+      }}
       className={`absolute z-30 top-0 left-0 flex flex-col w-[27.4rem]
       border border-gray-400 bg-white rounded-[0.4rem] ${className ?? ''}`}
     >
       <div
-        className={`flex border-b border-gray-200 justify-between items-center py-[0.4rem] ps-[1.2rem] pe-[0.8rem]`}
+        className={`flex border-b border-gray-200 rounded-[0.4rem] justify-between 
+        items-center py-[0.4rem] ps-[1.2rem] pe-[0.8rem]`}
       >
         <span className={`font-xsmall-r text-gray-600 me-[0.4rem]`}>{defaultValue}</span>
         <img src={IcDownArrow} alt={defaultValue} />
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index a121b2bd..3a076fed 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -36,7 +36,11 @@ const Dropdown = ({
   return (
     <div
       ref={dropdownRef}
-      style={{ boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.15)' }}
+      style={{
+        boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.15)',
+        maxHeight: 'calc(2.9rem * 5 + 4.9rem)',
+        overflowY: 'auto',
+      }}
       className={`absolute z-30 top-0 flex flex-col w-auto min-w-[11.6rem] max-w-[27.4rem]
       border border-gray-400 bg-white rounded-[0.4rem] ${className}`}
     >
diff --git a/src/components/Dropdown/MultiSelectDropdown.tsx b/src/components/Dropdown/MultiSelectDropdown.tsx
index 4d8986ac..bc5fec5c 100644
--- a/src/components/Dropdown/MultiSelectDropdown.tsx
+++ b/src/components/Dropdown/MultiSelectDropdown.tsx
@@ -36,7 +36,11 @@ const MultiSelectDropdown = ({
     <div
       ref={dropdownRef}
       onClick={(e) => e.stopPropagation()}
-      style={{ boxShadow: '0px 4px 12px 0px rgba(0,0,0,0.15)' }}
+      style={{
+        boxShadow: '0px 4px 12px 0px rgba(0,0,0,0.15)',
+        maxHeight: 'calc(2.7rem * 5 + 4.8rem)', // 옵션 5개 + 헤더 높이(있으면)
+        overflowY: 'auto',
+      }}
       className={`absolute z-30 top-0 flex flex-col w-auto min-w-[11.6rem] max-w-[27.4rem]
       border border-gray-400 bg-white rounded-[0.4rem] ${className ?? ''}`}
     >