Merge pull request #220 from gloddy-dev/feature/215-refactoring-join

Refactoring : 회원가입 페이지 수정된 디자인에 맞게 수정

src/app/grouping/[groupId]/write/components/InputForm.tsx

@@ -47,10 +47,10 @@ export default function InputForm() {
  </div>
  <Spacing size={20} />
  <CircleCheckbox
- text="위 글을 공지로 설정합니다."
+ // text="위 글을 공지로 설정합니다."
  onClick={() => setValue('isNotice', !watch('isNotice'))}
  checked={watch('isNotice')}
- register={register('isNotice')}
+ // register={register('isNotice')}
  />
  <BottomFixedButton
  type="submit"

src/app/join/components/JoinContentTextMessage.server.tsx → src/app/join/components/JoinContentTextMessage.client.tsx

@@ -1,3 +1,4 @@
+'use client';
 import type { StrictPropsWithChildren } from '@/types';
 
 export default function JoinContentTextMessage({ children }: StrictPropsWithChildren) {

src/app/join/components/JoinContext.tsx → src/app/join/components/JoinContext.client.tsx

@@ -6,6 +6,7 @@ import type { StrictPropsWithChildren } from '@/types';
 
 const defaultValues = {
  phoneNumber: '',
+ verifyNumber: '',
  imageUrl: '',
  schoolInfo: {
  school: '',

src/app/join/components/JoinTitleTextMessage.server.tsx → src/app/join/components/JoinTitleTextMessage.client.tsx

@@ -1,5 +1,6 @@
+'use client';
 import type { StrictPropsWithChildren } from '@/types';
 
 export default function JoinTitleTextMessage({ children }: StrictPropsWithChildren) {
- return <div className="leading-2.5 font-700 mb-30 text-24">{children}</div>;
+ return <div className="pb-16 pt-32 text-h3 text-sign-cto">{children}</div>;
 }

src/app/join/funnels/JoinFunnel.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import Step1Component from './step1/Step1Component.server';
-import Step2Component from './step2/Step2Component.server';
-import Step3Component from './step3/Step3Component.server';
-import Step4Component from './step4/Step4Component.server';
-import Step5Component from './step5/Step5Component.server';
-import JoinHeader from '../components/JoinHeader.server';
+import Step1Component from './step1/Step1Component.client';
+import Step2Component from './step2/Step2Component.client';
+import Step3Component from './step3/Step3Component.client';
+import Step4Component from './step4/Step4Component.client';
+import Step5Component from './step5/Step5Component.client';
+import JoinHeader from '../components/JoinHeader.client';
 import { useFunnel } from '@/hooks/useFunnel';
 import { createContext, useContext } from 'react';
 

src/app/join/funnels/step1/Step1Component.server.tsx → src/app/join/funnels/step1/Step1Component.client.tsx

@@ -1,6 +1,8 @@
-import CheckboxSection from './components/CheckboxSection.server';
+'use client';
+
 import FormSection from './components/FormSection.client';
-import JoinTitleTextMessage from '../../components/JoinTitleTextMessage.server';
+import NoticeSection from './components/NoticeSection.client';
+import JoinTitleTextMessage from '../../components/JoinTitleTextMessage.client';
 import { Spacing } from '@/components/common/Spacing';
 
 export default function Step1Component() {
@@ -12,8 +14,8 @@ export default function Step1Component() {
  인증해주세요
  </JoinTitleTextMessage>
  <FormSection />
- <Spacing size={18} />
- <CheckboxSection />
+ <Spacing size={16} />
+ <NoticeSection />
  </main>
  );
 }

src/app/join/funnels/step1/components/FormSection.client.tsx

@@ -2,18 +2,16 @@
 
 import NumberForm from './NumberForm.client';
 import NumberVerifyForm from './NumberVerifyForm.client';
-import { Spacing } from '@/components/common/Spacing';
 import { useState } from 'react';
 
 import type { StatusType } from '../type';
 
 export default function InputForm() {
- const [inputStatus, setInputStatus] = useState<StatusType>('notReadyForSend');
+ const [inputStatus, setInputStatus] = useState<StatusType>('beforeSend');
 
  return (
  <section>
  <NumberForm inputStatus={inputStatus} setInputStatus={setInputStatus} />
- <Spacing size={18} />
  {inputStatus === 'afterSend' && <NumberVerifyForm />}
  </section>
  );

src/app/join/funnels/step1/components/NoticeSection.client.tsx

@@ -0,0 +1,13 @@
+'use client';
+import { Spacing } from '@/components/common/Spacing';
+import { TextList } from '@/components/TextList';
+
+export default function NoticeSection() {
+ return (
+ <section>
+ <TextList variant="caption">휴대폰 번호는 안전하게 보관됩니다.</TextList>
+ <Spacing size={8} />
+ <TextList variant="caption">휴대폰 번호는 어디에도 공개되지 않습니다.</TextList>
+ </section>
+ );
+}

src/app/join/funnels/step1/components/NumberForm.client.tsx

@@ -1,8 +1,10 @@
-import { useJoinContext } from '../../../components/JoinContext';
+'use client';
+
+import { useJoinContext } from '../../../components/JoinContext.client';
 import { formatNumber, formatNumberBackSpace } from '../util';
 import { useSMSMutation } from '@/apis/auth';
 import { type SignUpState } from '@/app/join/type';
-import { Button } from '@/components/common/Button';
+import { Button, ButtonGroup } from '@/components/Button';
 import { Spacing } from '@/components/common/Spacing';
 import { TextFieldController } from '@/components/TextField';
 import { regexr } from '@/constants/regexr';
@@ -18,7 +20,7 @@ interface NumberSectionProps {
 
 export default function NumberForm({ inputStatus, setInputStatus }: NumberSectionProps) {
  const hookForm = useJoinContext();
- const { setValue, handleSubmit, register } = hookForm;
+ const { setValue, handleSubmit, register, formState } = hookForm;
  const { mutate: mutateSMS } = useSMSMutation();
  const {
  status: timerStatus,
@@ -30,21 +32,12 @@ export default function NumberForm({ inputStatus, setInputStatus }: NumberSectio
  endTime: 0,
  });
 
- const buttonText =
- inputStatus === 'readyForSend' || inputStatus === 'notReadyForSend'
- ? '인증문자 전송'
- : `${leftTime}초 후 재전송`;
- const buttonColor = inputStatus === 'readyForSend' ? 'blue' : 'orange';
-
  const handleInputChange = (
  e: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>
  ) => {
  const phoneNumber = e.currentTarget.value.replace(/[^0-9-]/g, '');
  const phoneNumberWithoutHyphen = phoneNumber.replace(/-/g, '');
 
- if (phoneNumberWithoutHyphen.length === 11) setInputStatus('readyForSend');
- else setInputStatus('notReadyForSend');
-
  if ('key' in e && e.key === 'Backspace') {
  setValue('phoneNumber', formatNumberBackSpace(phoneNumberWithoutHyphen));
  } else {
@@ -64,6 +57,7 @@ export default function NumberForm({ inputStatus, setInputStatus }: NumberSectio
 
  return (
  <form onSubmit={handleSubmit(onSubmit)}>
+ <Spacing size={8} />
  <TextFieldController
  label="휴대폰 번호"
  register={register('phoneNumber', {
@@ -79,16 +73,17 @@ export default function NumberForm({ inputStatus, setInputStatus }: NumberSectio
  hookForm={hookForm}
  placeholder="010-0000-0000"
  isSpacing={false}
+ readOnly={inputStatus === 'afterSend'}
  />
 
- <Spacing size={18} />
-
- <Button
- text={buttonText}
- disabled={inputStatus === 'notReadyForSend' || timerStatus === 'RUNNING'}
- color={buttonColor}
- type="submit"
- />
+ <Spacing size={8} />
+ {inputStatus === 'beforeSend' && (
+  <ButtonGroup isSpacing={false}>
+  <Button disabled={!formState.isValid || timerStatus === 'RUNNING'} type="submit">
+  인증번호 전송
+  </Button>
+ </ButtonGroup>
+ )}
  </form>
  );
 }

src/app/join/funnels/step1/components/NumberVerifyForm.client.tsx

@@ -1,26 +1,21 @@
 'use client';
-import { useJoinContext } from '../../../components/JoinContext';
+import { useJoinContext } from '../../../components/JoinContext.client';
 import { useFunnelContext } from '../../JoinFunnel';
 import { formatWithoutHyphen, formatWithoutSpace } from '../util';
 import { LoginResponse, useLoginMutation, useSMSVerifyMutation } from '@/apis/auth';
-import { Button } from '@/components/common/Button';
-import { Input } from '@/components/common/Input';
-import { Spacing } from '@/components/common/Spacing';
+import { Button, ButtonGroup } from '@/components/Button';
+import { TextFieldController } from '@/components/TextField';
 import { regexr } from '@/constants/regexr';
 import { setTokenAtCookie } from '@/utils/auth/tokenController';
 import { useRouter } from 'next/navigation';
+import { type SubmitHandler } from 'react-hook-form';
 
 import type { SignUpState } from '@/app/join/type';
-import type { SubmitHandler } from 'react-hook-form';
 
 export default function NumberVerifyForm() {
  const router = useRouter();
- const {
- register,
- handleSubmit,
- setError,
- formState: { errors },
- } = useJoinContext();
+ const hookForm = useJoinContext();
+ const { handleSubmit, setError, register } = hookForm;
 
  const { nextStep } = useFunnelContext();
  const { mutate: mutateSMSVerify } = useSMSVerifyMutation();
@@ -59,6 +54,7 @@ export default function NumberVerifyForm() {
  onError: () => {
  setError('verifyNumber', {
  type: 'validate',
+ message: '인증번호가 잘못되었습니다.',
  });
  },
  }
@@ -67,8 +63,9 @@ export default function NumberVerifyForm() {
 
  return (
  <form onSubmit={handleSubmit(onSubmit)}>
- <Input
- placeholder="인증 번호"
+ <TextFieldController
+ label="인증 번호"
+ hookForm={hookForm}
  register={register('verifyNumber', {
  required: true,
  pattern: {
@@ -77,10 +74,11 @@ export default function NumberVerifyForm() {
  },
  })}
  maxLength={6}
- errorMessage={errors.verifyNumber?.message}
  />
- <Spacing size={18} />
- <Button text="인증번호 확인" type="submit" />
+ <ButtonGroup isSpacing={false}>
+ <Button type="button">재전송</Button>
+ <Button type="submit">확인</Button>
+ </ButtonGroup>
  </form>
  );
 }

src/app/join/funnels/step1/type.ts

@@ -1 +1 @@
-export type StatusType = 'notReadyForSend' | 'readyForSend' | 'afterSend';
+export type StatusType = 'beforeSend' | 'afterSend';

src/app/join/funnels/step2/Step2Component.server.tsx → src/app/join/funnels/step2/Step2Component.client.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import InputForm from './components/InputForm.client';
 import SubmitSection from './components/SubmitSection.client';
-import JoinTitleTextMessage from '../../components/JoinTitleTextMessage.server';
+import JoinTitleTextMessage from '../../components/JoinTitleTextMessage.client';
 
 export default function Step2Component() {
  return (