Skip to content

Commit 0970cf4

Browse files
ssi02014ssi02014
committed
feat: line Height + 폴더 구조 리팩토링
1 parent 9e33579 commit 0970cf4

File tree

15 files changed

+256
-233
lines changed

15 files changed

+256
-233
lines changed

‎src/components/Canvas/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ interface CanvasProps {
1010
const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
1111
const {
1212
value,
13+
lineHeight,
1314
canvasWidth,
1415
canvasHeight,
1516
fontSize,
@@ -85,10 +86,10 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
8586
lines: string[]
8687
) => {
8788
const size = +fontSize.replace('px', '');
88-
const lineHeight = size * 1.15;
89+
const fontLineHeight = size + +lineHeight;
8990

9091
lines.forEach((line, idx) => {
91-
const { x, y } = getMultiLinePosition(lines.length, lineHeight, idx);
92+
const { x, y } = getMultiLinePosition(lines.length, fontLineHeight, idx);
9293

9394
ctx.save();
9495
ctx.translate(x, y);

src/components/Divider.tsx renamed to src/components/Divider/index.tsx

File renamed without changes.

‎src/components/Inputs/RangeInput/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const RangeInput = ({
2828
<label htmlFor={name}>{label}</label>
2929
<S.StyledRangeInput
3030
type="range"
31+
name={name}
3132
min={min}
3233
max={max}
3334
value={value}

src/components/TGHeader.tsx renamed to src/components/Layout/Header/index.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from 'react';
2-
import { TGHeaderWrapper, TGLimitSizeText } from './TG.styled';
2+
import * as S from '../styled';
33
import { close } from '@assets/icons';
4-
import { IconButton } from './Icon/styled';
5-
import Icon from './Icon';
4+
import { IconButton } from '@components/Icon/styled';
5+
import Icon from '@components/Icon';
66

7-
interface TGHeaderProps {
7+
interface HeaderProps {
88
onToggle: () => void;
99
}
1010

11-
const TGHeader = ({ onToggle }: TGHeaderProps) => {
11+
const Header = ({ onToggle }: HeaderProps) => {
1212
const LimitWidthSize = window.innerWidth;
1313

1414
return (
15-
<TGHeaderWrapper>
15+
<S.HeaderWrapper>
1616
<div>
1717
<a
1818
href="https://github.com/ssi02014/react-thumbnail-generator"
@@ -24,11 +24,11 @@ const TGHeader = ({ onToggle }: TGHeaderProps) => {
2424
<Icon src={close} width={20} height={20} />
2525
</IconButton>
2626
</div>
27-
<TGLimitSizeText>
27+
<S.LimitSizeText>
2828
Limit Width: <span>{`${LimitWidthSize}px`}</span>
29-
</TGLimitSizeText>
30-
</TGHeaderWrapper>
29+
</S.LimitSizeText>
30+
</S.HeaderWrapper>
3131
);
3232
};
3333

34-
export default TGHeader;
34+
export default Header;

‎src/components/Layout/styled.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { getModalPosition } from '@utils/style';
2+
import styled from 'styled-components';
3+
4+
export const HeaderWrapper = styled.div`
5+
display: flex;
6+
position: sticky;
7+
top: 0;
8+
flex-direction: column;
9+
padding: 10px;
10+
padding-bottom: 0;
11+
background-color: #fff;
12+
13+
& > div:first-child {
14+
justify-content: space-between;
15+
align-items: center;
16+
display: flex;
17+
}
18+
19+
a {
20+
color: #111111;
21+
padding: 0;
22+
margin: 0;
23+
font-size: 0.875rem;
24+
font-weight: bold;
25+
text-decoration: none;
26+
27+
&:hover {
28+
color: #3264b5;
29+
}
30+
}
31+
32+
button {
33+
cursor: pointer;
34+
transition: transform 0.2s;
35+
&:hover {
36+
transform: rotate(90deg);
37+
}
38+
}
39+
`;
40+
41+
export const LimitSizeText = styled.div`
42+
font-size: 0.85rem;
43+
margin-top: 5px;
44+
text-align: center;
45+
46+
span {
47+
font-weight: bold;
48+
}
49+
`;
50+
51+
export const BodyWrapper = styled.section<{
52+
modalPosition: 'left' | 'right' | 'center';
53+
isFullWidth: boolean;
54+
}>`
55+
position: fixed;
56+
display: flex;
57+
justify-content: center;
58+
min-width: ${({ isFullWidth }) => (isFullWidth ? '100%' : '600px')};
59+
border-radius: 7px;
60+
box-shadow: 1px 1px 10px #cccccc;
61+
z-index: 9999;
62+
background-color: #ffffff;
63+
flex-direction: column;
64+
overflow: hidden;
65+
font-family: Arial;
66+
67+
* {
68+
box-sizing: border-box;
69+
}
70+
71+
${({ modalPosition }) => getModalPosition(modalPosition)}
72+
`;
73+
74+
export const InnerWrapper = styled.div`
75+
flex-direction: column;
76+
width: 100%;
77+
max-height: calc(100vh - 78px);
78+
overflow-y: scroll;
79+
overflow-x: auto;
80+
`;
81+
82+
export const ContentWrapper = styled.div`
83+
display: flex;
84+
justify-content: center;
85+
flex-direction: column;
86+
margin-bottom: 20px;
87+
88+
canvas + textarea {
89+
margin-top: 10px;
90+
}
91+
`;

src/components/TGPortal.tsx renamed to src/components/Portal/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useEffect, useState } from 'react';
22
import ReactDOM from 'react-dom';
33

4-
interface TGPortalProps {
4+
interface PortalProps {
55
id?: string;
66
children: React.ReactNode;
77
}
88

9-
const TGPortal = ({ id, children }: TGPortalProps) => {
9+
const Portal = ({ id, children }: PortalProps) => {
1010
const [portalElement, setPortalElement] = useState<Element | null>(null);
1111

1212
useEffect(() => {
@@ -17,4 +17,4 @@ const TGPortal = ({ id, children }: TGPortalProps) => {
1717
return ReactDOM.createPortal(children, portalElement);
1818
};
1919

20-
export default TGPortal;
20+
export default Portal;

src/components/TGSelectItem.tsx renamed to src/components/Select/SelectItem.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useContext } from 'react';
2-
import { SelectListItem } from './TG.styled';
3-
import { SelectContext } from './TGSelect';
2+
import * as S from './styled';
3+
import { SelectContext } from './index';
44

5-
interface TGSelectItemProps {
5+
interface SelectItemProps {
66
children: string;
77
value: string | number;
88
}
@@ -12,18 +12,18 @@ interface SelectContextProps {
1212
onChange: (value: string | number) => void;
1313
}
1414

15-
const TGSelectItem = ({ children, value }: TGSelectItemProps) => {
15+
const SelectItem = ({ children, value }: SelectItemProps) => {
1616
const { selectValue, onChange } = useContext(
1717
SelectContext
1818
) as SelectContextProps;
1919

2020
return (
21-
<SelectListItem
21+
<S.SelectListItem
2222
className={selectValue === value ? 'active' : ''}
2323
onClick={() => onChange(value)}>
2424
{children}
25-
</SelectListItem>
25+
</S.SelectListItem>
2626
);
2727
};
2828

29-
export default TGSelectItem;
29+
export default SelectItem;

src/components/TGSelect.tsx renamed to src/components/Select/index.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import React, {
66
useEffect,
77
ComponentProps,
88
} from 'react';
9-
import { SelectWrapper, SelectInput, SelectItemContainer } from './TG.styled';
10-
import Icon from './Icon';
9+
import * as S from './styled';
10+
import Icon from '../Icon';
1111

1212
interface SelectContextProps {
1313
color?: string;
@@ -28,7 +28,7 @@ export const SelectContext = React.createContext<SelectContextProps | null>(
2828
null
2929
);
3030

31-
const TGSelect = ({
31+
const Select = ({
3232
children,
3333
name,
3434
color,
@@ -70,9 +70,9 @@ const TGSelect = ({
7070
return (
7171
<SelectContext.Provider
7272
value={{ color, selectValue: value, onChange: handleChange }}>
73-
<SelectWrapper>
73+
<S.SelectWrapper>
7474
<label>{label}</label>
75-
<SelectInput
75+
<S.SelectInput
7676
ref={inputRef}
7777
onClick={handleToggleSelect}
7878
isOpenSelect={isOpenSelect}>
@@ -84,11 +84,13 @@ const TGSelect = ({
8484
<Icon src={arrowBottom} width={12} height={12} />
8585
)}
8686
</p>
87-
</SelectInput>
88-
{isOpenSelect && <SelectItemContainer>{children}</SelectItemContainer>}
89-
</SelectWrapper>
87+
</S.SelectInput>
88+
{isOpenSelect && (
89+
<S.SelectItemContainer>{children}</S.SelectItemContainer>
90+
)}
91+
</S.SelectWrapper>
9092
</SelectContext.Provider>
9193
);
9294
};
9395

94-
export default TGSelect;
96+
export default Select;

‎src/components/Select/styled.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import styled from 'styled-components';
2+
3+
// TG Select
4+
export const SelectWrapper = styled.div`
5+
position: relative;
6+
min-width: 150px;
7+
max-width: 150px;
8+
9+
label {
10+
font-size: 0.7rem;
11+
color: #969696;
12+
}
13+
`;
14+
15+
export const SelectInput = styled.div<{ isOpenSelect: boolean }>`
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
cursor: pointer;
20+
border: ${({ isOpenSelect }) =>
21+
isOpenSelect ? `1px solid #0e1b30` : `1px solid #cccccc`};
22+
border-radius: 5px;
23+
padding: 6px 12px;
24+
25+
p {
26+
margin: 0;
27+
display: flex;
28+
align-items: center;
29+
justify-content: center;
30+
font-size: 0.9rem;
31+
}
32+
33+
&:hover {
34+
border: 1px solid #0e1b30;
35+
}
36+
`;
37+
38+
export const SelectItemContainer = styled.ul`
39+
position: absolute;
40+
bottom: 20px;
41+
width: 100%;
42+
background-color: #fff;
43+
box-shadow: 0 0 3px 0.5px #afafaf;
44+
overflow-y: scroll;
45+
list-style: none;
46+
padding: 0;
47+
max-height: 200px;
48+
`;
49+
50+
export const SelectListItem = styled.li`
51+
cursor: pointer;
52+
padding: 10px 15px;
53+
font-size: 0.9rem;
54+
55+
&:hover {
56+
background-color: #ededed;
57+
}
58+
`;

0 commit comments

Comments
 (0)