요약

명함을 편집할 수 있는 모달 구현

상세

• 로그인 한 상태에서 /my에 접속하면 본인의 명함 밑에 편집하기 버튼이 표시될 것
• 편집하기 버튼을 클릭하면 편집 모달이 나타날 것
• 편집 모달 내용
  • 유저 정보
  • 연락처 정보
  • 링크 정보
  • 태그 정보

상기 4가지 카테고리로 나뉘어져서 표시될 것

• 연락처 정보, 링크 정보, 태그 정보는 표시 여부를 체크할 수 있을 것
• 태그 정보의 경우, 표시여부에 더해 타인의 조회 가능 여부를 체크할 수 있을 것

Users

• id (pk) : UUID
• public_id :URL의 주소가 되는 이 앱의 고유 아이디, 유저가 설정 가능, 영문숫자
• handle_name
• biography
• profile_icon

Authentication

• id(pk)
• user_id (fk)
• provider (enum) : "google", "twitter", "kakao", "line"
• provider_id : OAuth 토큰 등

Links

• id (pk)
• user_id(fk)
• link
• description
• isVisible(boolean)
• link_icon

Contacts

• id(pk)
• user_id(fk)
• domain (enum): "twitter","mastodon","bluesky"
• domain_id

이하 태그 기능 검토 중

Tags

• id(pk)
• tag_name

UserTags

• (user_id, tag_id) (pk)
• user_id (fk)
• tag_id (fk)

요약

화면 상단에 상시 표시되는 헤더 구현

상세

• /화면을 제외한 모든 화면에서 상시 표시될 것
• 로그인 여부와 관련없으나, 게스트 유저의 경우 기본 이미지가 표시될 것
• 로그인 중일 때, handle_name이 이미지 옆에 표시될 것
• 로그인 중일 때, 이미지나 handle_name을 클릭하면 드롭다운 메뉴가 표시될 것
  • 드롭다운 메뉴 : 마이페이지, 로그아웃
  • NextUI 활용 : Dropdown
• 드롭다운 메뉴에서 로그아웃 버튼을 누르면 로그아웃 처리 후 /로 리다이렉트 될 것

요약

로그인 상태에 따라 홈 화면에서 라우팅이 되도록 함

사양

• 게스트 유저

  • /으로 접속 시 로그인 메뉴 표시
  • /${id}로 접속 시 화면 표시 가능
    • 북마크 추가 버튼 누르면 모달 창 (닫기 / 로그인하기) 팝업

• 로그인 유저

  • /으로 접속 시 /my로 리다이렉트

Duckcard

• X가 터졌을 때를 대비한 온라인 명함
• 자기소개보다는 비상연락망에 가까운 느낌
• 팔로우 기능 0
• 화려하게 꾸밀 수 있기보다는 심플하게 링크와 성향표만 걸어둘 수 있는 정도로

명함

표시되는 항목

• 닉네임
• 자기소개문
• 프로필 사진
• 관심사 태그 (6개까지 설정 가능)
• 링크 리스트(대표 링크 설정은 두 개까지)
  • 대표 링크 : 아이콘*자동획득, 설명, 링크 이름
  • 그 외 링크 : favicon*자동획득, 링크 이름

상단 바

• 로그인 시 : 유저 프로필 사진
• 로그아웃 시 : 기본 프로필 사진
• 햄버거 메뉴 : 내 명함 보기 / 로그아웃(로그인)

마이페이지

/my

• auth : required
• 명함 편집기능
• 북마크한 명함 보기 기능

유저페이지

/${id}

• auth : none

• 유저의 명함 조회 기능

• 명함 북마크 기능(auth:required)

• 검토사항 : 유저 아이디로 할 것인가? 랜덤 숫자로 할 것인가?

  • 유저 아이디로 설정할 경우, 유저가 본인의 아이디(url)을 수정할 수 있게 할 것인가?
  • 본인의 아이디를 설정 가능할 경우, 최초 닉네임은 어디서 입력하게 할 것인가? 자동으로 획득해올 것인가?

-> 유저 아이디로 설정. 최초 아이디는 UUID로 자동 설정. 추후 편집 가능.

로그인 페이지

/login

• 지원 SNS
  • X, 인스타, 카카오, 구글
  • 로그아웃 후 이 페이지로 리다이렉트

요약

로그인 기능 구현

상세

• 파이어베이스로 구현
• 작업 시작 전 DB 등의 관리 방법 확인
• 로그인 상태 관리 방법 확인