Merge pull request #13 from TRIPONG-2022/feature/form-components

Form과 관련된 Component 구현

components/shared/AuthInput/AuthInput.styled.ts

@@ -1,9 +1,40 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  margin-bottom: 1.5rem;
+`;
 
-export const Label = styled.label``;
+export const Label = styled.label`
+  margin-bottom: 0.5rem;
+  display: block;
 
-export const Input = styled.input``;
+  font-size: 0.875rem;
+  font-weight: bold;
+`;
 
-export const ErrorMessage = styled.p``;
+export const Input = styled.input<{ $invalid?: boolean }>`
+  width: 100%;
+  border: 2px solid;
+  border-color: ${({ $invalid }) => ($invalid ? 'red' : 'transparent')};
+  border-radius: 1rem;
+  padding: 1.25rem;
+
+  font-size: 1rem;
+  color: #000000;
+  background-color: #fafafa;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ $invalid }) => ($invalid ? 'red' : '#0dc5d6')};
+  }
+
+  ::placeholder {
+    color: rgba(0, 0, 0, 0.4);
+  }
+`;
+
+export const ErrorMessage = styled.p`
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: red;
+`;

components/shared/AuthInput/AuthInput.tsx

@@ -11,7 +11,12 @@ const AuthInput = React.forwardRef<HTMLInputElement, AuthInputProps>(
     return (
       <Styled.Container>
         <Styled.Label htmlFor={id}>{label}</Styled.Label>
-        <Styled.Input {...inputProps} id={id} ref={ref} />
+        <Styled.Input
+          {...inputProps}
+          id={id}
+          ref={ref}
+          $invalid={!!errorMessage}
+        />
         {errorMessage && (
           <Styled.ErrorMessage>{errorMessage}</Styled.ErrorMessage>
         )}

components/shared/Button/Button.styled.ts

@@ -0,0 +1,58 @@
+import styled, { css, CSSProp, DefaultTheme } from 'styled-components';
+
+const ButtonSizeStyles = {
+  md: css`
+    padding: 0.875rem 1rem;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+  `,
+  lg: css`
+    padding: 1.25rem;
+    border-radius: 1rem;
+    font-size: 1rem;
+  `,
+};
+
+const ButtonVariantStyles = {
+  primary: css`
+    color: #ffffff;
+    background-color: #0dc5d6;
+  `,
+  outline: css`
+    color: #0dc5d6;
+    background-color: transparent;
+    box-shadow: inset 0 0 0 2px #0dc5d6;
+  `,
+};
+
+export type ButtonSize = keyof typeof ButtonSizeStyles;
+export type ButtonVariant = keyof typeof ButtonVariantStyles;
+
+interface BaseButtonProps {
+  $size: ButtonSize;
+  $variant: ButtonVariant;
+  $css?: CSSProp<DefaultTheme>;
+}
+
+export const BaseButton = styled.button<BaseButtonProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  font-weight: bold;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  &:disabled {
+    opacity: 0.25;
+    pointer-events: none;
+  }
+
+  ${({ $size, $variant, $css }) => css`
+    ${ButtonSizeStyles[$size]}
+    ${ButtonVariantStyles[$variant]}
+    ${$css}
+  `}
+`;

components/shared/Button/Button.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CSSProp, DefaultTheme } from 'styled-components';
+import * as Styled from './Button.styled';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  css?: CSSProp<DefaultTheme>;
+  size?: Styled.ButtonSize;
+  variant?: Styled.ButtonVariant;
+}
+
+export default function Button({
+  css,
+  children,
+  size = 'md',
+  variant = 'primary',
+  ...buttonProps
+}: ButtonProps) {
+  return (
+    <Styled.BaseButton
+      $css={css}
+      $size={size}
+      $variant={variant}
+      {...buttonProps}
+    >
+      <span>{children}</span>
+    </Styled.BaseButton>
+  );
+}

components/shared/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

layouts/AuthLayout/AuthLayout.styled.ts

@@ -1,17 +1,51 @@
 import styled from 'styled-components';
 
+export const OuterContainer = styled.div`
+  padding: 3rem 0;
+
+  @media (min-width: 768px) {
+    padding: 5rem 0;
+  }
+
+  @media (min-width: 1280px) {
+    padding: 10rem 0;
+  }
+`;
+
 export const Container = styled.div`
   width: 100%;
   max-width: 32rem;
   margin: 0 auto;
-  padding-top: 10rem;
-  background-color: rgba(0, 0, 255, 0.25);
+  padding: 0 1.25rem;
+  background-color: #ffffff;
+  border-radius: 1rem;
+
+  @media (min-width: 768px) {
+    padding: 2.5rem;
+  }
+`;
+
+export const BackgroundImage = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1000;
+  background-color: #ffffff;
+
+  @media (min-width: 768px) {
+    background-image: url('/images/background.jpg');
+    background-size: cover;
+    background-attachment: fixed;
+  }
 `;
 
 export const Title = styled.h1`
-  font-size: 1.75rem;
+  font-size: 2rem;
   font-weight: bold;
-  text-align: center;
+  text-align: left;
+  margin-bottom: 2.5rem;
 `;
 
 export const Description = styled.p`

layouts/AuthLayout/AuthLayout.tsx

@@ -13,10 +13,13 @@ export default function AuthLayout({
   children,
 }: AuthLayoutProps) {
   return (
-    <Styled.Container>
-      <Styled.Title>{title}</Styled.Title>
-      {description && <Styled.Description>{description}</Styled.Description>}
-      {children}
-    </Styled.Container>
+    <Styled.OuterContainer>
+      <Styled.BackgroundImage></Styled.BackgroundImage>
+      <Styled.Container>
+        <Styled.Title>{title}</Styled.Title>
+        {description && <Styled.Description>{description}</Styled.Description>}
+        {children}
+      </Styled.Container>
+    </Styled.OuterContainer>
   );
 }

pages/auth/login.tsx

@@ -4,6 +4,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { LoginSchema, LOGIN_SCHEMA } from '@/constants/schema';
 import AuthLayout from '@/layouts/AuthLayout';
 import AuthInput from '@/components/shared/AuthInput';
+import Button from '@/components/shared/Button';
 
 const LoginPage: NextPage = () => {
   const {
@@ -27,23 +28,30 @@ const LoginPage: NextPage = () => {
           id="loginId"
           type="text"
           label="아이디"
+          placeholder="아이디를 입력하세요."
           errorMessage={errors.loginId?.message}
           {...register('loginId')}
         />
         <AuthInput
           id="password"
           type="password"
           label="비밀번호"
+          placeholder="비밀번호를 입력하세요."
           errorMessage={errors.password?.message}
           {...register('password')}
         />
-        <button
+        <Button
+          size="lg"
           type="submit"
+          css={`
+            width: 100%;
+            margin-top: 1rem;
+          `}
           disabled={!isValid || !isDirty}
           aria-disabled={!isValid || !isDirty}
         >
           로그인
-        </button>
+        </Button>
       </form>
     </AuthLayout>
   );