Merge pull request #106 from imaginer-dev/105-joinpage-UI수정-prettier-수정

fix: joinPage UI & Prettier 수정

Author: CreatorDodo

src/components/Join/JoinButton.tsx

@@ -1,4 +1,4 @@
-import { useJoinState } from "../../stores/joinStore"; 
+import { useJoinState } from '../../stores/joinStore';
 
 const JoinButton = () => {
   const { name, phone, email, password, pwCheck, useTermsCheck, privacyTermsCheck } = useJoinState();

src/components/Join/JoinForm.tsx

@@ -1,11 +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;
+  children: ReactNode;
+}
+
+const JoinForm: FC<Props> = ({ children }) => {
+  return <form className={'mt-9 flex w-full flex-col'}>{children}</form>;
+};
+
+export default JoinForm;

src/components/Join/TermsCheckInput.tsx

@@ -3,24 +3,32 @@ 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">
+  return (
+    <label className="form-control mb-9 mt-5 w-full">
       <div className="flex flex-col">
-        <label className='font-bold'>약관 동의</label>
+        <label className="font-bold">약관 동의</label>
       </div>
-      <div className="flex justify-between items-center mt-2">
+      <div className="mt-2 flex items-center justify-between">
         <label htmlFor="termsOne">이용약관 동의 (필수)</label>
-          <input type="radio" className='radio radio-primary' checked={useTermsCheck} onClick={useTermsCheckHandler} />
+        <input type="radio" className="radio-primary radio" 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">
+      {!useTermsCheck ? <span className="text-red-500">이용약관에 동의해 주세요.</span> : <span className="h-6"></span>}
+      <div className="mt-2 flex items-center justify-between">
         <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> }
+        <input
+          type="radio"
+          className="radio-primary radio"
+          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

@@ -9,19 +9,20 @@ const HistoryBackButton: React.FC = () => {
 
   return (
     <div className="relative">
-        <svg onClick={handleBack}
+      <svg
+        onClick={handleBack}
         className={'shrink-0'}
         width="256"
         height="512"
         viewBox="0 0 256 512"
         fill="none"
-        preserveAspectRatio='xMinYMin meet'
+        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>
+      >
+        <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;
+export default HistoryBackButton;

src/layouts/JoinPageLayout.tsx

@@ -6,8 +6,8 @@ interface Props {
 
 const JoinPageLayout: FC<Props> = ({ children }) => {
   return (
-    <main className={'flex flex-col h-full w-full max-w-md items-center m-auto overflow-auto p-8 justify-center'}>
-        {children}
+    <main className={'m-auto flex h-full w-full max-w-md flex-col items-center justify-center overflow-auto p-8'}>
+      {children}
     </main>
   );
 };

src/pages/JoinPage.tsx

@@ -9,12 +9,10 @@ import PwCheckInput from '../components/Join/PwCheckInput.tsx';
 import TermsCheckInput from '../components/Join/TermsCheckInput.tsx';
 import JoinFormActions from '../components/Join/JoinFormActions.tsx';
 import JoinButton from '../components/Join/JoinButton.tsx';
-import HistoryBackButton from '../components/common/HistoryBackButton.tsx';
 
 const JoinPage = () => {
   return (
     <JoinPageLayout>
-    <HistoryBackButton/>
       <VerticalLogo />
       <JoinForm>
         <NameInput />