From f4b1215c14afd4f38b4f23dcbd8c56f651b7bdbb Mon Sep 17 00:00:00 2001 From: Jeon Jinho Date: Wed, 24 Jan 2024 00:16:37 +0900 Subject: [PATCH] =?UTF-8?q?TextInput=20variations=20=EA=B5=AC=ED=98=84=20(?= =?UTF-8?q?#145)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Squashed commit of the following: commit d0659e053be7506a62d42dd80b38a5fc0a730bcc Merge: 3c9fe3e 12758be Author: Jeon Jinho Date: Tue Jan 23 17:28:08 2024 +0900 Merge pull request #144 from team-offonoff/fix/login-flow chore: add pr template commit 12758be2ce7be8d7c2ddfb30960efa4c28cc885b Merge: 415f022 3c9fe3e Author: Jeon Jinho Date: Tue Jan 23 17:26:00 2024 +0900 Merge branch 'dev' into fix/login-flow commit 3c9fe3efd764bee8cf718486ee469ea5a28f7d29 Merge: efac491 b4fd241 Author: Jeon Jinho Date: Tue Jan 23 16:45:28 2024 +0900 Merge pull request #143 from team-offonoff/Jinho1011-patch-1 chore: add pr template commit b4fd241b706d01d594ea31ea0d4f60df44f4e589 Author: Jeon Jinho Date: Tue Jan 23 16:05:13 2024 +0900 Create pull_request_template.md commit 415f0223176c812f0f2f37276eae33d982c7434d Author: 전진호 Date: Tue Jan 23 15:49:28 2024 +0900 feat: add term mutation api commit df7633d1ed91f39dc8a5cee808e07fd21c426e18 Author: 전진호 Date: Tue Jan 23 15:02:58 2024 +0900 feat: implements Terms component commit be6d63bc8397f91fb5afa1b5c9482d075a59a831 Author: 전진호 Date: Tue Jan 23 15:02:47 2024 +0900 feat: toggle 약관동의 bottomsheet on submit commit 3816501560e030d207b8db06b3c8cc6b8c33ff62 Author: 전진호 Date: Tue Jan 23 15:02:22 2024 +0900 feat: add transparent props commit 2bb734064017b16bb2bd54e2f00117eb3872fa20 Author: 전진호 Date: Tue Jan 23 15:02:12 2024 +0900 feat: add checkbox component commit e0610a8a2c1eb002858e015f99e7705e23a70802 Author: 전진호 Date: Tue Jan 23 15:01:59 2024 +0900 fix: add transparent props to bottomsheet commit e99a4bf8ed9b16e4b6cf713b6aa2ec786966f086 Author: 전진호 Date: Tue Jan 23 15:01:46 2024 +0900 feat: add check icon commit b292c8804c0c4c90115662cedac2a3a713d1bf5e Author: 전진호 Date: Mon Jan 22 22:48:06 2024 +0900 fix: genders value commit 36779a0da38e24c27f3a2facc1c4ad205e8194ea Author: 전진호 Date: Mon Jan 22 22:47:56 2024 +0900 fix: file name error commit 75ae65f160ddb4df4a96deae228fdf0055e0d88e Author: 전진호 Date: Mon Jan 22 20:52:04 2024 +0900 fix: remove funnel from signup commit a5ca53e0008ef0d44db8b68b0f3648443eb78f24 Author: 전진호 Date: Mon Jan 22 20:42:22 2024 +0900 feat: setUser when user is not newMember commit e7e237936da06fe7eb3bb103fc1c84fff7e93ebf Author: 전진호 Date: Mon Jan 22 20:42:00 2024 +0900 feat: add useAuthStore's user commit 5e1637b7729920a8a8a608db1806fcfc2c0ee51c Author: 전진호 Date: Mon Jan 22 20:41:27 2024 +0900 fix: make nickname optional commit f2c1b11d898bc6bd37693591184684739d0fbe8b Author: 전진호 Date: Mon Jan 22 20:41:08 2024 +0900 chore: add serve script commit ec39b940fc3643c89db98b4630e859ac6cd3b2b2 Author: 전진호 Date: Mon Jan 22 20:08:30 2024 +0900 feat: add user store commit 739256769a7174947aeba9cf136fc5ccd098915b Author: 전진호 Date: Mon Jan 22 18:17:14 2024 +0900 chore: add zustand commit f95bd5f435bf03a59e7cdc848cf7573f6c40489f Author: 전진호 Date: Mon Jan 22 17:44:43 2024 +0900 fix: navigate to signup when new member signed up * feat: add TextInput variations * fix: replace to theme --- src/assets/styles/theme.ts | 39 ------------------ .../commons/TextInput/TextInput.styles.tsx | 40 +++++++++---------- .../commons/TextInput/TextInput.tsx | 16 ++++---- src/components/commons/TextInput/theme.ts | 39 ++++++++++++++++++ src/routes/Topic/ATopicCreate.tsx | 3 +- src/routes/Topic/BTopicCreate.tsx | 3 +- 6 files changed, 70 insertions(+), 70 deletions(-) create mode 100644 src/components/commons/TextInput/theme.ts diff --git a/src/assets/styles/theme.ts b/src/assets/styles/theme.ts index 8dcd91d..a4d25c2 100644 --- a/src/assets/styles/theme.ts +++ b/src/assets/styles/theme.ts @@ -54,42 +54,3 @@ export const theme: DefaultTheme = { colors, zIndex, }; - -export const input = { - t1: { - default: { - border: `none`, - backgroundColor: '#342b52', - }, - error: { - border: `1px solid ${colors.purple2}`, - backgroundColor: '#342b52', - }, - }, - t2: { - default: { - fontSize: '2rem', - fontWeight: 400, - lineHeight: '140%', - padding: '0 0 10px 0', - border: 'none', - borderBottom: `1px solid ${colors.navy2}`, - backgroundColor: 'transparent', - borderRadius: 0, - outline: 'none', - }, - error: { - fontSize: '2rem', - fontWeight: 400, - lineHeight: '140%', - padding: '0 0 10px 0', - border: 'none', - borderBottom: `1px solid ${colors.purple2}`, - borderRadius: 0, - backgroundColor: 'transparent', - outline: 'none', - }, - }, -}; - -export type InputTypes = keyof typeof input; diff --git a/src/components/commons/TextInput/TextInput.styles.tsx b/src/components/commons/TextInput/TextInput.styles.tsx index 5b7450b..0e0c623 100644 --- a/src/components/commons/TextInput/TextInput.styles.tsx +++ b/src/components/commons/TextInput/TextInput.styles.tsx @@ -1,46 +1,46 @@ import { css, styled } from 'styled-components'; -const StyledInput = styled.input<{ hasLeft: boolean }>` +import { TextInputTheme } from './theme'; + +const StyledInput = styled.input<{ inputTheme: TextInputTheme }>` width: 100%; - padding: 14px 16px; font-size: 1.4rem; font-weight: 700; line-height: 1.4; color: ${({ theme }) => theme.colors.white}; - border-radius: 10px; - - ${({ hasLeft }) => - hasLeft && - css` - padding-left: 35px; - `} + appearance: none; + background-color: transparent; + border: none; &:focus { outline: none; } &::placeholder { - color: ${({ theme }) => theme.colors.purple}; + color: ${({ inputTheme }) => inputTheme.placeholderColor}; opacity: 0.6; } `; -const InputContainer = styled.div` +const InputContainer = styled.div<{ hasError: boolean; inputTheme: TextInputTheme }>` position: relative; + display: flex; + align-items: center; + justify-content: space-between; + padding: ${({ inputTheme }) => inputTheme.padding}; + background-color: ${({ inputTheme }) => inputTheme.backgroundColor}; + border-bottom: ${({ inputTheme, theme, hasError }) => + !inputTheme.rounded && `1px solid ${hasError ? theme.colors.purple2 : theme.colors.navy2}`}; + border-radius: ${({ inputTheme }) => inputTheme.rounded && '10px'}; + box-shadow: ${({ theme, inputTheme, hasError }) => + hasError && inputTheme.rounded && `0 0 0 1px ${theme.colors.purple2} inset`}; `; const InputPrefix = styled.div` - position: absolute; - top: 14px; - left: 16px; + margin-right: 10px; `; -const InputSuffix = styled.div` - position: absolute; - right: 16px; - bottom: calc(50% - 10px); - transform: translateY(-50%); -`; +const InputSuffix = styled.div``; const ErrorMessage = styled.div` position: absolute; diff --git a/src/components/commons/TextInput/TextInput.tsx b/src/components/commons/TextInput/TextInput.tsx index 5524da6..56d3201 100644 --- a/src/components/commons/TextInput/TextInput.tsx +++ b/src/components/commons/TextInput/TextInput.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { RegisterOptions, useFormContext } from 'react-hook-form'; -import { ConfigKeys, InputType } from 'src/constants/form'; +import { InputType } from 'src/constants/form'; -import { InputTypes, colors, input } from '@styles/theme'; +import { colors } from '@styles/theme'; import Text from '../Text/Text'; @@ -13,6 +13,7 @@ import { InputSuffix, StyledInput, } from './TextInput.styles'; +import { TextInputTheme, theme1 } from './theme'; interface TextInputProps extends React.InputHTMLAttributes { id: InputType; @@ -21,26 +22,23 @@ interface TextInputProps extends React.InputHTMLAttributes { left?: () => React.ReactNode; right?: () => React.ReactNode; onKeyDown?: (e: React.KeyboardEvent) => void; - theme?: InputTypes; + theme?: TextInputTheme; } const TextInput = (props: TextInputProps) => { - const { id, type = 'text', options, placeholder, left, right, onKeyDown, theme = 't1' } = props; + const { id, type = 'text', options, placeholder, left, right, onKeyDown, theme = theme1 } = props; const { register, formState: { errors }, } = useFormContext(); - const inputTheme = input[theme]; - return (
- + {left && {left()}} { id={INPUT_TYPE.TOPICTITLE} options={CONFIG.TOPICTITLE.options} placeholder={'제목을 입력해주세요.'} - theme="t2" + theme={theme2} right={() => ( {titleProgress} diff --git a/src/routes/Topic/BTopicCreate.tsx b/src/routes/Topic/BTopicCreate.tsx index 9c5c6aa..d52fda9 100644 --- a/src/routes/Topic/BTopicCreate.tsx +++ b/src/routes/Topic/BTopicCreate.tsx @@ -5,6 +5,7 @@ import { CONFIG, INPUT_TYPE } from 'src/constants/form'; import { Col } from '@components/commons/Flex/Flex'; import Text from '@components/commons/Text/Text'; import TextInput from '@components/commons/TextInput/TextInput'; +import { theme2 } from '@components/commons/TextInput/theme'; import { colors } from '@styles/theme'; @@ -35,7 +36,7 @@ const BTopicCreate = () => { id={INPUT_TYPE.TOPICTITLE} options={CONFIG.TOPICTITLE.options} placeholder={'제목을 입력해주세요.'} - theme="t2" + theme={theme2} right={() => ( {titleProgress}