[feat/CK-147] 골룸 생성 페이지 고도화 및 유효성 검사를 구현한다

client/src/components/_common/InputField/InputField.styles.ts

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+export const InputField = styled.div`
+  box-sizing: content-box;
+`;
+
+export const FieldHeader = styled.div<{ size?: 'small' | 'normal' }>`
+  margin-bottom: ${({ size }) => (size === 'small' ? '0.8rem' : '1.8rem')};
+`;
+
+export const Label = styled.label<{ size?: 'small' | 'normal' }>`
+  ${({ theme, size }) =>
+    size === 'small' ? theme.fonts.nav_text : theme.fonts.nav_title};
+  & > span {
+    color: ${({ theme }) => theme.colors.red};
+  }
+`;
+
+export const Description = styled.p`
+  ${({ theme }) => theme.fonts.nav_text};
+  color: ${({ theme }) => theme.colors.gray300};
+`;
+
+export const InputBox = styled.div<{
+  size?: 'small' | 'normal';
+  type?: 'text' | 'date' | 'textarea' | 'number';
+}>`
+  & > input {
+    ${({ theme, size }) => (size === 'small' ? theme.fonts.button1 : theme.fonts.h2)};
+    width: ${({ size, type }) =>
+      type === 'number' ? '7rem' : size === 'small' ? '' : '100%'};
+    padding: ${({ size, type }) =>
+      type === 'number' ? '0.4rem' : size === 'small' ? '0.1rem' : '0.4rem'};
+
+    text-align: ${({ size }) => (size === 'small' ? 'center' : '')};
+
+    border: ${({ theme, type }) =>
+      type === 'number' ? `0.1rem solid ${theme.colors.black}` : 'none'};
+    border-bottom: ${({ theme }) => `0.1rem solid ${theme.colors.black}`};
+    border-radius: ${({ type }) => (type === 'number' ? '4px' : '')};
+  }
+
+  & > textarea {
+    ${({ theme, size }) => (size === 'small' ? theme.fonts.button1 : theme.fonts.h2)};
+    width: 100%;
+    height: 15rem;
+    padding: 1.5rem 1rem;
+
+    border: ${({ theme }) => `3px solid ${theme.colors.main_dark}`};
+    border-radius: 8px;
+  }
+`;
+
+export const ErrorMessage = styled.p<{ size?: 'small' | 'normal' }>`
+  ${({ theme }) => theme.fonts.button1};
+  position: absolute;
+  color: ${({ theme }) => theme.colors.red};
+`;

client/src/components/_common/InputField/InputField.tsx

@@ -0,0 +1,55 @@
+import { HandleInputChangeType } from '@hooks/_common/useFormInput';
+import * as S from './InputField.styles';
+
+type InputFieldProps = {
+  name: string;
+  value: string;
+  onChange: HandleInputChangeType;
+  label?: string;
+  type?: 'text' | 'date' | 'textarea' | 'number';
+  size?: 'small' | 'normal';
+  isRequired?: boolean;
+  description?: string;
+  placeholder?: string;
+  errorMessage?: string;
+  style?: { [key: string]: string };
+};
+
+const InputField = ({ ...props }: InputFieldProps) => {
+  return (
+    <S.InputField style={props.style}>
+      <S.FieldHeader size={props.size}>
+        <S.Label htmlFor={props.name} size={props.size}>
+          {props.label}
+          {props.isRequired && <span>*</span>}
+        </S.Label>
+        {props.description && <S.Description>{props.description}</S.Description>}
+      </S.FieldHeader>
+      <S.InputBox size={props.size} type={props.type}>
+        {props.type === 'textarea' ? (
+          <textarea
+            id={props.name}
+            name={props.name}
+            placeholder={props.placeholder}
+            value={props.value}
+            onChange={props.onChange}
+          />
+        ) : (
+          <input
+            id={props.name}
+            name={props.name}
+            placeholder={props.placeholder}
+            value={props.value}
+            type={props.type === 'number' ? 'text' : props.type || 'text'}
+            onChange={props.onChange}
+          />
+        )}
+        {props.errorMessage && (
+          <S.ErrorMessage size={props.size}>{props.errorMessage}</S.ErrorMessage>
+        )}
+      </S.InputBox>
+    </S.InputField>
+  );
+};
+
+export default InputField;

client/src/components/goalRoomCreatePage/createGoalRoomForm/CreateGoalRoomForm.styles.ts

@@ -1,88 +1,18 @@
-import media from '@/styles/media';
 import { styled } from 'styled-components';
 
-export const Form = styled.form``;
-
-export const RoadmapInfo = styled.div`
-  ${({ theme }) => theme.fonts.description4}
-`;
-
-export const InputField = styled.label`
-  width: 80%;
-  height: 80%;
-  color: ${({ theme }) => theme.colors.gray300};
-  &::placeholder {
-    ${({ theme }) => theme.fonts.description4};
-    color: ${({ theme }) => theme.colors.gray200};
-  }
-`;
-
-export const Input = styled.input`
-  ${({ theme }) => theme.fonts.nav_title}
-  width: 70%;
-  padding: 1rem 0.5rem;
-  color: ${({ theme }) => theme.colors.gray300};
-  border-bottom: ${({ theme }) => `0.1rem solid ${theme.colors.black}`};
-  &::placeholder {
-    ${({ theme }) => theme.fonts.description4};
-    color: ${({ theme }) => theme.colors.gray200};
-  }
-
-  ${media.mobile`
-    width:100%;
-  `}
-`;
-
-export const NodeSectionWrapper = styled.div`
-  display: flex;
-  column-gap: 2rem;
-`;
-
-export const NodeList = styled.form<{ nodeCount: number }>`
-  display: grid;
-  grid-template-rows: ${({ nodeCount }) => `repeat(${nodeCount}, 1fr)`};
-  row-gap: 2.4rem;
+export const Form = styled.form`
+  margin: 6rem 0;
 `;
 
-export const NodeWrapper = styled.div`
+export const SubmitButtonWrapper = styled.div`
   display: flex;
-  align-items: center;
-`;
-
-export const NodeInfo = styled.div`
-  width: 18rem;
-  height: 18rem;
-  margin-right: 2rem;
-  padding: 2rem;
-
-  background-color: ${({ theme }) => theme.colors.gray100};
-  border-radius: 8px;
-`;
-
-export const NodeConfigs = styled.div`
-  display: flex;
-
-  & > *:not(:last-child) {
-    margin-right: 2rem;
+  justify-content: end;
+  margin-top: 3rem;
+
+  & > button {
+    padding: 1.8rem 3rem;
+    color: ${({ theme }) => theme.colors.white};
+    background-color: ${({ theme }) => theme.colors.main_dark};
+    border-radius: 8px;
   }
 `;
-
-export const DateInput = styled.input`
-  padding: 0.7rem 0;
-  text-align: center;
-  background-color: ${({ theme }) => theme.colors.gray100};
-  border-radius: 4px;
-`;
-
-export const Textarea = styled.textarea`
-  width: 70%;
-  height: 16rem;
-  padding: 1rem 0.5rem;
-
-  border: ${({ theme }) => `0.1rem solid ${theme.colors.black}`};
-  border-radius: 8px;
-
-  ${media.mobile`
-    width:100%;
-  `}
-`;