From 52a461815f4cef3aa813201282ba451dd50b7496 Mon Sep 17 00:00:00 2001 From: jaeyoung Date: Fri, 7 Jun 2024 17:00:36 +0900 Subject: [PATCH] =?UTF-8?q?post:=20=ED=8F=AC=EC=8A=A4=ED=8C=85=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...0\354\244\200 \353\206\222\354\235\264.md" | 43 ------ __posts/[Component] InputWithValidation.md | 139 ------------------ 2 files changed, 182 deletions(-) delete mode 100644 "__posts/[CSS] \352\260\200\353\241\234 \352\270\260\354\244\200 \353\206\222\354\235\264.md" delete mode 100644 __posts/[Component] InputWithValidation.md diff --git "a/__posts/[CSS] \352\260\200\353\241\234 \352\270\260\354\244\200 \353\206\222\354\235\264.md" "b/__posts/[CSS] \352\260\200\353\241\234 \352\270\260\354\244\200 \353\206\222\354\235\264.md" deleted file mode 100644 index 6968e11..0000000 --- "a/__posts/[CSS] \352\260\200\353\241\234 \352\270\260\354\244\200 \353\206\222\354\235\264.md" +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: '[CSS] 가로 기준 높이' -date: '2023-01-18 21:28:00' -description: '#snippet #css' -thumbnail: /thumbnails/hello-world.jpg -slug: 'test3' -keyword: 'height, width, ratio, Horizontal reference height snippet' ---- - -``` html - - - - Document - - - -
-
text
-
- - -``` - -### reference -- \ No newline at end of file diff --git a/__posts/[Component] InputWithValidation.md b/__posts/[Component] InputWithValidation.md deleted file mode 100644 index 77deb08..0000000 --- a/__posts/[Component] InputWithValidation.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: '[Component] InputWithValidation' -date: '2023-04-22 21:03:00' -description: '#snippet' -thumbnail: /thumbnails/hello-world.jpg -slug: 'test3' -keyword: 'React, Styled-Components' ---- - -### InputWithValidation.tsx -``` ts -import { HTMLAttributes, useState } from 'react'; -import styled, { FlattenSimpleInterpolation } from 'styled-components'; - -import { FlexBox, FlexBoxProps } from '^/layout/FlexBox'; - -type DivProps = HTMLAttributes; -type LabelProps = HTMLAttributes; -type InputProps = HTMLAttributes & { value: string; }; - -export const InputWithValidation = ({ - checkValidation, - cautionMessage, - placeholder, - handleValidatedValue, - handleInvalidatedValue, - cssOverrides, - elementProps, - value, -}: { - checkValidation: (value: string) => boolean; - handleValidatedValue?: (value: string) => void; - handleInvalidatedValue?: (value: string) => void; - cautionMessage: string; - placeholder: string; - value: string; - elementProps?: { - rootWrapper?: DivProps; - input?: InputProps; - message?: LabelProps; - }; - cssOverrides?: { - rootWrapper?: FlattenSimpleInterpolation; - input?: FlattenSimpleInterpolation; - messageWrapper?: FlattenSimpleInterpolation; - }; -}) => { - const [isValidationPassed, setIsValidationPassed] = useState(true); - - const onChangeInput = (event: React.ChangeEvent) => { - const { value: inputValue } = event.target; - - if (checkValidation(inputValue)) { - if (handleValidatedValue) handleValidatedValue(inputValue); - setIsValidationPassed(true); - - return; - } - - if (handleInvalidatedValue) handleInvalidatedValue(inputValue); - setIsValidationPassed(false); - }; - - return ( - - - - - - ); -}; - -type FlexBoxWithValidation = FlexBoxProps & { isValidationPassed?: boolean; }; - -const Input = styled.input` - all: unset; - - width: 100%; - height: 16px; - - outline: rgb(234, 234, 234) solid 1px; - border-radius: 5px; - padding: 15px; - - ${({ cssOverride }) => cssOverride}; -`; - -const Label = styled.label` - all: unset; - - overflow: hidden; - transition: max-height 0.3s; - max-height: ${({ isValidationPassed }) => (isValidationPassed ? '0' : '300px')}; - color: red; - - ${({ cssOverride }) => cssOverride}; -`; -``` - -### FlexBox.tsx -``` ts -import styled, { CSSProperties, FlattenSimpleInterpolation } from 'styled-components'; - -export type FlexBoxProps = { cssOverride?: FlattenSimpleInterpolation } & CSSProperties; - -export const FlexBox = styled.div` - display: flex; - flex-direction: ${({ flexDirection }) => flexDirection || 'row'}; - justify-content: ${({ justifyContent }) => justifyContent || 'flex-start'}; - align-items: ${({ alignItems }) => alignItems || 'flex-start'}; - gap: ${({ gap }) => gap || 0}; - flex: ${({ flex }) => flex || '0 1 auto'}; - align-self: ${({ alignSelf }) => alignSelf || 'auto'}; - - margin: ${({ margin }) => margin || 0}; - padding: ${({ padding }) => padding || 0}; - - width: ${({ width }) => width || 'auto%'}; - height: ${({ height }) => height || 'auto'}; - - ${({ cssOverride }) => cssOverride}; -`; -``` \ No newline at end of file