우리가 보여줘야 하는 기능들 적기
로그인/회원가입
- 카카오 로그인
- 회원가입시 닉네임 받기
홈
- (필름이 하나도 없는 경우) → 모달이 뜨고 필름이 없다
엿보기 페이지
필름 열람 페이지
- 최초로 연 사람일 경우 처음 열었다는 안내와 함께 페이지에 진입하게 된다.
필름 맡기기
- 긍정적인 상황
- (핀의 위치를 클릭 , 드래그하며) 필름을 맡길 위치는 클릭 혹은 드래그 앤 드랍으로 핀의 위치를 조정하여 선택합니다.
- (다음 버튼 클릭하며) 다음 스탭으로 진행시마다 LocalStorage에 현재까지 입력한 내용이 저장됩니다.
- 필름 내용은 필름 제목, 엿보기 문구 그리고 사진이나 내용 중 한가지가 필수로 입력 받고있습니다.
- (새로고침을 누르며) 만약 유저가 새로고침을 누른다면 작성하던 내용이 있음을 모달로 알려줍니다.
- DateInput
- (달력 아이콘을 클릭하며) 필름을 찾는 날짜는 한국 표준시(KST) 기준으로 다음날부터 찾을 수 있도록 입력되는 값을 제한 했습니다.
- 유저 검색
- (검색하며)유저 검색은 유저의 검색어를 입력하면 해당 검색어에 연관된 유저의 리스트가 출력됩니다.
- (검색 결과 창 스크롤 하며) 검색 결과는 무한 스크롤 방식으로 되어있으며, 마지막으로 검색되었던 유저의 닉네임을 request에 추가하여 중복된 결과가 불려오지 않도록 하였습니다.
- (검색 결과를 클릭하며) 검색 결과에서 유저를 선택하면 함께 할 사람들 목록에 해당 유저가 추가되고
- (같은 검색어로 다시 검색하며) 이미 목록에 추가된 유저라면 해당 유저 옆에 목록에 있다는 표시를 띄워줍니다.
- (목록에 있는 유저를 클릭하며) 유저가 해당 유저를 클릭 하여도 이미 추가된 유저입니다 라는 Toast 메세지와 함께 목록에 추가되지 않도록 하였습니다.
- (목록에 있는 유저를 삭제하며) 잘못 추가된 유저가 있다면 목록에서 삭제도 가능하도록 하였습니다.
- 서비스의 컨셉에 따라 필름의 내용은 수정할 수 없도록 하였기에
- (필름 맡기기를 누르며) 필름 맡기기를 누르면 한번 맡긴 필름은 수정할수 없다는 모달을 띄워 유저에게 한번더 승인 요청의 합니다.
- (아니요 잠시만요! 누르며) 아니요 잠시만요!를 누르면 내용 작성을 수정할 수 있도록 하고
- (네 좋아요를 누르며) 네! 좋아요를 누르면 필름 작성을 완료하고, 해당 필름의 엿보기 페이지로 이동되며 필름 작성이 완료 되었다는 Toast 메시지를 출력합니다.
필름 위치 지정 페이지
필름 내용 작성 페이지
(필수 중에 한두가지 입력하지 않고 다음 버튼 클릭하며) 만약 필수인 값이 없다면 해당 내용이 비어있다는 모달을 띄웁니다.
새로고침
필름 찾을 날짜 지정 페이지
(dateInput에 직접 숫자를 입력하며) 만약 유저가 input에 잘못된 값을 입력한다면 블러되었을 때 내일 날짜로 자동으로 수정 됩니다.
필름 맡기기 확인 모달
마이페이지
- 위치 정보가 있지 않으면 경고창 띄우기
- 필름 보기 (필름 보기의 경우 위치에 상관없이 확인할 수 있다.)
- 필름 찾기(해당위치에서 1키로 내에 있으면 필름을 찾을 수 있다.)
- 필름 삭제 (내가 만들었지만 아직 열 수 없는 필름은 삭제할 수 있다.)
- 다른 사람이 만든 필름의 경우 아직 열 수 없다면 필름 나오는 중 이라는 멘트를 확인할 수 있다.
시나리오 만들기
1. 가입, 온보딩 프로세스
⇒ 정호가 처음 이 서비스를 알고 사용중임
⇒ 동진이에게 알려줌 (한번써봐~ 카톡링크 공유 같은거 ㅎㅎ, 우리 단톡같은거 파서 연기해도 괜찮을듯^^)
⇒ 동진 새로 가입함
- 여기서 최초 로그인 유저 플로우 보여주기
- 닉네임 validation(처음에 a 이런거 하나만 입력하거나 중복된거 입력하기)
⇒ 회원가입 완료~
- 홈으로 진입하는 로띠 뜸
- 토큰 없애서 로그인으로 넘어가고 토스트 뜨는거 보여주기
2. 필름 생성, 권한 부여 프로세스
⇒ 홈으로 가면 아직 포스트가 없어서 포스트 만들어 가자는 모달 뜸
⇒ 모달에서 [좋아요] 클릭해서 필름 맡기러감
- 내용은 영업이익 17조 달성해서 1년 뒤 해외 포상 휴가가자는 내용 (3일 뒤에 열릴 수 있게 만들기, 사진은 우리의 첫만남 사진^^)
- 아앗 갑자기 인터넷이 끊겨서 중간에 이탈하게됨 ㅜㅜ(아니면 새로고침하고 어 뭐지 인터넷이 잘 안터지나? 아 작성중인거 날라갔겠네...ㅜㅜ ) → 하지만 다시 들어가니까 작성중인 포스트 불러올 수 있음^^ (로컬스토리지 활용하는 플로우도 보여주기)
- 공유하기에서 우리 조 팀원들 추가하기
3. 마이페이지 프로세스
⇒ 필름을 만들고 동진이의 마이페이지 들어가서 잘 있는지 한번 확인
⇒ 공유받은 필름도 들어가보는데 정호가 보낸 필름이 있음(손절하지 말자 내용 담은 필름)
⇒ 어디서 보냈지? 궁금해서 필름 위치마커 클릭해서 해당 위치로 가는거 보여줌
[몇 일후..?*] 그 몇 시간 뒤 짤같은거 쓰면 좋을듯
4. 필름 열람 프로세스
⇒ 동진이가 몇 일 후 다시 진입 (이 포스트를 열려고 해당 위치로 왔음!)
⇒ 오늘 열 수 있는 필름이 있다는 모달이 뜨고 동진이가 최초 개봉함(로띠 팡)
- 이때 여는 필름은 정호가 공유한 필름!
- 손절하지 말자 내용 담은 필름
- 열람 페이지에서 지도 클릭해서 해당 위치로 감
⇒ (해당 위치로 가면) 동진이의 홈은 필름이 많이 쌓여있는 모습
(정호 오빠가 보낸 포스트를 중심으로 하트로 필름이 있음)
- 마커 클릭하면서 엿보기 여러개 보여주고, 내용 상태 다른 것도 보여주면 좋을듯
- 여기에서 삭제하는거 한번 보여주면 좋을듯
- 지도 곳곳을 둘러보다가 해외에 있는 열린 필름의 [필름 찾기] 버튼 클릭 → 1km 이내에서 열라는 토스트 뜸 → 내년에 코로나가 끝나면 꼭 직접 열어야지 하는 생각함 (가벼운 추억 회상 타임, 여기서 해외여행 한번 다녀오자~~*&)
[ppt 마지막 장표]
마지막 화면에는 1년뒤, 저 해외에 있는 필름이 열리고, (약간 카페베네 느낌으로 예전 사진 흑백처리 ㅎㅎ) 네카라그랩당토를 간 영업이익 17조의 사진^^ (오늘 찍은 해외 포상휴가 사진 쓰기ㅎㅎ)
PS. 네카라'그랩' 당토 가요~
[프론트 개발 이야기]
프론트엔드 개발 이야기에 대해 발표를 진행하겠습니다.
개발 환경으로 cra를 활용했으며 타입스크립트를 사용했습니다.
또한 context api로 상태관리를, 저희 서비스의 핵심 기능인 지도를 위해 react-map -gl을 사용했습니다.
배포환경으로 s3와 cloudfront를 사용했으며 github actions를 활용했습니다.
저희가 프로젝트를 하면서 중요하게 생각했던 부분들입니다.
개발하면서 생긴 고민들과 진행하면서 만났던 문제들에 대해 같이 이야기를 하며 인사이트를 공유했습니다.
또한 지속적 배포와 테스트에 관한 부분을 중요하게 생각했습니다.
앞으로 이 세가지를 저희 팀이 어떻게 풀어나갔는지 보여드리겠습니다.
처음으로 시멘틱한 마크업과 코드리뷰에 대한 부분을 보여드리겠습니다.
왼쪽 사진은 navigation컴포넌트로써, 컴포넌트를 만들 때 내부에서 시맨틱하게 만들기 위해 노력했으며 사용하는곳에서는 이러한 구조를 몰라도 편리하게 사용할 수 있도록 했습니다.
오른쪽과 아래의 사진을 보면 적극적인 코드리뷰를 통해 팀원들이 각자 맡은 부분뿐만 아니라 온전히 팀의 서비스를 이해할 수 있도록 하였고, 더 나은 코드를 만들기 위해 노력했습니다.
다음으로 저희는 github wiki를 적극적으로 활용해서 인사이트 및 에러 해결법을 공유했습니다.
첫번째 사진에서처럼 개발을 하며 발생했던 문제들에 대해 같이 고민했으며 기록하려 노력했습니다.
다음 사진들처럼 markdown파일로 기록하여 추후에도 같이 확인할 수 있도록 하였습니다.
이제 네트워크 통신에 대한 타입을 어떻게 지정해주었는지 보여드리겠습니다.
저희는 이렇게 네트워크통신을 정의하는 부분에서 리스폰스에 대한 타입을 제네릭으로 정의해주었습니다.
이에 따라 api를 사용하는 모든 곳에서 타입추론이 더 쉬워졌으며 중복코드들이 많이 사라졌다고 생각합니다.
마지막으로 배포와 빌드 환경에 대해 말씀드리겠습니다.
원활한 서비스 사용을 위하여 사용자의 위치 정보를 받아오는 것이 필요 하였지만, 모바일 환경에서는 http로 배포 되어있으면 위치 정보의 사용이 불가하였고, 이에따라 https로 배포하기 위하여 s3 → CloudFront를 이용한 배포과정이 추가적으로 필요 했습니다. 이러한 일련의 과정의 번거로움을 줄이기 위해 자동화된 프로세스를 구축하기위해 github actions를 사용했습니다.
따라서 12월 3일부터 지속적인 배포를 통해 테스트를 하고자 노력했고, 두개의 endpoint를 두어 서비스단과 테스트단의 분리를 위해 노력했습니다.
다음으로 필름 시연을 하겠습니다.
어...? 카톡이 왔네 뭐지...?
오오 요즘은 이러한것들도 서비스로 나오는구나... 궁금한걸??
(회원가입하기)
어? 하지말라한게 있네? 하지말라하면 더 하고 싶은데...
(일부러 틀림)
오오오 여기 서비스 잘 만들어놨네??
(중복 닉네임)
뭐야 이걸 누가 이미 쓰고 있는 닉네임이라고?? 이런...
(회원가입성공)
잠시만 이 서비스는 어떻게 로그인했는걸 알지?
(애플리케이션 탭을 보면서)
아하 토큰이 있구나! 그러면 토큰이 없으면 어떻게 되는걸까?
(새로고침)
아앗... 다시 로그인페이지로 넘어가는구나! 이 서비스 엣지케이스 구현 잘해놨는걸??
홈화면에서
이제와서보니 이런 문구도 있네??
필름 하나 만들어볼까?
(만들다가 와이파이끈다. 에러 뜨고 새로고침 → 다시 와이파이 켜고 홈으로 간 후 필름 만들기 ⇒ 이어 만들기)
오! 이런기능도 있네~!! 만들다가 날라간줄알고 너무 화났었는데 이서비스 대박인걸?
마이페이지
우와 마이페이지에 바로 들어오네??
공유받은 필름? 이게 뭐지??
어머 여기 마커는 뭐지?? 너무 눌러보고 싶게 생겼는걸??
우와 누르면 이렇게 이동하는구나~!! 너무 멋지다
홈 화면
어? 오늘 열 수 있는 필름이 있다는 알림이 있네? 한번 눌러볼까?
어머? 이런 효과까지... 감동이야..
그럼 다른 필름도 확인해볼까??
(엿보기 보여주면서) 와... 얼른 시간이 되어서 열어보고 싶다 ㅠㅠㅠ
아! 이건 내가 잘못만든건데 지워야겠다(지우기)
(해외에 있는것 보여준다)
어? 여기 한번 열어봐야지? 1km이내에서만 열리는구나! 실제로 해당 위치에 가야지만 열 수 있구나!
다음에 강원도 여행가서 열어봐야지~~