Merge pull request #83 from codeit-sprint-part3-6team/#72_페이지_회원가입

#72 페이지 회원가입

Author: hwiiron

src/components/common/checkbox/CheckBox.module.css

@@ -0,0 +1,55 @@
+.check-field {
+  margin-top: 16px;
+}
+
+.text {
+  font-size: 16px;
+  font-weight: 400;
+  color: var(--black-medium);
+  cursor: pointer;
+}
+
+/* checkbox 커스텀 */
+.check-field input[type='checkbox'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.check-field input[type='checkbox'] + label {
+  display: inline-block;
+  position: relative;
+  padding-left: 28px;
+  cursor: pointer;
+}
+
+.check-field input[type='checkbox'] + label:before {
+  content: '';
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: -1px;
+}
+
+.check-field input[type='checkbox']:checked + label:after {
+  content: '';
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #f1effd url('/ic/ic_check.svg') no-repeat 50%;
+  background-size: 10px 8px;
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 20px;
+  height: 20px;
+}

src/components/common/checkbox/CheckBox.tsx

@@ -0,0 +1,29 @@
+import styles from './CheckBox.module.css';
+import { ChangeEvent } from 'react';
+
+type CheckBoxProps = {
+  name: string;
+  id: string;
+  htmlFor: string;
+  text: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+function CheckBox({ name, id, htmlFor, text, onChange }: CheckBoxProps) {
+  return (
+    <div className={styles['check-field']}>
+      <input
+        name={name}
+        id={id}
+        type="checkbox"
+        onChange={onChange}
+        className={styles['input-checkbox']}
+      />
+      <label htmlFor={htmlFor} className={styles.text}>
+        {text}
+      </label>
+    </div>
+  );
+}
+
+export default CheckBox;

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

@@ -22,6 +22,8 @@
   border-radius: 8px;
   width: 100%;
   height: 50px;
+  font-size: 16px;
+  font-weight: 400;
 }
 
 .auth-input input.password {

src/components/product/auth/SigninForm.module.css

@@ -0,0 +1,9 @@
+.login-button {
+  margin-top: 24px;
+}
+
+@media screen and (max-width: 743px) {
+  .login-button {
+    margin-top: 16px;
+  }
+}

src/components/product/auth/SigninForm.tsx

@@ -0,0 +1,138 @@
+import styles from './SigninForm.module.css';
+import { ChangeEvent, FocusEvent, FormEvent, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useDispatch } from 'react-redux';
+import { setUserInfo } from '@/redux/settingSlice';
+import { AppDispatch } from '@/redux/store';
+import AuthInput from '@/components/common/input/auth-input/AuthInput';
+import CDSButton from '@/components/common/button/CDSButton';
+import OverlayContainer from '@/components/common/modal/overlay-container/OverlayContainer';
+import AuthModal from '@/components/common/modal/auth/AuthModal';
+import { postSignin } from '@/lib/signin/postSignin';
+import { ERROR_MESSAGE, PLACEHOLDER } from '@/constants/messages';
+import { emailValidation, passwordValidation } from '@/utils/authValidation';
+
+const INITIAL_VALUES = {
+  email: '',
+  password: '',
+};
+
+function SigninForm() {
+  const [values, setValues] = useState(INITIAL_VALUES);
+  const [emailValid, setEmailValid] = useState(false);
+  const [passwordValid, setPasswordValid] = useState(false);
+  const [disabled, setDisabled] = useState(true);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [responseMessage, setResponseMessage] = useState('');
+  const router = useRouter();
+  const dispatch = useDispatch<AppDispatch>();
+
+  useEffect(() => {
+    const isEmailValid = emailValidation(values.email);
+    const isPasswordValid = passwordValidation(values.password);
+    setDisabled(!(isEmailValid && isPasswordValid));
+  }, [values]);
+
+  useEffect(() => {
+    if (sessionStorage.getItem('accessToken')) {
+      router.push('/mydashboard');
+    }
+  }, []);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    if (name === 'email') {
+      setEmailValid(!emailValidation(value));
+    } else if (name === 'password') {
+      setPasswordValid(!passwordValidation(value));
+    }
+  };
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const response = await postSignin(values);
+      sessionStorage.setItem('accessToken', response.accessToken);
+
+      // 리덕스 액션 호출
+      dispatch(
+        setUserInfo({
+          user: response.user,
+        }),
+      );
+
+      router.push('/mydashboard');
+    } catch (error) {
+      setResponseMessage(error.message);
+      setIsModalVisible(true);
+    }
+  };
+
+  const handleCancelClick = () => {
+    setIsModalVisible(false);
+    setResponseMessage(null);
+  };
+  return (
+    <>
+      <form onSubmit={onSubmit}>
+        <AuthInput
+          name="email"
+          htmlFor="email"
+          title="이메일"
+          id="email"
+          type="text"
+          placeholder={PLACEHOLDER.EMAIL_PLACEHOLDER}
+          value={values.email}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          error={emailValid}
+          errorMessage={ERROR_MESSAGE.EMAIL_INVALID_FORMAT}
+          autoComplete="email"
+        />
+
+        <AuthInput
+          name="password"
+          htmlFor="password"
+          title="비밀번호"
+          id="password"
+          type="password"
+          placeholder="비밀번호를 입력해 주세요"
+          value={values.password}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          error={passwordValid}
+          errorMessage={ERROR_MESSAGE.PASSWORD_MIN_LENGTH}
+          autoComplete="password"
+        />
+
+        <div className={styles['login-button']}>
+          <CDSButton btnType="auth" type="submit" disabled={disabled}>
+            로그인
+          </CDSButton>
+        </div>
+      </form>
+
+      {isModalVisible && (
+        <OverlayContainer>
+          <AuthModal
+            message={responseMessage}
+            handleCancelClick={handleCancelClick}
+          />
+        </OverlayContainer>
+      )}
+    </>
+  );
+}
+
+export default SigninForm;