Merge pull request #187 from MeeTeamNumdle/release-1.0

deploy: 로컬스토리지 암호화 및 일부 버그 수정, 기능 추가
MeeTeamIdle · May 15, 2024 · 2425a7e · 2425a7e
2 parents fc82cd6 + 0a51d31
commit 2425a7e
Show file tree

Hide file tree

Showing 38 changed files with 331 additions and 141 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" href="/favicon.ico" />
@@ -10,6 +10,10 @@
 		<meta name="title" content="밋팀" />
 		<meta name="description" content="대학생을 위한 포트폴리오 기반 구인 플랫폼" />
 		<meta name="robots" content="index,nofollow" />
+		<meta
+			name="keywords"
+			content="밋팀,meeteam,구인,대학생,포트폴리오,구인글,프로젝트,스터디,공모전"
+		/>
 		<meta property="og:url" content="https://meeteam.co.kr" />
 		<meta property="og:title" content="밋팀" />
 		<meta property="og:type" content="website" />

diff --git a/src/assets/LogoFooter.svg b/src/assets/LogoFooter.svg
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -59,6 +59,7 @@ import MeeteamLogoLarge from './MeeteamLogoLarge.svg';
 import Congratulation from './Congratulation.svg';
 import NaverIcon from './NaverIcon.png';
 import Clip from './Clip.svg';
+import LogoFooter from './LogoFooter.svg';
 
 export {
 	Exit,
@@ -122,4 +123,5 @@ export {
 	Congratulation,
 	NaverIcon,
 	Clip,
+	LogoFooter,
 };
diff --git a/src/atom.tsx b/src/atom.tsx
@@ -11,6 +11,11 @@ export const userState = atom<User | null>({
 	effects: [LocalStorageEffect<User | null>('userState')],
 });
 
+export const loginState = atom<boolean>({
+	key: 'loginState',
+	default: false,
+});
+
 export const pageState = atom({
 	key: 'pageState',
 	default: 1,

diff --git a/src/components/comment/comment/Comment.styled.ts b/src/components/comment/comment/Comment.styled.ts
@@ -33,23 +33,40 @@ const Comment = styled.li`
 		.comment-icon {
 			display: flex;
 			align-items: center;
-			gap: 0.6rem;
+			gap: 0.8rem;
 
 			.nickname {
 				color: #373f41;
 				font-size: 1.2rem;
 				font-weight: 600;
 			}
 
-			.createAt {
+			.create-at {
 				color: #8e8e8e;
 				font-size: 1.2rem;
 			}
+
+			.writer-mark {
+				margin-left: 0.4rem;
+				display: flex;
+				padding: 0.5rem 0.8rem;
+				justify-content: center;
+				align-items: center;
+				gap: 0.4rem;
+				border-radius: 2rem;
+				border: 1px solid #5877fc;
+				background: #f3f5ff;
+				color: #5877fc;
+				font-family: Pretendard;
+				font-size: 1rem;
+			}
 		}
 
 		.comment-info {
 			display: flex;
 			flex-direction: column;
+			margin-left: 3.2rem;
+			margin-top: 0.76rem;
 			gap: 0.3rem;
 
 			span {
@@ -108,17 +125,17 @@ const Comment = styled.li`
 		height: 0.075rem;
 		margin: 1.6rem 0;
 		width: 100%;
-		opacity: 0.96;
+		border: none;
 		background: #e3e3e3;
 	}
 
 	.wrapper-replies {
-		padding-left: 3rem;
-		box-sizing: border-box;
+		width: 100%;
 
 		.container-reply__lists {
 			display: flex;
 			flex-direction: column;
+			width: 100%;
 		}
 	}
 `;

diff --git a/src/components/comment/comment/Comment.tsx b/src/components/comment/comment/Comment.tsx
@@ -7,6 +7,8 @@ import { useCommentEdit, useLogin } from '../../../hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { commentDeleteModalState, userState } from '../../../atom';
+import { ko } from 'date-fns/locale';
+import { formatDistanceToNow, differenceInDays } from 'date-fns';
 
 const Comment = ({
 	id,
@@ -33,6 +35,8 @@ const Comment = ({
 	const editComment = useCommentEdit();
 	const userInfo = useRecoilValue(userState);
 	const isCommentWriter = userId === userInfo?.userId;
+	const diffDays = differenceInDays(new Date(), new Date(createAt));
+	const time = formatDistanceToNow(new Date(createAt), { locale: ko, addSuffix: true });
 
 	const optionLists = [
 		{
@@ -124,10 +128,9 @@ const Comment = ({
 						</section>
 						<span className='nickname'>{nickname}</span>
 						{!isEdit && (
-							<span className='createAt'>
-								{createAt.length > 10 ? createAt.slice(0, -9) : createAt}
-							</span>
+							<span className='create-at'>{diffDays > 3 ? createAt.slice(0, -9) : time}</span>
 						)}
+						{isWriter && <section className='writer-mark'>작성자</section>}
 					</section>
 					<section className='comment-info'>
 						{!isEdit ? (
@@ -171,7 +174,7 @@ const Comment = ({
 					<KebabMenu options={isCommentWriter ? optionLists : optionListsOthers} />
 				)}
 			</section>
-			<hr />
+			<hr className='' />
 			<section className='wrapper-replies'>
 				<ul className='container-reply__lists'>
 					{replies?.map(reply => {

diff --git a/src/components/comment/comment/ReplyComment.styled.ts b/src/components/comment/comment/ReplyComment.styled.ts
@@ -101,14 +101,6 @@ const ReplyComment = styled.div`
 			}
 		}
 	}
