[Feat] 파트 안내 메세지 추가 (#270)

* feat: part 지원서 안내글 기능 추가 * refactor: 컴포넌트 분리 * fix: 텍스트가 있을 때만 왼쪽 점 표시 해주기 * feat: 공통 질문에 대한 안내 기능도 추가
sopt-makers · Jul 29, 2024 · 1baa595 · 1baa595
1 parent 9541494
commit 1baa595
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 40 deletions.
diff --git 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 (
           <div key={value}>
-            <Textarea
-              name={`common${id}`}
-              defaultValue={defaultValue}
-              maxCount={charLimit}
-              placeholder={
-                isFile
-                  ? '링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)'
-                  : ''
-              }
-              extraInput={
-                isFile ? (
-                  <FileInput section="common" id={id} isReview={isReview} defaultFile={defaultFile} />
-                ) : urls ? (
-                  <LinkInput urls={urls} />
-                ) : null
-              }
-              required
-              disabled={isReview}>
-              {value}
-            </Textarea>
+            {charLimit == null && <Info value={value} />}
+            {charLimit != null && (
+              <Textarea
+                name={`common${id}`}
+                defaultValue={defaultValue}
+                maxCount={charLimit}
+                placeholder={
+                  isFile
+                    ? '링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)'
+                    : ''
+                }
+                extraInput={
+                  isFile ? (
+                    <FileInput section="common" id={id} isReview={isReview} defaultFile={defaultFile} />
+                  ) : urls ? (
+                    <LinkInput urls={urls} />
+                  ) : null
+                }
+                required
+                disabled={isReview}>
+                {value}
+              </Textarea>
+            )}
           </div>
         );
       })}

diff --git a/src/views/ApplyPage/components/Info/index.tsx b/src/views/ApplyPage/components/Info/index.tsx
@@ -0,0 +1,15 @@
+import { container, info } from './style.css';
+
+const Info = ({ value }: { value: string }) => {
+  return (
+    <article className={container}>
+      {value.split('\n').map((text) => (
+        <p className={info} key={text}>
+          {text && <>&#183;</>} {text}
+        </p>
+      ))}
+    </article>
+  );
+};
+
+export default Info;
diff --git a/src/views/ApplyPage/components/Info/style.css.ts 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
@@ -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 (
           <div key={value}>
-            <Textarea
-              name={`part${id}`}
-              defaultValue={defaultValue}
-              maxCount={charLimit}
-              placeholder={
-                isFile
-                  ? '링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)'
-                  : ''
-              }
-              extraInput={
-                isFile ? (
-                  <FileInput section="part" id={id} isReview={isReview} defaultFile={defaultFile} />
-                ) : urls ? (
-                  <LinkInput urls={urls} />
-                ) : null
-              }
-              required
-              disabled={isReview}>
-              {value}
-            </Textarea>
+            {charLimit == null && <Info value={value} />}
+            {charLimit != null && (
+              <Textarea
+                name={`part${id}`}
+                defaultValue={defaultValue}
+                maxCount={charLimit}
+                placeholder={
+                  isFile
+                    ? '링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)'
+                    : ''
+                }
+                extraInput={
+                  isFile ? (
+                    <FileInput section="part" id={id} isReview={isReview} defaultFile={defaultFile} />
+                  ) : urls ? (
+                    <LinkInput urls={urls} />
+                  ) : null
+                }
+                required
+                disabled={isReview}>
+                {value}
+              </Textarea>
+            )}
           </div>
         );
       })}