[feat] 추가 정보 페이지 구현 (#9)

* [feat] add Button style, seperate regExp from validate

* [feat] add AdditionalInfoPage

- src/pages/AdditionalInfoPage/components/
  - add AdditionalLink
  - add InterestCheckbox
  - add MyInterestField
  - add utils/dynamicWidth.ts
- src/assets/icons/
  - add circle.close.svg
  - add close.svg

* [style] added response mobile style

* [feat] applied mobile responsive style, added preventing duplicate myInterests

* [feat] added preprocessing form data logic

* [feat] added myInterests input focus style, replace duplicate logic to use interests list

* [feat] fix MyInterestField isDuplicate logic
- when occuring onKeyDown with remove component, onBlur event was occured at the same time.
- fix only onBlur event to be occured when isEditing state is true.

* [feat] when checking duplicate myInterest, exclude empty word

* [refact] seperate logics to custom hooks
- seperate useAdditionalInfoForm and useAdditionalInfoFieldArray from AdditionalInfoPage component

* [style] update Field component style

* [style] apply top-level background to gray

src/App.css.ts

@@ -1,6 +1,8 @@
 import { style } from '@vanilla-extract/css';
+import { vars } from '@styles/theme.css';
 
 export const container = style({
   width: '100%',
   height: '100vh',
+  backgroundColor: vars.colors['gray-9'],
 });

src/components/common/Button/Button.css.ts

@@ -11,14 +11,14 @@ const defaultButtonStyle = style([
     fontWeight: 'bold',
     textAlign: 'center',
     cursor: 'pointer',
-    transition: '0.1s filter',
+    transition: 'filter 0.1s',
   },
   responsiveStyle({}),
 ]);
 
 const makeButtonStyle = (color: keyof typeof vars.colors) => ({
   backgroundColor: vars.colors[color],
-  color: vars.colors.white,
+  color: color === 'white' ? vars.colors['gray-1'] : vars.colors.white,
   ':hover': {
     filter: 'brightness(115%)',
   },
@@ -43,6 +43,11 @@ export const buttonStyle = recipe({
       blue: [defaultButtonStyle, makeButtonStyle('primary-1')],
       gray: [defaultButtonStyle, makeButtonStyle('gray-2')],
       red: [defaultButtonStyle, makeButtonStyle('red')],
+      white: [
+        defaultButtonStyle,
+        makeButtonStyle('white'),
+        { border: '1px solid black', transition: 'background 0.1s' },
+      ],
     },
     disabled: {
       true: [

src/components/common/Button/Button.tsx

@@ -4,7 +4,7 @@ import * as Styles from './Button.css';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: 'small' | 'medium' | 'large';
-  fill?: 'blue' | 'red' | 'gray';
+  fill?: 'blue' | 'red' | 'white' | 'gray';
   className?: string;
 }
 

src/components/common/Field/Field.css.ts

@@ -5,9 +5,9 @@ import { style } from '@vanilla-extract/css';
 export const fieldContainer = style([
   {
     width: '100%',
-    marginBottom: 15,
+    marginBottom: 20,
   },
-  responsiveStyle({ desktop: { marginBottom: 20 } }),
+  responsiveStyle({ desktop: { marginBottom: 30 } }),
 ]);
 
 export const label = style({

src/components/common/Field/Field.tsx

@@ -5,19 +5,24 @@ import Typo from '../Typo';
 
 import * as Styles from './Field.css';
 
-interface FieldProps extends PropsWithChildren {}
+interface FieldProps extends PropsWithChildren {
+  className?: string;
+}
 
-const Field = ({ children }: FieldProps) => {
-  return <div className={Styles.fieldContainer}>{children}</div>;
+const Field = ({ className, children }: FieldProps) => {
+  return (
+    <div className={`${Styles.fieldContainer} ${className}`}>{children}</div>
+  );
 };
 
 interface FieldLabelProps extends PropsWithChildren {
   htmlFor?: string;
+  className?: string;
 }
 
-const FieldLabel = ({ htmlFor, children }: FieldLabelProps) => {
+const FieldLabel = ({ htmlFor, className, children }: FieldLabelProps) => {
   return (
-    <label htmlFor={htmlFor} className={Styles.label}>
+    <label htmlFor={htmlFor} className={`${Styles.label} ${className}`}>
       {children}
     </label>
   );
@@ -29,10 +34,12 @@ const FieldEmphasize = ({ children }: FieldEmphasizeProps) => {
   return <em className={Styles.emphasize}>{children}</em>;
 };
 
-interface FieldBoxProps extends PropsWithChildren {}
+interface FieldBoxProps extends PropsWithChildren {
+  className?: string;
+}
 
-const FieldBox = ({ children }: FieldBoxProps) => {
-  return <div className={Styles.fieldBox}>{children}</div>;
+const FieldBox = ({ className, children }: FieldBoxProps) => {
+  return <div className={`${Styles.fieldBox} ${className}`}>{children}</div>;
 };
 
 interface FieldErrorMessageProps extends PropsWithChildren {}

src/components/common/Logo/Logo.css.ts

@@ -8,6 +8,7 @@ export const LogoStyle = style([
     fontWeight: vars.font['bold-32'].fontWeight,
     color: vars.colors['primary-1'],
     textShadow: '2px 2px 5px rgba(0, 0, 0, 0.25)',
+    textAlign: 'center',
     cursor: 'pointer',
   },
   responsiveStyle({

src/components/layouts/AuthLayout/AuthLayout.css.ts

@@ -12,9 +12,8 @@ export const container = style([
   flexCenter,
   {
     width: '100%',
-    height: '100%',
-    backgroundColor: vars.colors['gray-9'],
   },
+  responsiveStyle({ desktop: { height: '100%' } }),
 ]);
 
 export const innerContainer = style([

src/constants/regExp.ts

@@ -0,0 +1,11 @@
+const REG_EXP = {
+  EMAIL:
+    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i,
+  PASSWORD:
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@$!%*?&.,])[A-Za-z\d$@$!%*?&.,]/,
+  NICKNAME: /^(?=.*[a-z0-9가-힣_.])[a-z0-9가-힣_.]{2,16}$/i,
+  CONFIRM: /[\d]$/,
+  ONLY_ENG_NUM: /^[a-zA-Z0-9]*$/,
+};
+
+export { REG_EXP };

src/data/mock.ts

@@ -0,0 +1,12 @@
+export const RECOMMANED_INTERESTS = [
+  'java',
+  'javascript',
+  'aws',
+  'react',
+  'git',
+  'spring',
+  'android',
+  'html',
+  'css',
+  'linux',
+];

src/pages/AdditionalInfoPage/AdditionalInfoPage.css.ts

@@ -0,0 +1,102 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '@styles/theme.css';
+import { responsiveStyle } from '@styles/styles.css';
+
+export const container = style([
+  {
+    width: '100%',
+    height: '100%',
+    padding: '50px 30px',
+    backgroundColor: vars.colors.white,
+  },
+  responsiveStyle({
+    desktop: {
+      padding: '100px',
+    },
+  }),
+]);
+
+export const subTitle = style([
+  {
+    fontSize: vars.font['bold-20'].fontSize,
+    fontWeight: vars.font['bold-20'].fontWeight,
+    marginTop: '40px',
+    marginBottom: '20px',
+  },
+  responsiveStyle({
+    desktop: {
+      marginTop: '50px',
+      marginBottom: '30px',
+    },
+  }),
+]);
+
+export const linkField = style([
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: '10px',
+  },
+  responsiveStyle({ desktop: { marginBottom: '30px' } }),
+]);
+
+const addtionalDefaultButton = style([
+  {
+    padding: '5px 15px',
+    ':hover': {
+      background: vars.colors['primary-1'],
+      color: vars.colors['gray-9'],
+      borderColor: vars.colors['primary-1'],
+    },
+    ':active': {
+      background: vars.colors['primary-1'],
+      color: vars.colors['gray-9'],
+      borderColor: vars.colors['primary-1'],
+    },
+  },
+  responsiveStyle({ desktop: { padding: '10px 15px' } }),
+]);
+
+export const addLinkButton = style([
+  addtionalDefaultButton,
+  {
+    height: '1.75rem',
+  },
+  responsiveStyle({ desktop: { height: '2.5rem' } }),
+]);
+
+const defaultFieldBox = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+});
+
+export const interestsFieldBox = style([
+  defaultFieldBox,
+  {
+    gap: '10px',
+  },
+]);
+
+export const myInterestErrorMessage = style({
+  marginBottom: '10px',
+  fontSize: vars.font['body-12'].fontSize,
+  color: vars.colors.red,
+});
+
+export const myInterestFieldBox = style([
+  defaultFieldBox,
+  {
+    marginBottom: '60px',
+  },
+  responsiveStyle({ desktop: { marginBottom: '120px' } }),
+]);
+
+export const addInterestButton = style([
+  addtionalDefaultButton,
+  {
+    width: '4.625rem',
+    height: '41px',
+  },
+]);