개요

이 기능은 사용자가 등록한 API 키를 편리하게 수정 및 삭제할 수 있도록 지원합니다. 각 API 키는 provider_name을 고유 식별자로 하여 관리되며, UI 상에서 직관적인 편집 및 삭제 기능을 제공합니다. 사용자는 이미 등록된 API 키 목록을 확인하고, 필요한 경우 특정 항목을 편집하거나 삭제할 수 있습니다. 이 과정은 React의 상태 관리를 기반으로 하며, 서버와의 통신은 fetch API를 사용하여 이루어집니다.

수정 시 사용자는 키 값을 직접 편집할 수 있으며, 저장을 통해 변경 사항을 서버에 반영합니다. 삭제 시에는 사용자 확인 절차를 거쳐 실수로 인한 삭제를 방지하며, 삭제 완료 후 UI가 자동으로 갱신됩니다.

이 기능은 API 키의 보안성과 관리 편의성을 모두 고려하여 구현되었으며, 클라이언트 측과 서버 측의 상태를 일관되게 유지하는 것이 핵심입니다.

API 키 수정

사용자가 등록한 API 키의 값을 수정할 수 있습니다. 특정 provider_name을 기준으로 해당 API 키 정보를 불러와 편집 모드로 진입하며, 수정 완료 후 저장을 통해 서버에 업데이트 요청을 보냅니다.

구현 흐름

사용자 클릭:

“수정” 버튼 클릭 시 startEditingKey(apiKey) 함수 호출

현재 편집 중인 키 이름을 상태 변수 editingKey에 저장

수정할 대상 정보를 keySettings 상태에 저장

렌더링:

editingKey가 현재 반복 중인 API 키의 provider_name과 일치하면, input 필드를 보여주고 수정 가능하게 함

저장:

“저장” 버튼 클릭 시 saveKeySettings(apiKey) 함수 호출

key_before와 new_key를 서버에 POST 요청

성공 시 currentapiKeys 상태를 업데이트하고 편집 모드를 종료 (editingKey를 null로 초기화)

관련 코드

const startEditingKey = (Key) => {
  seteditingKey(Key.provider_name);
  setKeySettings({ ...Key });
};

const saveKeySettings = async (param) => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/ChangeKey`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ key_before: param, new_key: keySettings }),
  });

  if (response.ok) {
    setCurrentApiKeys(prevKeys =>
      prevKeys.map(key =>
        key.provider_name === param.provider_name ? { ...keySettings } : key
      )
    );
    seteditingKey(null);
  }
};

API 키 삭제

기능 설명

사용자가 등록한 API 키 중 특정 항목을 삭제할 수 있습니다. 삭제 시 사용자에게 확인 메시지를 보여주고, 확인 후 서버에 삭제 요청을 전송합니다.

구현 흐름

사용자 클릭:

“삭제” 버튼 클릭 시 deleteKey(apiKey) 함수 호출

확인:

window.confirm()을 통해 삭제 확인

삭제 요청:

POST 요청을 통해 서버에 해당 API 키 정보 전송

UI 반영:

삭제된 키를 제외하고 currentapiKeys를 다시 설정

관련 코드

const deleteKey = async (param) => {
  if (window.confirm('정말로 삭제하시겠습니까?')) {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/DeleteKey`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(param),
    });

    if (response.ok) {
      setCurrentApiKeys(currentapiKeys.filter(pre => pre.provider_name !== param.provider_name));
    }
  }
};

주요 조건 및 제한사항

provider_name은 고유 식별자로 사용되며, 이를 기준으로 수정 및 삭제 기능이 동작함

현재는 한 provider당 하나의 키만 등록 가능하며, 이미 등록된 프로바이더는 드롭다운에서 비활성화됨

삭제 시 confirm() 확인창을 통해 사용자 실수를 방지

UI 구성

버전표기

이제부터 로그인 화면 하단과 관리자 화면에 프로젝트의 버전을 기록합니다.

UI 구성