InfrastructureEducationPlatform · 0dimen · May 25, 2024 · May 26, 2024 · May 26, 2024
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,7 +5,7 @@ import { BlockEditPage } from './Pages/BlockEditPage.tsx';
 import { CreateChannel } from './Pages/CreateChannel';
 import { DeploymentListPage } from './Pages/DeploymentListPage.tsx';
 import { Home } from './Pages/Home';
-import { Join } from './Pages/Join';
+import { Join } from './Pages/Join.tsx';
 import { Login } from './Pages/Login';
 import { LoginCallback } from './Pages/LoginCallback';
 import { OnBoarding } from './Pages/Onboarding';

diff --git a/src/Pages/CreateChannel.tsx b/src/Pages/CreateChannel.tsx
@@ -5,6 +5,9 @@ import { channelApi, userApi } from '../api';
 import { LocalStorageUtils } from '../utils/LocalStorageUtils.ts';
 import { useUserContextQuery } from '../api/queries.tsx';
 import { useState } from 'react';
+import { InputRuled } from '../components/InputRuled.tsx';
+import { reject } from 'lodash';
+import { validateInput, validationConfig } from '../utils/validators.ts';
 
 type CreateChannelType = {
   channelName: string;
@@ -28,7 +31,7 @@ export function CreateChannel() {
         LocalStorageUtils.setSelectedChannelId(
           userResponse.data.channelPermissionList[0].channelId,
         );
-        navigate('/home', {state: {userContextReloadKey: 'true'}});
+        navigate('/home', { state: { userContextReloadKey: 'true' } });
       }
     })();
   };
