Merge pull request kookmin-sw#96 from capstone-maru/fix/writing-post-…

…page fix: Post pages
kookmin-sw · May 22, 2024 · 66610df · 66610df
2 parents e7e99c4 + 39c8a21
commit 66610df
Show file tree

Hide file tree

Showing 8 changed files with 194 additions and 15 deletions.
diff --git a/src/app/pages/mobile/mobile-shared-post-page.tsx b/src/app/pages/mobile/mobile-shared-post-page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -513,6 +514,8 @@ export function MobileSharedPostPage({
     setFollowList(newFollowList);
   }, [post]);
 
+  const queryClient = useQueryClient();
+
   if (isLoading || post == null) return <></>;
 
   return (
@@ -547,8 +550,40 @@ export function MobileSharedPostPage({
                           followList[selected.memberId] == null
                         )
                           return;
-                        if (followList[selected.memberId]) unfollow();
-                        else follow();
+                        if (followList[selected.memberId])
+                          unfollow(undefined, {
+                            onSuccess: () => {
+                              if (type === 'hasRoom')
+                                queryClient.invalidateQueries({
+                                  queryKey: [
+                                    `/api/shared/posts/studio/${postId}`,
+                                  ],
+                                });
+                              else
+                                queryClient.invalidateQueries({
+                                  queryKey: [
+                                    `/api/shared/posts/dormitory/${postId}`,
+                                  ],
+                                });
+                            },
+                          });
+                        else
+                          follow(undefined, {
+                            onSuccess: () => {
+                              if (type === 'hasRoom')
+                                queryClient.invalidateQueries({
+                                  queryKey: [
+                                    `/api/shared/posts/studio/${postId}`,
+                                  ],
+                                });
+                              else
+                                queryClient.invalidateQueries({
+                                  queryKey: [
+                                    `/api/shared/posts/dormitory/${postId}`,
+                                  ],
+                                });
+                            },
+                          });
                       }}
                       hasBorder
                       color="#888"
