Merge branch 'release-1.0' into feature/#94_add_portfolio_list_page

MeeTeamIdle · May 2, 2024 · 20c2006 · 20c2006
2 parents 34b9b1e + 5d01156
commit 20c2006
Show file tree

Hide file tree

Showing 59 changed files with 2,187 additions and 226 deletions.
diff --git a/index.html b/index.html
@@ -36,6 +36,7 @@
 	</head>
 	<body>
 		<div id="root"></div>
+		<div id="modal"></div>
 		<script type="module" src="/src/main.tsx"></script>
 	</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,9 +20,12 @@
     "dotenv": "^16.4.0",
     "embla-carousel-autoplay": "^8.0.1",
     "embla-carousel-react": "^8.0.1",
+    "file-saver": "^2.0.5",
     "framer-motion": "^11.0.2",
+    "jszip": "^3.10.1",
     "qs": "^6.12.1",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.21.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.49.3",
@@ -42,6 +45,7 @@
     "@types/node": "^20.11.6",
     "@types/qs": "^6.9.15",
     "@types/react": "^18.2.15",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-datepicker": "^4.19.3",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.10.0",

diff --git a/src/assets/HamburgerMenuIcon.svg b/src/assets/HamburgerMenuIcon.svg
diff --git a/src/assets/LinkIcon.svg b/src/assets/LinkIcon.svg
diff --git a/src/assets/Pencil.svg b/src/assets/Pencil.svg
diff --git a/src/assets/Refresh.svg b/src/assets/Refresh.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -36,6 +36,9 @@ import Test1 from './Test1.png';
 import Test2 from './Test2.png';
 import Test3 from './Test3.png';
 import Test4 from './Test4.png';
+import Refresh from './Refresh.svg';
+import HambergerMenuIcon from './HamburgerMenuIcon.svg';
+import Pencil from './Pencil.svg';
 import FilledBookmark from './FilledBookmark.svg';
 import UnfilledBookmark from './UnfilledBookmark.svg';
 import Edit from './Edit.svg';