@@ -55,23 +58,43 @@ export function CreateChannel() {
           <Form.Item<CreateChannelType>
             label="채널 이름"
             name={'channelName'}
-            rules={[{ required: true, message: '채널 이름을 입력해 주세요!' }]}
+            required={true}
+            rules={[
+              {
+                validator: (_, value) => {
+                  return validateInput({ value, ...validationConfig.channelName });
+                }
+              }
+            ]}
           >
-            <Input />
           </Form.Item>
 
           <Form.Item<CreateChannelType>
             label="채널 설명"
             name={'channelDescription'}
-            rules={[{ required: true, message: '채널 설명을 입력해 주세요!' }]}
+            required={true}
+            rules={[
+              {
+                validator: (_, value) => {
+                  return validateInput({ value, ...validationConfig.channelDescription });
+                }
+              }
+            ]}
           >
             <Input />
           </Form.Item>
 
           <Form.Item<CreateChannelType>
             label="채널 채널 프로필 이미지 URL"
             name={'channelProfileImageUrl'}
-            rules={[{ required: false, message: '비밀번호를 입력해주세요!' }]}
+            required={true}
+            rules={[
+              {
+                validator: (_, value) => {
+                  return validateInput({ value, ...validationConfig.channelProfileImg });
+                }
+              }
+            ]}
           >
             <Input />
           </Form.Item>

diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx
@@ -17,6 +17,7 @@ import { sketchApi } from '../api';
 import { MainLayout } from '../components/MainLayout.tsx';
 import { useChannelNavigationContext } from '../components/providers/ChannelNavigationProvider.tsx';
 import { SketchProjection } from '../types/SketchProjection.ts';
+import { validateInput, validationConfig } from '../utils/validators.ts';
 
 type CreateSketchType = {
   name: string;
@@ -25,7 +26,7 @@ type CreateSketchType = {
 
 export function Home() {
   const location = useLocation();
-  const state = {...location.state};
+  const state = { ...location.state };
   const userContextReloadKey = state.userContextReloadKey;
   return (
     <MainLayout pageKey={'sketch-list'} userContextReloadKey={userContextReloadKey}>
@@ -144,7 +145,8 @@ export function SketchListView({
             id={'createSketchForm'}
             name="basic"
             onFinish={(value) => {
-              (async () => {
+              (
+                async () => {
                 await sketchApi.createSketchAsync(currentChannel.channelId, {
                   name: value.name,
                   description: value.description,
@@ -163,21 +165,27 @@ export function SketchListView({
             <Form.Item<CreateSketchType>
               label="스케치 이름"
               name={'name'}
-              rules={[
-                { required: true, message: '스케치 이름을 입력해 주세요!' },
-              ]}
+              required={true}
+              rules = {[{
+                validator: (_, value) =>{
+                  return validateInput({value: value, ...validationConfig.sketchName});
+                }
+              }]}
             >
-              <Input />
+              <Input/>
+
             </Form.Item>
 
             <Form.Item<CreateSketchType>
               label="스케치 설명"
               name={'description'}
-              rules={[
-                { required: true, message: '스케치 설명을 입력해 주세요!' },
-              ]}
+              required={true}
+              rules={[{
+                validator: (_, value) =>{
+                  return validateInput({value: value, ...validationConfig.sketchDescription});
+              }}]}
             >
-              <Input />
+              <Input/>
             </Form.Item>
           </Form>
         </Flex>

diff --git a/src/Pages/Join.tsx b/src/Pages/Join.tsx
@@ -1,9 +1,10 @@
 import { Button, Card, Form, Input } from 'antd';
 import { useNavigate } from 'react-router-dom';
 
-import { authApi } from '../api';
-import { CredentialProvider } from '../libs/core-api/api';
+import { authApi } from '../api/index.ts';
+import { CredentialProvider } from '../libs/core-api/api/index.ts';
 import { LocalStorageUtils } from '../utils/LocalStorageUtils.ts';
+import { validateInput, validationConfig } from '../utils/validators.ts';
 
 type RegistrationFormType = {
   userName: string;
@@ -54,17 +55,21 @@ export function Join() {
           <Form.Item<RegistrationFormType>
             label="사용자 이름"
             name={'userName'}
-            rules={[
-              { required: true, message: '사용자 이름을 입력해 주세요!' },
-            ]}
+            rules={[{validator:(_,value) =>{
+              return validateInput({value: value, ...validationConfig.userName});
+            }}]}
           >
             <Input />
           </Form.Item>
 
           <Form.Item<RegistrationFormType>
             label="사용자 이메일"
             name={'userEmail'}
-            rules={[{ required: true, message: '비밀번호를 입력해주세요!' }]}
+            rules={[
+              {validator:(_,value) =>{
+                return validateInput({value: value, ...validationConfig.userEmail});
+              }}
+            ]}
           >
             <Input />
           </Form.Item>

diff --git a/src/components/InputRuled.tsx b/src/components/InputRuled.tsx
@@ -0,0 +1,69 @@
+import { Input, Typography, message } from "antd";
+import { InputStatus } from "antd/es/_util/statusUtils";
+import { max, set } from "lodash";
+import { useEffect, useState } from "react";
+import { CheckInputType, InputRuledProps, checkInput } from "../utils/InputUtils";
+import { SizeType } from "antd/es/config-provider/SizeContext";
+
+// InputRuled 컴포넌트는 antd Input 컴포넌트를 상속받아서 사용합니다.
+// Input, Form.Item의 Input 모두에서 사용 가능합니다.
+
+// required한 경우, min_length를 최소 1 이상으로 설정해야합니다.
+// required하지 않은 경우 min_length를 0으로 설정하면 됩니다.
+
+// 모든 조건을 충족하는 경우를 ''로 표시합니다.
+
+
+
+// 에러 메시지 출력
+export const ErrorMessage = ({message}:{message?:string}) => {
+    return (
+        <div className='ErrorMessage' style={{ minHeight: '2vh', minWidth: '1vw' }}>
+            <Typography.Text type={'danger'}>
+                {message}
+            </Typography.Text>
+        </div>
+    );
+}
+
+export const InputRuled = ({ value = '',callback, style, size,...props }: InputRuledProps&{callback?: (value: string) => void, style?:React.CSSProperties, size?:SizeType}) => {
+    const [inputValue, setInputValue] = useState<string>(value);
+
+    // input 상태
+    const [status, setStatus] = useState<CheckInputType>({ status: '', message: '' });
+
+    const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const input = event.target.value;
+
+        // input 무결성 확인 및 결과에 따른 status 설정
+        setStatus(checkInput({ ...props, value: input }));
+        console.log(input,status);
+
+        // length가 max를 초과하지 않는 경우에만 input value 설정
+        if(status.errorType !== 'length_max'){
+            setInputValue(input);
+        }
+
+        if(status.status === '' && callback){
+            callback(inputValue);
+        }
+    };
+
+    return (
+        <>
+            <Input
+                status={status.status}
+                defaultValue={inputValue}
+                count={{ max: props.maxLength, show: true }}
+                max={props.maxLength}
+                type={props.type}
+                onInput={handleInput}
+                placeholder={props.placeholder}
+                style={style}
+                size = {size}
+            />
+            <ErrorMessage message={status.message}/>
+        </>
+    );
+};
+
diff --git a/src/components/blocks/WebServerBlockNode.tsx b/src/components/blocks/WebServerBlockNode.tsx
@@ -21,7 +21,7 @@ export type WebServerBlockNodeProps = CommonBlockProps & {
     imageTags: string;
     username: string | undefined;
     secrets: string | undefined;
-    containerPort: number;
+    containerPort?: number;
   };
   connectionMetadata: {
     dbRef: string;

diff --git a/src/components/blocks/editor/DatabaseBlockEditor.tsx b/src/components/blocks/editor/DatabaseBlockEditor.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { DatabaseBlockNodeProps } from '../DatabaseBlockNode.tsx';
 import { CommonBlockNodeContentProps } from './BlockNodeEditDrawer.tsx';
+import { validateInput, validationConfig } from '../../../utils/validators.ts';
 
 const { Option } = Select;
 export function DatabaseBlockEditor({
@@ -33,7 +34,12 @@ export function DatabaseBlockEditor({
       <Form.Item<DatabaseBlockNodeProps>
         label="리소스 이름"
         name={'blockTitle'}
-        rules={[{ required: true, message: '리소스 이름은 필수 필드입니다!' }]}
+        rules={[
+          {validator(_, value){
+            return validateInput({value, ...validationConfig.blockTitle})
+          }}
+        ]}
+
         initialValue={node.data.blockTitle}
       >
         <Input />
@@ -43,7 +49,9 @@ export function DatabaseBlockEditor({
         label="리소스 설명"
         name={'blockDescription'}
         rules={[
-          { required: true, message: '리소스에 대한 설명은 필수 입니다!' },
+          {validator(_, value){
+            return validateInput({value, ...validationConfig.blockDescription})}
+          }
         ]}
         initialValue={node.data.blockDescription}
       >

diff --git a/src/components/blocks/editor/VirtualMachineBlockEditor.tsx b/src/components/blocks/editor/VirtualMachineBlockEditor.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { VirtualMachineBlockNodeProps } from '../VirtualMachineBlockNode.tsx';
 import { CommonBlockNodeContentProps } from './BlockNodeEditDrawer.tsx';
+import { validateInput, validationConfig } from '../../../utils/validators.ts';
 
 const { Option } = Select;
 
@@ -34,7 +35,11 @@ export function VirtualMachineBlockEditor({
       <Form.Item<VirtualMachineBlockNodeProps>
         label="리소스 이름"
         name={'blockTitle'}
-        rules={[{ required: true, message: '리소스 이름은 필수 필드입니다!' }]}
+        rules={[{
+          validator(_, value) {
+            return validateInput({ value, ...validationConfig.blockTitle })
+          }
+        }]}
         initialValue={node.data.blockTitle}
       >
         <Input />
@@ -44,7 +49,11 @@ export function VirtualMachineBlockEditor({
         label="리소스 설명"
         name={'blockDescription'}
         rules={[
-          { required: true, message: '리소스에 대한 설명은 필수 입니다!' },
+          {
+            validator(_, value) {
+              return validateInput({ value, ...validationConfig.blockDescription })
+            }
+          }
         ]}
         initialValue={node.data.blockDescription}
       >

diff --git a/src/components/blocks/editor/WebServerBlockEditor.tsx b/src/components/blocks/editor/WebServerBlockEditor.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { WebServerBlockNodeProps } from '../WebServerBlockNode.tsx';
 import { CommonBlockNodeContentProps } from './BlockNodeEditDrawer.tsx';
+import { validateInput, validationConfig } from '../../../utils/validators.ts';
 
 const { Option } = Select;
 
@@ -33,7 +34,11 @@ export function WebServerBlockEditor({
       <Form.Item<WebServerBlockNodeProps>
         label="리소스 이름"
         name={'blockTitle'}
-        rules={[{ required: true, message: '리소스 이름은 필수 필드입니다!' }]}
+        rules={[{
+          validator(_, value) {
+            return validateInput({ value, ...validationConfig.blockTitle });
+          }
+        }]}
         initialValue={node.data.blockTitle}
       >
         <Input />
@@ -43,7 +48,12 @@ export function WebServerBlockEditor({
         label="리소스 설명"
         name={'blockDescription'}
         rules={[
-          { required: true, message: '리소스에 대한 설명은 필수 입니다!' },
+          {
+            validator(_, value) {
+              return validateInput({ value, ...validationConfig.blockDescription });
+
+            }
+          },
         ]}
         initialValue={node.data.blockDescription}
       >

diff --git a/src/components/preferences/ChannelMemberPreferences.tsx b/src/components/preferences/ChannelMemberPreferences.tsx
@@ -32,6 +32,8 @@ import {
 } from '../../libs/core-api/api';
 import { CustomModal } from '../CustomModal.tsx';
 import { useUserContext } from '../providers/UserContextProvider.tsx';
+import { InputRuled } from '../InputRuled.tsx';
+import { validationConfig } from '../../utils/validators.ts';
 
 type ChannelMemberData = {
   userId: string;
@@ -206,16 +208,17 @@ export function ChannelMemberPreferences({ channelId }: { channelId: string }) {
         }}
       >
         <Flex style={{ flexDirection: 'column' }}>
-          <Input
+          <InputRuled
             placeholder={'이름 혹은 이메일을 입력하세요.'}
+            callback={(value) => setSearchParams(value)}
             size={'large'}
-            onInput={(e) => setSearchParams(e.currentTarget.value)}
             style={{
               border: 'none',
               borderRadius: '0',
               borderBottom: '1px solid #d9d9d9',
             }}
-          />
+            {...validationConfig.searchInput}
+                     />
           <List
             itemLayout={'horizontal'}
             dataSource={channelUserSearchResult}