[PWA] (31) 일반 회원-회원가입 API 구현

🪻 User 테이블의 id 수정여부 확인

id를 userNo 로 바꿔야하는지 한번 찾아보았는데, 국내 공공기업에서는 그렇게 쓰는 경우가 있지만, (id Int @id @default(autoincrement())) 가 가장 일반적인 패턴이며, Prisma, NextAuth, 대부분의 ORM/라이브러리들이 id라는 이름을 기본 키로 가정한다고 한다. 그렇기 때문에 굳이, userNo 라고 커스텀하지 않고 그냥 id를 사용하기로 했다.

🪻회원가입이 안 되는 가장 큰 이유

signup.js

Prisma의 User 모델 컬럼명과 실제 사용하는 필드명이 다르기 때문이라고 한다.

✔️문제점

• Prisma User 모델의 컬럼명:
  id (PK, 자동 증가), userId, pwd, name, email, phone, isAdmin, adminPhoneNumber, adminBusinessFile 등

• 현재 signup.js에서 사용하는 필드명:
  id, password, name, phone, email, isAdmin, adminPhone, points

• 주요 불일치
  Prisma의 PK는 id, 실제 로그인용 아이디는 userId
  비밀번호는 pwd
  adminPhone → adminPhoneNumber
  password → pwd

• 해결 방법
  findUnique, create의 where/data 필드명을 Prisma 모델에 맞게 수정해야 함.

signUpModal.js

위와 같은 맥락으로 signUpModal에서 newUser 만들때도, 컬럼명 일치시키기.
특히, state 이름이랑 일치시켜야 하므로, userId: id 형식으로 수정해준다.
'db컬럼명: state명' 식으로.

const newUser = {
  userId: id,
  pwd: password,
  name,
  phone,
  email,
  isAdmin,
  adminPhoneNumber: adminPhone,
  adminBusinessFile: businessFile,
  // points는 보통 회원가입 시 직접 입력하지 않음
};

이렇게 수정후 회원가입해보니, insert 되는 것을 확인함.
남은문제는 id-check 즉, 중복확인할때 에러가 나고있어 이 부분을 수정해주어야 한다.

🪻중복확인 오작동 고치기

id-check.js 수정

GET /api/check-id?id=ssssss 500 in 37ms
Error checking ID: TypeError: Cannot read properties of undefined (reading 'user')
at handler (src\pages\api\check-id.js:15:31)

에러내용 : prisma.user가 undefined이다.
즉, Prisma Client가 User 모델을 인식하지 못하거나, import 방식이 잘못되었을 때 발생.

해결방법 :
1. named import를 default로 변경 (prisma.js는 default export를 사용하고 있으므로)
2. where 조건의 컬럼명도 id → userId로 변경

// import { prisma } from "../../../lib/prisma";
import prisma from "../../../lib/prisma";

 const existingUser = await prisma.user.findUnique({
      where: { userId: id },

이렇게 수정하고 다시 해보니, 가입된 id 도 사용가능하다고 뜨던게, 이제 안뜨고 중복확인이 제대로 작동한다.

🪻id중복확인 코드 중복아닌지?

signUp.js

const existingUser = await prisma.user.findUnique({
  where: { userId },
});

if (existingUser) {
  return res.status(409).json({ error: "이미 존재하는 ID입니다." });
}

SignUpModal.js

  const handleIdCheck = async () => {
    if (!id) {
      setIdCheckMessage("아이디를 입력해주세요.");
      setIsIdChecked(false);
      return;
    }
    try {
      const response = await fetch(`/api/check-id?id=${id}`);
      const data = await response.json();

      if (data.exists) {
        setIdCheckMessage("이미 사용 중인 아이디입니다.");
        setIsIdChecked(false);
      } else {
        setIdCheckMessage("사용 가능한 아이디입니다.");
        setIsIdChecked(true);
      }
    } catch (error) {
      console.error("아이디 중복 확인 중 오류:", error);
      setIdCheckMessage("오류가 발생했습니다.");
      setIsIdChecked(false);
    }
  };

signUp.js 와 SignUpModal.js 두 군데 모두 existingUser를 prisma에서 검색하는 코드가 있다. 화면상에 상태를 띄워주는 파일은 SignUpModal.js 이라서, signUp.js 에 있는 existingUser 함수는 지워도 되는것 아닌가해서 찾아보았는데.

결론은 중복코드는 아니다!

SignUpModal의 handleIdCheck 함수는 프론트엔드에서 "아이디 중복확인" 버튼을 눌렀을 때,
서버의 /api/check-id 엔드포인트에 GET 요청을 보내서 해당 아이디(userId)가 이미 존재하는지 확인하는 역할이다.

반면, /api/signup의 이 코드는

const existingUser = await prisma.user.findUnique({ where: { userId } });
if (existingUser) { ... }

회원가입 요청이 실제로 들어왔을 때 DB에 같은 userId가 이미 있는지 최종적으로 한 번 더 체크하는 역할이다.

🪻프론트엔드 handleIdCheck: 사용자 편의를 위한 사전 중복확인
🪻백엔드 prisma.user.findUnique: 실제 회원가입 시 최종 중복 방지(보안상 필수)
→ 둘 다 있어야 안전하고 정상적인 회원가입이 된다!