[Feat]: 회원가입 TextField 컴포넌트

src/assets/svg/IcSmallTextdelete.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcSmallTextdelete = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" {...props}>
+    <path
+      stroke="#E3E4E5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M4.166 15.835 15.833 4.168m-11.667 0 11.667 11.667"
+    />
+  </svg>
+);
+export default SvgIcSmallTextdelete;

src/assets/svg/index.ts

@@ -1,10 +1,11 @@
-export { default as IcLock } from './IcLock';
-export { default as IcTextdelete } from './IcTextdelete';
 export { default as IcBigNext } from './IcBigNext';
 export { default as IcCheckboxChecked } from './IcCheckboxChecked';
 export { default as IcCheckboxDefault } from './IcCheckboxDefault';
 export { default as IcDropdown } from './IcDropdown';
+export { default as IcLock } from './IcLock';
 export { default as IcModalDelete } from './IcModalDelete';
+export { default as IcSmallTextdelete } from './IcSmallTextdelete';
+export { default as IcTextdelete } from './IcTextdelete';
 export { default as IcTooltipDelete } from './IcTooltipDelete';
 export { default as IcTriangle } from './IcTriangle';
 export { default as Vite } from './Vite';

src/common/component/SignupTextField/SignupTextField.css.ts

@@ -0,0 +1,124 @@
+import { styleVariants, style } from '@vanilla-extract/css';
+
+import { colors } from '@/style/token/color.css';
+import { fonts } from '@/style/token/typography.css';
+
+export const baseClass = style({
+  display: 'flex',
+  width: '52.2rem',
+  height: '5rem',
+  padding: '1.4rem 2rem',
+  alignItems: 'center',
+  flexShrink: 0,
+  borderRadius: '0.8rem',
+  ...fonts.body03,
+});
+
+export const fieldVariants = styleVariants({
+  default: {
+    border: '2px solid transparent',
+    background: colors.grey4,
+    color: colors.grey6,
+  },
+  clicked: {
+    border: `2px solid ${colors.blue06}`,
+    background: colors.grey3,
+    color: colors.grey6,
+  },
+  typing: {
+    border: `2px solid ${colors.blue06}`,
+    background: colors.grey3,
+    color: colors.grey10,
+  },
+  filled: {
+    border: '2px solid transparent',
+    background: colors.grey4,
+    color: colors.grey10,
+  },
+  completed: {
+    border: '2px solid transparent',
+    background: colors.grey4,
+    color: colors.grey10,
+  },
+  locked: {
+    border: '2px solid transparent',
+    background: colors.grey4,
+    color: colors.grey5,
+  },
+  error: {
+    border: `2px solid ${colors.error01}`,
+    background: colors.grey4,
+    color: colors.grey10,
+    gap: '1rem',
+  },
+});
+
+export const inputContent = style({
+  display: 'flex',
+  flex: 1,
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+});
+
+export const clearButton = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '2rem',
+  height: '2rem',
+  aspectRatio: '1/1',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  cursor: 'pointer',
+});
+
+export const iconClass = style({
+  width: '2rem',
+  height: '2rem',
+  flexShrink: 0,
+});
+
+export const lockIconClass = style({
+  width: '2rem',
+  height: '2rem',
+  flexShrink: 0,
+  aspectRatio: '1/1',
+});
+
+export const errorMessageWrapper = style({
+  display: 'flex',
+  width: '52.2rem',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '0.4rem',
+});
+
+export const inputBase = style({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  background: 'transparent',
+  border: 'none',
+  outline: 'none',
+  padding: 0,
+  color: 'inherit',
+});
+
+const makeInputStyle = (font: typeof fonts.body03) =>
+  style({
+    ...font,
+    '::placeholder': {
+      color: colors.grey6,
+      ...font,
+    },
+  });
+
+export const inputStyle = makeInputStyle(fonts.body03);
+
+export const errorMessage = style({
+  alignSelf: 'stretch',
+  color: colors.error01,
+  ...fonts.caption02,
+});

src/common/component/SignupTextField/SignupTextField.mock.ts

@@ -0,0 +1,5 @@
+export const MOCK_SIGNUP_DATA = {
+  name: '신지수',
+  email: 'sjsz0811@hanyang.ac.kr',
+  birth: '2002-08-11',
+};