과제 - React Custom Component advanced
import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; //드롭다운 메뉴에서 선택 가능한 검색어 목록 /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1rem 1rem 0 0'; const inactiveBorderRadius = '1rem 1r..
과제 - React Custom Component Bare
Modal.js import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display:flex; align-items:center; justify-content:center; //가운데 정렬 하지만 높이가 가운데가 되지 않았다. 이유는 부모가 높이가 없었다. height:950px; //그래서 부모에게 높이를 주었다. `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다. d..
https://www.figma.com/file/2OY16LH29KTqrS6T7EAXZJ/Untitled?node-id=0%3A1&t=MuijSr7mcdZMpnsL-1 Figma Created with Figma www.figma.com 처음으로 인스타를 클론을 해봤다. 아쉬운점은 알아보기 쉽지 않게 카테고리를 막 만든것 같다. 알아보기 쉽게 이름을 정했다면 더 만들기 수월했을 것같다. 다음에 시간을 내서 과제1에서 만든 것을 응용하여 기능을 더 추가시켜서 만들어봐야겠다.
https://www.figma.com/file/HQmmEyQA9YNNzhSVRFZmFn/Untitled?node-id=0%3A1&t=FyzqhdX6xHX5F5kJ-1 Figma Created with Figma www.figma.com Bare Minimum Requirements GNB (Global Navigation Bar) Modal Toggle Tab Accordion Advanced Challenge Drop Down Auto Complete 을 만들어봤다. 처음에는 복잡하게 만들었다. 계속 만들다보니 모르는 부분이 나왔는데 유튜브를 참고해가면서 만들어보니 간단하게 컴포넌트를 구현하여 복붙하여 클릭에 따라 움직임을 만들었다. 이런식으로 만드니 보기도 쉽고 이해하기도 수월했다. Auto Com..