레이아웃에 헤더 높이 만큼 padding-top 적용, Input style rem값 변경

frontend/src/components/Input/style.ts → frontend/src/components/Input/Input.style.ts

@@ -5,26 +5,26 @@ import type { BaseProps, TextFieldProps } from './Input';
 
 const sizes = {
   small: css`
-    gap: 0.8rem;
+    gap: 0.5rem;
 
-    height: 3.2rem;
-    padding: 1rem 1.2rem;
+    height: 2rem;
+    padding: 0.625rem 0.75rem;
 
-    font-size: 1.2rem;
+    font-size: 0.75rem;
     line-height: 100%;
 
-    border-radius: '0.8rem';
+    border-radius: 8px;
   `,
   medium: css`
-    gap: 1.2rem;
+    gap: 0.75rem;
 
-    height: 4.8rem;
-    padding: 1.6rem;
+    height: 3rem;
+    padding: 1rem;
 
-    font-size: 1.6rem;
-    line-height: '100%';
+    font-size: 1rem;
+    line-height: 100%;
 
-    border-radius: 1.2rem;
+    border-radius: 12px;
   `,
 };
 
@@ -34,17 +34,18 @@ const variants = {
   `,
   outlined: css`
     background: none;
-    border: 0.1rem solid #808080;
+    border: 1px solid #808080;
   `,
   text: css`
     background: none;
   `,
 };
 
-export const Wrapper = styled.div`
+export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
+  width: 100%;
 `;
 
 export const Base = styled.div<BaseProps>`
@@ -56,23 +57,23 @@ export const Base = styled.div<BaseProps>`
   ${({ isValid }) =>
     isValid === false &&
     css`
-      border: 0.1rem solid red;
+      border: 1px solid red;
     `};
 
   /* for Adornment size */
   & > div {
     ${({ size }) =>
       size === 'small' &&
       css`
-        width: 1.2rem;
-        height: 1.2rem;
+        width: 0.75rem;
+        height: 0.75rem;
       `}
 
     ${({ size }) =>
       size === 'medium' &&
       css`
-        width: 1.6rem;
-        height: 1.6rem;
+        width: 1rem;
+        height: 1rem;
       `}
   }
 `;
@@ -102,11 +103,18 @@ export const TextField = styled.input<TextFieldProps>`
   }
 `;
 
+export const Label = styled.label`
+  font-size: 1rem;
+  line-height: 100%;
+`;
+
 export const Adornment = styled.div`
   display: flex;
 `;
 
 export const HelperText = styled.span`
-  margin-left: 8px;
+  height: 1rem;
+  margin-left: 0.5rem;
+  font-size: 1rem;
   color: red;
 `;

frontend/src/components/Input/Input.tsx

@@ -1,6 +1,14 @@
-import { Children, HTMLAttributes, InputHTMLAttributes, isValidElement, PropsWithChildren, ReactNode } from 'react';
+import {
+  Children,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  isValidElement,
+  LabelHTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
 
-import * as S from './style';
+import * as S from './Input.style';
 
 export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
   size?: 'small' | 'medium';
@@ -10,6 +18,9 @@ export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
 export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   inputSize?: 'small' | 'medium';
 }
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
+
 export interface AdornmentProps extends HTMLAttributes<HTMLDivElement> {}
 
 export interface HelperTextProps extends HTMLAttributes<HTMLSpanElement> {}
@@ -20,14 +31,16 @@ const getChildOfType = (children: ReactNode, type: unknown) => {
   return childrenArray.find((child) => isValidElement(child) && child.type === type);
 };
 
-const getChildrenWithoutType = (children: ReactNode, type: unknown) => {
+const getChildrenWithoutTypes = (children: ReactNode, types: unknown[]) => {
   const childrenArray = Children.toArray(children);
 
-  return childrenArray.filter((child) => !(isValidElement(child) && child.type === type));
+  return childrenArray.filter((child) => !(isValidElement(child) && types.includes(child.type)));
 };
 
 const TextField = ({ ...rests }: TextFieldProps) => <S.TextField {...rests} />;
 
+const Label = ({ children, ...rests }: PropsWithChildren<LabelProps>) => <S.Label {...rests}>{children}</S.Label>;
+
 const Adornment = ({ children, ...rests }: PropsWithChildren<AdornmentProps>) => (
   <S.Adornment {...rests}>{children}</S.Adornment>
 );
@@ -37,6 +50,7 @@ const HelperText = ({ children, ...rests }: PropsWithChildren<HelperTextProps>)
 );
 
 const HelperTextType = (<HelperText />).type;
+const LabelType = (<Label />).type;
 
 const Base = ({
   variant = 'filled',
@@ -45,21 +59,24 @@ const Base = ({
   children,
   ...rests
 }: PropsWithChildren<BaseProps>) => {
-  const inputWithAdornment = getChildrenWithoutType(children, HelperTextType);
+  const inputWithAdornment = getChildrenWithoutTypes(children, [HelperTextType, LabelType]);
   const helperText = getChildOfType(children, HelperTextType);
+  const label = getChildOfType(children, LabelType);
 
   return (
-    <S.Wrapper>
+    <S.Container>
+      {label}
       <S.Base variant={variant} size={size} isValid={isValid} {...rests}>
         {inputWithAdornment}
       </S.Base>
       {helperText}
-    </S.Wrapper>
+    </S.Container>
   );
 };
 
 const Input = Object.assign(Base, {
   TextField,
+  Label,
   Adornment,
   HelperText,
 });

frontend/src/components/Layout/style.ts → frontend/src/components/Layout/Layout.style.ts

@@ -1,8 +1,15 @@
 import styled from '@emotion/styled';
 
 export const LayoutContainer = styled.div`
+  --header-height: 4rem;
+
   max-width: 86rem;
   margin: auto;
   margin-bottom: 3rem;
   padding: 0 3rem;
 `;
+
+export const Wrapper = styled.div`
+  flex: 1;
+  padding-top: var(--header-height);
+`;

frontend/src/components/Layout/Layout.tsx

@@ -1,12 +1,14 @@
 import { Outlet } from 'react-router-dom';
 
 import { Header } from '@/components';
-import * as S from './style';
+import * as S from './Layout.style';
 
 const Layout = () => (
   <S.LayoutContainer>
     <Header />
-    <Outlet />
+    <S.Wrapper>
+      <Outlet />
+    </S.Wrapper>
   </S.LayoutContainer>
 );
 

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

@@ -83,7 +83,7 @@ const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
   };
 
   return (
-    <Flex direction='column' align='center' padding='10rem 0 0 0' width='100%'>
+    <Flex direction='column' align='center' width='100%'>
       <S.MainContainer>
         <TemplateTitleInput
           placeholder='템플릿명을 입력해주세요'

frontend/src/pages/TemplateListPage/TemplateListPage.tsx

@@ -17,7 +17,7 @@ const TemplateListPage = () => {
   const list = data?.templates || [];
 
   return (
-    <Flex direction='column' justify='flex-start' align='flex-end' width='100%' padding='10rem 0 0 0' gap='3.6rem'>
+    <Flex direction='column' justify='flex-start' align='flex-end' width='100%' gap='3.6rem'>
       <Text.Medium color='white' weight='bold'>
         {list.length} Results
       </Text.Medium>

frontend/src/pages/TemplatePage/TemplatePage.tsx

@@ -84,7 +84,7 @@ const TemplatePage = () => {
       {isEdit ? (
         <TemplateEditPage template={template} toggleEditButton={toggleEditButton} />
       ) : (
-        <Flex direction='column' align='center' padding='10rem 0 0 0' width='100%'>
+        <Flex direction='column' align='center' width='100%'>
           <S.MainContainer>
             <Flex justify='space-between'>
               <Flex direction='column' gap='1.6rem'>

frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx

@@ -70,7 +70,7 @@ const TemplateUploadPage = () => {
 
   return (
     <>
-      <Flex direction='column' justify='center' align='flex-start' gap='1.5rem' padding='10rem 0'>
+      <Flex direction='column' justify='center' align='flex-start' gap='1.5rem'>
         <Flex direction='column' justify='center' align='flex-start' gap='1rem' width='100%'>
           <TemplateTitleInput
             placeholder='템플릿명을 입력해주세요'