[Feat] 공홈 관리 - 모집안내 탭 구현

src/components/icons/IconXCircleFilled.tsx

@@ -0,0 +1,19 @@
+const IconXCircleFilled = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM9.53033 8.46967C9.23744 8.17678 8.76256 8.17678 8.46967 8.46967C8.17678 8.76256 8.17678 9.23744 8.46967 9.53033L10.9393 12L8.46967 14.4697C8.17678 14.7626 8.17678 15.2374 8.46967 15.5303C8.76256 15.8232 9.23744 15.8232 9.53033 15.5303L12 13.0607L14.4697 15.5303C14.7626 15.8232 15.2374 15.8232 15.5303 15.5303C15.8232 15.2374 15.8232 14.7626 15.5303 14.4697L13.0607 12L15.5303 9.53033C15.8232 9.23744 15.8232 8.76256 15.5303 8.46967C15.2374 8.17678 14.7626 8.17678 14.4697 8.46967L12 10.9393L9.53033 8.46967Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default IconXCircleFilled;

src/components/org/OrgAdmin/AboutSection/index.tsx

@@ -1,7 +1,7 @@
 import { EXEC_TYPE, PART_KO } from '@/utils/org';
 
+import Curriculum from '../RecruitSection/_components/Curriculum';
 import CoreValue from './CoreValue';
-import Curriculum from './Curriculum';
 import Executives from './Executives';
 import HeaderBanner from './HeaderBanner';
 import { StContainer } from './style';

src/components/org/OrgAdmin/AboutSection/style.ts

@@ -15,6 +15,7 @@ export const StContainer = styled.section`
 export const StWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  max-width: 582px;
   gap: 20px;
 `;
 
