feat(game): ClubNameInput 동아리명 자동완성 및 유효성 검사 추가

- 입력 시 debounce(300ms) → getClubList 호출 → 드롭다운 자동완성
- submit 시 정확한 이름 일치 최종 검증, 없으면 에러 메시지 표시
- 에러 시 Input 테두리 강조, 버튼 "확인 중..." 로딩 상태 표시

Author: seongwon030

frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.styles.ts

@@ -15,17 +15,24 @@ export const Title = styled.h2`
   color: ${({ theme }) => theme.colors.gray[900]};
 `;
 
+export const InputContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
 export const InputRow = styled.div`
   display: flex;
   gap: 8px;
   width: 100%;
 `;
 
-export const Input = styled.input`
+export const Input = styled.input<{ $hasError: boolean }>`
   flex: 1;
   padding: 12px 16px;
   font-size: 1rem;
-  border: 2px solid ${({ theme }) => theme.colors.gray[300]};
+  border: 2px solid
+    ${({ theme, $hasError }) =>
+      $hasError ? theme.colors.primary[900] : theme.colors.gray[300]};
   border-radius: 10px;
   outline: none;
   transition: border-color 0.2s;
@@ -60,3 +67,40 @@ export const StartButton = styled.button`
     cursor: not-allowed;
   }
 `;
+
+export const Dropdown = styled.ul`
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 1.5px solid ${({ theme }) => theme.colors.gray[200]};
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  list-style: none;
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 10;
+`;
+
+export const DropdownItem = styled.li`
+  padding: 10px 16px;
+  font-size: 0.95rem;
+  color: ${({ theme }) => theme.colors.gray[800]};
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.gray[100]};
+  }
+
+  & + & {
+    border-top: 1px solid ${({ theme }) => theme.colors.gray[100]};
+  }
+`;
+
+export const ErrorMessage = styled.p`
+  font-size: 0.875rem;
+  color: ${({ theme }) => theme.colors.primary[900]};
+  font-weight: 500;
+`;

frontend/src/pages/GamePage/components/ClubNameInput/ClubNameInput.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import { getClubList } from '@/apis/club';
 import * as S from './ClubNameInput.styles';
 
 interface ClubNameInputProps {
@@ -7,10 +8,59 @@ interface ClubNameInputProps {
 
 const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
   const [value, setValue] = useState('');
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [error, setError] = useState('');
+  const [isValidating, setIsValidating] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = e.target.value;
+    setValue(v);
+    setError('');
+
+    clearTimeout(debounceRef.current);
+
+    if (!v.trim()) {
+      setSuggestions([]);
+      return;
+    }
+
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const { clubs } = await getClubList(v.trim());
+        setSuggestions(clubs.map((c) => c.name));
+      } catch {
+        setSuggestions([]);
+      }
+    }, 300);
+  };
 
-  const handleSubmit = () => {
+  const handleSelect = (name: string) => {
+    setValue(name);
+    setSuggestions([]);
+    setError('');
+  };
+
+  const handleSubmit = async () => {
     const trimmed = value.trim();
-    if (trimmed) onStart(trimmed);
+    if (!trimmed) return;
+
+    setIsValidating(true);
+    try {
+      const { clubs } = await getClubList(trimmed);
+      const exact = clubs.find((c) => c.name === trimmed);
+      if (!exact) {
+        setError('존재하지 않는 동아리입니다.');
+        return;
+      }
+      onStart(trimmed);
+    } catch {
+      setError('동아리 확인 중 오류가 발생했습니다.');
+    } finally {
+      setIsValidating(false);
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -20,19 +70,37 @@ const ClubNameInput = ({ onStart }: ClubNameInputProps) => {
   return (
     <S.Wrapper>
       <S.Title>동아리명을 입력해주세요</S.Title>
-      <S.InputRow>
-        <S.Input
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder='예) RCY'
-          maxLength={30}
-          autoFocus
-        />
-        <S.StartButton onClick={handleSubmit} disabled={!value.trim()}>
-          시작
-        </S.StartButton>
-      </S.InputRow>
+      <S.InputContainer>
+        <S.InputRow>
+          <S.Input
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            placeholder='예) RCY'
+            maxLength={30}
+            autoFocus
+            $hasError={!!error}
+          />
+          <S.StartButton
+            onClick={handleSubmit}
+            disabled={!value.trim() || isValidating}
+          >
+            {isValidating ? '확인 중...' : '시작'}
+          </S.StartButton>
+        </S.InputRow>
+
+        {suggestions.length > 0 && (
+          <S.Dropdown>
+            {suggestions.map((name) => (
+              <S.DropdownItem key={name} onClick={() => handleSelect(name)}>
+                {name}
+              </S.DropdownItem>
+            ))}
+          </S.Dropdown>
+        )}
+      </S.InputContainer>
+
+      {error && <S.ErrorMessage>{error}</S.ErrorMessage>}
     </S.Wrapper>
   );
 };