로그인페이지

<aside> ❗ 해당 화면은 로그인 이 후 접근할 수 없도록 해야한다. → 로그인 후 접근 시 ‘로그인되어 있습니다.’ alert 표시 후 메인페이지로 리다이렉트 시킨다.

**** AceessToken의 유효시간은 20분, RefreshToken의 유효시간은 1시간으로 설정한다.**

</aside>

1. 이미지 영역

• 페이지 새로고침 시, 매번 다른 이미지로 변경됨.

2. 로고 영역

• 프로젝트 이미지가 삽입
• 해당 이미지 클릭 시, 메인 페이지로 이동

3. 로그인 버튼 영역

• 해당 버튼 클릭 시, 카카오 로그인 진행
• 로그인 성공 시, 메인페이지로 리다이렉트 시킨다.

공통

메인페이지

<aside> ❗ 해당 화면은 로그인 여부와 상관없이 접근할 수 있다. → 비로그인 접근 시 3번 버튼과 4번 영역을 Hide 처리하여 사용자에게 보여주지 않는다. → 로그인 후 접근 시 3번 버튼과 4번 영역을 Show 처리하여 사용자에게 보여준다.

</aside>

1. 배너 영역

• Swiper로 동작
  • 무한 스크롤
  • 자동 전환 ( 3초 )
• 총 5개 배너 등록
  • 5개 중 2개 → 프로젝트 및 마케팅 관련
  • 5개 중 3개 → 타 프로젝트 광고

2. 검색 영역

• 검색 영역 클릭 시, 서칭페이지로 리다이렉트 한다.

3. 모임 생성 버튼

로그인 시

• 해당 버튼을 Show 처리
• 버튼 클릭 시, 모임 생성 모달 창을 보여준다.
  • 단, 내 모임은 1개만 생성가능하므로, 1개 이상 생성 시, 모달 창으로 접근하지 못하도록 한다.

비로그인 시

• 해당 버튼을 Hide 처리하며, 접근 할 수 없도록 한다.

4. 내 모임 & 가입된 모임 영역

<aside> ➡️ 카드 내 표시할 정보

• 모임 이미지
• 모임 제목
• 현재 인원 / 총 인원 ( ex. (3/20, 10/10 …)
• 스터디 발제 수
• 모임 소개
• 지역
• 카테고리
• 마지막 스터디 진행일자 ( ex. 1일 전, 7일 전 …) </aside>

로그인 시

• 해당 영역을 Show 처리
• 영역 내 카드를 클릭 시 해당 모임페이지로 리다이렉트 한다.

비로그인 시

• 해당 영역을 Hide 처리하며, 접근 할 수 없도록 한다.

5. 테마 별 모임 리스트 영역

<aside> ➡️ 영역 내 표시할 테마

• 신규 모임

• 스터디 예정 모임

• 추천 모임 </aside>

• 카드 내 표시할 정보는 4번 영역의 카드와 동일

서칭페이지

<aside> ❗ 해당 화면은 로그인 여부와 상관없이 접근할 수 있다. → 조회 시 데이터가 존재하지 않는다면, 조회 리스트 영역 내 ‘조회된 결과가 없습니다.’ 를 보여준다.

</aside>

1. 지역 Selector 영역

• 지역 선택 Selector ( ex. 서울, 경기, 인천, 전북, 경남, 세종, 제주 등..)

2. 검색어 입력 영역

• 검색어 입력 Input

3. 카테고리 선택 영역

• 모임 카테고리 선택 영역
• 다중 선택 가능

4. 조회 리스트 영역

<aside> ➡️ 카드 내 표시할 정보

• 모임 이름

• 모임 소개

• 현재 인원 / 총 인원

• 지역

• 카테고리

• 모임으로 가기 버튼 </aside>

• 지역, 검색어, 카테고리에 해당하는 조회 결과가 해당 영역에 표시

마이페이지

<aside> ❗ 해당 화면은 로그인 시 접근할 수 있다. → 비로그인 접근 시 비정상 접근으로 메인페이지로 리다이렉트 필요

</aside>

1. 사용자 프로필 영역

<aside> ➡️ 사용자 프로필 영역 내 표시할 정보

• 인사말
• 사용자 프로필이미지
• 사용자 상태메시지 </aside>

2. 조회 정보선택 영역

<aside> ➡️ 조회 정보선택 영역 내 표시할 정보

• [내 모임] 버튼
• [내 스터디] 버튼
• [로그아웃] 버튼 </aside>

3. 내가 만든 모임 영역

<aside> ➡️ 내가 만든 모임 내 표시할 정보

</aside>

4. 내가 가입한 모임 영역

<aside> ➡️ 내가 가입한 모임 영역 내 표시할 정보

</aside>

5. 내가 발제한 스터디 영역

<aside> ➡️ 내가 발제한 스터디 영역 내 표시할 정보

• 스터디 명
• 스터디 금액
• 스터디 일시
• 스터디 위치
• 스터디 참여인원 / 총인원
• 참여자 프로필 이미지
• 참여 / 나가기 버튼
• 점 3개 버튼 </aside>

6. 내가 참여한 스터디 영역

<aside> ➡️ 내가 참여한 스터디 영역 내 표시할 정보

• 스터디 명
• 스터디 금액
• 스터디 일시
• 스터디 위치
• 스터디 참여인원 / 총인원
• 참여자 프로필 이미지
• 참여 / 나가기 버튼
• 점 3개 버튼 </aside>

모임페이지