diff --git a/public/images/org/imgFaq.png b/public/images/org/imgFaq.png
new file mode 100644
index 00000000..76eeac33
Binary files /dev/null and b/public/images/org/imgFaq.png differ
diff --git a/public/images/org/imgPartCurriculum.png b/public/images/org/imgPartCurriculum.png
new file mode 100644
index 00000000..abc5c2ff
Binary files /dev/null and b/public/images/org/imgPartCurriculum.png differ
diff --git a/public/images/org/imgPartInfo1.png b/public/images/org/imgPartInfo1.png
new file mode 100644
index 00000000..b0b9a474
Binary files /dev/null and b/public/images/org/imgPartInfo1.png differ
diff --git a/public/images/org/imgPartInfo2.png b/public/images/org/imgPartInfo2.png
new file mode 100644
index 00000000..380d0fce
Binary files /dev/null and b/public/images/org/imgPartInfo2.png differ
diff --git a/public/images/org/imgRecruitHeaderInfo.png b/public/images/org/imgRecruitHeaderInfo.png
index 11e47d88..12b4cb5a 100644
Binary files a/public/images/org/imgRecruitHeaderInfo.png and b/public/images/org/imgRecruitHeaderInfo.png differ
diff --git a/src/components/icons/IconXCircleFilled.tsx b/src/components/icons/IconXCircleFilled.tsx
new file mode 100644
index 00000000..1e2b1189
--- /dev/null
+++ b/src/components/icons/IconXCircleFilled.tsx
@@ -0,0 +1,19 @@
+const IconXCircleFilled = () => {
+ return (
+
+ );
+};
+
+export default IconXCircleFilled;
diff --git a/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx b/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
deleted file mode 100644
index 0474ffb7..00000000
--- a/src/components/org/OrgAdmin/AboutSection/Curriculum/index.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useState } from 'react';
-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, StInputLabel, StTitle, StWrapper } from '../style';
-import { StContentWrapper, StItem, StList, StWeek } from './style';
-
-const CURRICULUM = PART_LIST.reduce(
- (acc, part) => {
- acc[part] = Array.from({ length: 8 });
- return acc;
- },
- {} as Record,
-);
-
-interface CurriculumProps {
- selectedPart: PART_KO;
- onChangeSelectedPart: (part: PART_KO) => void;
-}
-
-const Curriculum = ({
- selectedPart,
- onChangeSelectedPart,
-}: CurriculumProps) => {
- const {
- register,
- formState: { errors },
- } = useFormContext();
-
- const handleSetSelectedPart = (value: PART_KO) => {
- onChangeSelectedPart(value);
- };
-
- return (
-
- 커리큘럼
-
- 파트별 커리큘럼
-
-
-
-
-
- {CURRICULUM[selectedPart].map((_, idx) => (
-
- 0{idx + 1}
-
-
- ))}
-
-
-
- );
-};
-
-export default Curriculum;
diff --git a/src/components/org/OrgAdmin/AboutSection/index.tsx b/src/components/org/OrgAdmin/AboutSection/index.tsx
index ea99ff8e..066fee33 100644
--- a/src/components/org/OrgAdmin/AboutSection/index.tsx
+++ b/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';
diff --git a/src/components/org/OrgAdmin/AboutSection/style.ts b/src/components/org/OrgAdmin/AboutSection/style.ts
index 39f385a0..32f2fc83 100644
--- a/src/components/org/OrgAdmin/AboutSection/style.ts
+++ b/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)`
- width: 338px;
+ width: 100%;
color: ${({ hasValue = true }) =>
hasValue ? `${colors.white}` : `${colors.gray300}`};
diff --git a/src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx b/src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx
index cac01194..0e0c59c2 100644
--- a/src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx
+++ b/src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx
@@ -30,7 +30,7 @@ const BrandingColor = () => {
{' '}
{
- const [homeState, setHomeState] = useState(HOME_STATE.VIEW);
+ const [editStep, setEditStep] = useState(EDIT_STEP.VIEW);
const [draft, setDraft] = useState({
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 (
<>
-
- {isEditMode ? (
-
-
-
-
-
- {hasUnsavedChanges && (
-
- 저장되지 않은 변경사항이 있습니다.
-
- )}
-
- ) : (
-
- )}
-
+ setEditStep(EDIT_STEP.EDITING)}
+ onCancel={exitEditMode}
+ onDeploy={() => {
+ if (validateHomeInputs()) {
+ setEditStep(EDIT_STEP.DEPLOY);
+ }
+ }}
+ />
{
setHomeState(HOME_STATE.EDITING)}
+ onCancel={() => setEditStep(EDIT_STEP.EDITING)}
onAction={handleDeploy}
alertText="배포하시겠습니까?"
description="입력한 홈 탭 내용은 공홈에 즉시 반영돼요."
diff --git a/src/components/org/OrgAdmin/HomeSection/PartIntroSection.tsx b/src/components/org/OrgAdmin/HomeSection/PartIntroSection.tsx
deleted file mode 100644
index 47e96d88..00000000
--- a/src/components/org/OrgAdmin/HomeSection/PartIntroSection.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import { IconInfoCircle } from '@sopt-makers/icons';
-import { Chip, TextArea } from '@sopt-makers/ui';
-import { useFormContext } from 'react-hook-form';
-
-import { PARTS } from '@/components/org/OrgAdmin/HomeSection/constant';
-import {
- StChipsContainer,
- StIcon,
- StSecondSectionContainer,
- StTitle,
- StWrapper,
-} from '@/components/org/OrgAdmin/HomeSection/style';
-import { PART_KO, VALIDATION_CHECK } from '@/utils/org';
-
-import Modal from '../common/Modal';
-import useModal from '../common/Modal/useModal';
-import { StTextAreaWrapper } from '@/components/org/OrgAdmin/RecruitSection/style';
-
-type PartIntroSectionProps = {
- selectedPart: PART_KO;
- onChangePart: (id: PART_KO) => void;
-};
-
-const PartIntroSection = ({
- selectedPart,
- onChangePart,
-}: PartIntroSectionProps) => {
- const { isInfoVisible, onInfoToggle } = useModal();
-
- const {
- register,
- clearErrors,
- setError,
- formState: { errors },
- } = useFormContext();
-
- const getActiveStatus = (id: PART_KO) => id === selectedPart;
-
- const handleSelectChip = (id: PART_KO) => {
- onChangePart(id);
- };
-
- const handleValidation = (field: string, value: string) => {
- if (value) {
- clearErrors(field);
- } else {
- setError(field, {
- type: 'required',
- message: '필수 항목이에요.',
- });
- }
- };
-
- return (
-
-
-
-
- 파트별 소개
-
-
-
-
-
-
- {PARTS.map((part) => (
- handleSelectChip(part)}>
- {part}
-
- ))}
-
-
-
-