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..

이번 사이드프로젝트에서 시간상 로그인을 카카오 로그인만 구현하기로 했다.예~전에 카카오 로그인은 spring으로 구현해 봤는데 프론트에선 처음이라 내가 해보기로 했다. SDK와 REST API 방식 두 개가 있었는데 확인해보니 - REST API : 카카오 로그인 페이지를 먼저 접속한 후, 카카오톡 로그인 버튼을 통해서 카카오톡 앱에서 로그인할 수 있게 제공.- SDK : 핸드폰에 카카오톡 앱이 설치되어 있다면, 카카오톡 앱을 실행하여 로그인을 할 수 있게 제공. 만약 앱이 설치가 안되어있다면, REST API와 동일하게 로그인 페이지가 나타남. 써본 앱 중에서는 지그재그, 오늘의 집 등(인기 많은 대부분의 앱들)이 SDK를 이용하는 것 같고, REST API는 못 찾고 있다가 친구가 알려준 라이프집이라..

회사에서 주로 부트스트랩을 사용한터라..부끄럽지만 공통 컴포넌트를 만들어 본 적이 없다.이번 사이드 프로젝트를 통해 공통 컴포넌트를 만들면서 css도 만져보고 이것저것 해보는 중! 많이 썼던 modal을 만들어보면서 리뷰받았던 내용을 수정한 과정을 적어 보려고 한다.(ㅎㅈ님 감사합니다😃)  css(+emotion)를 제대로 만져본 적이 없던 터라 처음엔 삽질을 좀 했다. 우선 모달을 구성하면서, 화면에 필요한 모달 구성이1. 중앙 배치 - 확인 버튼- 확인 버튼 + 취소 버튼2. 하단 배치- 사진 - 텍스트- 확인 버튼 + 취소 버튼 + X버튼이렇게 되어 있다. 그래서 난 기본이 되는 BaseModal과 확인, 취소가 가능한 ConfirmModal과 사진과 텍스트(프로필 관련)가 쓰이는 ProfileM..