@@ -98,6 +101,9 @@ export {
 	Test2,
 	Test3,
 	Test4,
+	Refresh,
+	HambergerMenuIcon,
+	Pencil,
 	DATE_ICON,
 	Clear,
 	BookmarkRight,

diff --git a/src/atom.tsx b/src/atom.tsx
@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 import { SessionStorageEffect, simpleDate } from './utils';
-import { User, InputState, ApplyRole, RecruitFilter, DetailedFilter } from './types';
+import { User, InputState, ApplyRole, RecruitFilter, DetailedFilter, Image } from './types';
 import { LocalStorageEffect } from './utils';
 import { Account } from './pages';
 
@@ -186,9 +186,14 @@ export const applicantFilter = atom({
 	default: null as number | null,
 });
 
-export const imageNameState = atom({
-	key: 'imageNameState',
-	default: '',
+export const uploadImageListState = atom<Image[]>({
+	key: 'uploadImageListState',
+	default: [],
+});
+
+export const uploadImageState = atom<Image | null>({
+	key: 'uploadImageState',
+	default: null,
 });
 
 export const openChatModalState = atom({

diff --git a/src/components/button/Button.styled.ts b/src/components/button/Button.styled.ts
@@ -30,6 +30,7 @@ const DefaultButtonLayout = styled.button<ButtonStyle>`
 	padding: ${props => (props.$small ? '1.2rem 2rem' : '1.2rem 3.2rem')};
 	justify-content: center;
 	align-items: center;
+	column-gap: 0.75rem;
 	border: 1px solid var(--ButtonColors-Default-outline-defaultLine, #e3e3e3);
 	border-radius: 0.6rem;
 	color: var(--text-color-2, #373f41);
@@ -90,7 +91,7 @@ const FormButtonLayout = styled.button`
 	flex-direction: row;
 	column-gap: 0.8rem;
 	width: 100%;
-	padding: 1.7rem 0;
+	padding-bottom: 2.7rem;
 	align-items: center;
 	color: var(--Text-textColor2, var(--text-color-2, #373f41));
 	cursor: pointer;

diff --git a/src/components/button/DefaultBtn.tsx b/src/components/button/DefaultBtn.tsx
@@ -4,12 +4,13 @@ import S from './Button.styled';
 interface Button {
 	type: 'button' | 'submit';
 	title: string;
+	icon?: string;
 	disabled?: boolean;
 	small?: boolean;
 	handleClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const DefaultBtn = ({ type, title, disabled, small, handleClick }: Button) => {
+const DefaultBtn = ({ type, title, icon, disabled, small, handleClick }: Button) => {
 	return (
 		<S.DefaultButtonLayout
 			type={type}
@@ -18,6 +19,7 @@ const DefaultBtn = ({ type, title, disabled, small, handleClick }: Button) => {
 			$small={small}
 			onClick={handleClick}
 		>
+			{icon && <img src={icon} alt='아이콘' />}
 			{title}
 		</S.DefaultButtonLayout>
 	);

diff --git a/src/components/button/PrimaryBtn.tsx b/src/components/button/PrimaryBtn.tsx
@@ -4,12 +4,13 @@ import S from './Button.styled';
 interface Button {
 	type: 'button' | 'submit';
 	title: string;
+	icon?: string;
 	disabled?: boolean;
 	small?: boolean;
 	handleClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-const PrimaryBtn = ({ type, title, disabled, small, handleClick }: Button) => {
+const PrimaryBtn = ({ type, title, icon, disabled, small, handleClick }: Button) => {
 	return (
 		<S.PrimaryButtonLayout
 			type={type}
@@ -18,6 +19,7 @@ const PrimaryBtn = ({ type, title, disabled, small, handleClick }: Button) => {
 			$small={small}
 			onClick={handleClick}
 		>
+			{icon && <img src={icon} alt='아이콘' />}
 			{title}
 		</S.PrimaryButtonLayout>
 	);

diff --git a/src/components/comboBox/ComboBox.tsx b/src/components/comboBox/ComboBox.tsx
@@ -60,23 +60,15 @@ const ComboBox = <T extends FieldValues>({
 		const inputValue = getValues?.(name as Path<T>);
 		if (!optionList?.find(option => option.name === inputValue)) {
 			setValue(name as Path<T>, '' as PathValue<T, Path<T>>);
-			sessionStorage.removeItem(name);
 		}
 	};
 
-	useEffect(() => {
-		const inputValue = getValues?.(name as Path<T>);
-		const defaultOptionId = optionList?.find(option => option.name === inputValue)?.id;
-		defaultOptionId && sessionStorage.setItem(name, defaultOptionId);
-	}, [optionList]);
-
 	useEffect(() => {
 		const handleOutsideClick = (e: MouseEvent) => {
 			clearInput();
 			const target = e.target as HTMLDivElement;
 			if (isOpen && inputRef.current && !inputRef.current.contains(target)) {
 				setIsOpen(false);
-				// clearInput();
 			}
 		};
 
@@ -89,17 +81,14 @@ const ComboBox = <T extends FieldValues>({
 		setIsOpen(true);
 	};
 
-	const handleOptionClick = (name: Path<T>, optionName: PathValue<T, Path<T>>, id?: string) => {
-		setValue(name, optionName, { shouldDirty: true });
-		id && sessionStorage.setItem(name, id);
+	const handleOptionClick = (name: Path<T>, optionName: PathValue<T, Path<T>>) => {
+		setValue(name, optionName);
 		clickOption?.(name);
-		// setFocus?.(name);
 	};
 
 	const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
 		if (event.key === 'Enter') {
 			downKey?.(name);
-			// setIsOpen(true);
 		}
 	};
 

diff --git a/src/components/goBack/GoBack.tsx b/src/components/goBack/GoBack.tsx
@@ -12,7 +12,6 @@ const GoBack = ({
 	const navigate = useNavigate();
 
 	const handleClick = () => {
-		window.sessionStorage.removeItem('contentState');
 		navigate(-1);
 	};
 

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -126,6 +126,9 @@ import LinkDetails from './link/details/LinkDetails';
 import PortfolioInformation from './portfolio/information/PortfolioInformation';
 import PortfolioList from './portfolio/list/PortfolioList';
 import ImageCarousel from './carousel/ImageCarousel';
+import PortfolioImageUpload from './portfolio/image/upload/PortfolioImageUpload';
+import ModalPortal from './modal/ModalPortal';
+import PortfolioImageModal from './portfolio/image/modal/PortfolioImageModal';
 import WriterFooter from './recruit/recruitDetail/footer/WriterFooter';
 import ApplierFooter from './recruit/recruitDetail/footer/ApplierFooter';
 import ClosedFooter from './recruit/recruitDetail/footer/ClosedFooter';
@@ -259,6 +262,9 @@ export {
 	PortfolioInformation,
 	PortfolioList,
 	ImageCarousel,
+	PortfolioImageUpload,
+	ModalPortal,
+	PortfolioImageModal,
 	WriterFooter,
 	ApplierFooter,
 	ApplyModal,

diff --git a/src/components/input/Input.styled.ts b/src/components/input/Input.styled.ts
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
 interface InputStyle {
-	default?: string;
+	$default?: string;
 	$focus?: string;
 	$arrow?: string;
 	disabled?: boolean;
 	invalid?: boolean;
 }
 
-const InputLabel = styled.label<{ $width?: string }>`
+const InputLayout = styled.label<{ $width?: string }>`
 	min-width: 0;
 	display: flex;
 	flex-direction: column;
@@ -24,8 +24,6 @@ const InputLabel = styled.label<{ $width?: string }>`
 	letter-spacing: 0.0032rem;
 
 	h6 {
-		margin-bottom: 0.8rem;
-
 		/* Body/body2/semibold */
 		font-size: 1.4rem;
 		font-style: normal;
@@ -35,6 +33,17 @@ const InputLabel = styled.label<{ $width?: string }>`
 	}
 `;
 
+const InputLabel = styled.h6<{ $required?: boolean }>`
+	margin-bottom: 0.8rem;
+
+	${props =>
+		props.$required &&
+		`&:: after {
+			content: ' *';
+			color: #f85858;
+		}`}
+`;
+
 const InputContainer = styled.div`
 	position: relative;
 	display: flex;
@@ -45,6 +54,21 @@ const InputContainer = styled.div`
 		margin-left: auto;
 		color: var(--State-unactive, #8e8e8e);
 	}
+
+	small {
+		position: absolute;
+		top: 5.4rem;
+		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 Input = styled.input<InputStyle>`
@@ -60,7 +84,7 @@ const Input = styled.input<InputStyle>`
 		var(--Form-border-default, ${props => (props.disabled ? '#8E8E8E' : '#e3e3e3')});
 	background: ${props =>
 		props.disabled ? 'var(--Form-fill-disabled, #E3E3E3)' : 'var(--Form-fill-others, #fff)'};
-	${props => props.default && `background-image: url(${props.default}); `}
+	${props => props.$default && `background-image: url(${props.$default}); `}
 	background-repeat: no-repeat; // 배경 아이콘 반복 X
 	background-position: ${props =>
 		props.$arrow === 'left' ? 'center left 1.6rem' : 'center right 1.6rem'};
@@ -108,6 +132,6 @@ const InputErrorMessage = styled.small<InputStyle>`
 	letter-spacing: 0.002rem;
 `;
 
-const S = { InputLabel, InputContainer, Input, InputErrorMessage };
+const S = { InputLayout, InputLabel, InputContainer, Input, InputErrorMessage };
 
 export default S;