3월 협업 프로젝트(1석 4조) 👨‍👩‍👧‍👦

와이어프레임 & 프론트엔드 디렉토리 구조

엄성준 2023. 4. 2. 01:10

현재 Back-end 개발자 분들과의 소통오류가 발생했는데 그 문제의 원인을 알게 된 것 같습니다.

 

첫째 와이어 프레임을 팀단위로 회의를 통해서 제작한 것이 아닌 Front-end개발자들끼리 제작하다 보니 소통오류가 발생한 것 같습니다.

두번째로 와이어프레임으로 작성한 페이지들이 완벽한 것이 아니다 보니 Back-end개발자분들이 다소 혼란스러우셨던 것 같습니다. 그래서 프런트엔드 협업하시는 분과 내일 당장 와이프레임을 꼼꼼하게 다시 설계하기로 하였습니다.

 

현재 와이어 프레임

 또한 와이어프레임을 통해서 페이지를 설계하기 전에 먼저 어떤 페이지를 만들어야 할지 디렉터리 구조를 설계하였습니다. 

 

Components (컴포넌트 폴더)

  - Common (공통 컴포넌트 폴더)
    - Header(헤더)
    - PostList(글 리스트 컴포넌트)

  Popups (팝업 폴더)
    - Login(로그인 팝업 컴포넌트)
    - Join(회원가입 팝업 컴포넌트)

  Pages (페이지 폴더)
     - MainPage(메인 페이지)
     - PostDetailPage(글 상세 페이지) 내용을 좌측 지도를 우측
     - PostWritePage(글 작성 페이지)
     - ProfileEditPage(회원 정보 수정 페이지)
     - MyPage(마이 페이지) - 유저 자신과 방문객 조건으로 차이
     - PostEditPage(글 수정 페이지)

 

내일 와이어프레임을 꼼꼼히 수정 후 Back-end개발자 분들에게도 자세히 설명해드려야 할 것 같습니다!