Merge pull request #137 from MeeTeamNumdle/release-1.0

fix: 2차 QA 수정사항 작업
MeeTeamIdle · May 6, 2024 · 3c8f630 · 3c8f630
2 parents 4cc4db1 + 72ed358
commit 3c8f630
Show file tree

Hide file tree

Showing 42 changed files with 502 additions and 210 deletions.
diff --git a/src/atom.tsx b/src/atom.tsx
@@ -3,6 +3,7 @@ import { SessionStorageEffect, simpleDate } from './utils';
 import { User, InputState, ApplyRole, RecruitFilter, DetailedFilter, Image } from './types';
 import { LocalStorageEffect } from './utils';
 import { Account } from './pages';
+import { SAFE_DEFAULT_VALUE } from './constant';
 
 export const userState = atom<User | null>({
 	key: 'userState',
@@ -58,6 +59,11 @@ export const applyCloseModalState = atom({
 	default: false,
 });
 
+export const recruitPostingDeleteModalState = atom({
+	key: 'recruitPostingDeleteModalState',
+	default: false,
+});
+
 export const commentDeleteModalState = atom({
 	key: 'commentDeleteModalState',
 	default: {
@@ -105,7 +111,7 @@ export const recruitInputState = atom<InputState>({
 		recruitmentRoles: [],
 		tags: [],
 		title: '',
-		content: '',
+		content: SAFE_DEFAULT_VALUE,
 	},
 });
 

diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx
@@ -3,7 +3,7 @@ import { CommentDeleteModal, KebabMenu, ProfileImage, ReplyComment, ReplyInput }
 import S from './Comment.styled';
 import { Comment as CommentType } from '../../../types';
 import { useParams } from 'react-router-dom';
-import { useCommentEdit } from '../../../hooks';
+import { useCommentEdit, useLogin } from '../../../hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { commentDeleteModalState, userState } from '../../../atom';
@@ -22,6 +22,7 @@ const Comment = ({
 }: CommentType) => {
 	const { id: recruitId } = useParams();
 	const pageNum = Number(recruitId);
+	const { isLoggedIn } = useLogin();
 	const [replyClicked, setReplyClicked] = useState<boolean>(false);
 	const [value, setValue] = useState<string>(content);
 	const [showKebab, setShowKebab] = useState<boolean>(true);
@@ -155,7 +156,9 @@ const Comment = ({
 						)}
 					</section>
 				</article>
-				{showKebab && <KebabMenu options={isCommentWriter ? optionLists : optionListsOthers} />}
+				{showKebab && isLoggedIn && (
+					<KebabMenu options={isCommentWriter ? optionLists : optionListsOthers} />
+				)}
 			</section>
 			<hr />
 			<section className='wrapper-replies'>

diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx
@@ -4,7 +4,7 @@ import { CommentDeleteModal, KebabMenu, ProfileImage } from '../..';
 import { Comment as CommentType } from '../../../types';
 import { Reply } from '../../../assets';
 import { useParams } from 'react-router-dom';
-import { useCommentEdit } from '../../../hooks';
+import { useCommentEdit, useLogin } from '../../../hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { userState, replyDeleteModalState } from '../../../atom';
@@ -21,6 +21,7 @@ const ReplyComment = ({
 	replyComment,
 }: CommentType) => {
 	const { id: recruitId } = useParams();
+	const { isLoggedIn } = useLogin();
 	const pageNum = Number(recruitId);
 	const [value, setValue] = useState<string>(content);
 	const [showKebab, setShowKebab] = useState<boolean>(true);
@@ -144,7 +145,9 @@ const ReplyComment = ({
 						)}
 					</section>
 				</article>
-				{showKebab && <KebabMenu options={isCommentWriter ? optionLists : optionListsOthers} />}
+				{showKebab && isLoggedIn && (
+					<KebabMenu options={isCommentWriter ? optionLists : optionListsOthers} />
+				)}
 			</section>
 			<hr />
 			{isDelete.isDelete && (

diff --git a/src/components/comment/commentInput/CommentInput.styled.ts b/src/components/comment/commentInput/CommentInput.styled.ts
@@ -1,14 +1,7 @@
 import styled from 'styled-components';
 
 const CommentInput = styled.div`
-	width: 100%;
-	padding: 2.4rem 4.8rem;
-	box-sizing: border-box;
-	margin: 0 auto;
-	border-radius: 0.75rem;
-	border: 0.075rem solid #e3e3e3;
-	background: #f6f6f6;
-
+	margin-top: 2.1rem;
 	.wrapper {
 		display: flex;
 		gap: 2rem;
@@ -27,28 +20,43 @@ const CommentInput = styled.div`
 		}
 
 		.container-user__input {
+			margin-top: -0.5rem;
 			display: flex;
 			gap: 1rem;
-			width: 100%;
 
-			input {
-				width: 100%;
-				height: 4rem;
+			textarea {
+				display: flex;
+				width: 90rem;
+				height: 11.2rem;
+				padding: 1.6rem 2rem;
+				align-items: flex-start;
+				gap: 1rem;
 				flex-shrink: 0;
 				border-radius: 0.75rem;
-				border: 0.075rem solid #e3e3e3;
+				border: 0.75px solid #d3d3d3;
 				background: #fff;
-				outline: none;
-				padding-left: 1.3rem;
 				box-sizing: border-box;
+				resize: none;
+				font-family: Pretendard;
+				outline: none;
+
+				&:focus {
+					border: 1px solid #5877fc;
+				}
 			}
 		}
+
+		.container-length_counter {
+			display: flex;
+			justify-content: flex-end;
+			margin-top: -1.61rem;
+		}
+
 		.container-btn {
 			display: flex;
 			justify-content: flex-end;
 			.submit-btn {
 				display: flex;
-				width: 6.5rem;
 				height: 3.6rem;
 				padding: 1.2rem 2rem;
 				justify-content: center;

diff --git a/src/components/comment/commentInput/CommentInput.tsx b/src/components/comment/commentInput/CommentInput.tsx
@@ -8,7 +8,6 @@ import { useRecoilValue } from 'recoil';
 import { userState } from '../../../atom';
 
 const CommentInput = () => {
-	const isLogin = true; // 임시 코드
 	const postComment = useComment();
 	const { id } = useParams();
 	const pageNum = Number(id);
@@ -37,18 +36,9 @@ const CommentInput = () => {
 			);
 		}
 	};
-	const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+	const onChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
 		setContents(event.target.value);
 	};
-	const onClickInput = () => {};
-
-	const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-		const target = event.currentTarget;
-		if (target.value.length !== 0 && event.key === 'Enter') {
-			event.preventDefault();
-			addComment();
-		}
-	};
 
 	return (
 		<S.CommentInput>
@@ -63,18 +53,21 @@ const CommentInput = () => {
 						<span>{userInfo?.nickname}</span>
 					</section>
 					<section className='container-user__input'>
-						<input
-							type='text'
-							onKeyUp={onKeyPress}
+						<textarea
 							value={contents}
 							onChange={onChangeHandler}
-							onClick={onClickInput}
-							placeholder={isLogin ? '댓글 쓰기' : '로그인이 필요합니다.'}
+							maxLength={1000}
+							placeholder='댓글을 입력해주세요. 댓글의 글자 수는 1000자로 제한합니다.'
 						/>
 					</section>
+					<section className='container-length_counter'>
+						<span className='body2-medium'>
+							{contents.length > 1000 ? 1000 : contents.length}/1000
+						</span>
+					</section>
 					<section className='container-btn'>
 						<button type='submit' onClick={addComment} className='submit-btn'>
-							댓글
+							등록
 						</button>
 					</section>
 				</article>

diff --git a/src/components/comment/replyInput/ReplyInput.styled.ts b/src/components/comment/replyInput/ReplyInput.styled.ts
@@ -2,69 +2,87 @@ import styled from 'styled-components';
 
 const ReplyInput = styled.div`
 	width: 100%;
+	display: flex;
+	align-items: flex-start;
+	gap: 1.55rem;
+
+	.reply-icon {
+		margin-top: 0.7rem;
+	}
 
 	.wrapper {
 		display: flex;
-		gap: 1rem;
-		width: 100%;
-		margin: 1rem 2rem 1.6rem 0;
+		gap: 2rem;
+		flex-direction: column;
+		align-items: flex-start;
 
-		.user-input__icon {
+		.container-user__icon {
 			display: flex;
-			margin-left: -0.45rem;
+			align-items: center;
+			gap: 0.6rem;
+
+			span {
+				color: #373f41;
+				font-size: 1.2rem;
+				font-weight: 600;
+			}
 		}
 
-		.user-input__container {
+		.container-user__input {
+			margin-top: -0.5rem;
 			display: flex;
-			justify-content: space-between;
-			width: 100%;
-			position: relative;
-			margin-right: 4.8rem;
+			gap: 1rem;
 
-			.reply-input {
-				width: 100%;
-				box-sizing: border-box;
-				height: 3.75rem;
+			textarea {
+				display: flex;
+				width: 80.957rem;
+				height: 11.2rem;
+				padding: 1.6rem 2rem;
+				align-items: flex-start;
+				gap: 1rem;
+				flex-shrink: 0;
 				border-radius: 0.75rem;
-				border: 0.75px solid #bebebe;
+				border: 0.75px solid #d3d3d3;
 				background: #fff;
+				box-sizing: border-box;
+				resize: none;
+				font-family: Pretendard;
 				outline: none;
-				padding-left: 1.3rem;
+
+				&:focus {
+					border: 1px solid #5877fc;
+				}
 			}
 		}
 	}
-
-	.btn-container {
+	.container-btn {
+		width: 100%;
 		display: flex;
 		justify-content: flex-end;
-		align-items: center;
-		margin: 0 4.8rem 1.6rem 0;
 		gap: 1.2rem;
 
-		.txt-small {
-			color: #f7faff;
-			font-size: 1.4rem;
-			line-height: 1.7rem;
-			letter-spacing: 0.0028rem;
-		}
-
-		button {
+		.cancel-btn {
 			display: flex;
-			justify-content: center;
-			align-items: center;
 			height: 3.6rem;
 			padding: 1.2rem 2rem;
+			justify-content: center;
+			align-items: center;
+			gap: 0.75rem;
 			border-radius: 0.6rem;
-		}
-
-		.cancel-btn {
+			background: #fff;
 			color: #373f41;
 			border: 1px solid #e3e3e3;
-			background: #fff;
 		}
-
-		.reply-btn {
+		.submit-btn {
+			display: flex;
+			height: 3.6rem;
+			padding: 1.2rem 2rem;
+			justify-content: center;
+			align-items: center;
+			gap: 0.75rem;
+			border-radius: 0.6rem;
 			background: #5877fc;
+			color: #fff;
 		}
 	}
 `;