Skip to content

API 키 관리 기능 추가 및 코드 리팩토링#3

Open
H-Genie wants to merge 41 commits into
devfrom
feature/key-api
Open

API 키 관리 기능 추가 및 코드 리팩토링#3
H-Genie wants to merge 41 commits into
devfrom
feature/key-api

Conversation

@H-Genie
Copy link
Copy Markdown
Collaborator

@H-Genie H-Genie commented Feb 20, 2025

Pull Request

관련 문서

변경 사항

  • feat

API 키 생성 기능
API 키 갱신 기능
ProtectedRoute로 인증 여부 체크
사이드바에 로그아웃 버튼

  • refacotr

API 라우터 상수화
아이콘 컴포넌트 모듈화

테스트 방법

.env 값 변경 : https://backoffice.pay-200.com
/key-management

병합 전 체크리스트

const { auth } = useAuthStore();

const handleCopy = () => {
const apiKey = document.getElementById('api-key')!.textContent!;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

어짜피 apiKey를 상태값으로 저장하고 있는 것 아닌가요? 로그인 가능한 계정이 무엇인지 몰라서 테스트는 못해봤지만, 아마 apiKey 상태값의 초기값으로 props가 들어가있고 handleRenew에서 set하고 있어서 apiKey 상태값으로 복사가 가능해보이는데요!

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

만약 그게 아니라면 useRef로 가져올 수도 있을 것 같아요!

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React스럽게요!

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

직접적으로 태그의 스타일을 변경하는 경우라면 useRef를 사용했겠지만 단순히 값만 읽어오는 것이기에 불필요한 동작이라고 생각합니다

</figure>

<nav>
<nav className='flex flex-col h-[calc(100%-100px)]'>
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아마 여기도 aside 요소에 flex flex-col 주고 nav 요소에 flex-1 걸어버리면 원하시는 것과 동일한 형태가 나오지 않을까 합니다!

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

지난번에 알려주신대로 수정했는데 제가 의도한것과 다르게 동작합니다
알려주신대로 하면 그냥 비율을 유지한채로 폭이 줄어들때 비례해서 줄어드는거고
제가 의도한건 들어들더라도 의도한 최소값은 유지하는거였습니다
이왕 수정한거는 그냥 두겠습니다

Comment thread src/components/template/SideBar/index.tsx
Comment thread src/store/authStore.ts
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

zustand에서 이미 session storage를 persist로 지원하지 않나요?

https://zustand.docs.pmnd.rs/integrations/persisting-store-data

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

용법이 다릅니다
zustand는 모든 라우터에서 인증여부를 체크하기 위함이고
sessionStorage는 새로고침 하더라도 인증이 유지되기 위함입니다

Comment thread src/pages/SignupPage.tsx Outdated
Comment thread src/pages/LoginPage.tsx Outdated
Comment thread src/pages/KeyManagementPage.tsx Outdated
Comment thread src/hooks/api/useAuth.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants