feat&design/mainPage_treeInfos

[minjuice1]

⭐ 주요 기능

1. 메인페이지의 컴포넌트 구성
2. 트리간단정보 속 모든 기능 구현

⚙ 세부 기능

1. design : 대략적인 메인페이지 테두리 구성 후 진행

2. feat : 트리간단정보 클릭 => 상세페이지로 이동

3. feat : 트리간단정보 저장하기 클릭 => 저장 or 저장취소 (비로그인은 로그인페이지 이동)

4. feat : 트리간단정보 주소복사 클릭 => 주소가 복사 됨.

5. feat : 트리간단정보 주소 화살표아이콘 클릭 후 닫을 때
   => 1) 화살표 아이콘을 다시 눌러서 닫거나 2) 바깥 컴포넌트를 눌러서 닫기

6. feat : 트리간단정보 공유 클릭 => 공유 모달 생성
   모달 안에 1) 카카오톡 공유 2) URL 복사 3) 취소 버튼들

7. feat: 트리간단정보 공유모달 카카오 공유하기 클릭 => 카카오 API 호출

8. feat: 트리간단정보 공유모달 URL 공유하기 클릭 => react-copy-to-clipboard 패키지 사용

9. feat: 트리간단정보 공유모달 취소 공유하기 클릭 => 모달 사라짐.

📋 진행 사항

• 전체적인 테두리와 트리간단정보 위치 수정

• 트리간단정보 클릭 => 상세페이지로 이동

• 트리간단정보 저장하기 클릭 => 로그인 : 저장 or 저장취소

• 트리간단정보 저장하기 클릭 => 비로그인 : 로그인페이지 이동

• 트리간단정보 주소복사 클릭 => 주소 복사 완료(주소 동기화)

• 트리간단정보 주소복사 클릭 => Toast Alert

• 트리간단정보 주소 화살표아이콘 클릭 => Modal popUp

• 트리간단정보 주소 화살표아이콘 클릭 후 닫을 때 => 1) 화살표 아이콘을 다시 눌러서 닫기

• 트리간단정보 주소 화살표아이콘 클릭 후 닫을 때 => 2) 바깥 컴포넌트를 눌러서 닫기

• 트리간단정보 공유 클릭 => 공유 모달 UI 작업 및 생성

• 트리간단정보 공유모달 클릭 => 카카오 공유

• 트리간단정보 공유모달 클릭 => URL 공유(path 추가)

• 트리간단정보 공유모달 속 카카오 공유하기, URL 공유하기 클릭 => Toast Alert

• 트리간단정보 공유모달 클릭 후 닫을 때 => => 1) 취소 눌러서 닫기

• 트리간단정보 공유모달 클릭 후 닫을 때 => => 2) 바깥 컴포넌트를 눌러서 닫기