Hotfix/ApiRefresh - Null 토큰 값을 저장하는 오류 수정 외 6개 수정사항

src/components/Container.jsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Container = styled.div.attrs({
+  className: 'container',
+})`
+  // 그 외 커스텀 css 지원
+  ${({ css }) => css}
+
+  width: ${({ $width }) => $width || 'fit-content'};
+  max-width: ${({ $maxWidth }) => $maxWidth || '1000px'};
+  height: ${({ $height }) => $height || 'fit-content'};
+  max-height: ${({ $maxHeight }) => $maxHeight || '100%'};
+
+  margin: ${({ $margin }) => $margin || '0'};
+  padding: ${({ $padding }) => $padding || '50px'};
+  box-sizing: border-box;
+
+  display: ${({ $display }) => $display || 'flex'};
+  justify-content: ${({ $justifyContent }) => $justifyContent || 'center'};
+  align-items: ${({ $alignItems }) => $alignItems || 'flex-start'};
+  flex-direction: ${({ $flexDirection }) => $flexDirection || 'column'};
+  gap: ${({ $gap }) => $gap || '60px'};
+
+  border-radius: ${({ $borderRadius }) => $borderRadius || '30px'};
+
+  background-color: var(--container-primary-background);
+  border: 1px solid var(--container-border);
+`;

src/components/ContainerControlBox.jsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const ContainerControlBoxWrapper = styled.div.attrs({
+  className: 'container-controlbox',
+})`
+  width: 100%;
+
+  display: flex;
+  justify-content: ${({ $justifyContent }) => $justifyContent || 'flex-end'};
+  align-items: center;
+`;
+
+export const ContainerControlBox = ({
+  justifyContent = 'flex-end',
+  children,
+}) => {
+  return (
+    <ContainerControlBoxWrapper $justifyContent={justifyContent}>
+      {children}
+    </ContainerControlBoxWrapper>
+  );
+};
+
+ContainerControlBox.propTypes = {
+  justifyContent: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};

src/components/ContainerHeader.jsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import { Text } from '@components/typograph/Text';
+import LogoSVGComponent from '@/assets/kert_logos/Square.svg';
+
+const ContainerHeaderWrapper = styled.div.attrs({
+  className: 'container-header',
+})`
+  width: 100%;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const TitleWrapper = styled.div.attrs({
+  className: 'container-header-title',
+})`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const ContainerHeader = ({ title, subtitle }) => {
+  return (
+    <ContainerHeaderWrapper>
+      <TitleWrapper>
+        <Text size="m" weight="light" color="var(--secondary-text-color)">
+          {subtitle}
+        </Text>
+        <Text size="sxl" weight="bold" color="var(--primary-text-color)">
+          {title}
+        </Text>
+      </TitleWrapper>
+      <LogoSVGComponent
+        width="103px"
+        height="101px"
+        fill="var(--primary-text-color)"
+        style={{ opacity: '0.1' }}
+      />
+    </ContainerHeaderWrapper>
+  );
+};
+
+ContainerHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+};

src/components/forms/Input.jsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
 import { Span } from '@components/typograph/Text';
 
 const InputWrapper = styled.div`
@@ -11,8 +12,20 @@ const Label = styled(Span).attrs({
   $size: 's',
   $weight: 'regular',
 })`
+  transition: color 0.3s ease-in-out;
+
   margin-left: 6px;
   margin-bottom: 6px;
+  ${(props) => props.$error && 'color: var(--danger-color);'}
+`;
+
+const ErrorLabel = styled(Span).attrs({
+  $size: 'xs',
+  $weight: 'regular',
+  $color: '--danger-color',
+})`
+  margin-left: 6px;
+  margin-top: 12px;
 `;
 
 export const RawInput = styled.input.attrs((props) => ({
@@ -23,7 +36,7 @@ export const RawInput = styled.input.attrs((props) => ({
   display: block;
   padding: 16px;
   width: 100%;
-  border-radius: 10px;
+  border-radius: 12px;
   box-sizing: border-box;
 
   background-color: var(--container-primary-color);
@@ -54,15 +67,27 @@ export const RawInput = styled.input.attrs((props) => ({
   &[type='number'] {
     -moz-appearance: textfield;
   }
+
+  ${(props) => props.$error && 'border-color: var(--danger-color);'}
 `;
 
-export const Input = forwardRef(({ label, value, ...props }, ref) => {
-  return (
-    <InputWrapper>
-      <Label>{label ?? '여기에 입력'}</Label>
-      <RawInput ref={ref} value={value} {...props} />
-    </InputWrapper>
-  );
-});
+export const Input = forwardRef(
+  ({ label, error_label, value, ...props }, ref) => {
+    return (
+      <InputWrapper>
+        <Label $error={!!error_label}>{label ?? '여기에 입력'}</Label>
+        <RawInput ref={ref} value={value} $error={!!error_label} {...props} />
+        {error_label && <ErrorLabel>{error_label ?? '여기에 입력'}</ErrorLabel>}
+      </InputWrapper>
+    );
+  },
+);
 
 Input.displayName = 'Input';
+Input.propTypes = {
+  label: PropTypes.string,
+  error_label: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  type: PropTypes.string,
+};

src/pages/Login.jsx

@@ -6,6 +6,7 @@ import { useForm } from 'react-hook-form';
 import { useAuth } from '@components/navigation/AuthContext';
 import { Text } from '@components/typograph/Text';
 import { Button } from '@components/forms/Button';
+import { ContainerHeader } from '../components/ContainerHeader';
 
 import { API } from '@/utils/api';
 
@@ -184,17 +185,7 @@ export default function Login() {
   return (
     <Container>
       <LoginBox>
-        <LoginHeader>
-          <TitleWrapper>
-            <Text size="m" weight="light" color="--secondary-text-color">
-              Login to KERT
-            </Text>
-            <Text size="sxl" weight="bold">
-              로그인
-            </Text>
-          </TitleWrapper>
-          <KertLogo />
-        </LoginHeader>
+        <ContainerHeader title="로그인" subtitle="Login to KERT" />
         <Form onSubmit={handleSubmit(onSubmit)}>
           <InputWrapper>
             <Text size="s" weight="regular">