리뷰 작성하기 다중 이미지 작성 수정 (#63)

project-Masil · Aug 4, 2024 · 490e8e6 · 490e8e6
2 parents c559c57 + 244a97a
commit 490e8e6
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 12 deletions.
diff --git a/src/app/(no_header)/_component/_ProfileForm/ProfileForm.tsx b/src/app/(no_header)/_component/_ProfileForm/ProfileForm.tsx
@@ -47,7 +47,6 @@ export default function ProfileForm() {
   const mutation = useSignUpMutation();
 
   const OnsubmitHandler: SubmitHandler<formInputs> = async (data) => {
-    console.log('data = ', data);
     userInfoState.setUserInfo({
       nickName: data.nickName,
       profileImg: userInfoState.userInfo.profileImg,

diff --git a/src/app/(no_header)/my-setting/_component/LogOutModal.tsx b/src/app/(no_header)/my-setting/_component/LogOutModal.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import React from 'react';
 import Button from '@/components/Button/Button';
 

diff --git a/src/app/review/write/_components/DetailReviewImg.tsx b/src/app/review/write/_components/DetailReviewImg.tsx
@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import React from 'react';
+import Icon from '@/components/Icon/Icon';
+
+type DetailReviewImgProps = {
+  setImgModal: React.Dispatch<React.SetStateAction<boolean>>;
+  onMoveIndexHandler: (arrow: 'left' | 'right') => void;
+  urlList: string[];
+  selectImgUrlIdx: number;
+  setSelectImgUrlIdx: React.Dispatch<React.SetStateAction<number>>;
+  onRemoveImgUrlHandler: () => void;
+};
+
+export default function DetailReviewImg({
+  setImgModal,
+  onMoveIndexHandler,
+  urlList,
+  selectImgUrlIdx,
+  setSelectImgUrlIdx,
+  onRemoveImgUrlHandler,
+}: DetailReviewImgProps) {
+  return (
+    <div className="absolute left-0 top-0 w-full h-full flex flex-col justify-center items-center">
+      <div
+        className="fixed z-modal left-0 right-0 top-0 mx-auto my-0 max-w-screen_max h-full bg-black opacity-80"
+        onClick={() => setImgModal((prev) => !prev)}
+      />
+      <div className="relative z-modal w-4/5 h-3/4 bg-white">
+        <span
+          onClick={() => setImgModal((prev) => !prev)}
+          className="absolute inline-block bg-button_bg_default hover:bg-button_bg_clicked p-2 rounded-full cursor-pointer top-4 right-4">
+          <Icon filter="WHITE" name="close" />
+        </span>
+        <span
+          onClick={() => onMoveIndexHandler('left')}
+          className="absolute top-1/2 cursor-pointer opacity-40 hover:opacity-100">
+          <Icon size={32} filter="WHITE" name="arrow_left" />
+        </span>
+        <span
+          onClick={() => onMoveIndexHandler('right')}
+          className="absolute top-1/2 right-0 cursor-pointer opacity-40 hover:opacity-100">
+          <Icon size={32} filter="WHITE" name="arrow_right" />
+        </span>
+        <Image
+          src={urlList[selectImgUrlIdx]}
+          alt="img"
+          width={400}
+          height={400}
+          priority
+          className="w-full h-full object-cover"
+        />
+        <div className="relative -bottom-3 ">
+          <div className="gap-2 left-0 w-full flex justify-center">
+            {urlList?.map((el, idx) => (
+              <span
+                onClick={() => setSelectImgUrlIdx(idx)}
+                key={idx}
+                className={clsx(
+                  'inline-block w-3 h-3 rounded-full cursor-pointer',
+                  selectImgUrlIdx === idx ? 'bg-primary' : 'bg-gray'
+                )}
+              />
+            ))}
+            <span
+              onClick={() => onRemoveImgUrlHandler()}
+              className="absolute cursor-pointer font-bold -bottom-2 right-2 text-gray hover:text-primary">
+              지우기
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/review/write/_components/Main.tsx b/src/app/review/write/_components/Main.tsx
@@ -7,6 +7,7 @@ import { reviewStore } from '@/store/userStore';
 import { reviewFormInputs } from '@/types/user/form';
 import ReviewDetailRating from '../../[reviewId]/_components/ReviewDetailRating';
 import ReviewDetailTags from '../../[reviewId]/_components/ReviewDetailTags';
+import DetailReviewImg from './DetailReviewImg';
 import Footer from './Footer';
 import Header from './Header';
 import ReviewImg from './ReviewImg';
@@ -16,16 +17,17 @@ import TextArea from './TextArea';
 
 export default function Main() {
   const reviewStatus = reviewStore();
-  // const imgUrls: string[] = [];
   const [urlList, setUrlList] = useState<string[]>();
   const imgRef = useRef<HTMLInputElement | null>(null);
-
+  const [imgModal, setImgModal] = useState(false);
+  const [selectImgUrlIdx, setSelectImgUrlIdx] = useState(0);
   const { register, handleSubmit, watch } = useForm<reviewFormInputs>();
+  console.log('setSelectImgUrlIdx = ', setSelectImgUrlIdx);
 
   const imgFiles = watch('img');
 
   useEffect(() => {
-    const newUrl: string[] = [];
+    let newUrl: string[] = [];
     for (let i = 0; i < imgFiles?.length; i++) {
       // 기존에 정의된 변수 사용
       const binaryData = [imgFiles[i]];
@@ -34,6 +36,9 @@ export default function Main() {
       );
       newUrl.push(urlImage);
     }
+    if (urlList) {
+      newUrl = [...urlList, ...newUrl];
+    }
     setUrlList(newUrl);
     reviewStatus.setImgFiles(newUrl);
   }, [imgFiles]);
@@ -42,11 +47,27 @@ export default function Main() {
     // TO-DO: 데이터 전달하기
   };
 
+  const onRemoveImgUrlHandler = () => {
+    setUrlList(urlList?.filter((el) => el !== urlList[selectImgUrlIdx]));
+    setSelectImgUrlIdx((prev) => prev - 1);
+    selectImgUrlIdx === 0 && setImgModal((prev) => !prev);
+  };
+
   const onDeleteLocaHandler = () => {
     reviewStatus.setResetPlaceState();
     reviewStatus.setCafeName('');
   };
 
+  const onMoveIndexHandler = (arrow: string) => {
+    if (arrow === 'left') {
+      selectImgUrlIdx !== 0 && setSelectImgUrlIdx((prev) => prev - 1);
+    } else {
+      urlList &&
+        selectImgUrlIdx !== urlList?.length - 1 &&
+        setSelectImgUrlIdx((prev) => prev + 1);
+    }
+  };
+
   return reviewStatus.searchLoca ? (
     <SearchForm />
   ) : (
@@ -57,7 +78,12 @@ export default function Main() {
         <div className="h-full">
           <Header />
           {urlList && urlList.length > 0 && (
-            <ReviewImg urlList={urlList} setList={setUrlList} />
+            <ReviewImg
+              setImgModal={setImgModal}
+              setSelectImgUrlIdx={setSelectImgUrlIdx}
+              urlList={urlList}
+              setList={setUrlList}
+            />
           )}
         </div>
         <TextArea />
@@ -91,6 +117,16 @@ export default function Main() {
       </form>
 
       {reviewStatus.modalState && <ReviewModal />}
+      {imgModal && urlList && urlList?.length > 0 && (
+        <DetailReviewImg
+          setImgModal={setImgModal}
+          onMoveIndexHandler={onMoveIndexHandler}
+          urlList={urlList}
+          selectImgUrlIdx={selectImgUrlIdx}
+          setSelectImgUrlIdx={setSelectImgUrlIdx}
+          onRemoveImgUrlHandler={onRemoveImgUrlHandler}
+        />
+      )}
       <Footer
         clickHandler={() => imgRef.current?.click()}
         register={register}

diff --git a/src/app/review/write/_components/ReviewImg.tsx b/src/app/review/write/_components/ReviewImg.tsx
@@ -5,9 +5,16 @@ import { reviewStore } from '@/store/userStore';
 type ReviewImgProps = {
   urlList: string[];
   setList: React.Dispatch<React.SetStateAction<string[] | undefined>>;
+  setImgModal: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectImgUrlIdx: React.Dispatch<React.SetStateAction<number>>;
 };
 
-export default function ReviewImg({ urlList, setList }: ReviewImgProps) {
+export default function ReviewImg({
+  urlList,
+  setList,
+  setImgModal,
+  setSelectImgUrlIdx,
+}: ReviewImgProps) {
   const MAX_IMAGE_COUNT = 2;
   const additionalImages = urlList.slice(0, MAX_IMAGE_COUNT);
   const extraCount = urlList.length - MAX_IMAGE_COUNT - 1;
@@ -19,10 +26,18 @@ export default function ReviewImg({ urlList, setList }: ReviewImgProps) {
     reviewStatus.setImgFiles(newArr);
   };
 
+  const imgSelectedHandler = (idx: number) => {
+    setImgModal((prev) => !prev);
+    setSelectImgUrlIdx(idx);
+  };
+
   return (
     <ul className="flex justify-center h-28 max:h-[90px] overflow-hidden gap-3 my-3">
       {additionalImages.map((img, idx) => (
-        <li key={idx} className="relative basis-1/3 rounded-md overflow-hidden">
+        <li
+          onClick={() => imgSelectedHandler(idx)}
+          key={idx}
+          className="relative basis-1/3 rounded-md overflow-hidden cursor-pointer">
           <Image
             src={img}
             alt={img}
@@ -33,14 +48,19 @@ export default function ReviewImg({ urlList, setList }: ReviewImgProps) {
             priority
           />
           <span
-            onClick={() => uploadImgHandler(img)}
+            onClick={(e) => {
+              e.stopPropagation();
+              uploadImgHandler(img);
+            }}
             className="cursor-pointer absolute top-3 right-1 z-dim w-5 h-5 bg-button_bg_default hover:bg-button_bg_clicked text-white rounded-full flex items-center justify-center">
             x
           </span>
         </li>
       ))}
       {urlList.length > 2 && (
-        <li className="relative basis-1/3 rounded-md overflow-hidden">
+        <li
+          onClick={() => imgSelectedHandler(2)}
+          className="relative basis-1/3 rounded-md overflow-hidden cursor-pointer">
           <Image
             src={urlList[2]}
             alt={urlList[2]}

diff --git a/src/components/SideNavBar/SideNavBarHeader.tsx b/src/components/SideNavBar/SideNavBarHeader.tsx
@@ -23,7 +23,7 @@ export default function SideNavBarHeader({
   // Todo: 유저 정보 저장 로직에 따라 재작업 필요
   const queryClient = useQueryClient();
   const data = queryClient.getQueryData<UserData>(['Me']);
-  console.log('data = ', data);
+
   return (
     <div className="flex justify-between items-center">
       <div className="flex gap-8">

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -1,4 +1,4 @@
-import type { NextRequest } from 'next/server';
+import { NextRequest } from 'next/server';
 
 export async function middleware(request: NextRequest) {
   const accessToken = request.cookies.get('accessToken')?.value;