Merge pull request #8 from cookies-yam/feat/postsPage

[feat] 게시물 페이지
cookies-yam · Jun 28, 2023 · 8c9753f · 8c9753f
2 parents c6b4027 + 5c1c83f
commit 8c9753f
Showing 1 changed file with 51 additions and 31 deletions.
diff --git a/src/pages/PostsPage.jsx b/src/pages/PostsPage.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
 
 import BackButton from '../components/common/navBar/BackButton';
@@ -26,62 +28,80 @@ function PostsPage() {
       confirmButtonText: CONFIRM,
       cancelButtonText: CANCEL,
       reverseButtons: true,
+    }).then((result) => {
+      if (result.isConfirmed) navigate('/signin');
     });
   };
 
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const imageUrl = JSON.parse(localStorage.getItem('imageUrl'));
+  const title = JSON.parse(localStorage.getItem('title'));
+  const category = JSON.parse(localStorage.getItem('category'));
+  const totalAmount = JSON.parse(localStorage.getItem('totalAmount'));
+  const maxPeople = JSON.parse(localStorage.getItem('maxPeople'));
+  const textarea = JSON.parse(localStorage.getItem('textarea'));
+
+  const divisionAmount = (totalAmount / (maxPeople + 1)).toLocaleString();
+
   return (
-    <div class="relative">
-      <div class="w-[100%] h-[340px] bg-gray"></div>
-      <div class="top-[47px] absolute">
+    <div className="">
+      <div className="w-[100%] mt-[47px]">
         <BackButton />
       </div>
 
-      <div class="overflow-scroll h-[400px]">
-        <FriendsProfile />
-        <div class="mt-[15px] mx-[15px] mb-[3px] text-[16px] font-semibold">
-          {'프로틴 바/ 다크 초코씨솔트&카라멜넛, 마이프로틴 바'}
-        </div>
-        <div class="mx-[15px] text-[10px] text-smokeGray">{`${'과자/간식/시리얼/빙과'} | ${'20분'}${BEFORE}`}</div>
-        <div class="pt-[34px] mb-[26px] mx-[15px] text-[13px]">
-          {
-            '정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~정말 맛있어요~~~'
-          }
+      <div className="flex justify-center">
+        <img
+          alt=""
+          src={imageUrl}
+          className="flex w-[360px] h-[238px] mt-[11px] bg-gray rounded-[15px] cursor-pointer"
+        />
+      </div>
+
+      <div className="overflow-scroll h-[400px]">
+        <div className="mx-[15px]">
+          <FriendsProfile />
         </div>
+        <div className="mt-[15px] mx-[15px] mb-[3px] text-[16px] font-semibold">{title}</div>
+        {/* TODO: 시간 추후 수정 필요 */}
+        <div className="mx-[15px] text-[10px] text-smokeGray">{`${category} | ${'20분'}${BEFORE}`}</div>
+        <div className="pt-[34px] mb-[26px] mx-[15px] text-[13px]">{textarea}</div>
 
-        <div class="w-[360px] h-[200px] p-[14px] mx-[15px] mb-[93px] rounded-[10px] bg-hexGray">
-          <div class="w-[332px] h-[113px] p-[13px] rounded-[10px] bg-white font-medium text-[13px]">
-            <div class="flex justify-between pb-[13px] border-b-[0.5px] border-gray font-medium">
+        <div className="w-[360px] h-[200px] p-[14px] mx-[15px] mb-[93px] rounded-[10px] bg-hexGray">
+          <div className="w-[332px] h-[113px] p-[13px] rounded-[10px] bg-white font-medium text-[13px]">
+            <div className="flex justify-between pb-[13px] border-b-[0.5px] border-gray font-medium">
               <div>{SUM}</div>
               <div>
-                <div>{`${'20,000'}${WON}`}</div>
-                <div class="float-right">{DIVISION}</div>
+                <div>{`${totalAmount.toLocaleString()}${WON}`}</div>
+                <div className="float-right">{DIVISION}</div>
               </div>
             </div>
 
-            <div class="flex justify-between items-center h-[47px] font-bold text-[16px] text-mainColor">
+            <div className="flex justify-between items-center h-[47px] font-bold text-[16px] text-mainColor">
               <div>{ACTUAL_PAYMENT_AMOUNT}</div>
-              <div>{`${'5,000'}${WON}`}</div>
+              <div>{`${divisionAmount}${WON}`}</div>
             </div>
           </div>
 
-          <div class="flex justify-between px-[13px] pt-[10px] text-[13px] font-medium">
-            <div>{`내 1/${'4'} 부담금`}</div>
-            <div>{`${'5,000'}${WON}`}</div>
+          <div className="flex justify-between px-[13px] pt-[10px] text-[13px] font-medium">
+            <div>{`내 1/${maxPeople + 1} 부담금`}</div>
+            <div>{`${divisionAmount}${WON}`}</div>
           </div>
 
-          <div class="flex justify-between px-[13px] pt-[10px] text-[13px] font-medium">
-            <div>{`파티원 ${'3'}명의 몫`}</div>
-            <div>{`${'15,000'}${WON}`}</div>
+          <div className="flex justify-between px-[13px] pt-[10px] text-[13px] font-medium">
+            <div>{`파티원 ${maxPeople}명의 몫`}</div>
+            <div>{`${(totalAmount - totalAmount / maxPeople).toLocaleString()}${WON}`}</div>
           </div>
         </div>
       </div>
 
-      <div class="flex justify-between w-[100%] h-[107px] px-[15px] pt-[18px] fixed bottom-0 border-t-[0.2px] border-gray bg-white">
-        <div class="flex flex-col h-[50px]">
-          <div class="text-[10px] text-smokeGray">{`${SUM} ${'20,000'}${WON}`}</div>
-          <div class="font-bold text-[16px] text-mainColor">{`${ACTUAL_PAYMENT_AMOUNT} ${'5,000'}${WON}`}</div>
+      <div className="flex justify-between w-[100%] h-[107px] px-[15px] pt-[18px] fixed bottom-0 border-t-[0.2px] border-gray bg-white">
+        <div className="flex flex-col h-[50px]">
+          <div className="text-[10px] text-smokeGray">{`${SUM} ${totalAmount.toLocaleString()}${WON}`}</div>
+          <div className="font-bold text-[16px] text-mainColor">{`${ACTUAL_PAYMENT_AMOUNT} ${divisionAmount}${WON}`}</div>
         </div>
-        <button onClick={joinAsMember} class="w-[133px] h-[36px] rounded-[5px] bg-mainColor text-white text-[13px]">
+        <button onClick={joinAsMember} className="w-[133px] h-[36px] rounded-[5px] bg-mainColor text-white text-[13px]">
           {JOIN}
         </button>
       </div>