nxxrxx

카카오 로그인 후나 데이터 불러오는 과정에서 Spinner 가 필요해서 만들기로 했다.원래는 뺑글뺑글 돌아가는 로딩 circle + 그 안에 프로젝트 로고가 있는 Spinner를 제작했지만, 로고는 빼고 뺑글뺑글 돌아가는 로딩만 적기로..  이런 정적인 png 파일을 css를 이용해 360도로 돌아가게 만들 것이다.컴포넌트 파일은 별게 없고, 사실 css가 다이다.위에 정적인 파일이 SpinnerOuter 파일이다.import * as S from "./Spinner.styled";import SpinnerOuter from "assets/icons/ic_spinnerOuter.png";const Spinner = () => { return ( );};export defaul..

프로젝트 내에 필터 설정에 키, 나이의 범위를 지정하는 부분에 양방향 RangeSlider가 필요해서 제작하게 되었다.input Range, Range Slider 등등 다양하게 불리는 거 같다.참고가 많이 되었던 블로그! 감사합니다.*참고 - https://velog.io/@forest_xox/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%96%91%EB%B0%A9%ED%96%A5-Range-%EB%A7%8C%EB%93%A4%EA%B8%B0우선 props로 받아올 값에는1. 기준이 될 슬라이더의 최소, 최댓값(min, max)2. 내가 선택한 현재의 최소, 최댓값(currentMin, currentMax)3. 값 변경 시 호출될 콜백함수(handleValueChange)가 필요하다 생각했다...

Tag 컴포넌트를 만들 때 조건이1. 엔터 치면 input창 밑에 tag 생성 2. tag는 15자 미만으로 3. 총 10개까지 작성 가능이었다.  기존에 ㅎ님이 만들어 놓으신 Input 컴포넌트와 내가 만들어 놓은 Badge 컴포넌트를 이용해 빠르게 만들 수 있었다.props로 받는 data는 저장되어 있는 data이다.// Tag.tsximport React, { useEffect, useState } from "react";import * as S from "./Tag.styled";import { Input, Badge } from "components";import { TagCloseGrayIcon } from "assets";import { useToast } from "hooks";inter..

기본적으로 dropdown컴포넌트에 필요한 props로는 options와 선택한 키값(selectedKey)과 변경되는 handleChange 함수가 필요했다. 그리고 완성작엔 드롭다운 하나만 보여주지만, 실제론 여러 개를 사용 중이라다른 드롭다운을 클릭하면 기존껀 꺼져야 하고, 뒷 배경을 클릭해도 꺼지게 만들고 싶었다.// Dropdown.tsximport { useEffect, useRef, useState } from "react";import * as S from "./Dropdown.styled";import { CheckIcon, DropdownArrowIcon } from "assets";interface DropdownProps { options: readonly { label: stri..

이번 프로젝트에서 Badge를 은근 많이 썼었다. 디자인 시스템을 봤을 때 이런 조건들이 있어서 css에서 삼항연산자를 많이 써야 하겠는데..?라는 생각을 했다.1. disable- 클릭 불가능- 색 여러개 사용 가능성 있음- 사이즈 여러개 사용 가능성 있음2. clickable- 기본은 흰색 -> 클릭하면 유색 -> 다시 클릭하면 흰색3. tag- 색 여러개 사용 가능성 있음- 지울 수 있는 close 아이콘 추가선택가능 여부인 isSelected와 사이즈+컬러로 variant를 설정하고, 모든 Badge에는 label이 필수라 label도 넣어주고, icon도 옵셔널로 넣어줬다.// Badge.tsximport React from "react";import * as S from "./Badge.sty..

마이페이지에서 옵션을 켜고 끌 수 있는 토글을 만들었었다. 몰랐는데 type="checkbox"로 했던 게 신기했던!아직 토글을 켜고, 끌 때의 기능은 개발이 안되어서 toast를 띄우는 것으로만 구현되었다. // Toggle.tsximport { useState } from "react";import * as S from "./Toggle.styled";import { useToast } from "hooks";interface ToggleProps { content?: string;}const Toggle = ({ content }: ToggleProps) => { const [isToggleOn, setIsToggleOn] = useState(false); const { addToast } =..

회사에선 부트스트랩으로 거의 사용해서 이번 사이드 프로젝트에선 컴포넌트들을 거의 다 만들어 사용해 보기로 했다.라이브러리로 사용할 땐 너무 편했는데 막상 제작하려니 막막했던..🙃 기본인 Button 컴포넌트 먼저 제작해보기로 했다.부트스트랩은 color, size 등 옵션이 다양하게 처리가 되어있었어서, 처음엔 size 따로 color 따로 props로 넘겼었다. ㅎㅈ님이 얘기하시길 css를 옵션으로 많이 넘기다 보면 나중에 옵션이 너무 많아지기도 하고 가독성이 별로일것 같다는 의견을 받았다.우선 디자인시스템 상 버튼을 사용하는게 sm사이즈의 Pink배경, md사이즈의 Pink, White배경, lg사이즈의 Pink배경, underline이 있는 text형식, icon 형식 이렇게 있으니 variant..