회원가입 페이지 README 분석

README

DevCamp - Frontend Material

위에 제공된 애플리케이션 코드는 React, TypeScript 및 다양한 커스텀 컴포넌트를 사용하여 2단계 프로세스로 사용자 등록 양식을 생성하도록 설계되었습니다. 이 문서에서는 코드를 단계별로 설명하고 외부 라이브러리, 사용자 정의 COM 사용을 강조합니다.

 

Tech Stacks

이 프로젝트에는 다음 기술과 라이브러리가 사용됩니다.

1. React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.
2. TypeScript: 정적 유형을 추가하는 JavaScript의 상위 집합입니다.
3. React-hook-form: React 애플리케이션에서 양식 상태 및 유효성 검사를 관리하기 위한 라이브러리입니다.
4. zod: TypeScript 우선 스키마 선언 및 유효성 검사 라이브러리입니다.
5. 프레이머-모션: React 애플리케이션에서 애니메이션과 전환을 생성하는 라이브러리입니다.
6. lucide-react: React 애플리케이션에 아이콘을 표시하기 위한 라이브러리입니다.

 

Project Setup

1. 저장소 복제: 제공된 소스 제어 링크에서 프로젝트 저장소를 복제합니다.
2. 종속성 설치: 프로젝트 디렉터리로 이동하고 npm install 또는 Yarn을 실행하여 필요한 모든 종속성을 설치합니다.
3. 개발 서버 시작: npm start 또는 Yarn start를 실행하여 개발 서버를 시작합니다. 그러면 웹 브라우저에서 응용 프로그램이 열립니다.
4. 코드 탐색: 즐겨 사용하는 코드 편집기에서 프로젝트를 열고 코드, 특히 등록 양식 논리 및 렌더링이 포함된 홈 구성 요소를 탐색합니다.

 

Further Assistance

코드 또는 설정과 관련하여 문제가 발생하거나 질문이 있는 경우 언제든지 프로젝트 관리자에게 문의하거나 이 프로젝트에 사용된 라이브러리의 공식 문서를 참조하세요.

등록 양식 신청서는 원활한 다단계 등록 프로세스를 제공하도록 구성되어 있습니다. 기술 스택과 프로젝트 설정을 이해하면 양식 상태를 관리하고 사용자 입력을 처리하기 위한 application.Components 및 React 후크의 기능을 추가로 탐색하고 확장할 수 있는 좋은 기반이 제공됩니다.

 

Project Structure

코드 설명에 들어가기 전에 프로젝트 구조를 이해하는 것이 중요합니다. 코드는 구성요소와 유틸리티 기능이 특정 방식으로 구성되는 디렉토리 설정을 가정합니다.

@/comComponents/ui: 이 디렉터리에는 카드, 버튼, 양식, 선택, 입력 및 기타 관련 구성 요소와 같은 사용자 정의 UI 구성 요소가 포함되어 있습니다.
@/lib: cn(className) 함수와 같은 유틸리티 함수가 저장되는 곳입니다.
@/validators: 이 디렉터리에는 인증(auth)을 위한 유효성 검사 스키마가 있습니다.

 

Importing Dependencies and Components

파일 시작 부분에서 필요한 종속성과 사용자 정의 구성 요소를 가져옵니다. 
가져오기에는 카드 레이아웃, 양식 요소, 선택 드롭다운, 입력 필드, 일부 유틸리티 후크 및 기능을 생성하기 위한 구성 요소가 포함됩니다.

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
// ... other imports

 

Component Definition

등록 양식을 렌더링하기 위한 주요 구성 요소로 기능 구성 요소 Home을 정의합니다.

export default function Home() {
  // ... component body
}

 

Managing State

useState 후크를 사용하여 등록 양식의 현재 단계를 관리합니다(첫 번째 단계는 0, 두 번째 단계는 1).

const [step, setStep] = useState<number>(0);

 

Setting Up Form Handling

우리는 zodResolver와 함께 React-hook-form의 useForm 후크를 사용하여 
사전 정의된 스키마(registerSchema)에 대해 양식 데이터의 유효성을 검사합니다.

const form = useForm<RegisterInput>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      email: "",
      // ... other default values
    },
});

 

Form Submission Handler

onSubmit 함수는 양식 제출을 처리하도록 정의됩니다. 
비밀번호와 verifyPassword 필드가 일치하는지 확인하고, 
일치하면 양식 데이터에 경고합니다. 
그렇지 않으면 토스트 메시지가 표시됩니다.

function onSubmit(data: RegisterInput) {
    // ... function body
}

 

Rendering the Form

구성 요소에서 반환된 JSX는 양식을 사용하여 카드 레이아웃을 구성합니다. 
양식은 사용자 세부 정보와 비밀번호 설정의 두 단계로 구분됩니다. 
프레이머 모션의 Motion.div 요소는 단계 간 전환을 애니메이션화하는 데 사용됩니다.

return (
    <div className="absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
      <Card className={cn("w-[380px]")}>
        // ... other JSX code
        <CardContent>
          <Form {...form}>
            <form
              onSubmit={form.handleSubmit(onSubmit)}
              className="relative space-y-3 overflow-x-hidden"
            >
              // ... form fields for step 1 and step 2
              <div className={"flex gap-2"}>
                // ... navigation and submission buttons
              </div>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
);

 

Form Fields

양식 필드는 양식 상태 관리를 위한 제어 소품, 양식 필드를 식별하는 이름 소품, 
실제 입력 요소를 렌더링하는 렌더링 소품을 허용하는 FormField 구성 요소 내에 정의됩니다.

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>이름</FormLabel>
      <FormControl>
        <Input placeholder="홍길동" {...field} />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>
// ... other form fields

 

Navigation and Submission

단계 간 이동, 양식 유효성 검사 트리거, 양식 데이터 제출을 위한 버튼이 제공됩니다.

<div className={"flex gap-2"}>
  <Button className={cn({ hidden: step === 0 })} type="submit">
    계정 등록하기
  </Button>
  // ... other buttons for navigation
</div>

양식의 각 섹션과 컨트롤은 구조화된 사용자 입력 흐름을 지원하여 지정된 유효성 검사 규칙을 준수하면서 
필요한 정보가 사용자 친화적인 방식으로 수집되도록 했습니다.