Merge pull request #38 from codeit-sprint-part3-6team/#33_공통컴포넌트_Input이메일-비밀번호

#33 공통컴포넌트 input이메일 비밀번호

Author: hwiiron

src/components/common/input/AuthInput.module.css

@@ -0,0 +1,68 @@
+.authField + .authField {
+  margin-top: 16px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--black-medium);
+  cursor: pointer;
+}
+
+.authInput {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  margin-top: 8px;
+}
+
+.authInput input {
+  padding: 0 16px;
+  border: 1px solid var(--gray-medium);
+  border-radius: 8px;
+  width: 100%;
+  height: 50px;
+}
+
+.authInput input.password {
+  padding-right: 56px;
+}
+
+.authInput input:focus {
+  border: 1px solid var(--violet);
+  outline: none;
+}
+
+.authInput input::placeholder {
+  color: var(--gray-dark);
+}
+
+.authInput.error input,
+.authInput.error input:focus {
+  border: 1px solid var(--red);
+}
+
+.authInput span {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--red);
+}
+
+.authInput button {
+  padding: 0;
+  border: none;
+  background: none;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+}
+
+.authInput button svg {
+  width: 100%;
+  height: 100%;
+}

src/components/common/input/AuthInput.tsx

@@ -0,0 +1,67 @@
+import { ChangeEvent, MouseEvent, useState } from 'react';
+import styles from './AuthInput.module.css';
+import Visibility from 'public/ic/ic_visibility.svg';
+import InVisibility from 'public/ic/ic_invisibility.svg';
+
+type AuthInputProps = {
+  htmlFor: string;
+  title: string;
+  id: string;
+  type: string | null;
+  placeholder: string;
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  error?: boolean;
+  errorMessage?: string;
+};
+
+function AuthInput({
+  htmlFor,
+  title,
+  type = 'text',
+  id,
+  placeholder,
+  value,
+  onChange,
+  error,
+  errorMessage,
+}: AuthInputProps) {
+  const [isVisibleToggle, setIsVisibleToggle] = useState(false);
+
+  const isPassword = type === 'password';
+  const inputType = isPassword ? (isVisibleToggle ? 'text' : 'password') : type;
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setIsVisibleToggle(!isVisibleToggle);
+  };
+
+  return (
+    <div className={styles.authField}>
+      <label className={styles.title} htmlFor={htmlFor}>
+        {title}
+      </label>
+
+      <div className={`${styles.authInput} ${error ? styles.error : ''}`}>
+        <input
+          type={inputType}
+          id={id}
+          className={`${isPassword ? styles.password : ''}`}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+        />
+
+        {isPassword && (
+          <button onClick={handleClick}>
+            {isVisibleToggle ? <Visibility /> : <InVisibility />}
+          </button>
+        )}
+
+        {error && <span>{errorMessage}</span>}
+      </div>
+    </div>
+  );
+}
+
+export default AuthInput;

src/components/common/input/test_AuthInput.tsx

@@ -0,0 +1,35 @@
+import AuthInput from '@/components/common/input/AuthInput';
+import { useState } from 'react';
+
+export default function TestAuthInput() {
+  const [emailValue, setEmailValue] = useState('');
+  const [passwordValue, setPasswordValue] = useState('');
+
+  return (
+    <>
+      <div style={{ width: '540px' }}>
+        <AuthInput
+          htmlFor="email"
+          title="이메일"
+          id="email"
+          type="text"
+          placeholder="이메일을 입력해 주세요"
+          value={emailValue}
+          onChange={(e) => setEmailValue(e.target.value)}
+          error={true}
+          errorMessage="이메일 형식으로 작성해 주세요."
+        />
+
+        <AuthInput
+          htmlFor="password"
+          title="비밀번호"
+          id="password"
+          type="password"
+          placeholder="비밀번호를 입력해 주세요"
+          value={passwordValue}
+          onChange={(e) => setPasswordValue(e.target.value)}
+        />
+      </div>
+    </>
+  );
+}

src/pages/api/axios.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+});
+
+export default instance;