[FE] fix: 꿀조합 이름, 닉네임 글자수 제한

frontend/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.3).
+ * Mock Service Worker (1.3.0).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

frontend/src/components/Members/MemberModifyInput/MemberModifyInput.tsx

@@ -0,0 +1,48 @@
+import { Heading, Spacing, Text, useTheme } from '@fun-eat/design-system';
+import type { ChangeEventHandler } from 'react';
+import styled from 'styled-components';
+
+import { Input } from '@/components/Common';
+
+const MIN_LENGTH = 1;
+const MAX_LENGTH = 10;
+
+interface MemberModifyInputProps {
+  nickname: string;
+  modifyNickname: ChangeEventHandler<HTMLInputElement>;
+}
+
+const MemberModifyInput = ({ nickname, modifyNickname }: MemberModifyInputProps) => {
+  const theme = useTheme();
+
+  return (
+    <MemberModifyInputContainer>
+      <Heading as="h2" size="xl" tabIndex={0}>
+        닉네임
+      </Heading>
+      <NicknameStatusText color={theme.textColors.info} tabIndex={0}>
+        {nickname.length} / {MAX_LENGTH}
+      </NicknameStatusText>
+      <Spacing size={12} />
+      <Input
+        value={nickname}
+        customWidth="100%"
+        onChange={modifyNickname}
+        minLength={MIN_LENGTH}
+        maxLength={MAX_LENGTH}
+      />
+    </MemberModifyInputContainer>
+  );
+};
+
+export default MemberModifyInput;
+
+const MemberModifyInputContainer = styled.div`
+  position: relative;
+`;
+
+const NicknameStatusText = styled(Text)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;

frontend/src/components/Members/index.ts

@@ -1,3 +1,4 @@
 export { default as MembersInfo } from './MembersInfo/MembersInfo';
 export { default as MemberReviewList } from './MemberReviewList/MemberReviewList';
 export { default as MemberRecipeList } from './MemberRecipeList/MemberRecipeList';
+export { default as MemberModifyInput } from './MemberModifyInput/MemberModifyInput';

frontend/src/components/Recipe/RecipeNameInput/RecipeNameInput.tsx

@@ -1,35 +1,59 @@
-import { Heading, Spacing } from '@fun-eat/design-system';
+import { Heading, Spacing, Text, useTheme } from '@fun-eat/design-system';
 import type { ChangeEventHandler } from 'react';
 import styled from 'styled-components';
 
 import { Input } from '@/components/Common';
 import { useRecipeFormActionContext } from '@/hooks/context';
 
+const MIN_LENGTH = 1;
+const MAX_LENGTH = 15;
 interface RecipeNameInputProps {
   recipeName: string;
 }
 
 const RecipeNameInput = ({ recipeName }: RecipeNameInputProps) => {
   const { handleRecipeFormValue } = useRecipeFormActionContext();
+  const theme = useTheme();
 
   const handleRecipeName: ChangeEventHandler<HTMLInputElement> = (e) => {
     handleRecipeFormValue({ target: 'title', value: e.currentTarget.value });
   };
 
   return (
-    <>
+    <RecipeNameInputContainer>
       <Heading as="h2" size="xl" tabIndex={0}>
         꿀조합 이름
         <RequiredMark aria-label="필수 작성">*</RequiredMark>
       </Heading>
+      <RecipeNameStatusText color={theme.textColors.info} tabIndex={0}>
+        {recipeName.length} / {MAX_LENGTH}
+      </RecipeNameStatusText>
       <Spacing size={12} />
-      <Input placeholder="재치있는 이름을 지어주세요!" value={recipeName} onChange={handleRecipeName} />
-    </>
+      <Input
+        placeholder="재치있는 이름을 지어주세요!"
+        value={recipeName}
+        onChange={handleRecipeName}
+        minLength={MIN_LENGTH}
+        maxLength={MAX_LENGTH}
+      />
+    </RecipeNameInputContainer>
   );
 };
 
 export default RecipeNameInput;
 
+const RecipeNameInputContainer = styled.div`
+  position: relative;
+  width: 300px;
+`;
+
 const RequiredMark = styled.sup`
   color: ${({ theme }) => theme.colors.error};
 `;
+
+const RecipeNameStatusText = styled(Text)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  line-height: 28px;
+`;

frontend/src/pages/MemberModifyPage.tsx

@@ -1,10 +1,11 @@
-import { Button, Heading, Spacing } from '@fun-eat/design-system';
+import { Button, Spacing } from '@fun-eat/design-system';
 import type { ChangeEventHandler, FormEventHandler } from 'react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Input, SectionTitle, SvgIcon } from '@/components/Common';
+import { SectionTitle, SvgIcon } from '@/components/Common';
+import { MemberModifyInput } from '@/components/Members';
 import { IMAGE_MAX_SIZE } from '@/constants';
 import { useFormData, useImageUploader } from '@/hooks/common';
 import { useMemberModifyMutation, useMemberQuery } from '@/hooks/queries/members';
@@ -85,11 +86,7 @@ const MemberModifyPage = () => {
             </MemberImageUploaderWrapper>
           </MemberImageUploaderContainer>
           <Spacing size={44} />
-          <Heading as="h2" size="xl" tabIndex={0}>
-            닉네임
-          </Heading>
-          <Spacing size={12} />
-          <Input value={nickname} customWidth="100%" onChange={modifyNickname} />
+          <MemberModifyInput nickname={nickname} modifyNickname={modifyNickname} />
         </div>
         <FormButton customWidth="100%" customHeight="60px" size="xl" weight="bold">
           수정하기