) => {
+ e.stopPropagation();
+ setIsVisible((prev) => !prev);
+ };
+
+ return (
+
+
+ {hasVisibleToggler &&
+ (isVisible ? (
+
+ ) : (
+
+ ))}
+
+ );
+ },
+);
+
+InputField.displayName = 'InputField';
+
+export default InputField;
diff --git a/src/shared/@common/ui/input/InputLabel.tsx b/src/shared/@common/ui/input/InputLabel.tsx
new file mode 100644
index 000000000..f9e25f6a2
--- /dev/null
+++ b/src/shared/@common/ui/input/InputLabel.tsx
@@ -0,0 +1,25 @@
+import { LabelHTMLAttributes, ReactNode } from 'react';
+import classNames from 'classnames/bind';
+
+import styles from './Input.module.scss';
+
+interface InputLabelProps extends LabelHTMLAttributes {
+ children: ReactNode;
+ className?: string;
+ hide?: boolean;
+}
+
+const cx = classNames.bind(styles);
+
+export default function InputLabel({
+ children,
+ className,
+ hide,
+ ...rest
+}: InputLabelProps) {
+ return (
+
+ );
+}
diff --git a/src/shared/@common/ui/input/InputLayout.tsx b/src/shared/@common/ui/input/InputLayout.tsx
new file mode 100644
index 000000000..81367d37e
--- /dev/null
+++ b/src/shared/@common/ui/input/InputLayout.tsx
@@ -0,0 +1,14 @@
+import classNames from 'classnames/bind';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import styles from './Input.module.scss';
+
+const cx = classNames.bind(styles);
+
+interface InputLayoutProps extends PropsWithChildren {
+ className?: string;
+}
+
+export default function InputLayout({ children, className }: InputLayoutProps) {
+ return {children}
;
+}
diff --git a/src/shared/@common/ui/input/InputMessage.tsx b/src/shared/@common/ui/input/InputMessage.tsx
new file mode 100644
index 000000000..94cee2c05
--- /dev/null
+++ b/src/shared/@common/ui/input/InputMessage.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import classNames from 'classnames/bind';
+
+import styles from './Input.module.scss';
+
+interface InputMessageProps {
+ children: ReactNode;
+ className?: string;
+}
+
+const cx = classNames.bind(styles);
+
+export default function InputMessage({
+ children,
+ className,
+}: InputMessageProps) {
+ return {children}
;
+}
diff --git a/src/shared/@common/ui/input/index.tsx b/src/shared/@common/ui/input/index.tsx
new file mode 100644
index 000000000..5bc9f2077
--- /dev/null
+++ b/src/shared/@common/ui/input/index.tsx
@@ -0,0 +1,14 @@
+import InputBox from './InputBox';
+import InputField from './InputField';
+import InputLabel from './InputLabel';
+import InputLayout from './InputLayout';
+import InputMessage from './InputMessage';
+
+const Input = Object.assign(InputLayout, {
+ Label: InputLabel,
+ Box: InputBox,
+ Field: InputField,
+ Message: InputMessage,
+});
+
+export default Input;
diff --git a/styles/@common/global.css b/styles/@common/global.css
index e55f81d87..e71ad6b7e 100644
--- a/styles/@common/global.css
+++ b/styles/@common/global.css
@@ -1,3 +1,4 @@
+@import './layers.css';
@import './reset.css';
@import './colors.css';
@import './fonts.css';
diff --git a/styles/@common/layers.css b/styles/@common/layers.css
new file mode 100644
index 000000000..ee97c1ea9
--- /dev/null
+++ b/styles/@common/layers.css
@@ -0,0 +1 @@
+@layer reset, base, components, overrides;
diff --git a/styles/@common/reset.css b/styles/@common/reset.css
index e7136f09b..614cf45ce 100644
--- a/styles/@common/reset.css
+++ b/styles/@common/reset.css
@@ -1,73 +1,86 @@
-/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
-html,
-body,
-p,
-ol,
-ul,
-li,
-dl,
-dt,
-dd,
-blockquote,
-figure,
-fieldset,
-legend,
-textarea,
-pre,
-iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin: 0;
- padding: 0;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- font-size: 100%;
- font-weight: normal;
-}
-ul {
- list-style: none;
-}
-button,
-input,
-select {
- margin: 0;
-}
-html {
- box-sizing: border-box;
-}
-*,
-*::before,
-*::after {
- box-sizing: inherit;
-}
-img,
-video {
- height: auto;
- max-width: 100%;
-}
-iframe {
- border: 0;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-td,
-th {
- padding: 0;
-}
+@layer reset {
+ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+ html,
+ body,
+ p,
+ ol,
+ ul,
+ li,
+ dl,
+ dt,
+ dd,
+ blockquote,
+ figure,
+ fieldset,
+ legend,
+ textarea,
+ pre,
+ iframe,
+ hr,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 0;
+ padding: 0;
+ }
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: 100%;
+ font-weight: normal;
+ }
+ ul {
+ list-style: none;
+ }
+ button,
+ input,
+ select {
+ margin: 0;
+ }
+ html {
+ box-sizing: border-box;
+ }
+ *,
+ *::before,
+ *::after {
+ box-sizing: inherit;
+ }
+ img,
+ video {
+ height: auto;
+ max-width: 100%;
+ }
+ iframe {
+ border: 0;
+ }
+ table {
+ border-collapse: collapse;
+ border-spacing: 0;
+ }
+ td,
+ th {
+ padding: 0;
+ }
+
+ /* custom */
+ a {
+ text-decoration: none;
+ }
+
+ input {
+ border: none;
+ outline: none;
+ padding: 0;
-/* custom */
-a {
- text-decoration: none;
+ &:-webkit-autofill {
+ -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
+ box-shadow: 0 0 0 1000px #ffffff inset;
+ }
+ }
}
diff --git a/styles/pages/Home.module.css b/styles/pages/Home.module.css
index 5a755b73e..01f978611 100644
--- a/styles/pages/Home.module.css
+++ b/styles/pages/Home.module.css
@@ -1,5 +1,4 @@
.landing {
- text-align: center;
margin: 50px auto;
height: 1000px;
}
@@ -9,3 +8,10 @@
justify-content: center;
gap: 16px;
}
+
+.formPage {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+}