ABCDEFGHIJKLMNOPQRSTUVWXYZAAABAC
1
api 는 항상 권한 체크 및, 설명에 적혀있는 middleware 를 구현해야 한다.
2
컴포넌트를 구현하기 전 다시한번 상세한 논의를 한 후 구현을 해야 한다.
3
식별자식별자
4
번호컴포넌트 이름페이지 이름번호설명api 여부권한테스트항목질문
5
1로고메인 비회원1클릭 이벤트가 발생했을 때 path 가 /index 로 변화된다.
6
2테마 네비게이션메인 비회원2테마 항목을 DB 로 관리한다. 테마 항목을 get 할 수 있는 api테마 클릭 이벤트가 발생 했을때 location query 예시: ?theme="바다"
7
테마 클릭 이벤트가 발생했을 때 테마에 해당하는 포토 목록이 정상적으로 업데이트 되어야 한다.
8
3포토 배열메인 비회원3검색 결과인 포토 데이터 들에 대한 DB 정보를 보내준다.스크롤을 내렸을 때 포토의 lazy load 가 발생한다.
9
포토에 대한 정보는 화면에 보이기 위한 정보로 최소화 해서
보내준다.		스크롤을 무한으로 내릴 수 있다. Infinity scroll
10
포토의 크기에 따라 포토가 배치된다.
11
12
4언어 선택메인 비회원4선택된 언어에 맞는 검색 api지원 언어에 따라 페이지가 잘 번역이 되었는지 확인해야 한다.
페이지의 모든 내용을 다국어로 제공하는 것에는 한계가 있다. 보통 브라우저의 번역기를 사용한다.
혹은 언어를 선택했을 때 페이지 텍스트나 검색어를 자동으로 번역해 주는 api 가 있는지 찾아봐야 한다.
유사 예시) 알리 익스프레스
13
지원언어를 클릭하는 이벤트가 발생했을때, 현재 언어와 선택된 언어가 다르면 페이지가 새로 고침이 된다.
14
지원 언어를 나타내는 국기가 보인다.
15
16
17
5단일 포토-hover메인 비회원5포토 hover 이벤트가 발생했을 때 나타나는 컴포넌트의 목록: 6, 11, 12, 13 번
18
6좋아요메인 비회원6단일 포토의 좋아요 수 를 업데이트 하는 api회원인지 아닌지 먼저 검사한다.
19
비회원하트 아이콘을 클릭했을 때 : (비회원) 로그인 & 회원가입 modal 컴포넌트(번호 n 번) 창이 나타난다.
20
회원(회원) 회원이 포토에 대해 좋아요를 누른 상태일 때, 하트가 fill 이 된다.
21
회원(회원) 회원이 포토에 대해 좋아요를 누르지 않은 상태일 때, 하트가 empty 된다.
22
회원(회원) 하트 아이콘을 클릭했을 때 : 회원이 포토에 대해 좋아요를 누르지 않은 상태일 때, 하트가 fill 된다.
23
회원(회원) 하트 아이콘을 클릭했을 때 : 회원이 포토에 대해 좋아요를 누르지 않은 상태일 때, 좋아요가 count 가 늘어난다.
24
회원(회원) 하트 아이콘을 클릭했을 때 : 회원이 포토에 대해 좋아요를 누른 상태일 때, 좋아요가 count 가 줄어든다..
25
회원(회원) 하트 아이콘을 클릭했을 때 : 회원이 포토에 대해 좋아요를 누른 상태일 때, 하트가 empty 된다.
26
하트 아이콘 아래에 좋아요를 누른 회원의 수가 표시된다.
27
28
7검색어 입력메인 비회원7한국어 이외로 검색할 때 추가 처리를 해줘야 한다.검색어를 입력할때 검색 결과가 로드 되기 전, First Meaningful Paint(FMP) 을 한다.
29
검색어와 일치하는 포토 데이터를 get포토 데이터의 lazy loading
30
검색 결과가 없을 때, 포토 대신 '검색어' 의 포토가 없습니다. 라는 문구를 띄어준다.
31
한국어 이외로 검색할 때 추가 처리를 해줘야 한다.
32
33
8로그인 버튼메인 비회원8(비회원) 로그인 페이지로 이동한다. /sign-in
34
비회원 상태일 때만 로그인 페이지로 이동할 수 있어야 한다.
35
9회원가입 버튼메인 비회원9(비회원) 회원가입 페이지로 이동한다. /sign-up
36
비회원 상태일 때만 회원가입 페이지로 이동할 수 있어야 한다.
37
10포토 버튼메인 비회원10포토 아이콘을 눌렀을 때, 포토 페이지로 이동한다. /photo
38
39
11photo 추가 메인 비회원11(회원)포토를 추가하기 전에 내 포토의 수를 검증하는 기능포토 추가 클릭 이벤트가 발생했을 때, 최대 포토를 초과하지 않았다면, 내 포토에 포토가 추가된다.
40
(회원) 포토를 추가하는 기능포토 추가 클릭 이벤트가 발생했을 때, 최대 포토를 초과하였다면, '추가할 수 있는 포토의 개수를 초과하였습니다'
(비회원) 일 때 '회원가입을 하시면 최대 N 건을 이용하실 수 있습니다.' 라는 문구가 추가된다.
41
비회원은 localStorage 에 photo 를 저장한다. (프론트에서만 작동&검증 한다.)
42
43
12다운로드 버튼메인 비회원12해당 포토가 회원의 컴퓨터에 다운로드 된다.
44
45
13사진 위치 조회메인 비회원13포토 상세 페이지로 이동한다. /image/{image_id}
46
47
14내 계정 이동 링크메인 회원1/my-profile 페이지로 이동
48
15내 정보 아이콘메인 회원2로그아웃 api내 정보 아이콘을 누르면, 내 정보 메뉴가 생긴다.
49
내 정보 메뉴에는 - 내 아이디가 보이고 , 내 계정 링크, 로그아웃 메뉴를 클릭할 수 있다.
50
51
16로고로그인1로고를 클릭하면 메인 으로 이동한다. /index
52
17소셜 로그인로그인로그인 api 를 수행한다.소셜 로그인 기능을 구현한다.
53
로그인이 성공하면 /index 페이지로 이동한다.
54
18회원가입으로 이동로그인2Join 링크를 누르면 회원가입 페이지로 이동한다. /sign-up
55
19소셜 회원가입회원가입2소셜 로그인으로 인한 토큰, 회원정보를 DB 에 저장한다. 소셜 회원가입 기능을 구현한다.
56
소셜 회원가입이 성공하면 자동으로 로그인 api 를 호출한다.
57
20로그인으로 이동회원가입3로그인 페이지로 이동한다. /sign-in
58
21회원가입&로그인 Modal회원가입&로그인 Modal회원 권한이 필요한 버튼을 클릭을 하였을 때 나타나는 창이다.
59
위 아래 닫기 버튼이 존재한다.
60
컴포넌트 17, 19번을 포함한다.
61
성공적으로 로그인을 하면 현재 페이지를 유지한채, 로그인이 성공된 상태로 변한다.
62
63
22이전 포토로 이동사진 상세 11검색된 포토 목록 중 현재 포토를 기준으로 이전 포토의 상세 페이지로 이동한다.
64
현재 포토가 가장 첫 포토라면 '<' 는 display:none
65
23다음 포토로 이동사진 상세 13검색된 포토 목록 중, 현재 포토를 기준으로 다음 포토의 상세 페이지로 이동한다.
66
현재 포토가 마지막 포토라면 '>' display: none
67
24사진 상세 1 페이지 로드사진 상세 1사진 상세페이지로 이동됐을때, 단일 포토 페이지에 대한 필요한 정보를 가져오기 위한 api
68
69
25원본 포토 보기사진 상세 12포토를 클릭 이벤트가 발생하면, new tab 으로 원본 포토로 볼 수 있다.
70
클릭 전 hover 이벤트가 발생했을 때, popper '새 탭으로 원본 포토 보기' 텍스트가 나타난다.
71
26포토 제목사진 상세 14포토의 제목
72
27포토 설명사진 상세 15포토 설명
73
28포토 위치 지도사진 상세 17슬라이드(사진 상세 2 map) 로 다운 스크롤 효과로 이동한다.
74
29뒤로가기사진 상세 110포토 목록으로 이동한다.
75
76
이전에 검색한 목록과 스크롤 위치를 유지해야 한다.
77
30지도로 이동사진 상세 111슬라이드(사진 상세2 map) 로 다운 스크롤 효과로 이동한다.
78
마우스 스크롤로 이동 가능해야 한다.
79
31포토 정보 사이드바사진 상세 112페이지가 스크롤로 이동이 되어도(사진 -> 지도 등으로 이동하여도) display 에 fix 된다.
80
32포토 위치 지도사진 상세 2 map1포토 위치를 지도에서 조회할 수 있다.지도 api 를 정해야 한다.
81
82
33포토로 이동사진 상세 2 map2포토가 위치한 좌표로 스크롤 이동한다.
83
마우스 스크롤 이벤트로 이동 가능하다.
84
34연관 포토로 이동사진 상세 2 map3관련 포토 목록이 있는 위치로 스크롤 된다. 슬라이드(사진 상세 3 연관 포토)
85
마우스 스크롤 이벤트로도 이동 가능하다.
86
35연관 포토 사진 상세 3 연관 포토1관련 포토 N 개가 화면에 표시된다.
87
관련 포토를 클릭했을 경우, 그 포토의 상세 페이지로 이동한다.
88
36지도로 이동사진 상세 3 연관 포토2지도가 있는 곳으로 스크롤 이동. 슬라이드(사진 상세 2 map)
89
마우스 스크롤 이벤트로도 가능하다.
90
37포토로 이동사진 상세 3 연관 포토3포토가 있는 곳으로 스크롤 이동. 슬라이드(사진 상세 1)
91
38검색 결과사진 검색1검색어가 표시된다.
92
39내 프로필 포토내 계정 - 프로필 수정1내 프로필의 기본 포토는 구글혹은 페이스북 포토이다.포토 포맷 기준을 정해야 한다.
93
내 프로필 포토를 변경할 수 있다.사이즈, 포맷, 크기 등
94
프로필 포토를 없앨 수 있다.
95
프로필 포토를 선택할 때 포토 포맷 기준을 만족해야 한다.
96
97
40내 닉네임내 계정 - 프로필 수정2내 프로필의 기본 닉네임은 구글 혹은 페이스북의 닉네임이다.
98
내 닉네임을 변경할 수 있다.
99
내 닉네임은 길이 제한이 있다.길이 제한
100
닉네임 길이 제한이 만족하지 않을 경우, UI 로 알려주어야 한다.