Merge pull request #168 from TRIP-Side-Project/dev

Merg: 13차 합병 (찐찐 최종)

README.md

@@ -1,9 +1,9 @@
 # 🏖️ TRIPTRIP
-**`프로젝트 소개`**  네이버 쇼핑 여행 상품을 소개 및 연결하고 여행지 후기 커뮤니티를 이용할 수 있는 서비스를 제공하는 사이트입니다.
+**`프로젝트 소개`**  국내 여행지 관련 네이버 상품 API를 활요한 여행 상품 소개 및 커뮤니티 사이트
 
-**`개발기간`**  2023.11.27 - 2023.12.22
+**`개발기간`**  2023.11.27 - 2023.12.29 (5주)
 
-**`배포링크`**  <https://dkoqktaeu3tic.cloudfront.net/>
+**`배포링크`**  [**TRIPTRIP**](https://triptrip.site/) 
 
 
 <br/>
@@ -21,13 +21,16 @@
   <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white"/>
   <img src="https://img.shields.io/badge/Axios-5A29E4?style=flat-square&logo=axios&logoColor=white"/>
 </div>
+<div>
+  <img src="https://img.shields.io/badge/AWS-232F3E?style=flat-square&logo=amazonaws&logoColor=white"/>
+</div>
 
 
 <br/>
 
 ## 🧑‍💻 프론트엔드 멤버구성
 
-**조혜진 :** 여행 포럼 CRUD, 마이페이지, 실시간 알림, 검색
+**조혜진 :** 여행 포럼 CRUD, 마이페이지, 실시간 알림, 검색, AWS 배포
 
 **박효정 :** 회원가입, 로그인, Oauth, 상품 CRUD 
 
@@ -40,3 +43,16 @@
 - 뚜벅이 여행자들을 위한 고속버스 시간표 보기
 - 이미 다녀온 선배 여행자들의 여행 후기 커뮤니티
 - 관심있는 여행지 상품 새 등록 시 실시간 알림
+- 마이페이지에서 프로필 수정 및 관심 태그 설정
+- 반응형 웹 페이지
+- 다크모드, 라이트 모드 
+
+<br/>
+
+## 👤 유저 플로우
+<div style="display:flex; justify-content:center;"><img src="https://github.com/TRIP-Side-Project/frontend/assets/110151638/3edf1a7d-65ad-4dde-9781-04cd54f5ca46" style="border-radius:15px; height:420px;"/>
+</div>
+<br/>
+
+[** Firma 링크 연결](https://www.figma.com/file/hYVTH99DZpDE7XYoRqB8jt/userflow?type=whiteboard&t=86t69VdYqx2Rkdtp-1)
+

src/common/tag/RecoilTag.tsx

@@ -65,8 +65,8 @@ const RecoilTag = ({
 			<div
 				className={
 					inputStyle
-						? "flex flex-row rounded-lg border border-BASIC_BLACK px-2 py-1 mt-2 w-full h-fit md:h-9"
-						: "flex text-sm font-semibold border bg-BAISC_WHITE flex-row px-3 rounded-xl border-BASIC_BLACK h-fit md:h-9"
+						? "flex flex-row rounded-lg border border-BASIC_BLACK px-2 mt-2 w-full h-fit "
+						: "flex text-sm font-semibold border bg-BAISC_WHITE flex-row px-3 rounded-xl border-BASIC_BLACK h-fit"
 				}
 				onClick={onOffTag}
 			>

src/components/comment/Comment.tsx

@@ -43,6 +43,7 @@ const Comment = () => {
 	const handleHideComment = (commentId: number) => {
 		setIsHide(!isHide);
 		setShowComment(commentId);
+		// console.log(`comment ${commentId}`);
 	};
 
 	const getComments = async () => {
@@ -92,6 +93,7 @@ const Comment = () => {
 								isHide={isHide}
 								setIsHide={() => handleHideComment(comment.commentId)}
 								type={"origin"}
+								showComment={showComment}
 							/>
 							{isHide &&
 							comment.children !== null &&
@@ -102,7 +104,11 @@ const Comment = () => {
 											className="flex flex-row justify-between px-2 ml-10 "
 										>
 											<ArrowComment width={"25px"} height={"25px"} />
-											<CommentItem datas={childComment} type={"child"} />
+											<CommentItem
+												datas={childComment}
+												type={"child"}
+												showComment={showComment}
+											/>
 										</div>
 								  ))
 								: null}

src/components/comment/CommentItem.tsx

@@ -11,21 +11,32 @@ interface CommentItems {
 	datas: CommentTypes;
 	isHide?: boolean;
 	setIsHide?: () => void;
+	showComment: number | null;
 	type: "origin" | "child";
 }
 
-const CommentItem = ({ datas, isHide, setIsHide, type }: CommentItems) => {
+const CommentItem = ({
+	datas,
+	isHide,
+	setIsHide,
+	type,
+	showComment,
+}: CommentItems) => {
 	const [isEdit, setIsEdit] = useState(false);
 	const [is2CHide, setIs2CHide] = useState(false);
 	const [editCommitId, setEditCommentId] = useState<number | null>(null);
+	// const [reHcommentId, setReHcommentId] = useState<number | null>(null);
 	const MEMBER_ID = window.localStorage.getItem("memberId"); //임시
-	//console.log(datas);
+	// console.log(datas);
 	const formattedDate = useFormatDate(datas.createdAt);
 
 	const handle2CHide = (commentId: number) => {
 		setEditCommentId(commentId);
 		setIs2CHide(!is2CHide);
 	};
+	// const handleReCHide = (reCommentId: number) => {
+	// 	setReHcommentId(reCommentId)
+	// }
 
 	//css
 	const bgClass =
@@ -87,9 +98,11 @@ const CommentItem = ({ datas, isHide, setIsHide, type }: CommentItems) => {
 							{datas.children !== null && datas.children.length !== 0 ? (
 								<HideComment
 									isHide={isHide as boolean}
-									onClick={setIsHide as () => void}
+									setIsHide={setIsHide as () => void}
+									showComment={showComment}
 									isLength={datas.children.length}
 									key={`comment-showComment-${datas.commentId}`}
+									curId={datas.commentId}
 								/>
 							) : (
 								<></>

src/components/comment/HideComment.tsx

@@ -3,31 +3,39 @@ import ArrowUp from "@/assets/svg/ArrowUp";
 
 export interface hideTypes {
 	isHide: boolean;
-	onClick: () => void;
+	setIsHide: () => void;
+	showComment: number | null;
 	isLength?: null | number;
+	curId: number | null;
 }
 
-const HideComment = ({ isHide, onClick, isLength }: hideTypes) => {
+const HideComment = ({
+	isHide,
+	setIsHide,
+	isLength,
+	showComment,
+	curId,
+}: hideTypes) => {
+	// console.log(`HideComment ${curId}`);
+
 	const textStyle =
 		"text-sm text-ETC_COLOR hover:font-semibold cursor-pointer flex flex-row items-center";
 
-	if (isHide === true) {
-		return (
-			<button className={textStyle} onClick={onClick}>
-				<ArrowUp width={"12px"} height={"12px"} />
-				댓글 숨기기
-			</button>
-		);
-	}
-
-	if (isHide === false) {
-		return (
-			<button className={textStyle} onClick={onClick}>
-				<ArrowDown width={"12px"} height={"12px"} />
-				{`댓글 ${isLength}개 보기`}
-			</button>
-		);
-	}
+	return (
+		<button className={textStyle} onClick={setIsHide}>
+			{isHide && curId === showComment ? (
+				<>
+					<ArrowUp width={"12px"} height={"12px"} />
+					댓글 숨기기
+				</>
+			) : (
+				<>
+					<ArrowDown width={"12px"} height={"12px"} />
+					{`댓글 ${isLength}개 보기`}
+				</>
+			)}
+		</button>
+	);
 };
 
 export default HideComment;

src/components/header/Header.tsx

@@ -50,9 +50,10 @@ const Header = () => {
 
 	//로그아웃 클릭 핸들
 	const handleLogOut = () => {
-		// localStorage.removeItem("access_token");
+		localStorage.removeItem("access_token");
+		localStorage.removeItem("memberId");
 		// localStorage.removeItem("");
-		localStorage.clear();
+		// localStorage.clear();
 		setIsLogin({ loginState: false });
 		setIsNotifiOpen(false);
 		window.location.href = "/";