[FEATURE] 지원하기 탭 UI 수정

sopt-makers · Nov 27, 2024 · 807cf9f · 807cf9f
2 parents 69cc330 + 342495b
commit 807cf9f
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git a/src/components/org/OrgAdmin/RecruitSection/Fna.tsx b/src/components/org/OrgAdmin/RecruitSection/Fna.tsx
@@ -40,6 +40,7 @@ const Fna = () => {
             topAddon={{
               labelText: '질문1',
             }}
+            required
             fixedHeight={74}
             maxHeight={74}
             placeholder="질문을 입력해주세요."
@@ -56,6 +57,7 @@ const Fna = () => {
             {...register(`recruitQuestion_${selectedPart}_questions_0_answer`, {
               required: true && VALIDATION_CHECK.required.errorText,
             })}
+            required
             fixedHeight={74}
             maxHeight={74}
             placeholder="답변을 입력해주세요."
@@ -80,6 +82,7 @@ const Fna = () => {
             topAddon={{
               labelText: '질문2',
             }}
+            required
             fixedHeight={74}
             maxHeight={74}
             placeholder="질문을 입력해주세요."
@@ -96,6 +99,7 @@ const Fna = () => {
             {...register(`recruitQuestion_${selectedPart}_questions_1_answer`, {
               required: true && VALIDATION_CHECK.required.errorText,
             })}
+            required
             fixedHeight={74}
             maxHeight={74}
             placeholder="답변을 입력해주세요."
@@ -120,6 +124,7 @@ const Fna = () => {
             topAddon={{
               labelText: '질문3',
             }}
+            required
             fixedHeight={74}
             maxHeight={74}
             placeholder="질문을 입력해주세요."

diff --git a/src/components/org/OrgAdmin/RecruitSection/Header.tsx b/src/components/org/OrgAdmin/RecruitSection/Header.tsx
@@ -1,7 +1,14 @@
 import { useFormContext } from 'react-hook-form';
 
+import RequiredIcon from '../assets/RequiredIcon';
 import MyDropzone from '../MyDropzone';
-import { StDescription, StTitle, StTitleWrapper, StWrapper } from '../style';
+import {
+  StDescription,
+  StLabel,
+  StTitle,
+  StTitleWrapper,
+  StWrapper,
+} from '../style';
 import { StLabelWrapper } from './style';
 
 const Header = () => {
@@ -10,8 +17,11 @@ const Header = () => {
   return (
     <StWrapper>
       <StTitleWrapper>
-        <StTitle>헤더</StTitle>
-        <StLabelWrapper>이미지</StLabelWrapper>
+        <StTitle>지원하기탭 헤더</StTitle>
+        <StLabelWrapper>
+          <StLabel>이미지</StLabel>
+          <RequiredIcon />
+        </StLabelWrapper>
         <StDescription>
           이미지는 1920*580 크기로 올려주세요. ‘지원하기’탭 가장 상단에 보여지는
           이미지예요.

diff --git a/src/components/org/OrgAdmin/RecruitSection/PartCurriculum.tsx b/src/components/org/OrgAdmin/RecruitSection/PartCurriculum.tsx
@@ -22,7 +22,7 @@ const PartCurriculum = () => {
   return (
     <StWrapper>
       <StTitleWrapper>
-        <StTitle>파트별 인재상</StTitle>
+        <StTitle>파트별 소개</StTitle>
       </StTitleWrapper>
       <PartCategory
         selectedPart={selectedPart}
@@ -36,6 +36,7 @@ const PartCurriculum = () => {
           topAddon={{
             labelText: `${selectedPart} 파트는 이런 걸 배워요.`,
           }}
+          required
           fixedHeight={158}
           maxHeight={158}
           placeholder="파트별 설명을 작성해주세요."
@@ -55,6 +56,7 @@ const PartCurriculum = () => {
           topAddon={{
             labelText: '이런 분이면 좋아요!',
           }}
+          required
           fixedHeight={230}
           maxHeight={230}
           placeholder={`파트별 인재상을 작성해주세요.

diff --git a/src/components/org/OrgAdmin/RecruitSection/style.ts b/src/components/org/OrgAdmin/RecruitSection/style.ts
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
-import { StLabel } from '../style';
-
-export const StLabelWrapper = styled(StLabel)`
-  display: inline-block;
+export const StLabelWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
   margin: 30px 0px 8px;
 `;
 

diff --git a/src/components/org/OrgAdmin/assets/RequiredIcon.tsx b/src/components/org/OrgAdmin/assets/RequiredIcon.tsx
@@ -0,0 +1,17 @@
+const RequiredIcon = () => {
+  return (
+    <svg
+      width="7"
+      height="7"
+      viewBox="0 0 7 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.41 3.008L6.314 2.392L6.678 3.54L4.788 4.142L6.02 5.822L5.068 6.564L3.822 4.856L2.562 6.564L1.638 5.808L2.856 4.142L0.952 3.54L1.33 2.392L3.22 3.008L3.206 0.964H4.424L4.41 3.008Z"
+        fill="#F77234"
+      />
+    </svg>
+  );
+};
+
+export default RequiredIcon;