Flower Delivery Website 개발일지

FE 개발자의 기본적인 역량이라고 함은, 당연히 디자이너가 준 화면 설계를 그대로 구현해내는 Publishing 능력이 기본이라고 할 수 있다. 하지만 내가 의외로 남이 만든 디자인으로 퍼블리싱을 해본 적이 없다는 걸 깨닫고 해보는 퍼블리싱 프로젝트. 디자인은 피그마

이전 포스팅에서는 피그마에서 명시된 기초 스타일을 tailwind의 config로 옮기는 작업을 했었다. 이번엔 UI 컴포넌트를 구현해보려고 한다. 가보자고! 폴더 구조 먼저 요 UI 컴포넌트들을 담을 폴더를 생성해야 하는데, 네이밍을 어떤 식으로 하는 것이 좋을

디자이너 분이 디자인을 참... 애매하게 하셨다. 나였으면 아이콘까지 색을 바꿨을 텐데, 아이콘의 변화는 없다. 아참, 그리고 hover 이슈가 있었는데, 이 포스팅으로 갈무리하겠다.의외로 많이 어려웠던 Checkbox. 심지어 이거 실무에서 사용하려면 value랑 이

지금까지는 Uncontrolled Component로 만들었었는데, 라디오는 Controlled Component로 만들어보려고 한다. <span style="color: 그러서는 Radio Button의 특성상 Group으로 묶어주는 역할이 필요하고, 그 Gro

개인적으로 가장 만들고 싶었던 UI컴포넌트~ InputBox는 기본적으로 대응해야 할 케이스가 아주 다양하기 때문에 그걸 한번 유연하게 처리해보고 싶었다. 특히나 이렇게 state가 존재하는 inputbox는 또 분기 처리하는 게 까탈스럽기 때문에...! 잘 해보고 싶

이번엔 Select Box를 구현해보려고 한다. 중요한 사실은~ <select> 객체는 스타일링이 가능하지만 드롭다운 되는 <option> 객체는 스타일링이 불가능하다. 그러므로 select + option 조합이 아니라 다른 방법으로 구현을 해야 한다. 여

이번에는 DatePicker를 만든다. 그동안 DatePicker를 쓸 일이 있으면 <span style="color: 날짜 관련한 로직은 나름대로 알고 있다 생각했는데, 이번에 만들면서 꽤나 부족하다는 걸 느꼈고 다 만들고 나니 실력이 확실히 는 것 같은 느낌이

Step Count만 하면 되는 간단한 UI Component라 딱히 설명할 게 없긴 하다.사실 Figma에서는 min, max에 대한 유스케이스를 다루진 않았다. 그러나 이 UI Component를 사용한다면 분명이 필요한 속성이라고 생각해서 임의로 추가했다.엣지 케

간단한 UI Component라서 설명을 덧붙일 건 없는 것 같다. 조금 그래도 포인트를 잡을 수 있는 건 ~아이콘을 넣을 때마다 항상 같은 클래스를 지정해주고 있어서 tailwind component로 생성해주었다.텍스트 콘텐츠의 내용이 폭 보다 많은 내용을 가지게