화면 설계 v1

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F6Tu7H514UE9JcZyPffyKjw%2F20231222_CHUKAPOKA%3Ftype%3Ddesign%26node-id%3D0%3A1%26mode%3Ddesign%26t%3DL9A3GSNUm7LEN1zO-1

202310_CHUKAPOKA | ProtoPie Cloud

프로젝트 프로토타입

정은우-개인작업

프로젝트 포트폴리오(디자인정리)

6개메인화면 및 로그인/회원가입 페이지(www.chukapoka.com/)

Untitled

아이디는 이메일 형식
화면 흐름
- 이메일 입력 폼
  - 등록된 이메일이면 로그인
    - 비밀번호 입력 폼
      - 로그인 완료
  - 등록되지 않은 이메일이면 회원가입
    - 이메일 인증요청 폼
      - 인증번호 입력 폼
        
        비밀번호 입력 폼(인증 완료 및 비밀번호 입력 완료시 자동 회원가입)
        
        로그인 완료
로그인 후, 화면 결정
- 평범하게 메인 사이트로 접근했는가 ? 트리 공유 링크로부터 접근 했는가 ? 등에 따라 로그인 후 화면이 결정됨
  - 메인 사이트로 접근시(www.chukapoka.com/)
    - 트리 리스트 페이지
  - 트리 공유 링크로 접근시(www.chukapoka.com/tree/{treelinkid}/link)
    - ❓내부 status 가진채 메인페이지로 리다이렉션 (고민중)
      - 로그인된 상태라면, 트리 확인 화면으로 이동
    - 트리 공유 페이지
      - 이후 해당 트리의 아이템 작성 화면으로 이동 및 아이템 작성 가능
  - 트리 부여? 링크로 접근시(www.chukapoka.com/tree/{treeassignid}/link)
    - ❓내부 status 가진채 메인페이지로 리다이렉션 (고민중)
      - 로그인된 상태라면, 트리 확인 화면으로 이동
    - 트리 확인 페이지
      - 이후 해당 트리의 아이템의 내용 확인 가능

트리 리스트 및 마이 페이지(www.chukapoka.com/tree)
- ~~내트리 리스트~~
  - ~~내트리란?~~
    - ~~내트리 종류(본인 소유인가? 미부여?미전달인가는 테두리 색으로 구분해도 좋을 듯)~~
      - ~~해당 계정으로 트리 작성을 통해 작성한 본인 소유 트리~~
      - ~~다른 사람의 트리 부여 링크를 통해 부여받은 본인 소유 트리~~
      - ~~해당 계정으로 트리 작성을 통해 작성한 아직 다른사람에게 미부여한 트리~~
- 트리의 종류
  - 내트리 리스트
    - 해당 계정으로 트리 작성을 통해 작성한 본인 소유 트리
    - 다른 사람의 트리 부여 링크 접근 통해 부여받은 본인 소유 트리
  - 미전달 트리 리스트
    - 해당 계정으로 트리 작성을 통해 다른 사람에게 전달하기 위해 작성한 트리
    - 아직 미부여 혹은 전달했으나 아직 수령하지 않은 트리
  - 작성한 트리 아이템 리스트
    - 해당 계정으로 트리 아이템 작성을 통해 작성한 트리 아이템
      - 클릭시 해당 트리 아이템 확인/상세 페이지로 이동 (곧바로 아이템의 트리로는 이동 불가)
  - ❓트리 및 아이템 삭제는 어떻게 진행?
    - 아이템은 해당 아이템 작성자가 트리 아이템 상세 페이지에서 진행 링크
    - 일단, 트리 주인이 아이템 삭제 불가로 진행
    - 트리 삭제도 오른쪽 위에 삭제 버튼으로 진행
트리 작성 페이지(www.chukapoka.com/tree/create)
- 전체적인 디자인은 트리 공유/확인 페이지에서 버튼, 인풋 폼이 추가된 형식
- 일단 초기 버전
  - 트리 제목
  - 트리 색
  - 트리 아이템 색
  을 설정할 수 있도록 하자.
  - 개발 완료된 이후, 버전업/업데이트 과정에서 배경 이미지 변경(계절별로 총 4개 정도?) 및 커스텀 이미지 업로드 및 적용(배경과 트리 아이템) 추가하고 싶음
- ui 설정 완료 후 “트리 작성/편지 작성하기” 버튼을 누른 후 추가 선택 다이얼로그 표시
  - 아이템 전체 공개 / 아이템 주인만 보기 선택 (기본값 주인만 보기)
  - 본인 소유인지 / 추후 다른 사람에게 전달할 건지 선택 (기본값 본인 소유)
    - 변경불가로 하고 변경이 필요하면, 삭제 후 다시 만드는 걸로
    - 추후에 변경이 불가하다는 안내문을 추가하는 식으로…
      - !일단, 변경불가로 하고 추후에 변경 가능한 방향으로!
  - 저장 완료되면, 해당 트리 공유/확인 페이지
트리 페이지(www.chukapoka.com/tree/{treeid})
- https://www.figma.com/file/6Tu7H514UE9JcZyPffyKjw/20231222_CHUKAPOKA?type=design&node-id=15-604&mode=design&t=xidaxBsHZvl2jW4P-4
- 하단 버튼 (아이콘, 텍스트 두가지 버전 준비)
  - 해당 트리가 내트리일 경우
    - 초대하기(트리 공유 링크 복사)
    - 본인이 본인 트리의 아이템을 쓸 수 있나? 쓸 수 없다
  - 해당 트리가 미전달 트리일 경우
    - 작성하기
    - 초대하기(트리 공유 링크 복사)
    - 트리 주인에게 보내기(트리 부여 링크 복사)
  - 트리 공유 링크로 접근한 경우
    - 작성하기
    - 초대하기(트리 공유 링크 복사)
  - 확인 필요한 사항
    - 링크복사 성공시 링크 복사 성공 알림 표시
    - 혹은 아래와 같은 기능 샘플링 필요(시간 생기면 하는걸로)
- 트리 아이템
트리 아이템 작성 페이지(www.chukapoka.com/tree/{treeid}/item/create)
트리 아이템 상세 페이지(www.chukapoka.com/tree/{treeid}/item/{treeitemid})

추가 컴포넌트

https://cloud.protopie.io/p/b8a07c1371116f27565ed7aa

202310_CHUKAPOKA | ProtoPie Cloud