원티드 프리온보딩3 원티드 프리온보딩 과제 - 견적 요청서 페이지 내가 맡은 역할 - figma 명세에 따라 반응형 디자인 구현 - 필터링 기능 구현 반응형 세팅 Breakpoints는 크게 PC(xlarge), Tablet(medium), Mobile(small)로 나누고, 중간 pc -> tablet으로 가는 과정 중에 필요한 사이즈인 1130px도 추가했다. enum Breakpoints { xlarge = 1440, large = 1130, medium = 748, small = 360, } export default Breakpoints; 방금 만든 Breakpoints를 기반으로 아래와 같이 mediaQuery 함수를 만들었다. import Breakpoints from "./breakpoints"; const mediaQuery = (maxWidth: nu.. 2022. 2. 12. 원티드 프리온보딩 과제 - 환율 계산기 들어가며 원티드 프리온보딩이 시작되었다. 첫날이라서 가볍게 오리엔테이션을 진행하고 끝날 줄 알았는데, 첫날부터 바로 과제가 주어졌다. 😢 원티드 프리온보딩 시간표를 보면 3일마다 과제가 주어지는데, 그게 오늘부터였다니.. 원티드 프리 온보딩을 지원할 당시에는 시간표상에 있는 스케줄이 할만할 줄 알았는데,,, 원티드 프리온보딩을 합격하고 나니 갑자기 해야 할 일이 너무 많아졌다... 우선 Yapp 19기에서 진행했던 북마크 서비스의 2차 개발이 시작되었고, 이번 Yapp 20기에 운영진을 하게 되어서 공식 Yapp 홈페이지를 개편하는 업무를 하게되었다. 또 예전에 진행했던 개발자의 품격2기 멤버들과 개발자 Qna 서비스를 만들기로 했는데, 그게 이번 주부터 시작이다.. 오전 8시부터 오후 4시 30분까지는.. 2022. 1. 30. 원티드 프리 온보딩 선발과제 후기 원티드 프리온보딩 프론트엔드 코스에 지원했을 당시에 제출했던 선발 과제에 대해서 포스팅해보려고 한다. 과제를 그대로 포스팅해도 될지 몰라서 멘토님께 여쭤봤는데, 마음껏 가능하다고 하셨다! 💡 과제 요구사항 [선발 과제]: 원티드 페이지 상단 영역을 React 기반으로 클론해주세요. 💡 요구사항 분석 원티드 상단 영역을 분석해보면 다음과 같다. 슬라이드 되어야 할 이미지가 어떠한 반응형에도 항상 페이지의 정중앙에 유지되도록 설정 슬라이드 이미지가 3~4 초마다 자동으로 슬라이드 되어야 함 슬라이드 이미지에 마우스를 hover 하게 되면 슬라이드를 멈춤 이미지가 무한 루프로 연결되어 있음 브라우저 배율을 500%로 최대한 줄여도 이미지가 끊이지 않고 계속 보여야 함 페이지를 새로 고침 할 때마다 나오는 이미.. 2022. 1. 26. 이전 1 다음
