The matissue from sossost

matissue's Introduction

😎 ynnsuis

즐기는 허접 개발자

✨ Skill

JS, TS, React, React-Native, Next

⚙️ OpenSource

Babel - Fix suppressed error order (babel/babel#16440)
NextUI - Fix slider component vertical mark y position focus (nextui-org/nextui#2660)
Supabase - Add example for deleting multiple records with delete().in() (supabase/supabase#25883)
Nuxt - Update jsdoc for ignore-prefix to clarify ignored files (nuxt/nuxt#27065)
DocsGPT - Add copy button on code snippet (arc53/DocsGPT#955)
Nuclear - Add queue to existing playlist (nukeop/nuclear#1593)
FreeTube - Improve accessibility of playlist icon buttons (FreeTubeApp/FreeTube#4943)

matissue's People

Contributors

Watchers

matissue's Issues

Variant Selector을 커스텀훅으로 만들경우 transition이 적용이 안됨

import { useState } from "react";
import { useRecoilValue } from "recoil";
import styled, { css } from "styled-components";
import darkModeAtom from "../store/darkModeAtom";

type Variant = "아이디" | "비밀번호";

const useVariantSelector = () => {
  const [variant, setVariant] = useState<Variant>("아이디");
  const isDarkMode = useRecoilValue(darkModeAtom);

  const VariantSelector = () => {
    return (
      <VariantWrapper>
        <VariantBox>
          <VariantBoxItem
            active={variant === "아이디"}
            onClick={() => {
              setVariant("아이디");
            }}
          >
            아이디 찾기
          </VariantBoxItem>
          <VariantBoxItem
            active={variant === "비밀번호"}
            onClick={() => {
              setVariant("비밀번호");
            }}
          >
            비밀번호 찾기
          </VariantBoxItem>
        </VariantBox>
        <VariantNoticeBar variant={variant} isDarkMode={isDarkMode} />
      </VariantWrapper>
    );
  };
  return { VariantSelector, variant };
};

export default useVariantSelector;

const VariantWrapper = styled.div`
  width: 100%;
`;

const VariantBox = styled.div`
  font-size: 16px;
  width: 100%;
  display: flex;
`;

const VariantBoxItem = styled.div<{ active: boolean }>`
  width: 50%;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  font-weight: 400;

  ${(props) =>
    props.active &&
    css`
      font-weight: 600;
    `};
`;

const VariantNoticeBar = styled.div<{ variant: Variant; isDarkMode: boolean }>`
  width: 50%;
  border-bottom: 0.3rem solid
    ${(props) =>
      props.isDarkMode ? props.theme.lightYellow : props.theme.yellow};
  transform: translateX(
    ${(props) => (props.variant === "아이디" ? "0" : "100%")}
  );
  transition: transform 0.3s;
`;