Skip to content

Commit 49ecb89

Browse files
Hain-tainHain-tain
authored
Merge pull request #234 from Jaymyong66/refactor/layout_padding
레이아웃에 헤더 높이 만큼 padding-top 적용, Input style rem값 변경
2 parents d4465ed + c4b8d54 commit 49ecb89

File tree

8 files changed

+67
-33
lines changed

8 files changed

+67
-33
lines changed

‎frontend/src/components/Input/style.ts ‎frontend/src/components/Input/Input.style.ts

+28-20
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@ import type { BaseProps, TextFieldProps } from './Input';
55

66
const sizes = {
77
small: css`
8-
gap: 0.8rem;
8+
gap: 0.5rem;
99
10-
height: 3.2rem;
11-
padding: 1rem 1.2rem;
10+
height: 2rem;
11+
padding: 0.625rem 0.75rem;
1212
13-
font-size: 1.2rem;
13+
font-size: 0.75rem;
1414
line-height: 100%;
1515
16-
border-radius: '0.8rem';
16+
border-radius: 8px;
1717
`,
1818
medium: css`
19-
gap: 1.2rem;
19+
gap: 0.75rem;
2020
21-
height: 4.8rem;
22-
padding: 1.6rem;
21+
height: 3rem;
22+
padding: 1rem;
2323
24-
font-size: 1.6rem;
25-
line-height: '100%';
24+
font-size: 1rem;
25+
line-height: 100%;
2626
27-
border-radius: 1.2rem;
27+
border-radius: 12px;
2828
`,
2929
};
3030

