[포스코x코딩온] 풀스택 부트캠프 1차 프로젝트 회고록 -2

231116

 내 담당이었던 전체 음식 메뉴를 스와이퍼를 이용하여 카드 슬라이드를 넘기는 형식으로 레이아웃을 구성.

 하지만 전체 메뉴페이지보다는 메인 페이지에 어울리는 레이아웃이라는 의견이 있었다.

 

생각해보니 전체 메뉴는 메뉴가 한 눈에 들어오는 것이 나을 것 같아 그리드식의 레이아웃으로 재구성.

(공들인 스와이퍼를 삭제하는 것이 마음 아팠지만, 미련없이 삭제했다.)

 

반응형의 경우 pc, 태블릿, 모바일 순으로 설정하였다.  또한 개별 카드간의 마진이 없어서 애니메이션이 적용될 때 답답하다는 의견이 있어 그리드 안의 gap또한 수정했다.

 

다만 width는 반응형 width인 %나 vw를 설정해도 상관 없지만 card의 경우 높이가 너무 작아지면 레이아웃이 깨지기 때문에 px이나 rem 같은 고정된 크기를 설정하는 것이 나아 보여 높이는 고정 크기로 정했다. (생각해보니까 크기를 반응형으로 설정하되 min-width, min-height를 설정하는 게 더 나을 것 같다.)

 

 또한 카드의 레이아웃이 너무 촌스러워서 다른 음식 소개, 판매 사이트를 참고하니 대부분 많이 꾸민 느낌보다는 흰색 background-color를 주고 기본 폰트, color를 정해서 심플하게 꾸미는 것이 요즘 트렌드 인 듯 했다. 그래서 팀원끼리 메인 폰트와 색상을 정했다.

 내가 담당하는 전체 레시피 창의 스타일은 카드 디자인을 부트스트랩을 기반으로 하되, card-body쪽의 border와 색상을 없애고 그 안에 flex 레이아웃을 줘서 꾸미니 한층 심플한 느낌을 주었다.

모바일에서는 헤더를 고정하자는 의견이 있어서 576px보다 낮을 경우 미디어 쿼리를 이용해서 고정하려고 했다.
제이쿼리의 .css를 이용하여 overflow의 hidden과 visible을 이용해서 고정을 성공했다.
하지만  모바일의 경우 검색창을 띄우고 back 버튼을 이용해서 뒤로 돌아가야 하고,
pc의 경우 검색 창을 한번 더 눌러야 검색창이 사라지는 구조였기 때문에 모바일에서는 back버튼을 눌러도 overflow가 hidden인 상태로 고정되는 버그가 발생했다.

A.

js에서 window.innerWidth라는 속성을 찾아 해당 속성이 576px 이하일 때만  overflow 속성이 적용되게 설정하여 문제 해결

---

카드를 누르면 해당 카드 정보를 담은 모달 창이 뜨게 하는 기능을 구현했다.

프론트만으로 해당 기능을 사용하려면 modal창 골격을 만들고 eventlistener를 추가해서 event.target의 정보를 담으면 될거라고 생각했다. 그래서 성공했지만 dom으로 접근했었기 때문에 요소가 추가되면 불가피하게 dom이 바뀌어서 여러 번 수정을 거쳤다.

 

공통 헤더와 푸터를 만들어서 css와 js를 import했는데 그럴 경우 다른 팀원의 html에서는 기능이 제대로 되지 않는 버그가 발생했다. 이는 css를 설정한 태그 이름이나 클래스 이름이 겹쳐서 나타나는 현상이었고, 이를 찾아서 수정했다.

---

 

231117

 

로고를 만들었다.

 

로컬 스토리지에서 id, pw, isLoggedIn 등의 key 값을 활용해서 간단한 로그인 로직을 만들었다.

 

다만, 로그인 창은 부트스트랩의 modal 창을 이용했지만 불러온 모달이 backdrop이나 x 버튼을 클릭해야한 야만 창이 사라지게 되어있었다.

 

Q

     그래서 sign in을 누르고, id, pw가 맞았을 때도 backdrop과 modal 창이 사라지게 해야 했음.

A.

     이를 위해 로그인 버튼을 눌렀을 때 추가되는 모든 부트스트랩 속성들을 하나씩 찾고 이를 역으로 삭제해서 해결했다.

 

Q.

     또한 header에 z-index를 주니 modal 창이 backdrop 뒤로 가는 오류가 발생하게 됨.

A.

      찾아본 부트스트랩의 backdrop의 z-index는 1050이었고 이를 해결하고자 modal창에 직접 1050 이상의 z-index를 주었다. => 오류 해결되지 않음.

 

        z-index는 부모 아래에서만 적용된다는 사실 발견. (부모 밖의 영역에는 부모의 z-index가 적용되고, 자식의 z-index가         적용되지 않는다.)

      그래서 해결책으로 modal 창을 header의 자식 요소가 아닌 형제 요소로 만들어 backdrop과 형제관계로 만들고 modal에 1050 이상의 z-index를 줘서 해결했다.