@@ -593,7 +628,18 @@ export function MobileSharedPostPage({
                 hasBorder={false}
                 marked={post.data.isScrapped}
                 onToggle={() => {
-                  scrapPost(postId);
+                  scrapPost(postId, {
+                    onSuccess: () => {
+                      if (type === 'hasRoom')
+                        queryClient.invalidateQueries({
+                          queryKey: [`/api/shared/posts/studio/${postId}`],
+                        });
+                      else
+                        queryClient.invalidateQueries({
+                          queryKey: [`/api/shared/posts/dormitory/${postId}`],
+                        });
+                    },
+                  });
                 }}
                 color="black"
               />

diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
@@ -574,6 +575,8 @@ export function SharedPostPage({
     setFollowList(newFollowList);
   }, [post]);
 
+  const queryClient = useQueryClient();
+
   if (isLoading || post == null) return <></>;
 
   return (
@@ -590,7 +593,18 @@ export function SharedPostPage({
                 hasBorder={false}
                 marked={post.data.isScrapped}
                 onToggle={() => {
-                  scrapPost(postId);
+                  scrapPost(postId, {
+                    onSuccess: () => {
+                      if (type === 'hasRoom')
+                        queryClient.invalidateQueries({
+                          queryKey: [`/api/shared/posts/studio/${postId}`],
+                        });
+                      else
+                        queryClient.invalidateQueries({
+                          queryKey: [`/api/shared/posts/dormitory/${postId}`],
+                        });
+                    },
+                  });
                 }}
                 color="black"
               />
@@ -764,8 +778,36 @@ export function SharedPostPage({
                       followList[selected.memberId] == null
                     )
                       return;
-                    if (followList[selected.memberId]) unfollow();
-                    else follow();
+                    if (followList[selected.memberId])
+                      unfollow(undefined, {
+                        onSuccess: () => {
+                          if (type === 'hasRoom')
+                            queryClient.invalidateQueries({
+                              queryKey: [`/api/shared/posts/studio/${postId}`],
+                            });
+                          else
+                            queryClient.invalidateQueries({
+                              queryKey: [
+                                `/api/shared/posts/dormitory/${postId}`,
+                              ],
+                            });
+                        },
+                      });
+                    else
+                      follow(undefined, {
+                        onSuccess: () => {
+                          if (type === 'hasRoom')
+                            queryClient.invalidateQueries({
+                              queryKey: [`/api/shared/posts/studio/${postId}`],
+                            });
+                          else
+                            queryClient.invalidateQueries({
+                              queryKey: [
+                                `/api/shared/posts/dormitory/${postId}`,
+                              ],
+                            });
+                        },
+                      });
                   }}
                   hasBorder
                   color="#888"

diff --git a/src/app/pages/writing-post-page.tsx b/src/app/pages/writing-post-page.tsx
@@ -441,6 +441,7 @@ export function WritingPostPage({
     selectedExtraOptions,
     expectedMonthlyFee,
     derivedMateCardFeatures,
+    isCreatable,
     setSharedPostProps,
     handleOptionClick,
     handleExtraOptionClick,
@@ -525,6 +526,16 @@ export function WritingPostPage({
   };
 
   const handleCreatePost = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!isCreatable) {
+      createToast({
+        message: '필수 항목들이 입력되어야 합니다.',
+        option: {
+          duration: 3000,
+        },
+      });
+      return;
+    }
+
     const extractFileName = (url: string): string => {
       const regex =
         /\/([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}\.\w+)/;

diff --git a/src/components/FloatingChatting.tsx b/src/components/FloatingChatting.tsx
@@ -189,12 +189,12 @@ function FloatingChattingBox() {
     };
 
     if (auth?.accessToken != null) {
-      void initializeChat();
+      initializeChat();
     }
 
     return () => {
       if (stompClient != null && stompClient.connected) {
-        void stompClient.deactivate();
+        stompClient.deactivate();
       }
     };
   }, [auth?.accessToken, userId]);

diff --git a/src/components/RangeSlider.tsx b/src/components/RangeSlider.tsx
@@ -12,6 +12,7 @@ const styles = {
   container: styled.div<StyleProps>`
     position: relative;
     width: 100%;
+    margin-block: 1rem;
 
     div {
       position: absolute;
@@ -41,7 +42,7 @@ const styles = {
     }
 
     input[type='range']::-moz-range-thumb {
-      -webkit-appearance: none;
+      appearance: none;
       pointer-events: all;
       width: 24px;
       height: 24px;

diff --git a/src/components/shared-posts/filter/DealTypeFilter.tsx b/src/components/shared-posts/filter/DealTypeFilter.tsx
@@ -22,7 +22,7 @@ const styles = {
     width: 20rem;
 
     @media (max-width: 768px) {
-      width: 10rem;
+      width: 13rem;
       gap: 1rem;
     }
   `,
@@ -33,6 +33,18 @@ const styles = {
     align-items: flex-start;
     gap: 1rem;
 
+    .slider-value {
+      font-size: 0.95rem;
+      color: #808080;
+    }
+
+    @media (max-width: 768px) {
+      .slider-value {
+        font-size: 0.75rem;
+        color: #808080;
+      }
+    }
+
     h1 {
       color: #000;
       font-family: 'Noto Sans KR';
@@ -48,7 +60,7 @@ const styles = {
 
     div {
       display: flex;
-      align-items: flex-start;
+      align-items: flex-end;
       gap: 0.5rem;
 
       button {
@@ -148,11 +160,21 @@ export function DealTypeFilter() {
         </div>
       </styles.item>
       <styles.item>
-        <h1>희망 월 분담금</h1>
+        <div>
+          <h1>희망 월 분담금</h1>
+          {filter.dealInfo.expectedFee != null ? (
+            <p className="slider-value">
+              {filter.dealInfo.expectedFee?.low}만원 ~{' '}
+              {filter.dealInfo.expectedFee?.high}만원
+            </p>
+          ) : (
+            <p className="slider-value">0만원 ~ 무제한</p>
+          )}
+        </div>
         <RangeSlider
           min={0}
-          max={3500000}
-          step={50000}
+          max={350}
+          step={5}
           onChange={({ low, high }) => {
             setFilter(prev => ({
               ...prev,

diff --git a/src/components/shared-posts/filter/RoomTypeFilter.tsx b/src/components/shared-posts/filter/RoomTypeFilter.tsx
@@ -121,6 +121,32 @@ const styles = {
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
+
+    div {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      gap: 0.5rem;
+
+      p {
+        font-size: 0.9rem;
+        color: #808080;
+      }
+    }
+
+    @media (max-width: 768px) {
+      div {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+        gap: 0.5rem;
+
+        p {
+          font-size: 0.75rem;
+          color: #808080;
+        }
+      }
+    }
   `,
   floor: styled.div`
     display: flex;
@@ -345,7 +371,16 @@ export function RoomTypeFilter() {
         </div>
       </styles.restRoomCount>
       <styles.size>
-        <h1>면적</h1>
+        <div>
+          <h1>면적</h1>
+          {filter.roomInfo.size != null ? (
+            <p>
+              {filter.roomInfo.size.low}평 ~ {filter.roomInfo.size.high}평
+            </p>
+          ) : (
+            <p>0평 ~ 무제한</p>
+          )}
+        </div>
         <RangeSlider
           min={1}
           max={100}

diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
@@ -324,9 +324,31 @@ export const useSharedPostProps = ({
     }
   }, [user, setState]);
 
+  const isCreatable = useMemo(
+    () =>
+      state.title.trim().length > 0 &&
+      state.content.trim().length > 0 &&
+      state.images.length >= 2 &&
+      state.address != null &&
+      state.mateLimit > 0 &&
+      state.expectedMonthlyFee > 0 &&
+      state.houseSize > 0 &&
+      state.selectedOptions.budget != null &&
+      state.selectedOptions.roomType != null &&
+      state.selectedOptions.livingRoom != null &&
+      state.selectedOptions.roomCount != null &&
+      state.selectedOptions.restRoomCount != null &&
+      state.selectedOptions.floorType != null &&
+      state.mateCard.features.smoking != null &&
+      state.mateCard.features.roomSharingOption != null &&
+      state.mateCard.features.mateAge != null,
+    [state],
+  );
+
   return {
     ...state,
     derivedMateCardFeatures,
+    isCreatable,
     setSharedPostProps: setState,
     reset,
     handleOptionClick,