Skip to content

Commit

Permalink
TextInput variations 구현 (#145)
Browse files Browse the repository at this point in the history 
* Squashed commit of the following:

commit d0659e0
Merge: 3c9fe3e 12758be
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 17:28:08 2024 +0900

    Merge pull request #144 from team-offonoff/fix/login-flow

    chore: add pr template

commit 12758be
Merge: 415f022 3c9fe3e
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 17:26:00 2024 +0900

    Merge branch 'dev' into fix/login-flow

commit 3c9fe3e
Merge: efac491 b4fd241
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 16:45:28 2024 +0900

    Merge pull request #143 from team-offonoff/Jinho1011-patch-1

    chore: add pr template

commit b4fd241
Author: Jeon Jinho <[email protected]>
Date:   Tue Jan 23 16:05:13 2024 +0900

    Create pull_request_template.md

commit 415f022
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:49:28 2024 +0900

    feat: add term mutation api

commit df7633d
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:58 2024 +0900

    feat: implements Terms component

commit be6d63b
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:47 2024 +0900

    feat: toggle 약관동의 bottomsheet on submit

commit 3816501
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:22 2024 +0900

    feat: add transparent props

commit 2bb7340
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:02:12 2024 +0900

    feat: add checkbox component

commit e0610a8
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:01:59 2024 +0900

    fix: add transparent props to bottomsheet

commit e99a4bf
Author: 전진호 <[email protected]>
Date:   Tue Jan 23 15:01:46 2024 +0900

    feat: add check icon

commit b292c88
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 22:48:06 2024 +0900

    fix: genders value

commit 36779a0
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 22:47:56 2024 +0900

    fix: file name error

commit 75ae65f
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:52:04 2024 +0900

    fix: remove funnel from signup

commit a5ca53e
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:42:22 2024 +0900

    feat: setUser when user is not newMember

commit e7e2379
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:42:00 2024 +0900

    feat: add useAuthStore's user

commit 5e1637b
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:41:27 2024 +0900

    fix: make nickname optional

commit f2c1b11
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:41:08 2024 +0900

    chore: add serve script

commit ec39b94
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 20:08:30 2024 +0900

    feat: add user store

commit 7392567
Author: 전진호 <[email protected]>
Date:   Mon Jan 22 18:17:14 2024 +0900

    chore: add zustand

commit f95bd5f
Author: 전진호 <[email protected]>
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
  • Loading branch information
@Jinho1011
Jinho1011 authored Jan 23, 2024
1 parent d0659e0 commit f4b1215
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 70 deletions.
39 changes: 0 additions & 39 deletions src/assets/styles/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
40 changes: 20 additions & 20 deletions src/components/commons/TextInput/TextInput.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
16 changes: 7 additions & 9 deletions src/components/commons/TextInput/TextInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -13,6 +13,7 @@ import {
InputSuffix,
StyledInput,
} from './TextInput.styles';
import { TextInputTheme, theme1 } from './theme';

interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
id: InputType;
Expand All @@ -21,26 +22,23 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
left?: () => React.ReactNode;
right?: () => React.ReactNode;
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => 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 (
<div style={{ position: 'relative', width: '100%' }}>
<InputContainer>
<InputContainer inputTheme={theme} hasError={!!errors[id]}>
{left && <InputPrefix>{left()}</InputPrefix>}
<StyledInput
hasLeft={left !== undefined}
inputTheme={theme}
type={type}
style={{ ...(errors[id] ? inputTheme.error : inputTheme.default) }}
placeholder={placeholder}
{...register(id, options)}
onKeyDown={onKeyDown}
Expand Down
39 changes: 39 additions & 0 deletions src/components/commons/TextInput/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { CSSProperties } from 'react';

import { colors } from '@styles/theme';

export interface TextInputTheme {
padding: CSSProperties['padding'];
rounded: boolean;
fontSize: CSSProperties['fontSize'];
fontWeight: CSSProperties['fontWeight'];
backgroundColor: CSSProperties['backgroundColor'];
placeholderColor: CSSProperties['color'];
}

export const theme1: TextInputTheme = {
padding: '14px 16px',
rounded: true,
fontSize: '1.4rem',
fontWeight: 600,
backgroundColor: colors.navy2_40,
placeholderColor: colors.purple,
};

export const theme2: TextInputTheme = {
padding: '16px',
rounded: true,
fontSize: '1.6rem',
fontWeight: 500,
backgroundColor: colors.navy2_40,
placeholderColor: colors.purple2,
};

export const theme3: TextInputTheme = {
padding: '10px 0',
rounded: false,
fontSize: '2rem',
fontWeight: 400,
backgroundColor: 'transparent',
placeholderColor: colors.purple2,
};
3 changes: 2 additions & 1 deletion src/routes/Topic/ATopicCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import DefaultButton from '@components/commons/Button/DefaultButton';
import { Col, Row } 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 TopicCreateTextInput from '@components/TopicCreate/TopicCreateTextInput';

import { colors } from '@styles/theme';
Expand Down Expand Up @@ -41,7 +42,7 @@ const ATopicCreate = () => {
id={INPUT_TYPE.TOPICTITLE}
options={CONFIG.TOPICTITLE.options}
placeholder={'제목을 입력해주세요.'}
theme="t2"
theme={theme2}
right={() => (
<Text style={{ opacity: 0.6 }} size={15} weight={400} color={colors.purple}>
{titleProgress}
Expand Down
3 changes: 2 additions & 1 deletion src/routes/Topic/BTopicCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -35,7 +36,7 @@ const BTopicCreate = () => {
id={INPUT_TYPE.TOPICTITLE}
options={CONFIG.TOPICTITLE.options}
placeholder={'제목을 입력해주세요.'}
theme="t2"
theme={theme2}
right={() => (
<Text style={{ opacity: 0.6 }} size={15} weight={400} color={colors.purple}>
{titleProgress}
Expand Down

0 comments on commit f4b1215

Please sign in to comment.