Merge pull request #101 from imaginer-dev/8-회원가입-폼을-입력하고-유효성-검증을-할-수-있어야-한다

feat: joinpage 화면구성&뒤로가기 버튼 중간완성

Author: jane1107

src/components/Join/EmailInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const EmailInput = () => {
+  const { email, emailHandler } = useJoinState();
+
+  return (
+    <InputForm
+      defaultValue={email}
+      title={'이메일'}
+      placeholder={'이메일을 입력하세요'}
+      hint={'Hint Text'}
+      onChange={(e) => emailHandler(e.target.value)}
+      type={'email'}
+      name={'email'}
+    />
+  );
+};
+
+export default EmailInput;

src/components/Join/JoinButton.tsx

@@ -0,0 +1,23 @@
+import { useJoinState } from "../../stores/joinStore"; 
+
+const JoinButton = () => {
+  const { name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();
+
+  const onClick = () => {
+    console.log('name: ', name);
+    console.log('phone: ', phone);
+    console.log('email: ', email);
+    console.log('password: ', password);
+    console.log('pwCheck: ', pwCheck);
+    console.log('useTermsCheck: ', useTermsCheck);
+    console.log('privacyTermsCheck: ', privacyTermsCheck);
+  };
+
+  return (
+    <button type={'submit'} onClick={onClick} className="btn btn-outline btn-primary w-full">
+      회원가입 하기
+    </button>
+  );
+};
+
+export default JoinButton;

src/components/Join/JoinForm.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+    children: ReactNode;
+  }
+  
+  const JoinForm: FC<Props> = ({ children }) => {
+    return <form className={'flex w-full flex-col mt-9'}>{children}</form>;
+  };
+  
+  export default JoinForm;

src/components/Join/JoinFormActions.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+const JoinFormActions: FC<Props> = ({ children }) => {
+  return <div className={'flex w-full flex-col gap-2'}>{children}</div>;
+};
+
+export default JoinFormActions;

src/components/Join/NameInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const NameInput = () => {
+  const { name, nameHandler } = useJoinState();
+
+  return (
+    <InputForm
+      defaultValue={name}
+      title={'이름'}
+      placeholder={'이름을 입력하세요'}
+      hint={'Hint Text'}
+      onChange={(e) => nameHandler(e.target.value)}
+      type={'name'}
+      name={'name'}
+    />
+  );
+};
+
+export default NameInput;

src/components/Join/PasswordInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const PasswordInput = () => {
+  const { password, passwordHandler } = useJoinState();
+
+  return (
+    <InputForm
+      defaultValue={password}
+      title={'비밀번호'}
+      placeholder={'Password'}
+      hint={'Hint Text'}
+      onChange={(e) => passwordHandler(e.target.value)}
+      name={'password'}
+      type={'password'}
+    />
+  );
+};
+
+export default PasswordInput;

src/components/Join/PhoneInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const PhoneInput = () => {
+  const { phone, phoneHandler } = useJoinState();
+
+  return (
+    <InputForm
+      defaultValue={phone}
+      title={'핸드폰 번호'}
+      placeholder={'핸드폰 번호를 입력하세요'}
+      hint={'Hint Text'}
+      onChange={(e) => phoneHandler(e.target.value)}
+      type={'phone'}
+      name={'phone'}
+    />
+  );
+};
+
+export default PhoneInput;

src/components/Join/PwCheckInput.tsx

@@ -0,0 +1,20 @@
+import InputForm from '../common/InputForm.tsx';
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const PwCheckInput = () => {
+  const { pwCheck, pwCheckHandler } = useJoinState();
+
+  return (
+    <InputForm
+      defaultValue={pwCheck}
+      title={'비밀번호 확인'}
+      placeholder={'Password Check'}
+      hint={'Hint Text'}
+      onChange={(e) => pwCheckHandler(e.target.value)}
+      name={'pwCheck'}
+      type={'password'}
+    />
+  );
+};
+
+export default PwCheckInput;

src/components/Join/TermsCheckInput.tsx

@@ -0,0 +1,26 @@
+import { useJoinState } from '../../stores/joinStore.ts';
+
+const TermsCheckInput = () => {
+  const { useTermsCheck, privacyTermsCheck, useTermsCheckHandler, privacyTermsCheckHandler } = useJoinState();
+
+    return (
+      <label className="form-control w-full mt-5 mb-9">
+      <div className="flex flex-col">
+        <label className='font-bold'>약관 동의</label>
+      </div>
+      <div className="flex justify-between items-center mt-2">
+        <label htmlFor="termsOne">이용약관 동의 (필수)</label>
+          <input type="radio" className='radio radio-primary' checked={useTermsCheck} onClick={useTermsCheckHandler} />
+      </div>
+      {!useTermsCheck ? <span className="text-red-500">이용약관에 동의해 주세요.</span> : <span className='h-6'></span> }
+      <div className="flex justify-between items-center mt-2">
+        <label htmlFor="termsTwo">개인정보 수집, 이용 동의 (필수)</label>
+          <input type="radio" className='radio radio-primary' checked={privacyTermsCheck} onClick={privacyTermsCheckHandler} />
+
+      </div>  
+       {!privacyTermsCheck ? <span className="text-red-500">개인정보 수집, 이용에 동의해 주세요.</span> : <span className='h-6'></span> }
+    </label>
+    );
+};
+
+export default TermsCheckInput;

src/components/common/HistoryBackButton.tsx

@@ -0,0 +1,27 @@
+import { useNavigate } from 'react-router-dom';
+
+const HistoryBackButton: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className="relative">
+        <svg onClick={handleBack}
+        className={'shrink-0'}
+        width="256"
+        height="512"
+        viewBox="0 0 256 512"
+        fill="none"
+        preserveAspectRatio='xMinYMin meet'
+        xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"/>
+        </svg>
+    </div>
+  );
+};
+
+export default HistoryBackButton;