Merge pull request #196 from MeeTeamNumdle/release-1.0

fix: 4차 QA 피드백 배포 브랜치에 적용
MeeTeamIdle · May 16, 2024 · d756f24 · d756f24
2 parents e92d850 + 86b2fd1
commit d756f24
Show file tree

Hide file tree

Showing 31 changed files with 342 additions and 120 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,13 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 import ko from 'date-fns/locale/ko';
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+		},
+	},
+});
 
 function App() {
 	return (

diff --git a/src/assets/Congratulation.svg b/src/assets/Congratulation.svg
diff --git a/src/assets/Invalid.svg b/src/assets/Invalid.svg
diff --git a/src/assets/MeeteamLogoLarge.svg b/src/assets/MeeteamLogoLarge.svg
diff --git a/src/assets/Valid.svg b/src/assets/Valid.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -59,6 +59,8 @@ import MeeteamLogoLarge from './MeeteamLogoLarge.svg';
 import Congratulation from './Congratulation.svg';
 import NaverIcon from './NaverIcon.png';
 import Clip from './Clip.svg';
+import Valid from './Valid.svg';
+import Invalid from './Invalid.svg';
 import LogoFooter from './LogoFooter.svg';
 
 export {
@@ -123,5 +125,7 @@ export {
 	Congratulation,
 	NaverIcon,
 	Clip,
+	Valid,
+	Invalid,
 	LogoFooter,
 };
diff --git a/src/atom.tsx b/src/atom.tsx
@@ -248,3 +248,8 @@ export const needLoginModalState = atom({
 		type: '',
 	},
 });
+
+export const signupModalState = atom({
+	key: 'signupModalState',
+	default: false,
+});
diff --git a/src/components/comboBox/ComboBox.tsx b/src/components/comboBox/ComboBox.tsx
@@ -59,7 +59,11 @@ const ComboBox = <T extends FieldValues>({
 	const clearInput = () => {
 		const inputValue = getValues?.(name as Path<T>);
 		if (!optionList?.find(option => option.name === inputValue)) {
-			setValue(name as Path<T>, '' as PathValue<T, Path<T>>);
+			setValue(name as Path<T>, '' as PathValue<T, Path<T>>, {
+				shouldValidate: true,
+				shouldDirty: true,
+				shouldTouch: true,
+			});
 		}
 	};
 
@@ -82,7 +86,11 @@ const ComboBox = <T extends FieldValues>({
 	};
 
 	const handleOptionClick = (name: Path<T>, optionName: PathValue<T, Path<T>>) => {
-		setValue(name, optionName);
+		setValue(name, optionName, {
+			shouldValidate: true,
+			shouldDirty: true,
+			shouldTouch: true,
+		});
 		clickOption?.(name);
 	};
 

diff --git a/src/components/footer/Footer.styled.ts b/src/components/footer/Footer.styled.ts
@@ -3,7 +3,8 @@ import styled from 'styled-components';
 const Footer = styled.article`
 	display: flex;
 	justify-content: space-between;
-	padding: 8rem 24rem;
+	padding: 8rem clamp(10%, 24rem, 20%);
+	// padding: 8rem 24rem;
 	font-family: Pretendard;
 	background: #f6f6f6;
 	height: 31.7rem;

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -53,12 +53,9 @@ const Header = () => {
 	};
 
 	const handleLogOutButtonClick = () => {
-		const confirm = window.confirm('로그아웃 하시겠습니까?');
-		if (confirm) {
-			signOut();
-			navigate('/');
-			setOpenDrop(false);
-		}
+		signOut();
+		navigate('/');
+		setOpenDrop(false);
 	};
 
 	useEffect(() => {

diff --git a/src/components/input/Input.styled.ts b/src/components/input/Input.styled.ts
@@ -6,6 +6,7 @@ interface InputStyle {
 	$arrow?: string;
 	disabled?: boolean;
 	invalid?: boolean;
+	$invalid?: string;
 }
 
 const InputLayout = styled.label<{ $width?: string }>`
@@ -94,6 +95,8 @@ const Input = styled.input<InputStyle>`
 			};
 		}`}
 
+	${props => props.invalid && props.$invalid && `background-image: url(${props.$invalid});`}
+	
 	&::placeholder {
 		color: #8e8e8e;
 	}

diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
@@ -14,6 +14,7 @@ export interface Icon {
 	$default: string;
 	$focus?: string;
 	$arrow: string;
+	$invalid?: string;
 }
 
 interface Input<T extends FieldValues> {

diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -22,18 +22,10 @@ const Modal = ({ title, content, defaultBtn, primaryBtn }: Modal) => {
 				<S.ModalContent>{content}</S.ModalContent>
 				<S.ModalRow $gap='1.6rem'>
 					<div>
-						<DefaultBtn
-							title={defaultBtn.title}
-							type='button'
-							handleClick={defaultBtn.handleClick}
-						/>
+						<DefaultBtn type='button' {...defaultBtn} />
 					</div>
 					<div>
-						<PrimaryBtn
-							title={primaryBtn.title}
-							type='button'
-							handleClick={primaryBtn.handleClick}
-						/>
+						<PrimaryBtn type='button' {...primaryBtn} />
 					</div>
 				</S.ModalRow>
 			</S.ModalContainer>

diff --git a/src/components/portfolio/card/PortfolioCard.tsx b/src/components/portfolio/card/PortfolioCard.tsx
@@ -6,6 +6,7 @@ import { OptionList } from '../..';
 import { useRecoilState } from 'recoil';
 import { uploadImageListState } from '../../../atom';
 import { Image } from '../../../types';
+import { UseFormSetValue, FieldValues } from 'react-hook-form';
 
 interface PortfolioCard {
 	id?: string;
@@ -18,6 +19,7 @@ interface PortfolioCard {
 	isImageEditable?: boolean;
 	clickNumber?: number;
 	handleClick?: (id: string) => void;
+	setValue?: UseFormSetValue<FieldValues>;
 }
 
 const MAX_IMAGE_SIZE_BYTES = 30 * 1024 * 1024; // 30MB
@@ -34,6 +36,7 @@ const PortfolioCard = ({
 	isImageEditable,
 	clickNumber,
 	handleClick,
+	setValue,
 }: PortfolioCard) => {
 	const navigate = useNavigate();
 
@@ -75,13 +78,23 @@ const PortfolioCard = ({
 			const imageList = [...uploadImageList];
 			imageList.splice((clickNumber as number) - 1, 1, uploadImage);
 			setUploadImageList(imageList);
+			setValue?.('mainImage', imageList[0], {
+				shouldValidate: true,
+				shouldDirty: true,
+				shouldTouch: true,
+			});
 		};
 	};
 
 	const deleteImage = () => {
 		const imageList = [...uploadImageList];
 		imageList.splice((clickNumber as number) - 1, 1);
 		setUploadImageList(imageList);
+		setValue?.('mainImage', imageList[0] ?? '', {
+			shouldValidate: true,
+			shouldDirty: true,
+			shouldTouch: true,
+		});
 	};
 
 	const handleOptionClick = (name: string, optionName: string) => {

diff --git a/src/components/portfolio/image/upload/PortfolioImageUpload.styled.ts b/src/components/portfolio/image/upload/PortfolioImageUpload.styled.ts
@@ -13,13 +13,17 @@ const PortfolioImageGrid = styled.div`
 	column-gap: 1.6rem;
 `;
 
-const PortfolioImageUpload = styled.div`
+const PortfolioImageUpload = styled.div<{ $invalid?: boolean }>`
 	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	border-radius: 1rem;
-	border: 0.1rem solid var(--Form-border-default, #8e8e8e);
+	border: 0.1rem solid
+		${props =>
+			props.$invalid
+				? 'var(--ButtonColors-Caution-outline-defaultLine, #F85858)'
+				: 'var(--Form-border-default, #8e8e8e)'};
 	background: var(--Grayscale-200, #f6f6f6);
 	color: var(--Text-textColor2, var(--text-color-2, #373f41));
 	cursor: pointer;
@@ -64,13 +68,35 @@ const PortfolioImageInput = styled.input`
 	display: none;
 `;
 
+const PortfolioImageUploadContainer = styled.div`
+	position: relative;
+	display: flex;
+`;
+
+const PortfolioImageUploadErrorMessage = styled.small`
+	position: absolute;
+	bottom: -1.6rem;
+	left: 1rem;
+	white-space: nowrap; // 줄바꿈 방지
+	color: var(--ButtonColors-Caution-outline-defaultLine, #f85858);
+
+	/* Text/t4 */
+	font-size: 1rem;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 1.2rem; /* 120% */
+	letter-spacing: 0.002rem;
+`;
+
 const S = {
 	PortfolioImageUploadLayout,
 	PortfolioImageGrid,
 	PortfolioImageUpload,
 	PortfolioImageUploadRow,
 	PortfolioImageUploadColumn,
 	PortfolioImageInput,
+	PortfolioImageUploadContainer,
+	PortfolioImageUploadErrorMessage,
 };
 
 export default S;
diff --git a/src/components/portfolio/image/upload/PortfolioImageUpload.tsx b/src/components/portfolio/image/upload/PortfolioImageUpload.tsx
@@ -6,16 +6,27 @@ import { uploadImageListState } from '../../../../atom';
 import { PortfolioCard } from '../../..';
 import { BlobFile, Image } from '../../../../types';
 import { unzipFile } from '../../../../utils';
+import { UseFormRegister, FieldValues, FormState, UseFormSetValue } from 'react-hook-form';
+import { INPUT_VALIDATION } from '../../../../constant';
 
 const MAX_IMAGE_SIZE_BYTES = 30 * 1024 * 1024; // 30MB
 const MAX_IMAGE_COUNT = 15;
 
 interface PortfolioImage {
+	register: UseFormRegister<FieldValues>;
+	formState: FormState<FieldValues>;
+	setValue: UseFormSetValue<FieldValues>;
 	zipFileUrl?: string;
 	fileOrder?: string[];
 }
 
-const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => {
+const PortfolioImageUpload = ({
+	register,
+	formState,
+	setValue,
+	zipFileUrl,
+	fileOrder,
+}: PortfolioImage) => {
 	const inputRef = useRef<HTMLInputElement>(null);
 	const addImageList = () => {
 		inputRef.current?.click();
@@ -54,6 +65,11 @@ const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => {
 					reorderedImageList = [...reorderedImageList, reorderedImage];
 					if (i === fileOrder.length - 1) {
 						setUploadImageList(reorderedImageList);
+						setValue('mainImage', reorderedImageList[0], {
+							shouldValidate: true,
+							shouldDirty: true,
+							shouldTouch: true,
+						});
 					}
 				}
 			}
@@ -96,6 +112,13 @@ const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => {
 					file: imageList[i],
 				} as Image;
 				setUploadImageList(prev => [...prev, uploadImage]);
+				i === 0 &&
+					uploadImageList.length === 0 &&
+					setValue('mainImage', uploadImage, {
+						shouldValidate: true,
+						shouldDirty: true,
+						shouldTouch: true,
+					});
 			};
 		}
 	};
@@ -111,25 +134,32 @@ const PortfolioImageUpload = ({ zipFileUrl, fileOrder }: PortfolioImage) => {
 						isEditable={true}
 						isImageEditable={true}
 						clickNumber={index + 1}
+						setValue={setValue}
 					/>
 				))}
 				{/* 이미지 추가 버튼 */}
-				<S.PortfolioImageUpload onClick={addImageList}>
-					<S.PortfolioImageUploadColumn>
-						<S.PortfolioImageUploadRow>
-							<img src={Plus} alt='포트폴리오 이미지 추가' />
-							이미지 추가 (최대 15장)
-						</S.PortfolioImageUploadRow>
-						<small>(1920px X 1080px)</small>
-					</S.PortfolioImageUploadColumn>
-					<S.PortfolioImageInput
-						multiple
-						ref={inputRef}
-						type='file'
-						accept='image/*'
-						onChange={changeImageList}
-					/>
-				</S.PortfolioImageUpload>
+				<S.PortfolioImageUploadContainer>
+					<S.PortfolioImageUpload onClick={addImageList} $invalid={!!formState.errors['mainImage']}>
+						<S.PortfolioImageUploadColumn>
+							<S.PortfolioImageUploadRow>
+								<img src={Plus} alt='포트폴리오 이미지 추가' />
+								이미지 추가 (최대 15장)
+							</S.PortfolioImageUploadRow>
+							<small>(1920px X 1080px)</small>
+						</S.PortfolioImageUploadColumn>
+						<S.PortfolioImageInput
+							{...register('mainImage', INPUT_VALIDATION.portfolioImage)}
+							multiple
+							ref={inputRef}
+							type='file'
+							accept='image/*'
+							onChange={changeImageList}
+						/>
+					</S.PortfolioImageUpload>
+					<S.PortfolioImageUploadErrorMessage>
+						{formState?.errors['mainImage']?.message as string}
+					</S.PortfolioImageUploadErrorMessage>
+				</S.PortfolioImageUploadContainer>
 			</S.PortfolioImageGrid>
 		</S.PortfolioImageUploadLayout>
 	);

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -42,6 +42,7 @@ export const useCheckExist = ({ onSuccess, setUserState, setLoginState }: AuthPr
 					userId: data.userId,
 					nickname: data.nickname,
 					imageUrl: data.imageUrl,
+					university: data.university,
 				});
 				setLoginState?.(true);
 			}

diff --git a/src/hooks/usePortfolio.ts b/src/hooks/usePortfolio.ts
@@ -97,7 +97,11 @@ export const usePaginationPortfolioList = (size: number, pageParam: number) => {
  * @description 포트폴리오 삭제 API를 호출하는 hook입니다.
  */
 export const useDeletePortfolio = () => {
+	const queryClient = useQueryClient();
 	return useMutation({
 		mutationFn: deletePortfolio,
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: portfolioKeys.readPaginationPortfolioList(16) });
+		},
 	});
 };