@@ -34,17 +34,18 @@ const variants = {
3434
`,
3535
outlined: css`
3636
background: none;
37-
border: 0.1rem solid #808080;
37+
border: 1px solid #808080;
3838
`,
3939
text: css`
4040
background: none;
4141
`,
4242
};
4343

44-
export const Wrapper = styled.div`
44+
export const Container = styled.div`
4545
display: flex;
4646
flex-direction: column;
47-
gap: 8px;
47+
gap: 0.5rem;
48+
width: 100%;
4849
`;
4950

5051
export const Base = styled.div<BaseProps>`
@@ -56,23 +57,23 @@ export const Base = styled.div<BaseProps>`
5657
${({ isValid }) =>
5758
isValid === false &&
5859
css`
59-
border: 0.1rem solid red;
60+
border: 1px solid red;
6061
`};
6162
6263
/* for Adornment size */
6364
& > div {
6465
${({ size }) =>
6566
size === 'small' &&
6667
css`
67-
width: 1.2rem;
68-
height: 1.2rem;
68+
width: 0.75rem;
69+
height: 0.75rem;
6970
`}
7071
7172
${({ size }) =>
7273
size === 'medium' &&
7374
css`
74-
width: 1.6rem;
75-
height: 1.6rem;
75+
width: 1rem;
76+
height: 1rem;
7677
`}
7778
}
7879
`;
@@ -102,11 +103,18 @@ export const TextField = styled.input<TextFieldProps>`
102103
}
103104
`;
104105

106+
export const Label = styled.label`
107+
font-size: 1rem;
108+
line-height: 100%;
109+
`;
110+
105111
export const Adornment = styled.div`
106112
display: flex;
107113
`;
108114

109115
export const HelperText = styled.span`
110-
margin-left: 8px;
116+
height: 1rem;
117+
margin-left: 0.5rem;
118+
font-size: 1rem;
111119
color: red;
112120
`;

‎frontend/src/components/Input/Input.tsx

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1-
import { Children, HTMLAttributes, InputHTMLAttributes, isValidElement, PropsWithChildren, ReactNode } from 'react';
1+
import {
2+
Children,
3+
HTMLAttributes,
4+
InputHTMLAttributes,
5+
isValidElement,
6+
LabelHTMLAttributes,
7+
PropsWithChildren,
8+
ReactNode,
9+
} from 'react';
210

3-
import * as S from './style';
11+
import * as S from './Input.style';
412

513
export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
614
size?: 'small' | 'medium';
@@ -10,6 +18,9 @@ export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
1018
export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
1119
inputSize?: 'small' | 'medium';
1220
}
21+
22+
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
23+
1324
export interface AdornmentProps extends HTMLAttributes<HTMLDivElement> {}
1425

1526
export interface HelperTextProps extends HTMLAttributes<HTMLSpanElement> {}
@@ -20,14 +31,16 @@ const getChildOfType = (children: ReactNode, type: unknown) => {
2031
return childrenArray.find((child) => isValidElement(child) && child.type === type);
2132
};
2233

23-
const getChildrenWithoutType = (children: ReactNode, type: unknown) => {
34+
const getChildrenWithoutTypes = (children: ReactNode, types: unknown[]) => {
2435
const childrenArray = Children.toArray(children);
2536

26-
return childrenArray.filter((child) => !(isValidElement(child) && child.type === type));
37+
return childrenArray.filter((child) => !(isValidElement(child) && types.includes(child.type)));
2738
};
2839

2940
const TextField = ({ ...rests }: TextFieldProps) => <S.TextField {...rests} />;
3041

42+
const Label = ({ children, ...rests }: PropsWithChildren<LabelProps>) => <S.Label {...rests}>{children}</S.Label>;
43+
3144
const Adornment = ({ children, ...rests }: PropsWithChildren<AdornmentProps>) => (
3245
<S.Adornment {...rests}>{children}</S.Adornment>
3346
);
@@ -37,6 +50,7 @@ const HelperText = ({ children, ...rests }: PropsWithChildren<HelperTextProps>)
3750
);
3851

3952
const HelperTextType = (<HelperText />).type;
53+
const LabelType = (<Label />).type;
4054

4155
const Base = ({
4256
variant = 'filled',
@@ -45,21 +59,24 @@ const Base = ({
4559
children,
4660
...rests
4761
}: PropsWithChildren<BaseProps>) => {
48-
const inputWithAdornment = getChildrenWithoutType(children, HelperTextType);
62+
const inputWithAdornment = getChildrenWithoutTypes(children, [HelperTextType, LabelType]);
4963
const helperText = getChildOfType(children, HelperTextType);
64+
const label = getChildOfType(children, LabelType);
5065

5166
return (
52-
<S.Wrapper>
67+
<S.Container>
68+
{label}
5369
<S.Base variant={variant} size={size} isValid={isValid} {...rests}>
5470
{inputWithAdornment}
5571
</S.Base>
5672
{helperText}
57-
</S.Wrapper>
73+
</S.Container>
5874
);
5975
};
6076

6177
const Input = Object.assign(Base, {
6278
TextField,
79+
Label,
6380
Adornment,
6481
HelperText,
6582
});

‎frontend/src/components/Layout/style.ts ‎frontend/src/components/Layout/Layout.style.ts

+7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import styled from '@emotion/styled';
22

33
export const LayoutContainer = styled.div`
4+
--header-height: 4rem;
5+
46
max-width: 86rem;
57
margin: auto;
68
margin-bottom: 3rem;
79
padding: 0 3rem;
810
`;
11+
12+
export const Wrapper = styled.div`
13+
flex: 1;
14+
padding-top: var(--header-height);
15+
`;

‎frontend/src/components/Layout/Layout.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Outlet } from 'react-router-dom';
22

33
import { Header } from '@/components';
4-
import * as S from './style';
4+
import * as S from './Layout.style';
55

66
const Layout = () => (
77
<S.LayoutContainer>
88
<Header />
9-
<Outlet />
9+
<S.Wrapper>
10+
<Outlet />
11+
</S.Wrapper>
1012
</S.LayoutContainer>
1113
);
1214

‎frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
8383
};
8484

8585
return (
86-
<Flex direction='column' align='center' padding='10rem 0 0 0' width='100%'>
86+
<Flex direction='column' align='center' width='100%'>
8787
<S.MainContainer>
8888
<TemplateTitleInput
8989
placeholder='템플릿명을 입력해주세요'

‎frontend/src/pages/TemplateListPage/TemplateListPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const TemplateListPage = () => {
1717
const list = data?.templates || [];
1818

1919
return (
20-
<Flex direction='column' justify='flex-start' align='flex-end' width='100%' padding='10rem 0 0 0' gap='3.6rem'>
20+
<Flex direction='column' justify='flex-start' align='flex-end' width='100%' gap='3.6rem'>
2121
<Text.Medium color='white' weight='bold'>
2222
{list.length} Results
2323
</Text.Medium>

‎frontend/src/pages/TemplatePage/TemplatePage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const TemplatePage = () => {
8484
{isEdit ? (
8585
<TemplateEditPage template={template} toggleEditButton={toggleEditButton} />
8686
) : (
87-
<Flex direction='column' align='center' padding='10rem 0 0 0' width='100%'>
87+
<Flex direction='column' align='center' width='100%'>
8888
<S.MainContainer>
8989
<Flex justify='space-between'>
9090
<Flex direction='column' gap='1.6rem'>

‎frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const TemplateUploadPage = () => {
7070

7171
return (
7272
<>
73-
<Flex direction='column' justify='center' align='flex-start' gap='1.5rem' padding='10rem 0'>
73+
<Flex direction='column' justify='center' align='flex-start' gap='1.5rem'>
7474
<Flex direction='column' justify='center' align='flex-start' gap='1rem' width='100%'>
7575
<TemplateTitleInput
7676
placeholder='템플릿명을 입력해주세요'

0 commit comments

Comments
 (0)