[개발일기] 공공기관 API 사업자와 디자인 개선을 위한 준비

[개발일기] 공공기관 API 사업자와 디자인 개선을 위한 준비

prologue. 여기까지 온것이 기적이었던 것 같아요.

그동안 개발을 뒤돌아보며 드는 생각은

아주 기본적인 기획 토이 프로젝트라 하기엔

사이드 프로젝트에 가깝고

프로젝트보다는 프로덕트에 가깝다.

 

그로인한 장점과 단점은 공존해왔고,

첫 시도인 만큼

돌아보면 아쉬운 기획이었지만

열정으로 커버했고

열정이 큰 만큼 우리는 용감했다.

 

이제는 사이드 프로젝트라 하기엔 약간 크고

프로덕트라고 하기엔 약간 작고 소중한 이 친구를

서비스 하기 위해 필요한 부분을 채워줘야 할것 같다.

 

각자의 자리에서 SNS로그인과 결제 시스템을 보완해주고 계시고

나는 UI/UX에 집중해보려고 한다.

 

📌이제와서 기획을 덧붙여 다시 초기 모습으로 회귀 하기보다는

디자인 요소를 덧붙여서 서비스 하기에 좋을 프로덕트로 탈바꿈 하고 싶다.

 

 

 

1. 공공기관 API 사업자 국세청_사업자 등록정보 진위 확인 및 상태 조회 서비스

https://camperlee.tistory.com/161

[개발일기] 팀프로젝트는 page2에 접어들었다.(폰트, env 설정과 vercel 연동, 공공기관 API, 카카오 지

저번주 회고에서는 공공기관 API <사업자 국세청_사업자 등록정보 진위 확인 및 상태 조회 서비스>에서

프론트엔드에서 주어진 API 설계(Swagger)를 바탕으로 상태조회 서비스로만 임시구성을 했었는데

 

이유는 보안에 연관된 부분은 백엔드에서 구성해서

보안을 강화하여 클라이언트에서 다시 구현해주는게 옳다는 피드백을 받고

 

기존의 임시 구현에서 백엔드의 로직으로 구현을 최적화 하기 위해

백엔드의 로직으로 다시 테스트 하였다.

 

이번에 추가 기능 API를 붙여보니 확실하게 깨닫는것은

테스트 페이지에서 기본적인 구현이 되는지를 파악한 이후

내가 적용할 페이지에 구현하는것이 어디가 문제인지 파악이 가능하고

그만큼 기존의 로직에 영향을 미치지 않고 안전하게 적용이 가능한것같다.

 

import React, { useState } from 'react';

import { validateBusinessNumber } from '../../api/estimate';

import { BusinessValidationRequest } from '../../types/business';

const BusinessStatusCheck: React.FC = () => {

  const [businessNumber, setBusinessNumber] = useState<string>('');

  const [startDt, setStartDt] = useState<string>('');

  const [pNm, setPNm] = useState<string>('');

  const [bNm, setBNm] = useState<string>('');

  const [bType, setBType] = useState<string>('');

  const [bSector, setBSector] = useState<string>('');

  const [error, setError] = useState<string | null>(null);

  const [validationMessage, setValidationMessage] = useState<string | null>(

    null,

  );

  const checkBusinessStatus = async () => {

    const requestData: BusinessValidationRequest = {

      service_key: import.meta.env.VITE_PUBLIC_API_KEY,

      businesses: [

        {

          b_no: businessNumber,

          start_dt: startDt,

          p_nm: pNm,

          b_nm: bNm,

          b_type: bType,

          b_sector: bSector,

        },

      ],

    };

    try {

      const response = await validateBusinessNumber(requestData);

      const businessInfo = response.data[0];

      // 사업자 상태 확인

      if (businessInfo.valid === 'N') {

        setValidationMessage(businessInfo.valid_msg); // 유효하지 않은 경우 메시지 설정

      } else {

        setValidationMessage('유효한 사업자등록번호입니다.');

      }

      setError(null);

    } catch (err: any) {

      setError(

        err.response?.data?.message ||

          '사업자 등록번호 확인 중 오류가 발생했습니다.',

      );

      setValidationMessage(null);

    }

    console.log(requestData);

  };

  return (

    <div>

      <h1>사업자 상태 조회</h1>

      <input

        type="text"

        placeholder="사업자등록번호"

        value={businessNumber}

        onChange={(e) => setBusinessNumber(e.target.value)}

      />

      <br />

      <input

        type="text"

        placeholder="사업 시작일 (YYYYMMDD)"

        value={startDt}

        onChange={(e) => setStartDt(e.target.value)}

      />

      <br />

      <input

        type="text"

        placeholder="대표자명"

        value={pNm}

        onChange={(e) => setPNm(e.target.value)}

      />

      <br />

      <input

        type="text"

        placeholder="상호명"

        value={bNm}

        onChange={(e) => setBNm(e.target.value)}

      />

      <br />

      <input

        type="text"

        placeholder="업태"

        value={bSector}

        onChange={(e) => setBSector(e.target.value)}

      />

      <br />

      <input

        type="text"

        placeholder="업종"

        value={bType}

        onChange={(e) => setBType(e.target.value)}

      />

      <br />

      <button onClick={checkBusinessStatus} className="btn">

        조회

      </button>

      {validationMessage && <p>{validationMessage}</p>}

      {error && <p style={{ color: 'red' }}>{error}</p>}

    </div>

  );

};

export default BusinessStatusCheck;

 

위 처럼 테스트 페이지에서 유효성 검사 까지 잘 구현되는지 확인을 했고

이후 백엔드에서 해당 API와 기존 파트너 회원가입과 파트너 회원정보의 연관관계를

명확하게 설정 한 뒤에 회원가입로직에서의 안정화가 완료 되면

 

이후에 위와 비슷한 로직을 통해 회원가입에서도

유효성 검사가 동반된 회원가입이 가능할 수 있게 끔 구현하려고 한다.

 

 

2. 디자인 요소를 통해 UI/UX를 극대화 할 수 있을까?

 

이번주는 테스트가 끝난 이후로 사이드 프로젝트에 대한

디자인을 개선하기 위해서 피그마를 공부 하고 있다.

 

우리 프로젝트에서 약간의 아쉬움이라면

기획을 하였으나, 그리고 기본적인 디자인 요소를 구현을 하였으나....

디자인 시스템을 구현하지 못해서 그때 그때 주먹구구식의

UI 디자인이 이루어 지고 있는점이다.

 

이 부분에 대해서 처음엔 나도 인지하지 못했지만

 

현재 피그마를 공부하며 우리 프로젝트에 큰 아쉬움으로 남는것이

바로 디자인 시스템이 없었구나.. 하는 점이다.

 

어떤 폰트로 진행할 것인지

어떤 컬러로 진행 할것인지

위 두가지는 본능이 시켜서 했다고 하는것이 맞을 것 같고..

 

지금 어떤 기준으로 UI/UX 디자인을 했는가?

또 그것이 어떤 기준에 의해서 디자인 되고 있는가?

 

위 두가지에 대해서도... 다른의미에서

본능이 시켜서 했다고 하는것이...

 

나쁜 감상은 아니라고 생각된다.

 

 

그래서 피그마를 공부하며

디자인시스템을 이제라도 구현해서

디자인 요소 적으로도

서비스의 UI/UX 퀄리티 면에서도

 

일관된 모습을 구현한다면

우리 프로젝트가 차후 유지보수에서도

그리고 유저들에게도 친절한 인상을 남길 수 있지 않을까? 생각한다.