From b9f94911efdc0ff705e399280ff29b0714dd261f Mon Sep 17 00:00:00 2001
From: kimsuyeon_0916 <kimsuyeon_0916@naver.com>
Date: Fri, 17 May 2024 15:44:57 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20?=
 =?UTF-8?q?=EC=8B=9C=20=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC=EC=98=A4=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EB=82=B4=EC=9A=A9=20=EC=95=88=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portfolio/edit/PortfolioEditPage.tsx      | 398 +++++++++---------
 1 file changed, 201 insertions(+), 197 deletions(-)

diff --git a/src/pages/portfolio/edit/PortfolioEditPage.tsx b/src/pages/portfolio/edit/PortfolioEditPage.tsx
index 2b6f3e35..e83cb8e9 100644
--- a/src/pages/portfolio/edit/PortfolioEditPage.tsx
+++ b/src/pages/portfolio/edit/PortfolioEditPage.tsx
@@ -238,13 +238,14 @@ const PortfolioEditPage = () => {
 	const { ref } = register('content', PORTFOLIO_EDIT_DATA.content.validation);
 
 	const handleChangeEditor = (value: string) => {
-		setValue('content', value);
+		setValue('content', value === '<p><br></p>' ? '' : value);
 	};
 
 	useEffect(() => {
 		if (isSuccessReadPortfolio) {
 			setProceedType(portfolio?.proceedType);
 			setSkillList(portfolio?.skills ? portfolio?.skills : []);
+			setValue('content', portfolio?.content);
 		}
 	}, [isSuccessReadPortfolio]);
 
@@ -258,223 +259,226 @@ const PortfolioEditPage = () => {
 
 	return (
 		<>
-			<S.PortfolioEditLayout
-				onSubmit={handleSubmit(submitHandler)}
-				onKeyDown={e => checkEnterKeyDown(e)}
-			>
-				<S.PortfolioEditColumn $gap='4rem'>
-					<S.PortfolioEditHeader>
-						<h2>포트폴리오 작성</h2>
-						<h4>
-							작성하신 포트폴리오는 프로필을 통해 보여집니다. 진행했던 내용을 자유롭게 작성해보세요!
-						</h4>
-						<hr />
-					</S.PortfolioEditHeader>
-
-					<S.PortfolioEditColumn>
-						<S.PortfolioEditArticle>
-							<S.PortfolioEditTitle>슬라이드 이미지</S.PortfolioEditTitle>
-							<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)' $gap='3.6rem'>
-								<S.PortfolioEditRow>
-									<S.PortfolioEditLabel $required={true}>{LABEL.image}</S.PortfolioEditLabel>
-									<PrimaryBtn
-										type='button'
-										title='슬라이드 순서 변경'
-										icon={Refresh}
-										handleClick={() => setModalOpen(true)}
-									/>
-									{modalOpen && (
-										<ModalPortal>
-											<PortfolioImageModal onClose={() => setModalOpen(false)} />
-										</ModalPortal>
-									)}
-								</S.PortfolioEditRow>
-								<PortfolioImageUpload
-									register={register}
-									formState={formState}
-									setValue={setValue}
-									zipFileUrl={portfolio?.zipFileUrl}
-									fileOrder={portfolio?.fileOrder}
-								/>
-							</S.PortfolioEditColumn>
-						</S.PortfolioEditArticle>
-						<hr />
-					</S.PortfolioEditColumn>
-
-					<S.PortfolioEditColumn>
-						<S.PortfolioEditArticle>
-							<S.PortfolioEditTitle>기본 정보</S.PortfolioEditTitle>
-							<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)' $gap='3.6rem'>
-								{/* 포트폴리오 제목 */}
-								<Input
-									register={register}
-									watch={watch}
-									formState={formState}
-									{...PORTFOLIO_EDIT_DATA.title}
-								/>
-								{/* 포트폴리오 한줄 소개 */}
-								<Input
-									register={register}
-									watch={watch}
-									formState={formState}
-									{...PORTFOLIO_EDIT_DATA.description}
-								/>
-								<S.PortfolioEditRow $gap='2rem'>
-									{/* 분야 */}
-									<ComboBox
+			{isSuccessReadPortfolio && (
+				<S.PortfolioEditLayout
+					onSubmit={handleSubmit(submitHandler)}
+					onKeyDown={e => checkEnterKeyDown(e)}
+				>
+					<S.PortfolioEditColumn $gap='4rem'>
+						<S.PortfolioEditHeader>
+							<h2>포트폴리오 작성</h2>
+							<h4>
+								작성하신 포트폴리오는 프로필을 통해 보여집니다. 진행했던 내용을 자유롭게
+								작성해보세요!
+							</h4>
+							<hr />
+						</S.PortfolioEditHeader>
+
+						<S.PortfolioEditColumn>
+							<S.PortfolioEditArticle>
+								<S.PortfolioEditTitle>슬라이드 이미지</S.PortfolioEditTitle>
+								<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)' $gap='3.6rem'>
+									<S.PortfolioEditRow>
+										<S.PortfolioEditLabel $required={true}>{LABEL.image}</S.PortfolioEditLabel>
+										<PrimaryBtn
+											type='button'
+											title='슬라이드 순서 변경'
+											icon={Refresh}
+											handleClick={() => setModalOpen(true)}
+										/>
+										{modalOpen && (
+											<ModalPortal>
+												<PortfolioImageModal onClose={() => setModalOpen(false)} />
+											</ModalPortal>
+										)}
+									</S.PortfolioEditRow>
+									<PortfolioImageUpload
 										register={register}
+										formState={formState}
 										setValue={setValue}
+										zipFileUrl={portfolio?.zipFileUrl}
+										fileOrder={portfolio?.fileOrder}
+									/>
+								</S.PortfolioEditColumn>
+							</S.PortfolioEditArticle>
+							<hr />
+						</S.PortfolioEditColumn>
+
+						<S.PortfolioEditColumn>
+							<S.PortfolioEditArticle>
+								<S.PortfolioEditTitle>기본 정보</S.PortfolioEditTitle>
+								<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)' $gap='3.6rem'>
+									{/* 포트폴리오 제목 */}
+									<Input
+										register={register}
+										watch={watch}
 										formState={formState}
-										getValues={getValues}
-										optionList={fields}
-										{...PORTFOLIO_EDIT_DATA.field}
+										{...PORTFOLIO_EDIT_DATA.title}
 									/>
-									{/* 역할 */}
-									<ComboBox
+									{/* 포트폴리오 한줄 소개 */}
+									<Input
 										register={register}
-										setValue={setValue}
+										watch={watch}
 										formState={formState}
-										getValues={getValues}
-										optionList={roles}
-										{...PORTFOLIO_EDIT_DATA.role}
+										{...PORTFOLIO_EDIT_DATA.description}
 									/>
-								</S.PortfolioEditRow>
-								{/* 진행기간 */}
-								<S.PortfolioEditColumn>
-									<S.PortfolioEditLabel $required={true}>진행기간</S.PortfolioEditLabel>
 									<S.PortfolioEditRow $gap='2rem'>
-										<MuiDatepickerController
-											name={`startDate`}
-											control={control}
+										{/* 분야 */}
+										<ComboBox
+											register={register}
+											setValue={setValue}
 											formState={formState}
-											rules={{
-												required: '시작일을 설정해주세요',
-												validate: (startDate: string) => {
-													return (
-														differenceInDays(
-															new Date(watch('endDate') as string),
-															new Date(startDate)
-														) >= 0 || '시작일을 종료일보다 빠르게 설정해주세요'
-													);
-												},
-											}}
+											getValues={getValues}
+											optionList={fields}
+											{...PORTFOLIO_EDIT_DATA.field}
 										/>
-										<MuiDatepickerController
-											name={`endDate`}
-											control={control}
+										{/* 역할 */}
+										<ComboBox
+											register={register}
+											setValue={setValue}
 											formState={formState}
-											{...PORTFOLIO_EDIT_DATA.endDate}
+											getValues={getValues}
+											optionList={roles}
+											{...PORTFOLIO_EDIT_DATA.role}
 										/>
 									</S.PortfolioEditRow>
-								</S.PortfolioEditColumn>
-								{/* 진행방식 */}
-								<S.PortfolioEditColumn>
-									<S.PortfolioEditLabel $required={true}>진행방식</S.PortfolioEditLabel>
-									<S.PortfolioEditRelativeBox>
-										<S.PortfolioEditRow $width='clamp(45%, 34rem, 100%)' $gap='2rem'>
-											{PROCEED_TYPE.map(type => (
-												<Radio
-													register={register}
-													key={type}
-													id={type}
-													state={type === proceedType}
-													handleClick={handleRadioClick}
-													{...PORTFOLIO_EDIT_DATA.proceedType}
-												>
-													<div style={{ color: type === proceedType ? '#373F41' : '#8E8E8E' }}>
-														{type}
-													</div>
-												</Radio>
+									{/* 진행기간 */}
+									<S.PortfolioEditColumn>
+										<S.PortfolioEditLabel $required={true}>진행기간</S.PortfolioEditLabel>
+										<S.PortfolioEditRow $gap='2rem'>
+											<MuiDatepickerController
+												name={`startDate`}
+												control={control}
+												formState={formState}
+												rules={{
+													required: '시작일을 설정해주세요',
+													validate: (startDate: string) => {
+														return (
+															differenceInDays(
+																new Date(watch('endDate') as string),
+																new Date(startDate)
+															) >= 0 || '시작일을 종료일보다 빠르게 설정해주세요'
+														);
+													},
+												}}
+											/>
+											<MuiDatepickerController
+												name={`endDate`}
+												control={control}
+												formState={formState}
+												{...PORTFOLIO_EDIT_DATA.endDate}
+											/>
+										</S.PortfolioEditRow>
+									</S.PortfolioEditColumn>
+									{/* 진행방식 */}
+									<S.PortfolioEditColumn>
+										<S.PortfolioEditLabel $required={true}>진행방식</S.PortfolioEditLabel>
+										<S.PortfolioEditRelativeBox>
+											<S.PortfolioEditRow $width='clamp(45%, 34rem, 100%)' $gap='2rem'>
+												{PROCEED_TYPE.map(type => (
+													<Radio
+														register={register}
+														key={type}
+														id={type}
+														state={type === proceedType}
+														handleClick={handleRadioClick}
+														{...PORTFOLIO_EDIT_DATA.proceedType}
+													>
+														<div style={{ color: type === proceedType ? '#373F41' : '#8E8E8E' }}>
+															{type}
+														</div>
+													</Radio>
+												))}
+											</S.PortfolioEditRow>
+											<S.PortfolioEditErrorMessage>
+												{formState?.errors['proceedType']?.message}
+											</S.PortfolioEditErrorMessage>
+										</S.PortfolioEditRelativeBox>
+									</S.PortfolioEditColumn>
+									{/* 스킬 */}
+									<S.PortfolioEditColumn $gap='2rem'>
+										<ComboBox
+											register={register}
+											setValue={setValue}
+											formState={formState}
+											getValues={getValues}
+											optionList={skills}
+											clickOption={addSkill}
+											{...PORTFOLIO_EDIT_DATA.skills}
+										/>
+										<S.PortfolioEditRow $gap='1.05rem'>
+											{skillList?.map(({ ...props }, index) => (
+												<SkillTag
+													isEditable={true}
+													handleClick={deleteSkill}
+													key={index}
+													{...props}
+												/>
 											))}
 										</S.PortfolioEditRow>
-										<S.PortfolioEditErrorMessage>
-											{formState?.errors['proceedType']?.message}
-										</S.PortfolioEditErrorMessage>
-									</S.PortfolioEditRelativeBox>
+									</S.PortfolioEditColumn>
 								</S.PortfolioEditColumn>
-								{/* 스킬 */}
-								<S.PortfolioEditColumn $gap='2rem'>
-									<ComboBox
-										register={register}
-										setValue={setValue}
-										formState={formState}
-										getValues={getValues}
-										optionList={skills}
-										clickOption={addSkill}
-										{...PORTFOLIO_EDIT_DATA.skills}
+							</S.PortfolioEditArticle>
+							<hr />
+						</S.PortfolioEditColumn>
+
+						<S.PortfolioEditColumn>
+							<S.PortfolioEditArticle>
+								<S.PortfolioEditTitle>상세 내용</S.PortfolioEditTitle>
+								<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)'>
+									<S.PortfolioEditLabel $required={true}>{LABEL.content}</S.PortfolioEditLabel>
+									<S.PortfolioEditor
+										ref={e => {
+											ref(e);
+											if (quillRef) quillRef.current = e;
+										}}
+										value={watch('content')}
+										onChange={handleChangeEditor}
+										modules={modules}
+										formats={formats}
+										onKeyDown={checkTabKeyDown}
+										{...PORTFOLIO_EDIT_DATA.content}
 									/>
-									<S.PortfolioEditRow $gap='1.05rem'>
-										{skillList?.map(({ ...props }, index) => (
-											<SkillTag
-												isEditable={true}
-												handleClick={deleteSkill}
-												key={index}
-												{...props}
+								</S.PortfolioEditColumn>
+							</S.PortfolioEditArticle>
+							<hr />
+						</S.PortfolioEditColumn>
+
+						<S.PortfolioEditColumn>
+							<S.PortfolioEditArticle>
+								<S.PortfolioEditTitle>링크</S.PortfolioEditTitle>
+								<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)'>
+									<AddFormBtn title='링크 추가' handleClick={() => addLink()} />
+									<S.PortfolioEditColumn $gap='3.6rem'>
+										{links?.map((link, index) => (
+											<LinkForm
+												key={link.id}
+												index={index}
+												width='clamp(10%, 11.8rem, 100%)'
+												register={register}
+												formState={formState}
+												getValues={getValues}
+												setValue={setValue}
+												remove={removeLink}
 											/>
 										))}
-									</S.PortfolioEditRow>
-								</S.PortfolioEditColumn>
-							</S.PortfolioEditColumn>
-						</S.PortfolioEditArticle>
-						<hr />
-					</S.PortfolioEditColumn>
-
-					<S.PortfolioEditColumn>
-						<S.PortfolioEditArticle>
-							<S.PortfolioEditTitle>상세 내용</S.PortfolioEditTitle>
-							<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)'>
-								<S.PortfolioEditLabel $required={true}>{LABEL.content}</S.PortfolioEditLabel>
-								<S.PortfolioEditor
-									ref={e => {
-										ref(e);
-										if (quillRef) quillRef.current = e;
-									}}
-									value={portfolio?.content}
-									onChange={handleChangeEditor}
-									modules={modules}
-									formats={formats}
-									onKeyDown={checkTabKeyDown}
-									{...PORTFOLIO_EDIT_DATA.content}
-								/>
-							</S.PortfolioEditColumn>
-						</S.PortfolioEditArticle>
-						<hr />
-					</S.PortfolioEditColumn>
-
-					<S.PortfolioEditColumn>
-						<S.PortfolioEditArticle>
-							<S.PortfolioEditTitle>링크</S.PortfolioEditTitle>
-							<S.PortfolioEditColumn $width='clamp(50%, 76.4rem, 100%)'>
-								<AddFormBtn title='링크 추가' handleClick={() => addLink()} />
-								<S.PortfolioEditColumn $gap='3.6rem'>
-									{links?.map((link, index) => (
-										<LinkForm
-											key={link.id}
-											index={index}
-											width='clamp(10%, 11.8rem, 100%)'
-											register={register}
-											formState={formState}
-											getValues={getValues}
-											setValue={setValue}
-											remove={removeLink}
-										/>
-									))}
+									</S.PortfolioEditColumn>
 								</S.PortfolioEditColumn>
-							</S.PortfolioEditColumn>
-						</S.PortfolioEditArticle>
-						<hr />
+							</S.PortfolioEditArticle>
+							<hr />
+						</S.PortfolioEditColumn>
+
+						<S.PortfolioEditButtonBox>
+							<DefaultBtn type='button' title='취소' handleClick={() => navigate(-1)} />
+							<PrimaryBtn
+								type='submit'
+								title='등록'
+								disabled={isSubmitting || isSubmitted || isSubmitSuccessful}
+							/>
+						</S.PortfolioEditButtonBox>
 					</S.PortfolioEditColumn>
-
-					<S.PortfolioEditButtonBox>
-						<DefaultBtn type='button' title='취소' handleClick={() => navigate(-1)} />
-						<PrimaryBtn
-							type='submit'
-							title='등록'
-							disabled={isSubmitting || isSubmitted || isSubmitSuccessful}
-						/>
-					</S.PortfolioEditButtonBox>
-				</S.PortfolioEditColumn>
-			</S.PortfolioEditLayout>
+				</S.PortfolioEditLayout>
+			)}
 		</>
 	);
 };