From a8346b65f1ac79d6d731cfa29ddefbca79f55a91 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 30 Jul 2024 03:19:10 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20part=20=EC=A7=80=EC=9B=90=EC=84=9C?= =?UTF-8?q?=20=EC=95=88=EB=82=B4=EA=B8=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PartSection/index.tsx | 53 +++++++++++-------- .../components/PartSection/style.css.ts | 14 +++++ 2 files changed, 46 insertions(+), 21 deletions(-) diff --git a/src/views/ApplyPage/components/PartSection/index.tsx b/src/views/ApplyPage/components/PartSection/index.tsx index 4f88761d..9d04d3c3 100644 --- a/src/views/ApplyPage/components/PartSection/index.tsx +++ b/src/views/ApplyPage/components/PartSection/index.tsx @@ -4,7 +4,7 @@ import SelectBox from '@components/Select'; import Textarea from '@components/Textarea'; import { Answers, Questions } from 'views/ApplyPage/types'; -import { sectionContainer, title } from './style.css'; +import { partInfo, partInfoWrapper, sectionContainer, title } from './style.css'; import FileInput from '../FileInput'; import LinkInput from '../LinkInput'; @@ -63,26 +63,37 @@ const PartSection = ({ return (
- + {charLimit == null && ( +
+ {value.split('\n').map((text) => ( +

+ · {text} +

+ ))} +
+ )} + {charLimit != null && ( + + )}
); })} diff --git a/src/views/ApplyPage/components/PartSection/style.css.ts b/src/views/ApplyPage/components/PartSection/style.css.ts index 5a7d6e71..faf1b777 100644 --- a/src/views/ApplyPage/components/PartSection/style.css.ts +++ b/src/views/ApplyPage/components/PartSection/style.css.ts @@ -13,3 +13,17 @@ export const title = style({ ...theme.font.TITLE_2_28_SB, color: theme.color.baseText, }); + +export const partInfoWrapper = style({ + display: 'flex', + flexDirection: 'column', + gap: 16, + margin: '20px 0 50px', +}); + +export const partInfo = style({ + color: theme.color.lighterText, + ...theme.font.BODY_1_18_M, + whiteSpace: 'pre-line', + letterSpacing: '-0.27px', +}); From fed17c6701f643ae5287360e2003b9be592ed963 Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 30 Jul 2024 03:20:54 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PartSection/index.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/views/ApplyPage/components/PartSection/index.tsx b/src/views/ApplyPage/components/PartSection/index.tsx index 9d04d3c3..808b1376 100644 --- a/src/views/ApplyPage/components/PartSection/index.tsx +++ b/src/views/ApplyPage/components/PartSection/index.tsx @@ -8,6 +8,18 @@ import { partInfo, partInfoWrapper, sectionContainer, title } from './style.css' import FileInput from '../FileInput'; import LinkInput from '../LinkInput'; +const PartInfo = ({ value }: { value: string }) => { + return ( +
+ {value.split('\n').map((text) => ( +

+ · {text} +

+ ))} +
+ ); +}; + interface PartSectionProps { isReview: boolean; refCallback: (elem: HTMLSelectElement) => void; @@ -63,15 +75,7 @@ const PartSection = ({ return (
- {charLimit == null && ( -
- {value.split('\n').map((text) => ( -

- · {text} -

- ))} -
- )} + {charLimit == null && } {charLimit != null && ( + {charLimit == null && } + {charLimit != null && ( + + )}
); })} diff --git a/src/views/ApplyPage/components/Info/index.tsx b/src/views/ApplyPage/components/Info/index.tsx new file mode 100644 index 00000000..1b4c23ef --- /dev/null +++ b/src/views/ApplyPage/components/Info/index.tsx @@ -0,0 +1,15 @@ +import { container, info } from './style.css'; + +const Info = ({ value }: { value: string }) => { + return ( +
+ {value.split('\n').map((text) => ( +

+ {text && <>·} {text} +

+ ))} +
+ ); +}; + +export default Info; diff --git a/src/views/ApplyPage/components/Info/style.css.ts b/src/views/ApplyPage/components/Info/style.css.ts new file mode 100644 index 00000000..9871da10 --- /dev/null +++ b/src/views/ApplyPage/components/Info/style.css.ts @@ -0,0 +1,17 @@ +import { style } from '@vanilla-extract/css'; + +import { theme } from 'styles/theme.css'; + +export const container = style({ + display: 'flex', + flexDirection: 'column', + gap: 16, + margin: '20px 0 50px', +}); + +export const info = style({ + color: theme.color.lighterText, + ...theme.font.BODY_1_18_M, + whiteSpace: 'pre-line', + letterSpacing: '-0.27px', +}); diff --git a/src/views/ApplyPage/components/PartSection/index.tsx b/src/views/ApplyPage/components/PartSection/index.tsx index b79722d8..876e0f38 100644 --- a/src/views/ApplyPage/components/PartSection/index.tsx +++ b/src/views/ApplyPage/components/PartSection/index.tsx @@ -4,22 +4,11 @@ import SelectBox from '@components/Select'; import Textarea from '@components/Textarea'; import { Answers, Questions } from 'views/ApplyPage/types'; -import { partInfo, partInfoWrapper, sectionContainer, title } from './style.css'; +import { sectionContainer, title } from './style.css'; import FileInput from '../FileInput'; +import Info from '../Info'; import LinkInput from '../LinkInput'; -const PartInfo = ({ value }: { value: string }) => { - return ( -
- {value.split('\n').map((text) => ( -

- {text && <>·} {text} -

- ))} -
- ); -}; - interface PartSectionProps { isReview: boolean; refCallback: (elem: HTMLSelectElement) => void; @@ -75,7 +64,7 @@ const PartSection = ({ return (
- {charLimit == null && } + {charLimit == null && } {charLimit != null && (