jjongbin/drawtome

[Zerobase] Limited edition sneakers draw information site ✨

🏋🏻 꾸준히 성장할 JJongBin🏋🏻

---

📚 Tech Stack

drawtome's Issues

[css] 컬러파레트 추가

남색 #282c37
하얀색#d9e1e8
옅은하늘색#9caec7
파란색#3291d6

[css] 컬러파레트 추가

$bg:#f9f7f7

기존 하얀색보다는 어둡고..
light white보단 밝은 컬러파레트 추가

[problem] 진행중인 드로우 이미지 wrapper 설정

html, scss 파일 수정 필요

[problem] webp 파일 인식 못함

webm으로 변환 필요

[problem] best draw pagination

pagination 기능 추가

• 각각의 dot을 눌렀을때도 이동
• 화살표 버튼을 눌렀을때 이동

[problem] 진행중 드로우 페이지 스크롤시 레이아웃 문제

헤더 영역보다 메인 영역이 위로 가는 문제 발생

[problem] 병합 후 maxin 충돌 문제

maxin 충돌로 인한 문제 발생

[problem] 웹 접근성 개선

• light house 테스트 결과 웹 접근성 스코어 92로 개선할 필요가 있음

[crossbrowsing] IE에서 메인페이지 동영상이 짤리는 현상

[html] 상세페이지 레이아웃 설계

[html] 상세페이지 레이아웃 설계

[crossbrowsing] IE 네비게이션 스타일 안먹힘

[crossbrowsing] IE 네비게이션 스타일 안먹힘

[css] drawlist 마우스 hover 레이아웃 변경

상세설명이 3줄까지만 보이고 이후는 보이지 않게 감춤 처리

[css] main - 비디오페이지

• : 비디오 삽입
• : 글자 올리기
• : 스크롤

[html] 메인페이지 마크업 설계

• : first page 설계
• : header 설계
• : Best 상품 section 설계
• : 진행중인 드로우 section 설계
• : '나에게 맞는 신발은?' image 배너 section 설계
• : footer 설계

contributor : 원종빈 박민지

[problem] 모바일환경 요소들 크기 및 폰트크기

• 상세페이지

• 메인페이지

• 진행중인 드로우 페이지

[problem] 진행중 드로우 페이지 병합 후 레이아웃 깨짐

상품 검색창이 상단으로 올라가면서 fixed된 헤더 영역과 겹쳐지는 문제 발생

[problem] 진행중인 드로우 페이지 모바일 버전에서 nav가 search box를 덮는 현상.

• : search에 margin을 줘서 해결하기

[problem] 메인페이지 11/16 14:00 문제사항

• : 베스트드로우 transition시 영역 벗어남
• : footer 이미지 스프라이트 수정

[html] 진행중 드로우 페이지 마크업 설계

• header
• 상품 검색 및 진행중인 드로우
• footer

contributor: 김민성 최한나

[css] main 홈페이지 layout 설계

• : navigation 레이아웃 설계
• : 베스트드로우 레이아웃 설계
• : 진행중인 드로우 레이아웃 설계
• : 데일리쇼즈 레이아웃 설계

[problem] html build error

• error form webpack.config.js
• not done drawlist.html build

[problem] js 기능별로 나눠주기

하나의 파일인 js파일을 기능단위로 나눠주기

[problem] video 위치 문제

video absolute 시, 메뉴 사라짐
video relative 시 여백 생김
..?

[css] draw list animation

• 리스트 보여지는 레이아웃 변경시 애니메이션
• 각각 아이템 마우스 오버시 opacity 추가

[problem] IE에서 detail-list 스타일이 흐트러지는 현상

[css] 메인페이지 디테일 추가

• : 데일리슈즈 돌아가게끔하는거
• : 나우드로우 hover 작업
• : 스크롤 딸깍딸깍
• : 첫화면 내릴 때 효과주기

[problem] IE에서 flex의 gap이 사용할 수 없음

• daily look의 슬라이드가 정상적으로 동작하지 않음(계산하는 과정에서 gap을 포함해서 계산하기 때문에)

[problem] 무한 슬라이딩 루프

js를 이용한 무한 슬라이딩 루프 구현시 시간에 따라 지속적인 흐름으로 할 경우 childNode들을 추가하는데 어려움을 겪음

• 일정 시간에 따라 하나의 아이템씩 이동하도록 구현
• 하나의 아이템이 이동할때 마다 count를 하고 일정 개수까지만 cloneNode를 이용해서 자식요소를 복사해서 아이템리스트 뒤에 추가
• 무한루프로 구현하기 위해 일정 구간에서 transform의 좌표를 0으로 초기화

[css] 상세페이지 수요일 해야할 것

• : 이미지 sticky
• : 상품 나열 ..

[problem] main page 반응형

• 진행중인 드로우 item 반응형

• 네비게이션 모바일때 반응형

• 모바일때 로그인/회원가입 위치 조정

[html] img 파일 변경 png,jpeg -> webp

[html] 나에게 맞는 신발은 section layout 수정

나에게 맞는 신발은 section 삭제

[성능개선] lighthouse (개선 될 때까지 추가 예정)

[html, css, js] 상세페이지 제작

• 상품 설명

• 품번

• 이미지 picture 사용

• 이미지 슬라이드 구현

• font-size 반응형 조절

[problem] js - loop sliding container

무한 루프 컨테이너 구현

[webpack] 상세페이지 웹팩 추가 연결

연결.. 하겠습니다용

[css] main page 애니메이션 추가

• 첫 화면 뷰포트 기준 스크롤 구현
• header hover시 자연스러운 굵기, 밑줄
• 더보기 밑줄
• daily look 균등하게 나오도록 너비 정하기

[css] 진행중인 드로우 페이지 레이아웃 설계

• : 푸터 레이아웃 설계
• : 상품 검색 레이아웃 설계
• : 진행중인 드로우 상품 전시 레이아웃 설계
• : 푸터에 사용될 icon들 sprite 이미지로 제작

[problem] 푸터 height 설정 오류

[problem] 푸터 height 설정 오류
padding 주기

[problem] 세션 영역의 마진으로 인한 레이아웃 문제

search 세션 영역의 마진으로 인해 모바일 화면에서 검색창이 width 전체를 채우지 않는 문제 및 데스크탑 레이아웃 문제 발생

[enhancement] draw 페이지의 버튼 클릭시 is-active class 추가하는 JS 작성

• draw-button, draw-list에 is-active class 추가하는 JS 생성

[problem] desktop 버전 navigation 여백 조정

여백 일관성있게 맞춰주기

[style] default font 변경

스포카한산스 -> 에스코어드림체

[document] 메인 화면 배너 제작 및 이미지 찾기

• : 메인 화면 배너
• : top버튼 이미지 찾아주기
• : 이미지 각기 사이즈 조절 및 푸쒸

[convention] 코딩 컨벤션 일치시키기

Match coding convention

[problem] 웹팩을 이용한 개발환경 로드시 IE에 스타일이 적용되지 않는 문제

• 개발환경에서 IE가 전혀 적용이 되지 않는 문제.

[document] 진행중인 드로우 최종 정리

• : 상세 설명 2줄로 만들기
• : 한 행만 상세설명, 가격, 상품이름, 사진 구해오기

[style] 미세 letter spacing 조절

[style] 미세 letter spacing 조절
because of .. 폰트변경