[FE] Input 컴포넌트 리팩터링

frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import Button from '@/components/_common/Button/Button';
-import Input from '@/components/_common/Input/Input';
+import { InputGroup } from '@/components/_common/InputGroup';
 import { Modal } from '@/components/_common/Modal';
 
 import useToastStore from '@/stores/toastStore';
@@ -19,7 +19,7 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => {
   const navigate = useNavigate();
 
   const { addToast } = useToastStore();
-  const { value, status, message, handleChange } = useInput();
+  const { value, resetValue, handleChange } = useInput();
 
   const enterPairRoom = async () => {
     const { exists } = await getPairRoomExists(value);
@@ -36,13 +36,15 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => {
     <Modal isOpen={isOpen} close={closeModal} size="60rem">
       <Modal.Header title="페어룸 참가하기" />
       <Modal.Body>
-        <Input
-          placeholder="코드를 입력해 주세요"
-          label="페어룸 참가 코드"
-          status={status}
-          message={message}
-          onChange={handleChange}
-        />
+        <InputGroup>
+          <InputGroup.Label>페어룸 참가 코드</InputGroup.Label>
+          <InputGroup.Input
+            onChange={handleChange}
+            value={value}
+            placeholder="코드를 입력해 주세요"
+            onReset={() => resetValue()}
+          />
+        </InputGroup>
       </Modal.Body>
       <Modal.Footer>
         <Button onClick={closeModal} filled={false}>

frontend/src/components/PairRoom/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const Layout = styled.div`
   display: flex;
@@ -7,6 +7,9 @@ export const Layout = styled.div`
   gap: 2rem;
 
   width: 100%;
+  height: 5rem;
+
+  cursor: pointer;
 `;
 
 export const Container = styled.div`
@@ -49,8 +52,9 @@ export const Item = styled.li<{ $isChecked: boolean }>`
   }
 `;
 
-export const CustomInputMessage = css`
-  top: 4rem;
+export const Form = styled.form`
+  position: relative;
 
-  font-size: 1rem;
+  width: 100%;
+  height: 5rem;
 `;

frontend/src/components/PairRoom/CategoryManagementModal/CategoryItem/CategoryItem.tsx

@@ -1,6 +1,9 @@
+import { ChangeEvent } from 'react';
+
 import { CheckBoxChecked, CheckBoxUnchecked } from '@/assets';
 
-import Input from '@/components/_common/Input/Input';
+import Input from '@/components/_common/InputGroup/Input/Input';
+import Message from '@/components/_common/InputGroup/Message/Message';
 import IconButton from '@/components/PairRoom/CategoryManagementModal/IconButton/IconButton';
 
 import useToastStore from '@/stores/toastStore';
@@ -59,23 +62,24 @@ const CategoryItem = ({
 
   if (isEditing) {
     return (
-      <form onSubmit={handleSubmit}>
+      <S.Form onSubmit={handleSubmit}>
         <S.Layout>
           <Input
+            status={newCategoryName.status}
             height="4.4rem"
             placeholder="수정할 카테고리 이름을 입력해주세요."
             value={newCategoryName.value}
-            status={newCategoryName.status}
-            message={newCategoryName.message}
-            onChange={(event) => handleCategoryName(event, categoryName)}
-            $messageCss={S.CustomInputMessage}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => handleCategoryName(event, categoryName)}
           />
           <S.IconContainer>
             <IconButton icon="CHECK" type="submit" />
             <IconButton icon="CANCEL" onClick={stopEditing} />
           </S.IconContainer>
         </S.Layout>
-      </form>
+        <Message fontSize="1rem" status={newCategoryName.status}>
+          {newCategoryName.message}
+        </Message>
+      </S.Form>
     );
   }
 

frontend/src/components/PairRoom/CategoryManagementModal/CategoryManagementModal.styles.ts

@@ -26,9 +26,3 @@ export const Form = styled.form`
 
   width: 100%;
 `;
-
-export const InputContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-`;

frontend/src/components/PairRoom/CategoryManagementModal/CategoryManagementModal.tsx

@@ -1,7 +1,9 @@
+import { ChangeEvent } from 'react';
+
 import { LuPlus } from 'react-icons/lu';
 
 import Button from '@/components/_common/Button/Button';
-import Input from '@/components/_common/Input/Input';
+import { InputGroup } from '@/components/_common/InputGroup';
 import { Modal } from '@/components/_common/Modal';
 import CategoryItem from '@/components/PairRoom/CategoryManagementModal/CategoryItem/CategoryItem';
 import { Category } from '@/components/PairRoom/ReferenceCard/ReferenceCard.type';
@@ -75,26 +77,31 @@ const CategoryManagementModal = ({
         </S.CategoryList>
       </Modal.Body>
       <S.Form onSubmit={handleAddCategorySubmit}>
-        <S.InputContainer>
-          <Input
-            value={value}
-            placeholder="추가할 카테고리를 입력해 주세요."
-            height="4.4rem"
-            status={status}
-            message={message}
-            onChange={(event) => handleChange(event, validateCategoryName(event.target.value, isCategoryExist))}
-          />
-          <Button
-            type="submit"
-            width="4.8rem"
-            height="4.4rem"
-            fontSize={theme.fontSize.lg}
-            rounded={true}
-            disabled={value.trim() === '' || status !== 'DEFAULT'}
-          >
-            <LuPlus size="1.6rem" />
-          </Button>
-        </S.InputContainer>
+        <InputGroup gap="0.5rem">
+          <InputGroup.Content>
+            <InputGroup.Input
+              value={value}
+              placeholder="추가할 카테고리를 입력해 주세요."
+              height="4.4rem"
+              status={status}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                handleChange(event, validateCategoryName(event.target.value, isCategoryExist))
+              }
+            ></InputGroup.Input>
+            <Button
+              type="submit"
+              width="4.8rem"
+              height="4.4rem"
+              fontSize={theme.fontSize.lg}
+              rounded={true}
+              disabled={value.trim() === '' || status !== 'DEFAULT'}
+            >
+              <LuPlus size="1.6rem" />
+            </Button>
+            {/* //TODO: icon button 으로 바꾸기 */}
+          </InputGroup.Content>
+          <InputGroup.Message status={status}>{message}</InputGroup.Message>
+        </InputGroup>
       </S.Form>
       <Modal.CloseButton close={handleCloseModal} />
     </Modal>

frontend/src/components/PairRoom/ReferenceCard/Footer/Footer.styles.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const Footer = styled.div`
   display: flex;
@@ -24,8 +24,3 @@ export const ButtonContainer = styled.div`
   display: flex;
   gap: 0.6rem;
 `;
-
-export const inputStyles = css`
-  height: 4rem;
-  border-radius: 0.6rem;
-`;

frontend/src/components/PairRoom/ReferenceCard/Footer/Footer.tsx

@@ -4,7 +4,7 @@ import { LuPlus } from 'react-icons/lu';
 
 import Button from '@/components/_common/Button/Button';
 import { Dropdown } from '@/components/_common/Dropdown';
-import Input from '@/components/_common/Input/Input';
+import Input from '@/components/_common/InputGroup/Input/Input';
 import { Category } from '@/components/PairRoom/ReferenceCard/ReferenceCard.type';
 
 import useInput from '@/hooks/_common/useInput';
@@ -25,7 +25,7 @@ interface FooterProps {
 const Footer = ({ accessCode, categories }: FooterProps) => {
   const [currentCategoryId, setCurrentCategoryId] = useState<string | null>(null);
 
-  const { value, status, message, handleChange, resetValue } = useInput();
+  const { value, status, handleChange, resetValue } = useInput();
 
   const { mutateAsync } = useAddReferenceLink();
 
@@ -55,11 +55,11 @@ const Footer = ({ accessCode, categories }: FooterProps) => {
       />
       <S.Form onSubmit={handleSubmit}>
         <Input
-          $css={S.inputStyles}
+          height="4rem"
+          borderRadius="0.6rem"
           placeholder="링크를 입력해주세요."
           value={value}
           status={status}
-          message={message}
           onChange={handleChange}
         />
         <Button

frontend/src/components/PairRoom/TimerCard/TimerEditPanel/TimerEditPanel.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { useParams } from 'react-router-dom';
 
 import Button from '@/components/_common/Button/Button';
-import Input from '@/components/_common/Input/Input';
+import Input from '@/components/_common/InputGroup/Input/Input';
 
 import useToastStore from '@/stores/toastStore';
 

frontend/src/components/PairRoom/TodoListCard/TodoListCard.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { LuPlus } from 'react-icons/lu';
 
 import Button from '@/components/_common/Button/Button';
-import Input from '@/components/_common/Input/Input';
+import Input from '@/components/_common/InputGroup/Input/Input';
 import { PairRoomCard } from '@/components/PairRoom/PairRoomCard';
 import Header from '@/components/PairRoom/TodoListCard/Header/Header';
 import TodoList from '@/components/PairRoom/TodoListCard/TodoList/TodoList';
@@ -40,6 +40,8 @@ const TodoListCard = ({ isOpen, toggleIsOpen }: TodoListCardProps) => {
           <S.Footer>
             <S.Form onSubmit={handleSubmit}>
               <Input
+                height="4rem"
+                borderRadius="0.6rem"
                 $css={S.inputStyles}
                 value={value}
                 onChange={handleChange}

frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.styles.ts

@@ -3,3 +3,12 @@ import styled from 'styled-components';
 export const Body = styled.div`
   margin: 4rem 0;
 `;
+
+export const Footer = styled.div`
+  display: flex;
+  gap: 1rem;
+
+  position: absolute;
+  right: 4rem;
+  bottom: 4rem;
+`;

frontend/src/components/PairRoomOnboarding/AddPairModal/AddPairModal.tsx

@@ -1,5 +1,7 @@
+import { ChangeEvent } from 'react';
+
 import Button from '@/components/_common/Button/Button';
-import Input from '@/components/_common/Input/Input';
+import { InputGroup } from '@/components/_common/InputGroup';
 import { Modal } from '@/components/_common/Modal';
 
 import useToastStore from '@/stores/toastStore';
@@ -41,26 +43,30 @@ const AddPairModal = ({ isOpen, closeModal, onPairData }: AddPairModalProps) =>
   };
 
   return (
-    <Modal isOpen={isOpen} close={handleCloseModal} size="60rem" height="30rem">
+    <Modal isOpen={isOpen} close={handleCloseModal} size="60rem" height="34rem">
       <Modal.Header title="페어 정보 연동하기" />
       <S.Body>
-        <Input
-          placeholder="깃허브 아이디를 입력해 주세요."
-          label="페어의 깃허브 아이디"
-          value={value}
-          status={status}
-          message={message}
-          onChange={(event) => handleChange(event, validatePairInfo(event.target.value))}
-        />
+        <InputGroup>
+          <InputGroup.Label>페어의 깃허브 아이디</InputGroup.Label>
+          <InputGroup.Input
+            placeholder="깃허브 아이디를 입력해 주세요."
+            value={value}
+            onChange={(event: ChangeEvent<HTMLInputElement>) =>
+              handleChange(event, validatePairInfo(event.target.value))
+            }
+          />
+          <InputGroup.Message status={status}>{message}</InputGroup.Message>
+        </InputGroup>
       </S.Body>
-      <Modal.Footer>
+
+      <S.Footer>
         <Button onClick={handleCloseModal} filled={false}>
           닫기
         </Button>
         <Button disabled={value.trim() === '' || status === 'ERROR'} onClick={() => connectPairData(value)}>
           연동하기
         </Button>
-      </Modal.Footer>
+      </S.Footer>
       <Modal.CloseButton close={handleCloseModal} />
     </Modal>
   );

frontend/src/components/PairRoomOnboarding/CreateBranchInput/CreateBranchInput.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import { GithubLogoWhite } from '@/assets';
 
-import Input from '@/components/_common/Input/Input';
-import { InputType } from '@/components/_common/Input/Input.type';
+import { InputGroup } from '@/components/_common/InputGroup';
+import { InputType } from '@/components/_common/InputGroup/Input.type';
 
 import useGetBranches from '@/queries/PairRoomOnboarding/useGetBranches';
 
@@ -30,14 +30,16 @@ const CreateBranchInput = ({ repositoryName, branchName, onBranchName }: CreateB
         </S.RepositoryNameBox>
         <S.InputWrapper>
           <S.ArrowIcon aria-hidden="true" />
-          <Input
-            autoFocus
-            placeholder="미션에서 사용할 브랜치 이름을 입력해 주세요."
-            value={branchName.value}
-            status={branchName.status}
-            message={branchName.message}
-            onChange={(event) => onBranchName(event, branches)}
-          />
+          <InputGroup>
+            <InputGroup.Input
+              autoFocus
+              placeholder="미션에서 사용할 브랜치 이름을 입력해 주세요."
+              value={branchName.value}
+              status={branchName.status}
+              onChange={(event) => onBranchName(event, branches)}
+            />
+            <InputGroup.Message status={branchName.status}>{branchName.message}</InputGroup.Message>
+          </InputGroup>
         </S.InputWrapper>
       </S.InputContainer>
     </S.Layout>

frontend/src/components/PairRoomOnboarding/PairNameInput/PairNameInput.styles.ts

@@ -26,26 +26,12 @@ export const SubTitle = styled.div`
   font-weight: ${({ theme }) => theme.fontWeight.normal};
 `;
 
-export const InputContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  margin-bottom: 1rem;
-`;
-
 export const InputWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 2rem;
 `;
 
-export const Label = styled.p`
-  color: ${({ theme }) => theme.color.primary[800]};
-  font-size: ${({ theme }) => theme.fontSize.base};
-  font-weight: ${({ theme }) => theme.fontWeight.medium};
-`;
-
 export const TextButton = styled.button`
   color: ${({ theme }) => theme.color.black[600]};
   font-size: ${({ theme }) => theme.fontSize.sm};