해당 프로젝트에서는 mermaid로 flow chart를 작성하기로 하였다. 그 이유는 meramaid의 간단하고 직관적인 문법을 바탕으로 쉽게 작성할 수 있고 그림으로서 시각적인 효과를 가지고 있어서 프로젝트가 어떤 흐름으로 구성되는지 한눈에 파악할 수 있기 때문이다.
또한, 내가 mermaid로 flow chart를 작성하계된 가장 큰 계기는 바로 유지보수의 용이성과 확장가능성 때문이다. Power Point 등을 활용하여 flow chart를 직접 작성 했을때는 로직이 변경되거나 확장될때 기존의 flow chart를 대거 수정해야하는 경우가 빈번히 발생하였다 반면, mermaid를 활용했을 때는 문법에 맞게 작성한다면 그에 맞는 flow chart를 그림 형태로 직접만들어 주기 때문에 flow chart를 수정하거나 새로운 로직을 추가할 경우에도 해당 부분만 간단히 수정하면 flow chart가 완성 되었기 때문이다.
다음은 이번 프로젝트에서 사용할 flow chart이다.
graph TD
A[시작] --> B[홈 화면]
B --> C[카페 목록]
B -- 로그인/회원가입 탭 --> D[로그인 또는 회원가입 모달]
C --> E[카페 작성]
C --> F[카페 상세페이지]
C --> G[로그아웃]
F --> H[카페 수정]
F --> I[카페 삭제]
D --> J[로그인]
D --> K[회원가입]
J --> L{로그인 성공 여부}
K --> M{회원가입 성공 여부}
L -- 성공 --> C
L -- 실패 --> J
M -- 성공 --> J
M -- 실패 --> K
G --> B
위 flow chart는 카페 목록을 보여주는 홈 화면에서 로그인/회원가입 탭을 누르면 나타나는 로그인 또는 회원가입 모달을 통해 로그인 또는 회원가입을 할 수 있도록 구성되어 있다.
로그인 성공 여부와 회원가입 성공 여부에 따라 로그인 또는 회원가입 모달을 띄우며, 로그인에 성공하면 카페 목록 화면으로 이동하게 되고, 로그인에 실패하면 다시 로그인 모달이 띄워진다. 회원가입에 성공하면 로그인 모달이 띄워지며, 회원가입에 실패하면 다시 회원가입 모달이 띄워진다.
홈화면에서는 카페를 작성할 수 있으며, 각 카페에 대한 상세 페이지를 볼 수 있습니다. 또한 로그아웃 버튼을 통해 로그아웃을 할 수 있다. 카페 상세 페이지에서는 해당 카페를 수정하거나 삭제할 수 있고 로그아웃 후 다시 홈 화면으로 돌아간다.
