Merge pull request #203 from Selody-project/196-front-task-그룹-생성-시-그룹…

…-이미지-첨부-기능-추가 196 front task 그룹 생성 시 그룹 이미지 첨부 기능 추가
Selody-project · Apr 1, 2024 · a196b18 · a196b18
2 parents a899f97 + f3405db
commit a196b18
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.jsx b/src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.jsx
@@ -20,11 +20,23 @@ import {
 const GroupCreateModal = () => {
 	const [name, setName] = useState("");
 	const [description, setDescription] = useState("");
+	const [profileImg, setProfileImg] = useState("");
+	const [previewImg, setPreviewImg] = useState("");
 
 	const dispatch = useDispatch();
 
 	const isEmpty = name.trim() === "" && description.trim() === "";
 
+	const handleChangeImg = (e) => {
+		const file = e.target.files[0];
+		const reader = new FileReader();
+		reader.readAsDataURL(file);
+		reader.onloadend = () => {
+			setProfileImg(file);
+			setPreviewImg(reader.result);
+		};
+	};
+
 	const handleCreateGroup = (event) => {
 		event.preventDefault();
 
@@ -37,6 +49,8 @@ const GroupCreateModal = () => {
 
 		formData.append("data", JSON.stringify(data));
 
+		formData.append("image", profileImg);
+
 		if (name.length < 21 && description.length < 101) {
 			dispatch(createGroup(formData));
 			dispatch(closeModal({ type: "CREATE_GROUP" }));
@@ -47,17 +61,28 @@ const GroupCreateModal = () => {
 		<FormModal isEmpty={isEmpty}>
 			<TopDiv>
 				<TitleH2>그룹 만들기</TitleH2>
-				<GroupImgAddIcon />
+				{previewImg.length !== 0 ? (
+					<img src={previewImg} alt="profileImg" />
+				) : (
+					<>
+						<label htmlFor="profileImg">
+							<GroupImgAddIcon />
+						</label>
+						<input type="file" id="profileImg" onChange={handleChangeImg} />
+					</>
+				)}
 			</TopDiv>
-			<GroupNameLabel htmlFor="name">그룹 이름</GroupNameLabel>
+			<GroupNameLabel htmlFor="name">
+				그룹 이름<span>{name.length}/20자</span>
+			</GroupNameLabel>
 			<GroupNameTextarea
 				name="name"
 				onChange={(e) => setName(e.target.value)}
 				value={name}
 				maxLength={20}
 			/>
 			<GroupDescriptionLabel htmlFor="description">
-				그룹 소개
+				그룹 소개<span>{description.length}/100자</span>
 			</GroupDescriptionLabel>
 			<GroupDescriptionTextarea
 				name="description"
@@ -68,7 +93,9 @@ const GroupCreateModal = () => {
 			<ButtonWrapDiv>
 				<GroupCreateButton
 					type="submit"
-					disabled={!name.trim()}
+					disabled={
+						!name.trim() || name.length > 20 || description.length > 100
+					}
 					onClick={handleCreateGroup}
 				>
 					생성하기

diff --git a/src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.style.js b/src/components/Common/GroupModal/GroupCreateModal/GroupCreateModal.style.js
@@ -6,7 +6,20 @@ export const TopDiv = styled.div`
 	align-items: center;
 	margin: 14px 0 10px;
 
-	& > svg {
+	& > label {
+		margin-top: 20px;
+		cursor: pointer;
+	}
+
+	& > input {
+		display: none !important;
+	}
+
+	& > img {
+		width: 95px;
+		height: 95px;
+		border-radius: 50%;
+		object-fit: cover;
 		margin-top: 20px;
 	}
 `;
@@ -23,6 +36,12 @@ export const GroupNameLabel = styled.label`
 	font-size: 13px;
 	font-family: Inter;
 	font-weight: 500;
+
+	& > span {
+		margin-left: 6px;
+		font-size: 8px;
+		color: ${({ theme: { colors } }) => colors.disabled_text};
+	}
 `;
 
 export const GroupNameTextarea = styled.textarea`

diff --git a/src/components/Group/GroupManagement/GroupManagementProfile/GroupManagementProfile.jsx b/src/components/Group/GroupManagement/GroupManagementProfile/GroupManagementProfile.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import DefaultProfile from "@/assets/img/img-selody-logo/3x.png";
 import GroupDeleteModal from "@/components/Common/GroupModal/GroupDeleteModal/GroupDeleteModal";
 import GroupExitModal from "@/components/Common/GroupModal/GroupExitModal/GroupExitModal";
 import ToggleButton from "@/components/Common/ToggleButton/ToggleButton";
@@ -36,7 +35,7 @@ const GroupManagementProfile = ({ groupInfo }) => {
 	const { groupId, isPublicGroup } = groupInfo.information.group;
 	const memberLength = groupInfo.information.memberInfo.length;
 
-	const defaultProfileImg = groupInfo.information.group.image ?? DefaultProfile;
+	const defaultProfileImg = groupInfo.information.group.image;
 
 	const [isPublic, setIsPublic] = useState(isPublicGroup);