FE

v0을 이용해 대략적인 디자인을 했다.

기능

1. 4개의 DBMS, OS에 대한 성능을 대시보드형태로 표시한다.
2. 은행 시스템이기에 계좌를 조회를 할 수 있어야한다.
3. RDG, MDBS 초기화 등 서버의 기능을 제어할 수 있어야한다.
4. 각 DBMS에 SQL을 날릴 수 있어야한다.

Prototype 디자인

v0을 이용해서 기존의 템플릿 하나를 약간 수정했다.

AI를 이용해서 디자인을 하면 아래와같이 주소를 준다.

npx shadcn@latest add "https://v0.app/chat/b/b_ffJ66fhfNeT?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..bmUFeFbswjcio-FR.ouByMuPKn5dczbWgeas6eKRvSYHAqcVvjYjYtQS9gFIIWFZGy-VsZkQGuM4.6Hj2Em7qrfXRMIyyZu1crg"

명령어 치고나면 아래처럼 실행할 수 있다.

v0에서 디자인 수정이 잘 안되는 부분이 있어서 이후부턴 직접 수정을 진행했다. 물론 현재는 실제 DB랑 연결, 데이터 조회를 할 수는 없어서 이후 개발의 방향성을 볼 수있게끔 최대한 실제 운영 디자인에 맞춰 수정을 진행했다.

크게 달라진 점은 없지만 노란색계열에서 파란색 계열로 수정을 하였다. 그리고 파일의 구조를 조금 바꿨다.

기존의 경우 dashboard.tsx에 모든 section이 다 모여있었다. 그래서 이것을 분리를 하여 파일로 만들어 /sections 폴더 안에 따로 component화 하였다.

디자인 수정

이런식으로 조금 수정할 부분을 싹다 정리해두었다.