diff --git a/src/views/ApplyPage/components/CommonSection/index.tsx b/src/views/ApplyPage/components/CommonSection/index.tsx index c7404160..6816537d 100644 --- a/src/views/ApplyPage/components/CommonSection/index.tsx +++ b/src/views/ApplyPage/components/CommonSection/index.tsx @@ -3,6 +3,7 @@ import { Answers, Questions } from 'views/ApplyPage/types'; import { sectionContainer, title } from './style.css'; import FileInput from '../FileInput'; +import Info from '../Info'; import LinkInput from '../LinkInput'; interface CommonSectionProps { @@ -31,26 +32,29 @@ const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft return (
- + {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 4f88761d..876e0f38 100644 --- a/src/views/ApplyPage/components/PartSection/index.tsx +++ b/src/views/ApplyPage/components/PartSection/index.tsx @@ -6,6 +6,7 @@ import { Answers, Questions } from 'views/ApplyPage/types'; import { sectionContainer, title } from './style.css'; import FileInput from '../FileInput'; +import Info from '../Info'; import LinkInput from '../LinkInput'; interface PartSectionProps { @@ -63,26 +64,29 @@ const PartSection = ({ return (
- + {charLimit == null && } + {charLimit != null && ( + + )}
); })}