23-05-16

정식으로 Spring을 배우기 앞서 시작한 미니 프로젝트에 관한 기록을 써내려간다.

우리가 만들어야 하는 건 팀원 및 자기소개 페이지.
구현해야 할 기능이 많이 없는 편이지만, 여태까진 일부만 구현해봤기 때문에 처음부터 시작하려니 아주 막막하기만 하다.

와이어 프레임

통일성을 위해 사용한 Figma 와이어 프레임의 일부.
내가 맡은 부분인 멤버 상세페이지다.
규격을 정해놓고 시작하지 않아서 나중에 매우 후회했다.

팀원끼리 소통이 원활해 대략적인 프레임을 세우는데 문제가 없었다. get과 post를 주로 사용하고 협업 연습으로 git branch, merge를 최대한 이용해보기로 한다.
여담으로 노션처럼 깔끔한 디자인을 생각하고 프레임을 짰는데, 음... 역시 디자인은 디자이너에게 맡기자.

API

• HTML
• JavaScript
• CSS
• Python(flask)

miro를 사용했다. 비교적 단순한 구성이다. 메인페이지에서 멤버 카드를 누르면, mongoDB에서 GET으로 해당 멤버의 데이터를 담아놓은 상세 페이지로 이동한다.
시간이 나면 회원가입이나 방명록 데이터 초과시 페이지로 목록을 나누는 처리를 추가하기로 했다.
팀원들과 1차 코드리뷰를 마친 상태의 상세페이지.
대충 규격은 잡혔지만 아쉬운 점이 많다.
메인페이지의 임시로 만들어놓은 버튼을 누르면 상세페이지로 이동한다. 또한 하단 버튼을 누르면 메인페이지로 돌아간다.

버튼엔 hover와 active를 추가, 프로필의 아코디언 UI는 details-summary로 처리했다.
div 사이즈가 커서 드래그를 하면 지저분해 보이기에 user-select : none으로 드래그를 막았다.

window.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('details').forEach(function (item) {
            item.addEventListener("toggle", event => {
                let toggled = event.target;
                if (toggled.attributes.open) {
                    document.querySelectorAll('details[open]').forEach(function (opened) {
                        if (toggled != opened)
                            opened.removeAttribute('open');
                    });
                }
            })
        });
    });

마음에 드는 부분.
토글을 눌렀을때 details가 이미 열려있는 상태라면 기존의 것을 닫는다.

	summary::marker {
        content: "+ ";
        font-family: monospace;
    }
    details[open] summary::marker {
        content: "- ";
    }

화살표의 모양을 바꾼 코드.
생각만큼 깔끔하진 않은 것 같아서 수정을 고려중.

별난 기능도 없는 페이지 하나를 만들 뿐인데 능숙하지 못한 탓에 손이 많이 간다.
mongoDB와 연결해 저장된 멤버 데이터(텍스트와 사진)을 자동으로 불러오게 할 예정이다.
스크롤을 만들지 않고 모든 요소를 담고 싶었는데 규격이 뭔가 잘못된 것 같다.
계획을 철저히 세우는 것의 중요성을 깨닫는다.

내일은 DB와 연결하고 css를 조금 더 다듬는 걸 목표로 한다.
가능하면 세로 스크롤도 없애고 싶다...