gif를 흑백으로 따긴 했는데, UI는 진짜로 흑백이다. 그냥 그게 깔끔해 보여서 일단 그렇게 했다.

GitHub Repository: https://github.com/SihyeonHong/easiest-cv

이번 주에 한 일: React로 기초 UI 작업.

UI를 어느 정도 미리 해두면 기능 명세에도 도움이 되고, 무엇보다 내 흥미 유발에 도움이 된다. 당장 눈에 보이니까.
문서화부터 시작하다간 흥미를 잃기 쉽다...

페이지 구조 소개

컴포넌트 구조는 다음과 같다.

• App.js
  • InitPage
    • NonAdminHome
      - HomeComponent
      - TabComponent
    • AdminHome
      - HomeAdminComponent
      - TabAdminComponent

InitPage

아직 도메인을 구입하지 않았다. 아마도 easiest-cv 비슷한 이름이었으면 한다.
어쨌든 계획은 네이버 블로그나 티스토리처럼 /도메인이름/유저아이디 이런 식으로 주소가 구성되는 것이다.
그래서 사실 원래 내 유저 시나리오에는 /도메인이름, 즉 InitPage가 없다.
저번 글에서 썼듯이 나나 남의 이력서 페이지에서 로그인/회원가입 버튼을 눌러서 관리자 페이지로 진입하는 방식이기 때문이다.

그래서 InitPage에는 그냥 Non-admin 페이지와 Admin 페이지의 링크만 걸어놨다.
그리고 non-admin 페이지의 UI는 /userid, admin 페이지의 UI는 /admin 에다가 우선 만들어뒀다.

NonAdminHome

• localhost:3000/userid
• props: userid

구성 요소는 다음과 같다.

• 로그인 / 회원가입 버튼과 모달창
• props로 받아온 userid를 대문자로 h1에 입력
• Nav
  • Home 클릭시 HomeComponent
  • PDF 클릭시 관리자가 올려놓은 PDF 이력서 다운받을 수 있게 할 예정. 아직 구현 X.
  • 나머지 탭 클릭시 TabComponent: tabname을 props로 전송.

HomeComponent

• 프로필 사진
• 자기소개

TabComponent

• props: tabname.
• 우선 전달받은 탭 이름만 제목에 뜨게 해놨다.

AdminHome

• localhost:3000/admin
• 실제로는 /도메인이름/유저아이디/admin으로 할 예정. 일단 UI만 여기다가 만들어 놨다.
• props: userid

구성 요소는 최대한 비로그인 시 UI와 비슷하게 하려고 노력했다.

• 로그인/회원가입 버튼 위치에 저장하고 로그아웃/회원정보수정. 아직 모달창 내용 수정은 안 했다.
• props로 받아온 userid를 대문자로 h1에 입력하는 건 똑같다.
• Nav
  • Home 클릭시 HomeAdminComponent
  • 나머지 탭 클릭시 TabAdminComponent: tabname을 props로 전송.
  • PDF 클릭시 파일 업로드
  • 탭 관리 : 미구현. 탭 이름 변경, 순서 변경, 추가 및 삭제 기능을 구현할 예정.

HomeAdminComponent

• 프로필 사진 업로드
• 자기소개 입력 textarea

TabAdminComponent

• props로 전달받은 탭 이름이 제목에 뜨는 건 놔뒀는데, 이것도 테스트용이고 곧 삭제할 예정.
• 내용을 테이블 형태로 채우게 만들 생각이다.
  • 우선 유형은 title과 description 2가지로만 분류했다. 이미지 등을 추가할 수 있으면 좋겠지만 일단은 계획엔 없다.
  • textarea에 내용을 채울 수 있다.
  • +버튼을 누르면 해당 row 바로 아래에 새 row가 생성되고, -버튼을 누르면 해당 row가 삭제된다.
  • 테이블 내용은 아래와 같은 형식이다. key는 각 item의 고유 식별자이고, index는 row 순서를 말한다. 내용이 뒤죽박죽되면 안 되니까 정렬 순서가 중요하고, 이건 식별자와는 별도로 존재해야겠더라.

const [tables, setTables] = useState([
  {
    key: Math.random(),
    index: 1,
    options: "title",
    contents: "lorem ipsum dolor sit amet",
  },
]);

이번주 총평

아쉬운 점

• textarea를 입력한 만큼 fit-content 처럼 자동으로 크기가 늘어나게 하고 싶었는데, 어떻게 하는지 영 모르겠다. 일단 resize: vertical 설정해서 사용자가 수동으로 textarea 크기를 늘릴 수 있게 하고, placeholder에 해당 내용을 안내해 놓았다.
• 원래 탭 클릭하면 /userid/tab1 이런 식으로 가게 할 계획이었는데 어쩌다 보니 그렇게 상세페이지로 가지 않고 탭 기능을 구현했다. 굳이 상세페이지 라우팅을 해야 하나 싶어서 일단 주석처리만 해뒀다.

추후 구현 예정

• 탭 리스트는 Redux 사용해서 store에 따로 빼 놔야 할 것 같다. 왜냐면 탭 관리를 AdminHome에서 탭 관리 버튼 눌렀을 때 모달창을 띄우거나 Nav 밑에 새 컴포넌트를 보여줘서 입력을 받아야 할 것 같거든. 그러면 자식 컴포넌트에서 변경된 사항을 부모 컴포넌트가 받아야 하니까 props로는 안 될 듯하다.
• 로그인/회원가입을 모달창 말고 그냥 새 페이지 만들어서 이동시킬까 한다.
• 저장하고 로그아웃/회원정보수정 모달창 내부 수정.

다음주 계획

UI는 이쯤 해두고, 다음주에는 백엔드 공부 예정이다.
이번주에 스프링 공부하다가 잠깐 디자인 패턴이 궁금해져서 삼천포로 빠졌는데 : https://velog.io/@hongsi17/MVC-MVP-MVVM
다음주에는 스프링에서 MySQL 데이터베이스 어떻게 연결하는지 배울 예정.
DB 구조도 설계하고.