[Feature/#183] 컴포넌트 및 설정 리팩토링

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} />

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}`}
     >

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 ?? ''}`}
     >

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}$/;

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}

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>