[Spring, React] 👑 VIP 초대장 만들기 💌 어떻게 만들지 구상해보기.

 

 

연말을 맞이하여
VIP 등급 이상 고객분들께
초대장을 보내려고 한다!
어떻게 만들지 구상해 보자.

 

 

 

 

1. 구상화면

 

- 고객

• 고객님이 접속할 화면
  고객은 해당 페이지에서 미리 받은 비밀번호 4자리를 입력한다. 그러면 고객의 등급에 맞는 페이지로 이동한다. 등급은 총 3개로 되어있다. VIP, VVIP, DIAMOND

 

 

• 코드 성공 화면
  고객이 제대로 된 코드를 입력할 경우, 고객의 이름이 표시되면서 페이지로 이동한다.

 

 

• 코드 실패 화면
  코드에 실패하게 되면 코드를 다시 확인해 달라는 문구가 하단에 배치된다.

 

 

 

- 관리자

• 로그인 화면
  id에 따라 관리자의 권한이 달라진다. 

 

 

• VIP 명단 관리 
  예시 명단의 개수는 30명으로 잡았으며 VIP 10명, VVIP 10명,  DIAMOND 10명이 된다. 

 

 

• 명단 추가
  add 버튼을 누르면 각 정보를 기입할 수 있다. 명단 추가의 경우 update 권한을 가진 관리자만 접근 가능하도록 한다.

 

 

• 명단 검색
  search 버튼을 누른 뒤 고객 명단에 적힌 정보들에 대해 검색할 수 있다. 

 

 

• 명단 삭제
  명단 삭제를 어떻게 할지 정확히 정하지 못했다. 일단 생각한 걸 적어보면 del 버튼을 누르고 고객 코드를 입력하라고 나온다. (코드를 생각한 이유는 중복이 없을 예정이라) 그리고 코드에 맞는 사용자 정보를 찾아낸다. 그다음 생각한 것은 관리자가 고객의 정보를 누르면 행이 선택되고 del을 누르면 정보가 삭제되도록 한다. 프로젝트를 진행하다가 아예 다른 방법을 생각할지도 모르겠다. 일단 보류-*
  
  고객의 정보를 삭제하기 전, 다시 한번 확인하는 알림창이 간다. 알림창엔 고객의 이름 or 코드가 들어가도록 할 예정이다. 명단 삭제의 경우 update 권한을 가진 관리자만 접근 가능하도록 한다.

 

 

• 관리자 명단
  관리자를 관리하는 페이지를 만들 것이다. 관리자를 관리하는 사람은 최고관리자(?)만 가능하도록 한다. 이 부분은 아직도 생각 중이다. 권한 부여는 아래 페이지 말고 체크 박스로 하는 게 더 깔끔한 화면을 제공할 것 같아 수정할 예정이다. 권한은 VIEWER, EDITOR가 있고 등급도 VIP, VVIP, DIAMOND를 체크박스로 할 예정이다.(중복하여 관리할 수 있도록)
  이런 페이지를 만드는 건 처음이라 어떤 방향이 더 효율적 일지 아직 의문이다. 더 공부하고 자료를 찾아보면서 차차 수정해 나갈 것이다.

 

 

• 관리자 명단 추가
  add 버튼을 누르면 관리자 명단을 추가할 수 있도록 한다. grade와 authority는 중복 체크가 가능하도록 만들 것이다.

 

 

• 관리자 명단 수정
  관리자 명단 수정을 누르면 설정된 정보가 그대로 뜨도록 하고, 거기서 수정한다.

 

 

• 관리자 명단 삭제
  고객 명단 삭제와 같이 이름과 함께 한 번 더 확인할 수 있는 창을 띄울 것이다.

 

 

 

---

 

 

 

 

2. 여러 가지 생각해 본 것들

• 최고관리자(SUPER_ADMIN)의 권한을 어떻게 할지?
  시간이 되면 최고관리자가 최소 1명은 있도록 제한을 걸고, 더 낮은 역할은 더 높은 역할을 편집할 수 없도록 막는다. 최고관리자는 최고관리자를 관리할 수 있다. 그러나 일반 등급 관리자가 최고 관리자의 정보를 수정할 순 없도록!
  시간 없으면 최고관리자 정보는 내부 로직에서 관리하도록 한다. 아이디와 비밀번호를 변경하려면,,, 개발자한테 연락해야 하는 최악의 시스템..ㅎ.ㅎ 최대한 노력을 해볼 예정이다.
  
  
• Keyclock으로 로그인/로그아웃 만들어보기.
  저번에 Vue와 Spring으로 회원가입, 로그인, 로그아웃, 카카오 로그인 기능을 만들었다. 사실 로그인, 로그아웃 기능은 흉내내기에 불가했지만 이번엔 좀 더 제대로 된 기능을 만들어 보려 한다. 실무에선 주로 무엇을 많이 사용할까 찾던 와중에 keyclock이란 프로그램을 알게 되었다. keyclock은 소셜로그인도 통합 지원하고 있고, 토큰 관리, 세션만료, 로그아웃도 keyclock이 알아서 관리한다. 거기다 이번 프로젝트에선 관리자에게 권한을 각각 다르게 부여할 예정이다. 이런 역할을 부여를 할 때 Keycloak Admin Console에서 역할을 지정할 수 있다니 이번 기회에 사용해 볼 예정이다.(심지어 무료다! 가장 큰 이점이다!!) 초기에 공부가 좀 필요한 듯한 게 마음이 살짝 아프지만 부디 어렵지 않았으면 좋겠다... 제발...🥺 
  
  
