[축구모임 홈페이지개발] 12/28 개발일지 Nodejs css / Z플립 전용 반응형 버전 개발

일단 최근에 홈 화면 이번 주 매치 정보탭에서 

position : relative ; 를 활용해서 

 

 

위와 같이 디자인이 된 그대로 구현을 해냈는데, 플립 핸드폰에서 보면 화면이 양옆으로 좁다보니 디자인이 망가졌었다.

 

 

그래서 나는 위 이미지와 같이 웹 개발자 모드에서 지원하는 대로 기종을 선택해서 그에 맞게 

 

@media only screen and (max-width: 354px) {

 

버전을 따로 관리했는데, 실수가 있었다.

 

Flip 을 Fold 로 헷갈려서 Fold 기준으로 max-width: 300px 로 설정을 했었다.

플립은 내가 따로 버전을 설정한 300px 보다 위, 그리고 어딘가 상한선 사이에서 여전히 디자인이 망가지는 지점에 있었던 것이다.

그러다보니까 내가 암만 변경을 해도 플립에서는 디자인이 망가져있던 것인데,

오늘 와서 일일이 가로 폭을 하나씩 줄여가면서 디자인이 망가지는 포인트를 찾았는데 354px 이었다.

그래서 354를 기준으로 아래에서는 폰트 사이즈를 줄여버렸더니 배포해보니까 플립에서도 정상적으로 작동했다.

 

---

 

 

홈화면에서 상어 색을 하얀색으로 변경해줬고, 디자인팀에서 기존에 비겼을 때를 표시하는 D 이미지를 누락시켰어서 요구해서 적용했다.

 

---

 

홈 화면에 이번주 매치 탭을 보면 복사 버튼이 있다.

복사 버튼을 누르면 이번 주 매치에 해당하는 곳의 주소를 복사해와서 다른 네비게이션 어플에서도 쉽게 따로 검색할 필요 없이 길찾기를 하기 위해 추가한 기능이다.

마침 네이버맵 검색 기능 때문에 같은 값인 

<%=목적지.address %>

를 저장하게끔 하기만 하면 됐다.

 

    function copyToClipboard() {

      var textarea = document.createElement('textarea');

      textarea.value = '<%=목적지.address %>';

      document.body.appendChild(textarea);

      textarea.select();

      document.execCommand('copy');

      document.body.removeChild(textarea);

      showNotification('클립보드에 복사되었습니다: ' + '<%=목적지.address %>');

      // 1초 후에 알림 숨기기

      setTimeout(function () {

        hideNotification();

      }, 2000);

    }

    function showNotification(message) {

      var notification = document.getElementById('notification');

      notification.textContent = message;

      notification.style.display = 'block';

    }

    function hideNotification() {

      var notification = document.getElementById('notification');

      notification.style.display = 'none';

    }

 

먼저 복사버튼이 눌리면 실행할 함수 copyToClipboard() 를 만들어준다.

var textarea = document.createElement('textarea');

textarea 변수를 만들어준다. 이 변수는 textarea 라는 이름의 요소로서, html 안에서 존재하게 된다.

 

textarea.value = '<%=목적지.address %>';

그 textarea 요소 안에 들어가있는 값은 server 로 부터 가져온 주소값으로 한다.

 

document.body.appendChild(textarea);

그 요소를 html body 안에 만들어준다.

 

  textarea.select();

만든 textarea 요소를 선택한다.

드래그와 같은 느낌인 거 같다.

 

document.execCommand('copy');

document.body.removeChild(textarea);

 

선택된 부분을 복사하고, 요소 자체를 지운다.

지우는 이유는 예상인데 지우지 않으면 이후에 작업할 때 변수끼리 충돌할 수도 있고,

또는 메모리상으로도 계속 요소가 만들어져 있으면 낭비가 생길 것이라고 생각.