[Frontend] 사용자apikey 목록 요청, 비밀번호 찾기 시스템 구현

home/user/page.js

API 키 목록 요청

const fetchAPIKey = async (email) => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/APIkeyList`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ email: email }),
  });
  const data = await response.json();
  if (response.ok) {
    setApiKeys(data.api_keys); // API 키 목록을 상태에 저장
  } else {
    console.log("APIkey 오류발생");
  }
};

요청 URL: ${process.env.NEXT_PUBLIC_API_URL}/APIkeyList

요청 메서드: POST

요청 바디: { email: string }

응답 형태:

{
  "api_keys": [
    {
      "id": 5,
      "provider_id": 4,
      "provider_name": "OpenAI",
      "user_id": 13,
      "api_key": "test",
      "status": "Active",
      "usage_count": 0,
      "usage_limit": 1000,
      "create_at": null
    },
    {
      "id": 6,
      "provider_id": 4,
      "provider_name": "OpenAI",
      "user_id": 13,
      "api_key": "테스트키",
      "status": "Active",
      "usage_count": 0,
      "usage_limit": 1000,
      "create_at": null
    },
    {
      "id": 8,
      "provider_id": 2,
      "provider_name": "Anthropic",
      "user_id": 13,
      "api_key": "sk-ant-***********",
      "status": "Active",
      "usage_count": 123,
      "usage_limit": 1000,
      "create_at": "2024-04-10T14:32:00Z"
    }
  ]
}

주요 필드 설명

필드명	설명
`id`	API 키 고유 ID
`provider_name`	공급자 이름 (예: OpenAI)
`api_key`	사용자의 API 키 값
`status`	활성 상태 : Active or InActive
`usage_count`	현재까지 사용된 요청 횟수
`usage_limit`	설정된 사용 한도
`create_at`	생성 일시 (nullable)

실행 시점

useEffect(() => {
  if (status !== "authenticated") return;
  if (session?.user?.email) {
    ...
    fetchAPIKey(session.user.email);
  }
}, [session, status]);

로그인 완료 후 자동으로 API 키 목록을 불러옵니다.

ApiKeys.jsx

select 박스의 옵션 처리

<select
  value={newKeyData.provider_name}
  onChange={(e) => {
    const selectedName = e.target.value;
    const selectedProvider = providers.find(p => p.name === selectedName);

    setNewKeyData({
      ...newKeyData,
      provider_name: selectedName,
      provider_id: selectedProvider ? selectedProvider.id : null
    });
  }}
  className="w-full px-4 py-2 border rounded-lg"
>
  {providers.map(provider => {
    const isAlreadyUsed = currentapiKeys.some(apiKey => apiKey.provider_name === provider.name);
    return (
      <option
        key={provider.name}
        value={provider.name}
        disabled={isAlreadyUsed} // ✅ 비활성화 조건
      >
        {provider.name} {isAlreadyUsed ? '(이미 등록됨)' : ''}
      </option>
    );
  })}
</select>

항목	설명
`providers`	모든 사용 가능한 프로바이더 목록 (예: OpenAI, Google, Anthropic 등)
`currentapiKeys`	사용자가 현재 등록한 API 키 목록
`isAlreadyUsed`	해당 프로바이더가 이미 등록되었는지 여부를 `some()` 메서드로 확인
`disabled={isAlreadyUsed}`	이미 등록된 경우 `<option>` 항목을 비활성화 처리
`{provider.name} (이미 등록됨)`	사용자에게 중복 여부를 명확히 표시

app/getpassword/page.js

목적

이 페이지는 사용자가 이메일을 통해 본인 인증을 한 후 비밀번호를 재설정할 수 있는 비밀번호 재설정 페이지입니다. 2단계 인증 절차를 통해 보안성을 높이며, 이메일을 통한 코드 확인 후 비밀번호 변경이 가능합니다.

주요 기능

이메일 입력 및 인증 코드 전송

이메일로 받은 인증 코드 검증

비밀번호 재설정 기능

주요 상태 변수 (useState)

변수명	설명
`formData`	사용자의 입력값을 저장하는 객체 (`email`, `password`, `confirmPassword`, `emailCode`, `name`)
`emailVerified`	이메일이 인증되었는지 여부
`secretCode`	서버에 전송할 인증 코드 (프론트에서 생성)
`step`	현재 단계 (1단계: 이메일 인증 / 2단계: 비밀번호 변경)

API 통신

작업	경로	설명
이메일 인증 코드 전송	`POST /sendEmail`	이메일 주소와 함께 인증 코드 전송
비밀번호 변경	`POST /FindPassword`	이메일과 새로운 비밀번호를 서버에 전송