• Elasticsearch로 검색 기능을 강화해 보자.
  Elasticsearch는 구인란을 보고 알았다.(많은 회사에서 해당 프로그램을 사용해 본 사람을 원하는 듯하다) 지금까지 DB 기능이 요구되는 프로젝트를 해본 적이 없어서, 나중에 관련 프로젝트를 해보면 꼭 써보고 싶다고 생각했다. 오타나 유사한 단어를 알아서 검색해 주니 얼마나 편리한가! 물론 만드는 사람 입장은 아닐지도 모르겠지만, 매력적인 기능이기에 되든 안되든 한 번은 시도해보고 싶었다.
  
  
  
• Redis로 VIP 고객이 코드를 입력한 시간 기록하기.
  고객이 해당 코드를 입력했는지 알아야 관리자가 고객을 더 정밀하게 관리할 수 있을 것 같아 이런 기능을 생각해 봤다. 사실 Redis를 쓰는 게 효율적일지, 이렇게 쓰는게 맞는지는 아직 잘 모르겠다. 더 공부해 보고 그다지 효율적인 게 아니라고 판단되면 이 부분은 구현하지 않을 가능성이 높다.(어려워서 못하는 걸지도) 애초에 Redis는 대용량 처리 목적에 사용하기도 하고(위에 사용하겠단 프로그램도 대용량 처리에 더 맞긴 하다) 고객 시간을 저장하는 방식에 대해 더 생각해봐야 할 듯하다.
  
  
  
• GPT를 사용해서라도 구현도를 높이는 게 맞을까?
  이 부분은 아직도 정답을 모르겠다. 내 주위 실무자분들의 이야기를 들으면 대기업의 경우를 제외하곤 열심히 사용하신다고 했다. 하하! 사실 저번에 카카오톡 로그인 기능을 구현하면서 초반 10퍼센트를 제외하곤 나머지는 GPT를 사용했다. 그게 공부가 안 됐냐고 하면 그건 아니었다. 나름대로 정말 철저히 공부하려고 노력했고, 또 이런 방식도 있음에 놀랐으며, 코드 이해도가 더 높아졌다. 그런데 공부하는 입장이다 보니 너무 떠먹여 주는 느낌이기도 하고 남발하듯 사용하면 스스로 생각하는 힘이 줄어들 것 같아 참 고민이 된다. 특히 프론트와 백엔드를 동시에 하려다 보니 재밌기도 하지만, 시간이 너무 많이 든다. 일단 프론트 부분은 최대한 해보고 안 되는 것 한해서 조금씩 물어보려 한다. 그리고 무작정 만들어달라고 요구하기보다, 최대한 코드를 작성해 보고 더 좋은 방향이 있는지, 어디가 문제인지를 위주로 물어볼까 한다. 
  
  
  

 

---

 

 

 

 

3. 상황

• 어느 브랜드에서 VIP, VVIP, DIAMOND 고객들을 위주로 연말 행사를 열려고 한다. 고객에게 초대 코드를 각각 다르게 보낸 후, 고객이 코드를 화면에 입력하면 해당 등급에 맞는 페이지가 나타난다. 이때 등급에 따라 다른 제품을 보이도록 하며 페이지의 분위기도 각 등급에 맞춰 꾸미려고 한다고 가정한다.(이 페이지까진 굳이 만들지 않을 예정이며 구색만 맞출 것이다. 등급에 맞는 페이지로 옮겨진다는 게 목적이니까) 그래서 이 브랜드는 각 명단을 관리할 페이지와 VIP 고객들이 코드를 입력할 페이지를 요청했다.
• 사실 DB에 관련된 프로젝트를 해본 적이 없어서 이번에는 관련된 프로젝트를 만들고 싶었다. 책 읽는 걸 좋아하니 도서에 관련된 걸 해볼까 하다가, 연말도 다가오니 그에 맞는 프로젝트를 해보고 싶어졌다. 리액트를 처음 접하고 이것저것 하다가 비밀번호가 걸려있는 웹페이지를 만들어보는 것도 재밌겠단 생각을 하게 됐다. 그러다 이런 프로젝트를 자연스레 떠올리게 됐다. 이 프로젝트가 의미가 있는지 모르겠다. 하지만 공부하는 중이고 회사 들어가면 하기 싫은 것도 해야 할 테니 그전에 내가 재밌다고 느끼는 것들을 하기로 결정했다!
  
  
• 여기까지 일단 만들었고, 이건 다음에 작성하겠습니다.~_~