SalesSupporter 계획하기

kimyz·2023년 10월 31일

계획없이는 안되게따 !

세일즈서포터를 처음 만들자 생각했을 때 막연하게 그냥 화면 하나 만드는 것처럼 시작을 했었다.
그랬더니 결국 내 마음대로 잘 안 되고,, 리액트는 재사용이 가능한 컴포넌트에 초점을 두는 라이브러리인데 재사용을 하지도 못하는 상황에 이르렀다..!

그래서 손도 자꾸 안 가고 어디서부터 고쳐야 할 지 막막했다.
물론 여기서 잘 고쳐가는 것도 중요하지만 일단,, 나는 타입스크립트에 아직 너무 약한 것 같다.
간단한 정도는 사용할 줄 알지만 조금이라도 복잡해지거나 다른 부분에서 가져와서 사용할 때 나는 에러에 대해서 면역이 아예 없는 수준이었다.

그래서 타입스크립트를 제외하고 다시 시작해 보려고 한다.
자바스크립트에서 타입스크립트를 적용하는 것도 하나의 경험이 될 거라고 생각한다.

그리고 이번에는 큰 그림은 그려놓고 시작하기로 했다.

이전에 했던 next.js는 내가 뭘 어떻게 진행하고 있는지도 모르고 그저 따라하기에 바빴는데 하나씩 이해하면서 진행해 보려고 한다.
그래도 그 사이에 관련된 책도 몇 권 읽었기 때문에 집중하고자 하는 부분이 달라져있지 않을까,, 라는 막연한 생각으루 ,, ^^ㅜ^,,

페이지 설정

원래 세일즈포스에는 여러 오브젝트가 진짜 엄청 복잡하게 얽혀있다.
나는 그 중 리드, 고객, 기회로만 먼저 시작해 보기로 했다.

그래서 페이지 폴더에는 총 3개의 폴더를 만들 것이다.

pages
⊢ Lead
⊢ Account
⊢ Opportunity

공통 컴포넌트

All_OO : 전체 조회 컴포넌트 (모든 OO)
매개 변수: 객체 이름
기능: 조회 조건, 새로 만들기, 삭제
객체별로 달라지는 부분: 노출 필드, OO에 대한 이름
ModalNew_EditOO : 데이터 생성 모달 컴포넌트
매개 변수: 객체 이름, 문서 id (있으면 edit, 없으면 new)
기능: 데이터 저장, 모달창 닫기
객체별로 달라지는 부분: 필드, 이름, 저장위치
Detail_OO : 상세 페이지 컴포넌트
매개 변수: 객체 이름, 문서 id
기능: 수정, 삭제
객체별로 달라지는 부분: 필드, 리드에는 전환 버튼 추가됨

UI 컴포넌트

ButtonGroup
Modal
SideBar (profile, navigation bar)

next page router

나는 App Router 대신 Page Router를 사용해서 앱을 만들어 볼 것이다.
먼저 페이지 라우터를 써보고 앱 라우터를 사용해 보는 것도 나쁘지 않을 것 같아서기도 하고,,
앱 라우터는 아직은 오류도 많다고 하고 자료가 많이 없다고 하는데 그러면 내가 그 오류를 혼자 잡기에 시간이 많이 걸릴 것 같기도 해서이다.

공통 컴포넌트와 화면 설정하기

/** /_app.js */
import Layout from '@/components/Layout'
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

Component 에는 각 주소에 맞는 페이지가 보여지게 된다.
나는 모든 페이지에 공통적으로 SideBar 컴포넌트를 보여주어
오브젝트 화면에 대한 이동 및 프로필을 보여줄 예정이어서
Layout 컴포넌트로 감싸주었다.

/** /components/Layout.js */
import SideBar from './Sidebar'

export default function Layout({ children }) {
  return (
    <>
      <SideBar />
      <main>{children}</main>
    </>
  )
}

/** /components/Sidebar.js */
export default function SideBar() {
  return (
    <>
      <div>Side Bar</div>
    </>
  )
}

그러면 page 폴더 아래에 각 오브젝트의 폴더를 만들고 index.js 파일을 통해서 화면을 만들어주면 주소를 바꿔서 쳤을 때 Sidebar와 각 오브젝트의 화면이 나오는 것을 확인할 수 있다.

/** /pages/lead/index.js */

export default function LeadPage() {
  return <div>Lead Page</div>
}

Next.js Link 사용하기

내비게이션 바에 링크를 넣어서 해당 버튼을 클릭하면 그 페이지로 이동할 수 있도록 했다.
ul의 li 요소로 정렬을 했고

<li name='home' className='link-btn' onClick={handleClick}>
  <img src='/icons/home.svg' alt='home button' />
  <Link href={'/'}>Home</Link>
</li>

해당 링크 컴포넌트에서만 클릭해서 이동을 할 수 있었기 때문에 li 요소 나머지 부분에 클릭 이벤트에 함수를 넣어서 이동이 가능하도록 했다.

글씨 부분만 클릭이 되도록 하는 건 영 불편했다,,

function handleClick(event) {
  const btnName = event.target.innerText
  switch (btnName) {
    case 'Home':
      router.push('/')
      break
    case 'Account':
      router.push('/account')
      break
    case 'Lead':
      router.push('/lead')
      break
    case 'Opportunity':
      router.push('/opportunity')
      break
    default:
      break
  }
}