[TEST] 🔨 Refactor: 업로드 페이지 리팩토링 및 Component 폴더 구조 정리

[Kadesti]

업로드 페이지 리팩토링

UploadPost의 추상화 단계 통일 -> 반영하려다 실패하여 되살림

ConnectingChips-Front/src/Page/UploadPost/UploadPost.tsx

Lines 192 to 206 in fe35b2b

	return (
	<CreatePostS>
	<UploadPostHeader />
	<GroupArticleS passsort={'Create'}>
	<HeadLine getMindInfoData={getMindInfoData} passsort={'Create'} />
	<MissionRule getMindInfoData={getMindInfoData} passsort={'Create'} />
	<CreateExampleImage />
	</GroupArticleS>
	<DivideBaS />
	<CreateFormS onSubmit={handleFormSubmit}>
	<UploadArea />
	<SubmitButtonCTA hasImage={image.file !== null} />
	</CreateFormS>
	</CreatePostS>
	);

• UploadArea 컴포넌트로 분리하여 CreateFormS내에서 CTA와 구분된 부분임을 보다 쉽게 표시
• 다양한 핸들러와의 연결관계를 고려하여 UploadArea는 UploadPost 내에서 선언
• 보다 더 추상화의 단계를 비슷하게 맞춤

ConnectingChips-Front/src/Component/CTA/CTAContainer.tsx

Lines 70 to 78 in fe35b2b

	const SubmitButtonCTA = ({ hasImage }: { hasImage: boolean }): JSX.Element => {
	return (
	<SubmitButtonWrapperS>
	<CTAButtonS valid={String(hasImage)} disabled={!hasImage}>
	인증하기
	</CTAButtonS>
	</SubmitButtonWrapperS>
	);
	};

• SubmitButtonCTA 안으로 SubmitButtonWrapperS를 직접 넣어 image의 props단계를 한단계 단축
• UploadPost에서 hasImage 를 직접 노출하여 props를 내려주는 의미를 보다 직관적으로 알 수 있음

UploadPost의 DOM구조 변경 및 스타일 처리

GroupPost의 상단부 컴포넌트 스타일 구조 수정

ConnectingChips-Front/src/Page/UploadPost/UploadPost.tsx

Lines 192 to 199 in fe35b2b

	return (
	<CreatePostS>
	<UploadPostHeader />
	<GroupArticleS passsort={'Create'}>
	<HeadLine getMindInfoData={getMindInfoData} passsort={'Create'} />
	<MissionRule getMindInfoData={getMindInfoData} passsort={'Create'} />
	<CreateExampleImage />
	</GroupArticleS>

UploadPostHeader : aboslute -> sticky 처리

ConnectingChips-Front/src/Component/UploadPost/UploadPostHeader.tsx

Lines 15 to 18 in fe35b2b

	const UploadPostHeaderS = styled(GroupHeaderContainerS)`
	justify-content: center;
	left: 0;
	position: sticky;

• 헤더부분을 sticky로 처리

ConnectingChips-Front/src/Component/Mission/GroupArticle.tsx

Lines 18 to 25 in fe35b2b

	export const GroupArticleS = styled.article<{ passsort: PageSort }>`
	margin: ${(props) =>
	props.passsort === 'Intro'
	? '0 1rem'
	: props.passsort === 'Create'
	? '0.75rem 1rem 0 1rem'
	: '0.87rem 1rem 1.25rem 1rem'};
	`;

• sticky 처리로 인해 발생하는 여백에 맞게 magrin-top영역을 3.75rem -> 0.75rem으로 변경 (Figma와 맞춰보기도 편해짐)

CreateExampleImage 컴포넌트를 GroupArticleS 컴포넌트에 포함

ConnectingChips-Front/src/Component/Mission/GroupArticle.tsx

Lines 52 to 56 in fe35b2b

	const HeadLineS = styled.div<{ passsort: string }>`
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 0.75rem;

ConnectingChips-Front/src/Component/Mission/GroupArticle.tsx

Lines 93 to 97 in fe35b2b

	const MissionRuleS = styled.div<{ passsort: PageSort }>`
	background-color: ${(props) =>
	props.passsort === 'Create' ? 'var(--color-bg)' : 'rgba(255, 255, 255, 0.7)'};
	color: black;
	margin-bottom: 0.5rem;

• 각 요소간의 간격은 margin-bottom으로 조정

UploadImage 컴포넌트 코드 통일성

ConnectingChips-Front/src/Component/UploadPost/UploadImage.tsx

Lines 24 to 37 in fe35b2b

	return (
	<UploadImageWrapperS>
	<UploadImageTitle />
	{imageUrl ? (
	<AddedImageS>
	<img src={imageUrl} alt='추가된 이미지' />
	<DeleteIcon className='delete_icon' onClick={handleDeleteIconClick} />
	</AddedImageS>
	) : (
	<UploadImageS htmlFor='image-upload'>
	<img src={UploadImageIcon} alt='이미지 업로드' />
	<AddIcon className='add_icon' />
	</UploadImageS>
	)}

• ImageS스타일 코드 삭제
• AddedImageS와 UploadImageS 코드의 구조가 동일하게 되도록 수정

ConnectingChips-Front/src/Component/UploadPost/UploadImage.tsx

Lines 58 to 88 in fe35b2b

	const commonImageS = styled.label`
	width: 5rem;
	height: 5rem;
	position: relative;
	img {
	width: 5rem;
	height: 5rem;
	}
	`;
	const AddedImageS = styled(commonImageS)`
	img {
	object-fit: cover;
	border-radius: 0.625rem;
	}
	.delete_icon {
	position: absolute;
	bottom: -7.14px;
	right: -4.14px;
	}
	`;
	const UploadImageS = styled(commonImageS)`
	.add_icon {
	position: absolute;
	bottom: -11.28px;
	right: -8.28px;
	}
	`;

• AddedImageS 와 UploadImageS 의 공통적인 부분을 commonImageS 로 분리하여 두 스타일 컴포넌트의 역할을 명확하게 구분 (및 유지보수성 향상)

Component 폴더 구조 정리

• ArrowBarrel, Like_CommentBarrel -> IconBarrel
• GroupCheck, OAuthPage -> Routing

ArticleTab의 경우 아직 비슷한 카테고리도 없고 마이페이지, 그룹 페이지 공용 컴포넌트여서 그대로 두었습니다

[netlify]

✅ Deploy Preview for samchips-test ready!

Name	Link
🔨 Latest commit	a26716f
🔍 Latest deploy log	https://app.netlify.com/sites/samchips-test/deploys/65337f73cd5a060008758205
😎 Deploy Preview	https://deploy-preview-163--samchips-test.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.