-
-	hr {
-		height: 0.075rem;
-		margin: 1.6rem 0;
-		width: 100%;
-		opacity: 0.96;
-		background: #e3e3e3;
-	}
 `;
 
 const S = { ReplyComment };

diff --git a/src/components/comment/comment/ReplyComment.tsx b/src/components/comment/comment/ReplyComment.tsx
@@ -8,6 +8,8 @@ import { useCommentEdit, useLogin } from '../../../hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { userState, replyDeleteModalState } from '../../../atom';
+import { ko } from 'date-fns/locale';
+import { formatDistanceToNow, differenceInDays } from 'date-fns';
 
 const ReplyComment = ({
 	id,
@@ -31,6 +33,8 @@ const ReplyComment = ({
 	const editComment = useCommentEdit();
 	const userInfo = useRecoilValue(userState);
 	const isCommentWriter = userId === userInfo?.userId;
+	const diffDays = differenceInDays(new Date(), new Date(createAt));
+	const time = formatDistanceToNow(new Date(createAt), { locale: ko, addSuffix: true });
 
 	const optionLists = [
 		{
@@ -113,7 +117,10 @@ const ReplyComment = ({
 							<ProfileImage url={profileImg} userId={userId} size='2.31rem' />
 						</section>
 						<span className='nickname'>{nickname}</span>
-						{!isEdit && <span className='createAt'>{createAt.slice(0, -9)}</span>}
+						{!isEdit && (
+							<span className='createAt'>{diffDays > 3 ? createAt.slice(0, -9) : time}</span>
+						)}
+						{isWriter && <section className='writer-mark'>작성자</section>}
 					</section>
 					<section className='comment-info'>
 						{!isEdit ? (
@@ -158,7 +165,7 @@ const ReplyComment = ({
 					<KebabMenu options={isCommentWriter ? optionLists : optionListsOthers} />
 				)}
 			</section>
-			<hr />
+			<hr className='reply-hr' />
 			{isDelete.isDelete && (
 				<section className='modal-background'>
 					<CommentDeleteModal pageNum={pageNum} commentId={isDelete.id} type='reply' />

diff --git a/src/components/comment/commentInput/CommentInput.styled.ts b/src/components/comment/commentInput/CommentInput.styled.ts
@@ -26,7 +26,7 @@ const CommentInput = styled.div`
 
 			textarea {
 				display: flex;
-				width: 90rem;
+				width: 100%;
 				height: 11.2rem;
 				padding: 1.6rem 2rem;
 				align-items: flex-start;
@@ -49,7 +49,7 @@ const CommentInput = styled.div`
 		.container-length_counter {
 			display: flex;
 			justify-content: flex-end;
-			margin-top: -1.61rem;
+			margin-top: -1.11rem;
 		}
 
 		.container-btn {

diff --git a/src/components/comment/replyInput/ReplyInput.styled.ts b/src/components/comment/replyInput/ReplyInput.styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const ReplyInput = styled.div`
+const ReplyInput = styled.section`
 	width: 100%;
 	display: flex;
 	align-items: flex-start;
@@ -10,7 +10,8 @@ const ReplyInput = styled.div`
 		margin-top: 0.7rem;
 	}
 
-	.wrapper {
+	.wrapper-reply__input {
+		width: 100%;
 		display: flex;
 		gap: 2rem;
 		flex-direction: column;
@@ -32,10 +33,12 @@ const ReplyInput = styled.div`
 			margin-top: -0.5rem;
 			display: flex;
 			gap: 1rem;
+			width: 100%;
 
 			textarea {
 				display: flex;
-				width: 80.957rem;
+				width: 100%;
+				/* width: 90.0164rem; */
 				height: 11.2rem;
 				padding: 1.6rem 2rem;
 				align-items: flex-start;

diff --git a/src/components/comment/replyInput/ReplyInput.tsx b/src/components/comment/replyInput/ReplyInput.tsx
@@ -55,36 +55,38 @@ const ReplyInput = ({
 	};
 
 	return (
-		<S.ReplyInput className='reply-container'>
-			<img className='reply-icon' src={Reply} />
-			<article className='wrapper'>
-				<section className='container-user__icon'>
-					<div>
-						{userInfo?.userId && (
-							<ProfileImage url={userInfo?.imageUrl} userId={userInfo?.userId} size='2.31rem' />
-						)}
-					</div>
-					<span>{userInfo?.nickname}</span>
-				</section>
-				<section className='container-user__input'>
-					<textarea
-						value={contents}
-						onChange={onChangeHandler}
-						maxLength={1000}
-						placeholder='답글을 입력해주세요.'
-					/>
-				</section>
-				<section className='container-btn'>
-					<button type='button' className='cancel-btn' onClick={onClickCancel}>
-						취소
-					</button>
-					<button type='button' onClick={addReply} className='submit-btn'>
-						저장
-					</button>
-				</section>
-			</article>
+		<React.Fragment>
+			<S.ReplyInput>
+				<img className='reply-icon' src={Reply} />
+				<article className='wrapper-reply__input'>
+					<section className='container-user__icon'>
+						<div>
+							{userInfo?.userId && (
+								<ProfileImage url={userInfo?.imageUrl} userId={userInfo?.userId} size='2.31rem' />
+							)}
+						</div>
+						<span>{userInfo?.nickname}</span>
+					</section>
+					<section className='container-user__input'>
+						<textarea
+							value={contents}
+							onChange={onChangeHandler}
+							maxLength={1000}
+							placeholder='답글을 입력해주세요.'
+						/>
+					</section>
+					<section className='container-btn'>
+						<button type='button' className='cancel-btn' onClick={onClickCancel}>
+							취소
+						</button>
+						<button type='button' onClick={addReply} className='submit-btn'>
+							저장
+						</button>
+					</section>
+				</article>
+			</S.ReplyInput>
 			<hr />
-		</S.ReplyInput>
+		</React.Fragment>
 	);
 };