[FEATURE] 공통 Modal 구현 및 적용, 홈 & 소개 탭 UI 수정사항 반영 (#164)

* design: 소개탭 헤더 수정 * design: 핵심 가치 수정 * design: 커리큘럼, 임원진 ㅅ정 * design: 간단한 디자인 수정사항 반영 * feat: 소개탭 헤더 Info Modal 구현 * feat: Modal 컴포넌트, 스타일, 훅 공통으로 분리 * fix: Modal 공통 컴포넌트 다시 제대로 분리 * feat: 공통 Modal 공통 '서브컬러'에 적용 * move: home 디렉토리->HomeSection으로 이름 변경 * feat: 홈 Modal '파트별소개', '최신소식' 연결 * design: 주용오빠 뷰 변경사항 반영 * feat: 지원하기탭 헤더에 공통모달 적용 * fix: 코드리뷰 반영
sopt-makers · Dec 2, 2024 · 109930c · 109930c
1 parent 1a14aec
commit 109930c
Show file tree

Hide file tree

Showing 36 changed files with 397 additions and 155 deletions.
diff --git a/public/images/org/imgAboutHeaderInfo.png b/public/images/org/imgAboutHeaderInfo.png
diff --git a/src/assets/img/latestNewsSample.png → public/images/org/imgLatestNewsInfo.png b/src/assets/img/latestNewsSample.png → public/images/org/imgLatestNewsInfo.png
diff --git a/src/assets/img/partIntroduceSample.png → public/images/org/imgPartInfo.png b/src/assets/img/partIntroduceSample.png → public/images/org/imgPartInfo.png
diff --git a/public/images/org/imgRecruitHeaderInfo.png b/public/images/org/imgRecruitHeaderInfo.png
diff --git a/public/images/org/imgSubColorInfo.png b/public/images/org/imgSubColorInfo.png
diff --git a/src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx b/src/components/org/OrgAdmin/AboutSection/CoreValue/index.tsx
@@ -2,6 +2,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { VALIDATION_CHECK } from '@/utils/org';
 
+import RequiredIcon from '../../assets/RequiredIcon';
 import MyDropzone from '../../MyDropzone';
 import {
   StDescription,
@@ -22,7 +23,10 @@ const CoreValue = () => {
     <StWrapper>
       <StTitle>핵심 가치</StTitle>
       <StValueWrapper>
-        <StInputLabel>핵심 가치1</StInputLabel>
+        <StInputLabel>
+          <span>핵심 가치 1</span>
+          <RequiredIcon />
+        </StInputLabel>
         <StDescription>이미지는 380x323으로 올려주세요.</StDescription>
         <StInputWrapper>
           <MyDropzone
@@ -41,6 +45,7 @@ const CoreValue = () => {
                 (errors as any).coreValue1?.value?.message as string
               }
               labelText="가치"
+              required
               placeholder="ex. 용기"
             />
             <StInput
@@ -54,14 +59,18 @@ const CoreValue = () => {
                 (errors as any).coreValue1?.description?.message as string
               }
               labelText="가치 설명"
+              required
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
             />
           </StInputBox>
         </StInputWrapper>
       </StValueWrapper>
       <StValueWrapper>
-        <StInputLabel>핵심 가치2</StInputLabel>
+        <StInputLabel>
+          <span>핵심 가치 2</span>
+          <RequiredIcon />
+        </StInputLabel>
         <StDescription>이미지는 380x323으로 올려주세요.</StDescription>
         <StInputWrapper>
           <MyDropzone
@@ -81,6 +90,7 @@ const CoreValue = () => {
               }
               labelText="가치"
               placeholder="ex. 몰입"
+              required
             />
             <StInput
               {...register('coreValue2.description', {
@@ -95,12 +105,16 @@ const CoreValue = () => {
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 포기하지 않고 깊이 몰입하는 사람"
+              required
             />
           </StInputBox>
         </StInputWrapper>
       </StValueWrapper>
       <StValueWrapper>
-        <StInputLabel>핵심 가치3</StInputLabel>
+        <StInputLabel>
+          <span>핵심 가치 3</span>
+          <RequiredIcon />
+        </StInputLabel>
         <StDescription>이미지는 380x323으로 올려주세요.</StDescription>
         <StInputWrapper>
           <MyDropzone
@@ -120,6 +134,7 @@ const CoreValue = () => {
               }
               labelText="가치"
               placeholder="ex. 화합"
+              required
             />
             <StInput
               {...register('coreValue3.description', {
@@ -134,6 +149,7 @@ const CoreValue = () => {
               labelText="가치 설명"
               descriptionText="호버 시, 보이는 문구예요."
               placeholder="ex. 서로를 배려하며 함께 화합하는 사람"
+              required
             />
           </StInputBox>
         </StInputWrapper>

diff --git a/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx b/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
@@ -3,8 +3,9 @@ import { useFormContext } from 'react-hook-form';
 
 import { PART_KO, PART_LIST, VALIDATION_CHECK } from '@/utils/org';
 
+import RequiredIcon from '../../assets/RequiredIcon';
 import PartCategory from '../../PartCategory';
-import { StInput, StTitle, StWrapper } from '../style';
+import { StInput, StInputLabel, StTitle, StWrapper } from '../style';
 import { StContentWrapper, StItem, StList, StWeek } from './style';
 
 const CURRICULUM = PART_LIST.reduce(
@@ -29,7 +30,11 @@ const Curriculum = () => {
 
   return (
     <StWrapper>
-      <StTitle>파트별 커리큘럼</StTitle>
+      <StTitle>커리큘럼</StTitle>
+      <StInputLabel>
+        <span>파트별 커리큘럼</span>
+        <RequiredIcon />
+      </StInputLabel>
       <StContentWrapper>
         <PartCategory
           selectedPart={selectedPart}
@@ -55,7 +60,7 @@ const Curriculum = () => {
                 }
                 id={`${selectedPart} week${idx}`}
                 style={{ width: '553px' }}
-                placeholder={`${selectedPart} 파트 ${idx + 1}주차 커리큘럼을 작성해주세요.`}
+                placeholder={`${idx + 1}주차 커리큘럼을 작성해주세요.`}
               />
             </StItem>
           ))}

diff --git a/src/components/org/OrgAdmin/AboutSection/Executives/ExecInfo.tsx b/src/components/org/OrgAdmin/AboutSection/Executives/ExecInfo.tsx
@@ -2,6 +2,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { VALIDATION_CHECK } from '@/utils/org';
 
+import RequiredIcon from '../../assets/RequiredIcon';
 import MyDropzone from '../../MyDropzone';
 import IcBehanceLogo from '../assets/IcBehanceLogo';
 import IcGithubLogo from '../assets/IcGithubLogo';
@@ -25,7 +26,10 @@ const ExecInfo = ({ selectedExec }: ExecInfoProps) => {
   return (
     <>
       <StPhotoWrapper>
-        <StInputLabel>프로필 사진</StInputLabel>
+        <StInputLabel>
+          <span>프로필 사진</span>
+          <RequiredIcon />
+        </StInputLabel>
         <StDescription>사진은 1:1 비율로 올려주세요.</StDescription>
         <MyDropzone
           method={method}
@@ -47,18 +51,10 @@ const ExecInfo = ({ selectedExec }: ExecInfoProps) => {
         }
         labelText="이름"
         placeholder="ex. 김솝트"
+        required
       />
       <StInput
-        {...register(`member.${selectedExec}.affiliation`, {
-          required: true && VALIDATION_CHECK.required.errorText,
-        })}
-        isError={
-          (errors as any).member?.selectedExec?.affiliation?.message !==
-          undefined
-        }
-        errorMessage={
-          (errors as any).member?.selectedExec?.affiliation?.message as string
-        }
+        {...register(`member.${selectedExec}.affiliation`)}
         labelText="소속"
         placeholder="ex. 솝트대학교 / 솝트컴퍼니 / 앱잼 프로덕트명"
       />
@@ -75,6 +71,7 @@ const ExecInfo = ({ selectedExec }: ExecInfoProps) => {
         }
         labelText="한 줄 소개"
         placeholder="ex. 새로운 도전을 위해 과감히 용기내는 사람"
+        required
       />
       <StSNSWrapper>
         <span>SNS</span>

diff --git a/src/components/org/OrgAdmin/AboutSection/HeaderBanner/index.tsx b/src/components/org/OrgAdmin/AboutSection/HeaderBanner/index.tsx
@@ -1,28 +1,52 @@
+import { IconInfoCircle } from '@sopt-makers/icons';
 import { useFormContext } from 'react-hook-form';
 
+import RequiredIcon from '../../assets/RequiredIcon';
+import Modal from '../../common/Modal';
+import useModal from '../../common/Modal/useModal';
 import MyDropzone from '../../MyDropzone';
 import { StDescription, StInputLabel, StTitle, StWrapper } from '../style';
-import { StContentWrapper } from './style';
+import { StContentWrapper, StInfoButton, StStretchContainer } from './style';
 
 const HeaderBanner = () => {
   const method = useFormContext();
+  const { isInfoVisible, onInfoToggle } = useModal();
+
   return (
-    <StWrapper>
-      <StTitle>헤더</StTitle>
-      <StContentWrapper>
-        <StInputLabel>이미지</StInputLabel>
-        <StDescription>
-          이미지는 1920*630 크기로 올려주세요. ‘소개’탭 가장 상단에 보여지는
-          이미지예요.
-        </StDescription>
-        <MyDropzone
-          method={method}
-          label="headerImageFileName"
-          width="582px"
-          height="191px"
-        />
-      </StContentWrapper>
-    </StWrapper>
+    <StStretchContainer>
+      <StWrapper>
+        <StTitle>
+          <span>소개탭 헤더</span>
+          <StInfoButton onClick={onInfoToggle}>
+            <IconInfoCircle />
+          </StInfoButton>
+        </StTitle>
+        <StContentWrapper>
+          <StInputLabel>
+            <span>이미지</span>
+            <RequiredIcon />
+          </StInputLabel>
+          <StDescription>
+            이미지는 1920*630 크기로 올려주세요. ‘소개’탭 가장 상단에 보여지는
+            이미지예요.
+          </StDescription>
+          <MyDropzone
+            method={method}
+            label="headerImageFileName"
+            width="582px"
+            height="191px"
+          />
+        </StContentWrapper>
+      </StWrapper>
+      <Modal
+        title="소개탭 헤더"
+        description="소개탭 가장 상단에 보이는 헤더 이미지예요."
+        subDescription="이번 기수의 핵심 가치가 돋보이는 이미지를 넣어주세요."
+        imgSrc="/images/org/imgAboutHeaderInfo.png"
+        isInfoVisible={isInfoVisible}
+        onInfoToggle={onInfoToggle}
+      />
+    </StStretchContainer>
   );
 };
 

diff --git a/src/components/org/OrgAdmin/AboutSection/HeaderBanner/style.ts b/src/components/org/OrgAdmin/AboutSection/HeaderBanner/style.ts
@@ -1,6 +1,17 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 
+export const StStretchContainer = styled.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
 export const StContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
 `;
+
+export const StInfoButton = styled.button`
+  color: ${colors.white};
+  width: 20px;
+`;
diff --git a/src/components/org/OrgAdmin/AboutSection/style.ts b/src/components/org/OrgAdmin/AboutSection/style.ts
@@ -19,12 +19,19 @@ export const StWrapper = styled.div`
 `;
 
 export const StTitle = styled.h2`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
   ${fontsObject.TITLE_3_24_SB}
   margin-bottom: 10px;
   color: ${colors.white};
 `;
 
 export const StInputLabel = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 4px;
   ${fontsObject.LABEL_3_14_SB};
   margin-bottom: 8px;
   color: ${colors.white};
@@ -45,4 +52,8 @@ export const StInput = styled(TextField)<StInputProps>`
   width: 338px;
   color: ${({ hasValue = true }) =>
     hasValue ? `${colors.white}` : `${colors.gray300}`};
+
+  & label {
+    gap: 8px;
+  }
 `;
diff --git a/src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx b/src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx
@@ -1,3 +1,5 @@
+import Modal from '../common/Modal';
+import useModal from '../common/Modal/useModal';
 import {
   StDescription,
   StInputWrapper,
@@ -7,21 +9,34 @@ import {
 } from '../style';
 import BrandingSubColor from './BrandingSubColor';
 import ColorInputField from './ColorInputField';
+import { StStretchContainer } from './style';
 
 const BrandingColor = () => {
+  const { isInfoVisible, onInfoToggle } = useModal();
+
   return (
-    <StWrapper>
-      <StTitleWrapper>
-        <StTitle>브랜딩 컬러</StTitle>
-        <StDescription>다크 모드를 고려하여 선정해주세요.</StDescription>
-      </StTitleWrapper>
-      <StInputWrapper>
-        <ColorInputField label="키컬러 (메인)" id="brandingColor_main" />
-        <ColorInputField label="키컬러 (저명도)" id="brandingColor_low" />
-        <ColorInputField label="키컬러 (고명도)" id="brandingColor_high" />
-        <BrandingSubColor />
-      </StInputWrapper>
-    </StWrapper>
+    <StStretchContainer>
+      <StWrapper>
+        <StTitleWrapper>
+          <StTitle>브랜딩 컬러</StTitle>
+          <StDescription>다크 모드를 고려하여 선정해주세요.</StDescription>
+        </StTitleWrapper>
+        <StInputWrapper>
+          <ColorInputField label="키컬러 (메인)" id="brandingColor_main" />
+          <ColorInputField label="키컬러 (저명도)" id="brandingColor_low" />
+          <ColorInputField label="키컬러 (고명도)" id="brandingColor_high" />
+          <BrandingSubColor onInfoToggle={onInfoToggle} />
+        </StInputWrapper>
+      </StWrapper>{' '}
+      <Modal
+        title="서브컬러 (강조 그레이 컬러) 예시"
+        description="&#39;지원하기&#39; 탭 속 파트별 소개 &#39;👍이런 분이면 좋아요!&#39;의 백그라운 컬러예요."
+        subDescription="키컬러 저명도와 그레이 컬러 사이, 컬러를 지정해주세요."
+        imgSrc="/images/org/imgSubColorInfo.png"
+        isInfoVisible={isInfoVisible}
+        onInfoToggle={onInfoToggle}
+      />
+    </StStretchContainer>
   );
 };