Merge pull request #145 from FinalDoubleTen/FE-79--feat/MypageReview

Fe 79 feat/mypage review
WePlanPlans · Jan 12, 2024 · cc7a233 · cc7a233
2 parents c068626 + 8b4caa2
commit cc7a233
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 153 deletions.
diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx
@@ -25,6 +25,8 @@ import ReviewItem from './ReviewItem';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import EditDelete from '@components/common/modal/children/EditDelete';
 import MyAlert from '@components/common/modal/children/MyAlert';
+import { alertTypeState } from '@recoil/modal';
+
 interface reviewProps {
   reviewData: any;
 }
@@ -45,6 +47,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
   const setIsModifyingReview = useSetRecoilState(isModifyingReviewState);
   const [toastPopUp, setToastPopUp] = useRecoilState(toastPopUpState);
   const modalChildren = useRecoilValue(modalChildrenState);
+  const alertType = useRecoilValue(alertTypeState);
 
   const {
     data: toursReviews,
@@ -129,7 +132,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
       </div>
       {reviewDataLength == 0 && (
         <div
-          className="flex cursor-pointer flex-col items-center justify-center"
+          className="flex cursor-pointer flex-col items-center justify-center pb-10"
           onClick={handlePostingReivew}>
           <div className="mb-2 flex">
             {Array.from({ length: 5 }, (_, index) => (
@@ -179,9 +182,15 @@ export default function DetailReviews({ reviewData }: reviewProps) {
       </InfiniteScroll>
       <Modal isOpen={isModalOpen} closeModal={closeModal}>
         {modalChildren === 'EditDelete' && <EditDelete />}
-        {modalChildren === 'MyAlert' && (
+        {modalChildren === 'MyAlert' && alertType === 'DeleteReview' && (
           <MyAlert title="리뷰 삭제" content="리뷰를 삭제할까요?" />
         )}
+        {modalChildren === 'MyAlert' && alertType === 'LoginReview' && (
+          <MyAlert
+            title="로그인"
+            content="리뷰 쓰기 시 로그인이 필요해요. 로그인하시겠어요?"
+          />
+        )}
       </Modal>
     </>
   );

diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -111,25 +111,25 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
   };
 
   return (
-    <>
-      <div className="cursor-pointer pb-4" onClick={onClick}>
-        <div className=" mb-5 flex items-center">
-          <div className="mr-2">
-            {!(
-              authorProfileImageUrl === 'http://asiduheimage.jpg' ||
-              authorProfileImageUrl === null
-            ) ? (
-              <img
-                src={authorProfileImageUrl}
-                alt="유저 프로필"
-                className="w-12 rounded-full"
-              />
-            ) : (
-              <NullUser className="" />
-            )}
-          </div>
-          <div className=" mr-2 flex flex-col gap-1">
-            <div className="font-bold">{authorNickname}</div>
+    <div className="cursor-pointer pb-6" onClick={onClick}>
+      <div className=" mb-5 flex items-center">
+        <div className="mr-2">
+          {!(
+            authorProfileImageUrl === 'http://asiduheimage.jpg' ||
+            authorProfileImageUrl === null
+          ) ? (
+            <img
+              src={authorProfileImageUrl}
+              alt="유저 프로필"
+              className="h-[60px] w-[60px] rounded-full"
+            />
+          ) : (
+            <NullUser />
+          )}
+        </div>
+        <div className=" mr-2 flex flex-col gap-1">
+          <div className="font-bold">{authorNickname}</div>
+          <div className="flex gap-2">
             <div className="flex">
               {Array.from({ length: 5 }, (_, index) => (
                 <StarIcon
@@ -141,78 +141,79 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
                 />
               ))}
             </div>
+            <div className="text-sm text-gray4">
+              {formatCreatedTime(createdTime)}
+            </div>
           </div>
-          <div className="mb-0.5 mt-auto text-sm text-gray4">
-            {formatCreatedTime(createdTime)}
+        </div>
+
+        {isAuthor && (
+          <div
+            className="ml-auto cursor-pointer"
+            onClick={(e) => openModal('내 리뷰', reviewId, e)}>
+            <MoreIcon fill="#888888" color="none" />
           </div>
-          {isAuthor && (
+        )}
+      </div>
+      {canTextOverflow ? (
+        <div className="mb-4 ml-1 max-h-12 text-gray7">
+          {content.length > 55 ? `${content.slice(0, 55)}...` : content}
+        </div>
+      ) : (
+        <div className="mb-4 text-gray7">{content}</div>
+      )}
+
+      <div className="flex items-center ">
+        <div className="flex gap-2">
+          {!showMoreKeywords &&
+            keywords.slice(0, 2).map((keyword, idx) => (
+              <div
+                key={idx}
+                className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                {getEmoji(keyword.content)} {keyword.content}
+              </div>
+            ))}
+          {keywords.length > 2 && !showMoreKeywords && (
             <div
-              className="ml-auto cursor-pointer"
-              onClick={(e) => openModal('내 리뷰', reviewId, e)}>
-              <MoreIcon fill="#888888" color="none" />
+              className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
+              onClick={(e) => {
+                handleClickPlusButton(e);
+              }}>
+              +{keywords.length - 2}
             </div>
           )}
         </div>
-        {canTextOverflow ? (
-          <div className="mb-4 max-h-12 overflow-hidden text-gray7">
-            {content.length > 75 ? `${content.slice(0, 75)}...` : content}
-          </div>
-        ) : (
-          <div className="mb-4 text-gray7">{content}</div>
-        )}
-
-        <div className="flex ">
-          <div className="flex gap-2">
-            {!showMoreKeywords &&
-              keywords.slice(0, 2).map((keyword, idx) => (
+        <div>
+          {showMoreKeywords &&
+            Array.from({ length: Math.ceil(keywords.length / 2) }).map(
+              (_, lineIdx) => (
                 <div
-                  key={idx}
-                  className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                  {getEmoji(keyword.content)} {keyword.content}
+                  key={lineIdx}
+                  className={`flex gap-2 ${
+                    lineIdx === Math.ceil(keywords.length / 2) - 1
+                      ? ''
+                      : ' mb-3'
+                  }`}>
+                  {keywords
+                    .slice(lineIdx * 2, lineIdx * 2 + 2)
+                    .map((keyword, idx) => (
+                      <div
+                        key={idx}
+                        className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
+                        {getEmoji(keyword.content)} {keyword.content}
+                      </div>
+                    ))}
                 </div>
-              ))}
-            {keywords.length > 2 && !showMoreKeywords && (
-              <div
-                className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6"
-                onClick={(e) => {
-                  handleClickPlusButton(e);
-                }}>
-                +{keywords.length - 2}
-              </div>
+              ),
             )}
-          </div>
-          <div>
-            {showMoreKeywords &&
-              Array.from({ length: Math.ceil(keywords.length / 2) }).map(
-                (_, lineIdx) => (
-                  <div
-                    key={lineIdx}
-                    className={`flex gap-2 ${
-                      lineIdx === Math.ceil(keywords.length / 2) - 1
-                        ? ''
-                        : ' mb-3'
-                    }`}>
-                    {keywords
-                      .slice(lineIdx * 2, lineIdx * 2 + 2)
-                      .map((keyword, idx) => (
-                        <div
-                          key={idx}
-                          className="rounded-md bg-gray1 px-2 py-1 text-xs text-gray6">
-                          {getEmoji(keyword.content)} {keyword.content}
-                        </div>
-                      ))}
-                  </div>
-                ),
-              )}
-          </div>
+        </div>
 
-          <div className="ml-auto mr-2 flex ">
-            <ChatIcon size={20} color="#5E5E5E" />
-            <div className="ml-1 text-gray5">{commentCount}</div>
-          </div>
+        <div className="ml-auto mr-2 flex ">
+          <ChatIcon size={20} color="#5E5E5E" />
+          <div className="ml-1 text-gray5">{commentCount}</div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx
@@ -13,9 +13,9 @@ const DetailAddSchedule = () => {
   return (
     <Dialog.Root>
       <Dialog.Trigger asChild>
-        <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 ">
-          <CalendarIcon className="mb-[5px]" />
-          <span className="text-sm">일정 추가</span>
+        <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4 ">
+          <CalendarIcon className="mb-[2px]" />
+          <span className="text-sm ">일정 추가</span>
         </button>
       </Dialog.Trigger>
 

diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx
@@ -1,11 +1,14 @@
 import DetailAddSchedule from '@components/DetailSectionTop/DetailAddSchedule';
 import { PenIcon } from '@components/common/icons/Icons';
-import { Modal } from '@components/common/modal';
-import MyAlert from '@components/common/modal/children/MyAlert';
-import { isModalOpenState, modalChildrenState } from '@recoil/modal';
+import {
+  isModalOpenState,
+  modalChildrenState,
+  alertTypeState,
+} from '@recoil/modal';
 import { isModifyingReviewState } from '@recoil/review';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
+import { getItem } from '@utils/localStorageFun';
 
 interface reviewProps {
   reviewData: any;
@@ -17,45 +20,35 @@ export default function DetailTourButtons({ reviewData }: reviewProps) {
   const tourItemId = Number(params.id);
   const navigate = useNavigate();
   const setIsModifyingReview = useSetRecoilState(isModifyingReviewState);
-  const [isModalOpen, setIsModalOpen] = useRecoilState(isModalOpenState);
-  const [modalChildren, setModalChildren] = useRecoilState(modalChildrenState);
+  const setIsModalOpen = useSetRecoilState(isModalOpenState);
+  const setModalChildren = useSetRecoilState(modalChildrenState);
+  const setAlertType = useSetRecoilState(alertTypeState);
 
   const handlePostingReivew = () => {
-    const accessToken = localStorage.getItem('accessToken');
-    if (accessToken) {
+    const token = getItem('accessToken');
+    if (token) {
       navigate(`/reviewPosting/${tourItemId}`, {
         state: { title, contentTypeId },
       });
     } else {
+      setModalChildren('MyAlert');
+      setAlertType('LoginReview');
       setIsModifyingReview(false);
-      setModalChildren('EditDelete');
       setIsModalOpen(true);
     }
   };
 
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
   return (
     <>
       <div className="mt-2 flex w-full items-center justify-between gap-3 py-2.5">
         <DetailAddSchedule />
-        <button className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2">
-          <PenIcon />
-          <span className="text-sm" onClick={handlePostingReivew}>
-            리뷰 쓰기
-          </span>
+        <button
+          onClick={handlePostingReivew}
+          className="flex h-[53px] w-1/2 items-center justify-center gap-2 rounded-lg border border-solid border-gray3 p-2 pr-4">
+          <PenIcon className="mt-[3px]" />
+          <span className="text-sm ">리뷰 쓰기</span>
         </button>
       </div>
-      <Modal isOpen={isModalOpen} closeModal={closeModal}>
-        {modalChildren === 'MyAlert' && (
-          <MyAlert
-            title="로그인"
-            content="리뷰 쓰기 시 로그인이 필요해요. 로그인하시겠어요?"
-          />
-        )}
-      </Modal>
     </>
   );
 }
diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
@@ -56,7 +56,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
 
   return (
     <div className="mb-4 border-t border-solid border-gray-300 pt-4">
-      <div className=" mb-2 flex items-center">
+      <div className=" flex items-center">
         <div className="mr-2">
           {!(
             authorProfileImageUrl === 'http://asiduheimage.jpg' ||
@@ -65,15 +65,15 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
             <img
               src={authorProfileImageUrl}
               alt="유저 프로필"
-              className="w-12 rounded-full"
+              className="w-[60px]rounded-full h-[60px]"
             />
           ) : (
-            <NullUser className="" />
+            <NullUser />
           )}
         </div>
         <div className=" flex flex-col justify-center gap-1">
           <div className="text-sm font-bold">{authorNickname}</div>
-          <div className="text-xs text-gray4">
+          <div className="text-sm text-gray4">
             {formatCreatedTime(createdTime)}
           </div>
         </div>
@@ -85,7 +85,7 @@ const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
           </div>
         )}
       </div>
-      <div className="mb-4 ml-11 w-60 text-sm text-gray7">{content}</div>
+      <div className="ml-14 w-[275px] pl-3 text-sm text-gray7">{content}</div>
     </div>
   );
 };

diff --git a/src/components/Review/DetailReview.tsx b/src/components/Review/DetailReview.tsx
@@ -8,21 +8,19 @@ export default function DetailReview() {
   const { item, tourItemId } = state;
 
   return (
-    <div className="mb-6 ">
-      <ReviewItem
-        key={item.reviewId}
-        reviewId={item.reviewId}
-        authorNickname={item.authorNickname}
-        authorProfileImageUrl={item.authorProfileImageUrl}
-        rating={item.rating}
-        createdTime={item.createdTime}
-        content={item.content}
-        keywords={item.keywords} // keywordId, content, type
-        commentCount={item.commentCount}
-        tourItemId={tourItemId}
-        canTextOverflow={false}
-        isAuthor={item.isAuthor}
-      />
-    </div>
+    <ReviewItem
+      key={item.reviewId}
+      reviewId={item.reviewId}
+      authorNickname={item.authorNickname}
+      authorProfileImageUrl={item.authorProfileImageUrl}
+      rating={item.rating}
+      createdTime={item.createdTime}
+      content={item.content}
+      keywords={item.keywords} // keywordId, content, type
+      commentCount={item.commentCount}
+      tourItemId={tourItemId}
+      canTextOverflow={false}
+      isAuthor={item.isAuthor}
+    />
   );
 }