<aside> 📢 협업을 위한 사용자 초대 방법과 코멘트를 이용하는 방법에 대한 설명입니다.

</aside>

템하의 에디터는 다양한 사용자를 초대하여 내가 만든 웹 페이지를 공유하고 함께 편집할 수 있습니다.

<aside> ❓ 템하의 에디터란?

 1️⃣ [에디터 모드 작업 환경 살펴보기](<https://temhamanual.notion.site/157796fab7a080668f11c8ca73423697>)

 2️⃣ [템하의 기본 단위 (rem, px, em…)](<https://temhamanual.notion.site/157796fab7a080668f11c8ca73423697>)

📄 페이지

1️⃣ ****페이지를 생성하는 방법

2️⃣ 페이지 명을 설정하는 방법

3️⃣ 산출물 다운로드 시 페이지 명 설정


🧩 블록

1️⃣ 헤더 · 푸터 블록, 레이아웃 블록의 차이

2️⃣ 프로젝트 생성 시 블록을 가져오는 방법

3️⃣ 레이아웃 블록의 옵션 사용법

4️⃣ 헤더푸터 블록의 옵션 사용법


⚙️ 설정

1️⃣ 페이지 설정

2️⃣ 페이지 설정 옵션

3️⃣ 프로젝트 설정

4️⃣ 프로젝트 설정 옵션


🕹️ 제어판

1️⃣ 제어판의 위치

2️⃣ 제어판의 옵션


↗️ 내보내기

1️⃣ 내보내기의 위치

2️⃣ 소스 다운로드

3️⃣ FTP 업로드

4️⃣ 템하 IP 허용


🌐 웹 게시

1️⃣ 웹 게시의 위치

2️⃣ 웹 게시 방법


👥 협업

1️⃣ 협업 프로젝트의 위치

2️⃣ 협업자를 초대하는 방법

3️⃣ 협업 페이지 구분 방법

4️⃣ 코멘트의 위치

5️⃣ 코멘트를 작성하는 방법

6️⃣ 코멘트 입력창 버튼의 역할

7️⃣ 코멘트 관리 방법


⌨️ 코드 (블록수정방법)

1️⃣ 지도 수정방법

</aside>

1️⃣ 협업 프로젝트의 위치

협업을 위한 초대 방법은 우측 상단의 "공유" 버튼을 클릭한 뒤, 하위 메뉴에서 "사용자 초대"를 선택하시면 됩니다.

또는 프로젝트 생성 후 "작업공간"에서 "협업관리"를 통해 협업자를 초대할 수 있습니다.

협업초대.png

협업자를 초대한 후 협업 중인 프로젝트를 관리하는 화면은 아래와 같습니다.

🔹 내가 소유자로 프로젝트를 생성하여 협업자를 초대

“내가 소유자로 프로젝트를 생성하여 협업자를 초대” 했을 경우 협업중인 프로젝트에 “협업중” 이라는 배지 노출과 함께

“내 프로젝트” 화면에서 관리할 수 있으며, 협업 관리를 클릭 시 노출되는 협업관리 팝업에서는 현재 협업자로 초대된

협업자의 역할과 권한을 직접 수정할 수 있으며, 추가 협업자를 초대할 수 있습니다.

협업프로젝트_01-1.png

🔹 상대방이 나를 협업자를 초대

“상대방이 나를 협업자를 초대” 했을 경우 협업중인 프로젝트에 “협업중” 이라는 배지 노출과 함께

“협업 프로젝트” 화면에서 관리할 수 있으며, 협업 관리를 클릭 시 노출되는 협업관리 팝업에서는

현재 협업자로 초대된 협업자의 목록을 볼 수 있으며 프로젝트 “나가기” 버튼만 활성화 됩니다.

협업프로젝트_01-2.png

2️⃣ 협업자를 초대하는 방법

협업초대.png

협업을 위한 초대 방법은 우측 상단의 "공유" 버튼을 클릭한 뒤, 하위 메뉴에서 "사용자 초대"를 선택하시면 됩니다.

사용자 초대1.png

“사용자 초대” 버튼을 클릭 시 노출되는 팝업창 입니다.

  1. 협업자의 이메일을 입력해주세요. (템하에 가입되어 있는 이메일만 초대가 가능합니다.)
  2. 협업자의 역할을 선택해주세요.
    1. 관람자 [Viewer] : 관람자로 초대된 협업자는 에디터의 편집 모드 활성화 상태와 동일한 화면을 확인할 수 있으며, 제어판 옵션, 코드펜 사용 등 편집이 필요한 작업은 모두 불가능합니다.
    2. 편집자 [Editor] : 프로젝트의 소유자와 동일환 화면으로 확인할 수 있으며, 프로젝트 소유자가 사용하는 편집모드를 동일하게 이용할 수 있습니다.

협업자 초대가 완료된 후, 다시 사용자 초대를 클릭하면 "협업 관리" 팝업창이 노출됩니다.

프로젝트 소유자는 이 화면을 통해 협업자의 권한과 역할을 설정할 수 있으며,

"초대하기" 버튼을 클릭하여 새로운 협업자를 초대할 수 있습니다.

사용자 초대2.png

3️⃣ 협업 페이지 구분 방법

협업자와 각각 다른 페이지에서 작업 중인 페이지를 확인하는 방법은 아래와 같습니다.

협업자 위치1.png

  1. 우측 상단에 프로젝트에 참여중인 프로필이 노출됩니다.
  2. 프로필에 마우스를 올리면 협업자의 프로필 정보, 역할, 작업 중인 페이지 위치를 확인할 수 있습니다.
  3. 좌측의 “페이지” 버튼을 클릭하면 노출되는 패널에서 협업자가 위치한 페이지에 프로필이 표시됩니다.

4️⃣ ****코멘트의 위치

코멘트는 우측 상단에 위치해 있습니다.

코멘트 버튼을 클릭하면 커서가 코멘트 전용 커서로 변경됩니다.

코멘트 위치.png

5️⃣ ****코멘트를 작성하는 방법

service_04.gif

코멘트 사용방법1.png

<aside> 🚨

</aside>

  1. 코멘트 버튼을 클릭 후 코멘트를 작성하고 싶은 영역을 클릭해 주세요.
  2. 영역을 클릭 시 코멘트를 입력할 수 있는 창이 노출되며, 코멘트를 작성해주세요. 코멘트를 입력 시 이모티콘과 첨부파일을 입력할 수 있는 버튼도 함께 노출됩니다.

6️⃣ 코멘트 입력창 버튼의 역할

코멘트를 작성했다면, 코멘트 입력창에 존재하는 버튼에 대해 알아보도록 하겠습니다.

코멘트 사용방법2.png

  1. 삭제를 원하는 코멘트창을 제거할 수 있습니다.
  2. 코멘트의 기본 상태는 "미해결"입니다. "미해결" 상태에서 클릭하면 "해결"로 변경되고, "해결" 상태에서 다시 클릭하면 "미해결"로 돌아갑니다. 상태별로 코멘트를 나누어 보고 싶다면 상태 선택 박스를 통해 확인할 수 있습니다.
  3. 현재 열려있는 코멘트 창을 닫을 수 있습니다.
  4. “자신이 작성한 코멘트”를 지울 수 있습니다. (단, 맨 최초로 작성된 코멘트는 “삭제” 버튼이 노출되지 않으며 1번과 같이 코멘트 전체 삭제를 진행해 주셔야 합니다.)
  5. 코멘트에 첨부된 이미지를 확인할 수 있습니다. 5-1과 같이 이미지 미리보기 화면이 노출되며,
  6. 이미지 첨부 링크를 복사할 수 있습니다.
  7. 첨부된 이미지를 다운로드할 수 있습니다.
  8. 코멘트에 대한 반응을 남길 수 있습니다. 클릭 시 이모티콘 창이 노출되며, 마우스를 올리면 반응을 남긴 사람의 닉네임이 표시됩니다.

7️⃣ 코멘트 관리 방법

코멘트는 “상태별” 관리가 가능합니다.

코멘트의 기본 상태는 “미해결” 상태로 작성이 됩니다.

코멘트의 상태 관리 방법은 우측 코멘트 리스트 목록에서 아이콘(2번) 클릭 시 변경하는 방법과

또는 코멘트 창의 아이콘을 클릭하여 변경하는 방법이 있습니다.

코멘트 사용방법4.png