학습을위해서 탬플릿을 참고정도만하고 새롭게 만들자는 얘기가나와 처음부터 다시 만들기로 했습니다.

리엑트 프로젝트를 새로 생성합니다.

이름 : miniproject2

npm install redux react-redux @reduxjs/toolkit next react-router-dom 참고할 프로젝트에 필요한 라이브러리들을 받습니다.

우선 로그인 회원가입 부터 만들 예정입니다.

어제 살펴보았던 템플릿에서 필요할꺼같은 컴포넌트들을 가져왔습니다.

src/app에 라우팅 및 글로벌 설정 가져오기, 이 폴더에는 페이지 라우팅과 글로벌 레이아웃 설정 (layout.tsx)이 들어 있습니다. 필요 시 globals.css 같은 스타일 파일도 src/styles에 함께 가져오면 됩니다.

Auth : 로그인, 회원가입 폼 관련 컴포넌트

Header : 사이트 상단 네비게이션 바

Common : 재사용 가능한 UI 요소들 (버튼, 입력 필드 등)

붙여왔더니 @(별칭)이 제대로 설정되어있지않아 경로를 찾지 못하네요

별칭이 설정되어있는 파일을 가져옵니다.

빨간불 사라졌어요

tsconfig.json : TypeScript 컴파일러의 동작 방식을 정의하는 설정 파일입니다. 이 파일을 통해 TypeScript 코드가 어떻게 해석되고 컴파일될지 결정할 수 있습니다.

next.config.js : Next.js 프로젝트의 동작 방식을 설정하는 파일입니다. 이 파일을 통해 빌드, 라우팅, 환경변수 등 다양한 설정을 관리할 수 있습니다.

서버를 구동시켜봤지면 역시나 에러가 발생하네요

일단 dev를 찾지 못하는것 같습니다. package.json을 추가해줍니다.

페키지.json에서 프로젝트 명만 바꿔줬습니다.

실행은 되었으나 역시 없는 모듈이 많아서 에러가 발생하네요

url 접속했을때 화면입니다.

/redux 디렉토리가 필요할 것 같습니다.

redux : 애플리케이션의 상태 관리를 담당한다고합니다.

다양한 컴포넌트 간 데이터 흐름을 원활하게 합니다.

기능들의 데이터 상태를 관리하고, 이러한 상태를 UI 컴포넌트에 전달해서 화면에 표시되도록 돕는 역할을 합니다.

산넘어 산입니다 이번에는 Common컴포넌트의 QuickViewModal.tsx 가 없다고 하네요

Common 패키지는 애플리케이션 전반에서 재사용 가능한 UI 구성 요소들을 제공하여 사용자 경험을 향상시키고 일관성을 유지하는 역할을 합니다.

이번에는 home 컴포넌트가 없어서 에러가 발생했습니다.

다음에러는 Shop 컴포넌트 누락입니다. 일단은 필요한데로 다받아서 갖다쓴다음에 필요없는 부분을 삭제해야겠습니다.

드디어 페이지가 렌더링되었는데 css 적용이 되지않았네요

일단은 이미지가 없어서 발생한 것 같습니다.

images 폴더를 포함하고있는 public 폴더를 통제로 가져왔습니다.

css가 아직도 부족합니다.

진짜 문제인게 이제는 에러가 발생하지를 않습니다.

휴 1시간 사투 끝에 원인을 발견했습니다

빨같 밑줄이 새로 만든 프로젝트인데 상위폴더인 Frontend에 package.json이 존재하길래 혹시 npm run dev 하면 해당 패키지를 읽는건가 싶어서 삭제했더니 제대로 작동했습니다.

npm run dev명령어가 현제 디랙토리의 package.json을 찾아서 dev명령어를 실행시킨다는데 제생각에 아마 현제 디랙토리 설정이 잘못되었던 것같습니다.

그리고 여기있는 설정파일들 필요없는건 없애려고했는데 하나라도 없으면 css가 망가지더군요

이제 문제가 해결되었으니 오늘의 목표는

홈,로그인,회원가입 화면을 원하는데로 커스텀하는 것 입니다.

일단회원가입 폼을 작성했을때 제대로 db에 데이터가 들어가는지 확인해봤습니다

준비물 백엔드 서버

커스텀한 signup.tsx 입니다.

1. 필수 모듈 및 라이브러리 불러오기

  "use client";

  import Breadcrumb from "@/components/Common/Breadcrumb";
  import Link from "next/link";
  import React, { useState } from "react";
  import axios from "axios";

2. 상태 관리 (Form Data 저장)

const [formData, setFormData] = useState({
  name: "",
  email: "",
  password: "",
  retypePassword: "",
});

3. 입력 값 변경 핸들러

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

handleChange 없이 폼을 작성하면 다음과 같은 상황이 발생할 수 있습니다
사용자: 이름에 "John"을 입력했지만, 서버로 전송된 데이터는 빈 문자열("")일 수 있습니다.
이유: formData 상태가 업데이트되지 않았기 때문입니다.

4. 폼 제출 핸들러 (회원가입 요청)

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (formData.password !== formData.retypePassword) {
      alert("Passwords do not match!");
      return;
    }

    try {
      const response = await axios.post("http://localhost:8080/user/signup", {
        email: formData.email,
        userName: formData.name,
        password: formData.password,
      });

      console.log("Signup successful:", response.data);
      alert("Account created successfully!");

      setFormData({
        name: "",
        email: "",
        password: "",
        retypePassword: "",
      });
    } catch (error) {
      console.error("Signup failed:", error.response?.data || error.message);
      alert("Signup failed. Please try again.");
    }
  };

---

UI 렌더링 (폼 구성)

Breadcrumb (페이지 상단 경로 표시)

<Breadcrumb title={"Signup"} pages={["Signup"]} />

회원가입 폼 UI

  <section className="overflow-hidden py-20 bg-gray-2">
    <div className="max-w-[1170px] w-full mx-auto px-4 sm:px-8 xl:px-0">
      <div className="max-w-[570px] w-full mx-auto rounded-xl bg-white shadow-1 p-4 sm:p-7.5 xl:p-11">
               

소셜 로그인 버튼

  <button className="flex justify-center items-center gap-3.5 rounded-lg border border-gray-3 bg-gray-1 p-3 ease-out duration-200 hover:bg-gray-2">
    <svg ... /> Sign Up with Google
  </button>

  <button className="flex justify-center items-center gap-3.5 rounded-lg border border-gray-3 bg-gray-1 p-3 ease-out duration-200 hover:bg-gray-2">
    <svg ... /> Sign Up with Github
  </button>
  

입력 필드 (이름, 이메일, 비밀번호, 비밀번호 재입력)

<input
  type="text"
  name="name"
  placeholder="Enter your full name"
  value={formData.name}
  onChange={handleChange}
  className="rounded-lg border border-gray-3 bg-gray-1 placeholder:text-dark-5 w-full py-3 px-5 outline-none duration-200 focus:border-transparent focus:shadow-input focus:ring-2 focus:ring-blue/20"
/>

회원가입 버튼

<button
  type="submit"
  className="w-full flex justify-center font-medium text-white bg-dark py-3 px-6 rounded-lg ease-out duration-200 hover:bg-blue mt-7.5"
>
  Create Account
</button>

로그인 페이지로 이동 링크

<p className="text-center mt-6">
  Already have an account?
  <Link href="/signin" className="text-dark ease-out duration-200 hover:text-blue pl-2">
    Sign in Now
  </Link>
</p>

---

클라이언트에서 회원가입 성공

디비에 성공적 업로드

이메일 인증요청 토큰

오늘은 여까이..