Merge branch 'develop' into feat/#52/class

SOPT-all · Jan 15, 2025 · ca5484e · ca5484e
2 parents 21d2d96 + 8956517
commit ca5484e
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 22 deletions.
diff --git a/src/components/Header/index.css.ts b/src/components/Header/index.css.ts
@@ -1,13 +1,27 @@
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '@/styles/theme.css';
 
-export const headerRootStyle = style({
-  position: 'fixed',
-  display: 'grid',
-  gridTemplateColumns: '1fr auto 1fr',
-  alignItems: 'center',
-  width: '100%',
-  height: '6rem',
-  padding: '1.8rem 2rem',
+export const headerRootStyle = recipe({
+  base: {
+    position: 'fixed',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto 1fr',
+    alignItems: 'center',
+    width: '100%',
+    height: '6rem',
+    padding: '1.8rem 2rem',
+    transition: 'background-color 0.3s ease',
+  },
+  variants: {
+    isColor: {
+      true: { backgroundColor: vars.colors.white },
+      false: { backgroundColor: 'transparent' },
+    },
+  },
+  defaultVariants: {
+    isColor: false,
+  },
 });
 
 export const backIconStyle = style({

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import Head from '@/components/Head';
-import * as styles from '@/components/Header/index.css';
-import { IcClose } from '@/assets/svg';
-import { IcBack } from '@/assets/svg';
+import { headerRootStyle, backIconStyle, titleStyle, closeIconStyle } from '@/components/Header/index.css';
+import { IcBack, IcClose } from '@/assets/svg';
 
 interface HeaderRootProps {
   children: React.ReactNode;
+  isColor?: boolean;
 }
 
 interface BackIconProps {
@@ -20,30 +20,30 @@ interface CloseIconProps {
   onClick: () => void;
 }
 
-const HeaderRoot = ({ children }: HeaderRootProps): JSX.Element => {
-  return (
-    <Head level="h1" tag="h2" className={styles.headerRootStyle}>
-      {children}
-    </Head>
-  );
+const HeaderRoot = ({ children, isColor = false }: HeaderRootProps): JSX.Element => {
+  return <div className={headerRootStyle({ isColor })}>{children}</div>;
 };
 
 const BackIcon = ({ onClick }: BackIconProps): JSX.Element => {
   return (
-    <button className={styles.backIconStyle} onClick={onClick} aria-label="뒤로가기">
-      <IcBack />
+    <button className={backIconStyle} onClick={onClick} aria-label="뒤로가기">
+      <IcBack width={24} height={24} />
     </button>
   );
 };
 
 const Title = ({ title }: TitleProps): JSX.Element => {
-  return <h1 className={styles.titleStyle}>{title}</h1>;
+  return (
+    <Head level="h1" tag="h6" className={titleStyle}>
+      {title}
+    </Head>
+  );
 };
 
 const CloseIcon = ({ onClick }: CloseIconProps): JSX.Element => {
   return (
-    <button className={styles.closeIconStyle} onClick={onClick} aria-label="닫기">
-      <IcClose />
+    <button className={closeIconStyle} onClick={onClick} aria-label="닫기">
+      <IcClose width={24} height={24} />
     </button>
   );
 };

diff --git a/src/components/Input/index.css.ts b/src/components/Input/index.css.ts
@@ -0,0 +1,58 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '@/styles/theme.css';
+
+export const containerStyle = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+});
+
+export const inputStyle = recipe({
+  base: {
+    width: '100%',
+    height: '5.2rem',
+    border: 'none',
+    borderRadius: '4px',
+    padding: '1.4rem 1.8rem',
+    ...vars.fonts.b5,
+    backgroundColor: vars.colors.gray01,
+
+    '::placeholder': {
+      color: vars.colors.gray05,
+    },
+  },
+  variants: {
+    isError: {
+      true: {
+        border: `1px solid ${vars.colors.alert03}`,
+      },
+      false: {
+        border: `1px solid ${vars.colors.main04}`,
+      },
+    },
+    isSearch: {
+      true: {
+        borderRadius: '90px',
+      },
+    },
+  },
+});
+
+export const helperTextStyle = recipe({
+  base: {
+    ...vars.fonts.b6,
+    color: vars.colors.gray05,
+  },
+  variants: {
+    isError: {
+      true: {
+        color: vars.colors.alert03,
+      },
+      false: {
+        color: vars.colors.main04,
+      },
+    },
+  },
+});
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -0,0 +1,21 @@
+import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import * as style from './index.css';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  isError?: boolean;
+  isSearch?: boolean;
+}
+
+const Input = ({ isError, isSearch = false, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
+  return (
+    <input
+      ref={ref}
+      type="text"
+      className={style.inputStyle({ isError, isSearch })}
+      placeholder="예시를 써주세요"
+      {...props}
+    />
+  );
+};
+
+export default forwardRef(Input);