@@ -49,7 +50,7 @@ interface StInputProps {
 }
 
 export const StInput = styled(TextField)<StInputProps>`
-  width: 338px;
+  width: 100%;
   color: ${({ hasValue = true }) =>
     hasValue ? `${colors.white}` : `${colors.gray300}`};
 

src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx

@@ -30,7 +30,7 @@ const BrandingColor = () => {
       </StWrapper>{' '}
       <Modal
         title="서브컬러 (강조 그레이 컬러) 예시"
-        description="&#39;지원하기&#39; 탭 속 파트별 소개 &#39;👍이런 분이면 좋아요!&#39;의 백그라운 컬러예요."
+        description="&#39;모집안내&#39; 탭 속 파트별 소개 &#39;👍이런 분이면 좋아요!&#39;의 백그라운 컬러예요."
         subDescription="키컬러 저명도와 그레이 컬러 사이, 컬러를 지정해주세요."
         imgSrc="/images/org/imgSubColorInfo.png"
         isInfoVisible={isInfoVisible}

src/components/org/OrgAdmin/HomeSection/HomeSection.tsx

@@ -1,9 +1,13 @@
-import { Button, ToastProvider } from '@sopt-makers/ui';
+import { ToastProvider } from '@sopt-makers/ui';
 import { useEffect, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import IcSend from '@/components/icons/IcSend';
 import { ActionModal } from '@/components/org/OrgAdmin/common/ActionModal';
+import {
+  EDIT_STEP,
+  type EditStep,
+} from '@/components/org/OrgAdmin/common/constants/editStep';
+import { EditActionBar } from '@/components/org/OrgAdmin/common/EditActionBar';
 import HomeHeaderSection from '@/components/org/OrgAdmin/HomeSection/_components/Header/HomeHeaderSection';
 import type { News } from '@/components/org/OrgAdmin/HomeSection/_components/News/NewsItem';
 import NewsSection from '@/components/org/OrgAdmin/HomeSection/_components/News/NewsSection';
@@ -18,22 +22,10 @@ import {
 } from '@/components/org/OrgAdmin/HomeSection/queries';
 import {
   StContainer,
-  StHomeActionButtonWrapper,
-  StHomeActionWrapper,
-  StHomeEditButtonWrapper,
   StSectionWrapper,
-  StUnsavedChangeText,
 } from '@/components/org/OrgAdmin/HomeSection/style';
 import { VALIDATION_CHECK } from '@/utils/org';
 
-const HOME_STATE = {
-  VIEW: 'view',
-  EDITING: 'editing',
-  DEPLOY: 'deploy',
-} as const;
-
-type HomeState = (typeof HOME_STATE)[keyof typeof HOME_STATE];
-
 type HomeDraft = {
   reviews: Review[];
   news: News[];
@@ -43,7 +35,7 @@ const EMPTY_REVIEWS: Review[] = [];
 const EMPTY_NEWS: News[] = [];
 
 const HomeSectionContent = () => {
-  const [homeState, setHomeState] = useState<HomeState>(HOME_STATE.VIEW);
+  const [editStep, setEditStep] = useState<EditStep>(EDIT_STEP.VIEW);
   const [draft, setDraft] = useState<HomeDraft>({
     reviews: EMPTY_REVIEWS,
     news: EMPTY_NEWS,
@@ -63,8 +55,8 @@ const HomeSectionContent = () => {
     name: 'homeHeaderImageFileName',
   });
 
-  const isEditMode = homeState !== HOME_STATE.VIEW;
-  const isDeployModalOpen = homeState === HOME_STATE.DEPLOY;
+  const isEditMode = editStep !== EDIT_STEP.VIEW;
+  const isDeployModalOpen = editStep === EDIT_STEP.DEPLOY;
 
   useEffect(() => {
     setDraft({
@@ -106,7 +98,7 @@ const HomeSectionContent = () => {
     });
     clearErrors('homeHeaderImageFileName');
     resetDraft();
-    setHomeState(HOME_STATE.VIEW);
+    setEditStep(EDIT_STEP.VIEW);
   };
 
   const handleDeploy = () => {
@@ -132,48 +124,18 @@ const HomeSectionContent = () => {
 
   return (
     <>
-      <StHomeEditButtonWrapper>
-        {isEditMode ? (
-          <StHomeActionWrapper>
-            <StHomeActionButtonWrapper>
-              <Button
-                type="button"
-                size="md"
-                variant="outlined"
-                css={{ width: 'fit-content' }}
-                onClick={exitEditMode}>
-                취소
-              </Button>
-              <Button
-                theme="blue"
-                type="button"
-                size="md"
-                LeftIcon={IcSend}
-                disabled={isDeploying}
-                onClick={() => {
-                  if (validateHomeInputs()) {
-                    setHomeState(HOME_STATE.DEPLOY);
-                  }
-                }}>
-                배포
-              </Button>
-            </StHomeActionButtonWrapper>
-            {hasUnsavedChanges && (
-              <StUnsavedChangeText>
-                저장되지 않은 변경사항이 있습니다.
-              </StUnsavedChangeText>
-            )}
-          </StHomeActionWrapper>
-        ) : (
-          <Button
-            type="button"
-            size="md"
-            variant="outlined"
-            onClick={() => setHomeState(HOME_STATE.EDITING)}>
-            수정하기
-          </Button>
-        )}
-      </StHomeEditButtonWrapper>
+      <EditActionBar
+        isEditMode={isEditMode}
+        isDeploying={isDeploying}
+        hasUnsavedChanges={hasUnsavedChanges}
+        onStartEdit={() => setEditStep(EDIT_STEP.EDITING)}
+        onCancel={exitEditMode}
+        onDeploy={() => {
+          if (validateHomeInputs()) {
+            setEditStep(EDIT_STEP.DEPLOY);
+          }
+        }}
+      />
       <StSectionWrapper>
         <HomeHeaderSection isEditable={isEditMode} />
         <ReviewSection
@@ -193,7 +155,7 @@ const HomeSectionContent = () => {
       <ActionModal
         variant="deploy"
         isOpen={isDeployModalOpen}
-        onCancel={() => setHomeState(HOME_STATE.EDITING)}
+        onCancel={() => setEditStep(EDIT_STEP.EDITING)}
         onAction={handleDeploy}
         alertText="배포하시겠습니까?"
         description="입력한 홈 탭 내용은 공홈에 즉시 반영돼요."