[내일배움캠프 3일차] _ 캠프(자기소개 페이지 프로젝트)

자기소개 페이지 프로젝트를 진행하면서 다른 사람들이 만든 결과를 보고 자극을 받았다.
정말 간단한 자기소개만 하려고 했는데 이왕 만들 거 영양가 있게 제대로 만들자는 생각으로 싹 갈아엎었다.

[오늘의 학습 키워드]

#프로젝트 개발

---

[학습 내용 정리]

• 메인 페이지 - 방명록에 이모지 기능 추가

단순한 텍스트는 발화자의 의도를 파악할 수 없다.
이모지의 존재는 텍스트로 하는 대화에서 매우 중요하다고 생각했고 이 기능을 추가하고 싶었다.

먼저, 이모지를 고르고 사용할 수 있는 오픈 소스를 가져왔다.

<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>

그 후, dropdown 버튼을 클릭하면 emoji-picker가 나타날 수 있게 했다.
emoji-picker와 input의 요소를 가져와서 선택된 이모지가 입력창에 추가될 수 있도록 설정했다.

 emojiPicker.addEventListener("emoji-click", (event) => {
        inputField.value += event.detail.unicode;
        dropdownInstance.hide();
});

코드 적용을 통해 아래와 같이 이모지를 사용한 방명록을 쓸 수 있게 되었다.
(emoji-picker의 넓은 영역으로 드롭다운 닫힘 문제를 해결한 과정은 밑에서 설명하도록 하겠다.)

이모지 적용 결과

• 개인 페이지 
  
  

height : 100vh로 왼쪽 사이드바는 고정하고 오른쪽의 메인 콘텐츠만 스크롤되도록 했다.
나를 어필하는 소개말에 타자가 쳐지는 듯한 애니메이션을 적용했다.

요소의 텍스트에 대해서 일정 시간 텀을 두고 한 글자씩 추가된다.
borderRight로 커서 느낌을 연출했다.

function typeWriter(element, text, index = 0) {
    if (index < text.length) {
        element.innerHTML += text.charAt(index);
        setTimeout(() => typeWriter(element, text, index + 1), 100);
    } else {
        element.style.borderRight = "none";
    }
}

document.querySelectorAll(".typing").forEach((element, i) => {
        const text = element.getAttribute("data-text"); // 요소의 data-text 속성에서 텍스트 가져옴
        setTimeout(() => typeWriter(element, text), i * 1000); // 요소별로 딜레이 추가
});

왼쪽의 내비게이션 바의 요소를 눌렀을 때, 해당 섹션으로 자동 스크롤 되도록 했다.

function scrollMainContent(target) {
        let element = document.querySelector(target);
        //target = 각 section
        let container = document.querySelector(".main-content");
        if (element && container) {
            container.scroll({
                top: element.offsetTop - 20,
                //각 section 맨 위 보다 조금 아래로 이동한다.
                behavior: 'smooth'
            });
        } else {
            console.error("Element not found: " + target);
        }
 }

---

[학습하며 겪었던 문제점]

1. 넓은 emoji-picker 영역으로 인한 드롭다운 버튼이 닫히는 문제

 아래의 이미지와 같이 emoji-picker의 영역이 드롭다운 영역보다 넓어서
이모지 카테고리를 선택하는 맨 윗 줄의 영역의 요소를 선택했을 때, 드롭다운이 닫히는 현상이 발생했다.

부트스트랩에서 제공하는 javascript.API에 따라 드롭다운 버튼이 자동으로 닫히지 않도록 설정했다.

// Bootstrap javaScript API 사용, 드롭다운 인스턴스 생성
const dropdownInstance = new bootstrap.Dropdown(dropdownButton, { autoClose: false });

이후, hide() 함수를 사용해 드롭다운 버튼이 눌렸을 때, 이모지가 추가되었을 때 emoji-picker가 닫히도록 설정했다.

    // 드롭다운 버튼을 눌렀을 때만 열리고 닫히도록 설정
    dropdownButton.addEventListener("click", function (event) {
        event.stopPropagation();
        if (dropdownMenu.classList.contains("show")) {
            dropdownInstance.hide();
        } else {
            dropdownInstance.show();
        }
    });

    // 드롭다운 내부 클릭 시 닫히지 않도록 설정
    dropdownMenu.addEventListener("click", function (event) {
        event.stopPropagation();
    });
});

 

2. scroll바 설정

내비게이션 바의 리스트를 선택하면 지정된 Section으로 자동 스크롤 되도록 했는데 제대로 동작하지 않았다.
console.log를 이용해 읽히지 않는 요소들이 있는지 확인해 봤지만 없었다.
CSS 설정도 JavaScript를 불러오는 문제도 아니었다.

원인은 웹 페이지 구성과 자동 스크롤 기능을 Window에 대해서 수행한 것 때문이었다.
나는 웹 페이지를 사이드바와 메인 콘텐츠 영역으로 나누었다.
따라서, 사이드바는 Window가 아닌 메인 콘텐츠 영역의 스크롤을 조정해야했던 것이다. 
스크롤할 요소를 아래와 같이 변경하니 문제가 해결되었다.

let container = document.querySelector(".main-content");

---

[ 내일 학습 할 것 ]

1. 포트폴리오를 데이터 베이스에 저장해서 불러올 것
2. 내용 추가
3. 사적인 모습 탭으로 넘어가면 프로필 사진이 바뀌도록 하기
4. 발표자료 만들기