feat: add modify post flow (kookmin-sw#75)

kookmin-sw · May 12, 2024 · 62a6036 · 62a6036
1 parent c7e904c
commit 62a6036
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 174 deletions.
diff --git a/src/app/lib/providers/AuthProvider.tsx b/src/app/lib/providers/AuthProvider.tsx
@@ -5,6 +5,7 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useLayoutEffect, useState, useCallback } from 'react';
 
 import {
+  getUserData,
   postTokenRefresh,
   useAuthActions,
   useAuthValue,
@@ -13,7 +14,7 @@ import { load, remove } from '@/shared/storage';
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const auth = useAuthValue();
-  const { login } = useAuthActions();
+  const { setAuthUserData, login } = useAuthActions();
 
   const router = useRouter();
   const pathName = usePathname();
@@ -57,12 +58,27 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     postTokenRefresh(refreshToken)
       .then(({ data }) => {
         handleLoginSuccess(data);
+        getUserData()
+          .then(res => {
+            setAuthUserData(res.data);
+          })
+          .catch(err => {
+            console.error(err);
+          });
       })
       .catch(handleLoginError)
       .finally(() => {
         setIsLoading(false);
       });
-  }, [pathName, auth, isLoading, handleLoginSuccess, handleLoginError, router]);
+  }, [
+    pathName,
+    auth,
+    isLoading,
+    handleLoginError,
+    router,
+    handleLoginSuccess,
+    setAuthUserData,
+  ]);
 
   useLayoutEffect(() => {
     checkAndRefreshToken();

diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
@@ -1,18 +1,24 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { Bookmark, CircularProfileImage } from '@/components';
 import { ImageGrid } from '@/components/shared-post-page';
 import { useAuthValue, useUserData } from '@/features/auth';
 import { useCreateChatRoom } from '@/features/chat';
+import { fromAddrToCoord } from '@/features/geocoding';
 import {
   useFollowUser,
   useFollowingListData,
   useUnfollowUser,
 } from '@/features/profile';
-import { useScrapSharedPost, useSharedPost } from '@/features/shared';
+import {
+  useScrapSharedPost,
+  useSharedPost,
+  useSharedPostProps,
+} from '@/features/shared';
 import { getAge } from '@/shared';
 
 const styles = {
@@ -399,9 +405,13 @@ const styles = {
 
 export function SharedPostPage({ postId }: { postId: number }) {
   const auth = useAuthValue();
+
   const [, setMap] = useState<naver.maps.Map | null>(null);
   const mapRef = useRef<HTMLDivElement>(null);
 
+  const router = useRouter();
+  const { setStateWithPost } = useSharedPostProps();
+
   const [selected, setSelected] = useState<
     | {
         memberId: string;
@@ -441,17 +451,24 @@ export function SharedPostPage({ postId }: { postId: number }) {
   );
 
   useEffect(() => {
-    if (mapRef.current != null) {
-      const center = new naver.maps.LatLng(37.6090857, 126.9966865);
-      setMap(
-        new naver.maps.Map(mapRef.current, {
-          center,
-          disableKineticPan: false,
-          scrollWheel: false,
-        }),
+    if (sharedPost?.data.address.roadAddress != null) {
+      fromAddrToCoord({ query: sharedPost?.data.address.roadAddress }).then(
+        res => {
+          const address = res.data.addresses.shift();
+          if (address != null && mapRef.current != null) {
+            const center = new naver.maps.LatLng(+address.y, +address.x);
+            setMap(
+              new naver.maps.Map(mapRef.current, {
+                center,
+                disableKineticPan: false,
+                scrollWheel: false,
+              }),
+            );
+          }
+        },
       );
     }
-  }, [mapRef]);
+  }, [sharedPost]);
 
   const [roomName, setRoomName] = useState<string>('');
 
@@ -549,7 +566,17 @@ export function SharedPostPage({ postId }: { postId: number }) {
             <p>{sharedPost.data.address.roadAddress}</p>
             <div ref={mapRef} id="map" />
           </styles.locationInfoContainer>
-          <styles.modifyPostButton>수정하기</styles.modifyPostButton>
+          {sharedPost.data.publisherAccount.memberId ===
+            auth?.user?.memberId && (
+            <styles.modifyPostButton
+              onClick={() => {
+                setStateWithPost(sharedPost);
+                router.push('/shared/writing');
+              }}
+            >
+              수정하기
+            </styles.modifyPostButton>
+          )}
         </styles.postContainer>
         <styles.mateContainer>
           <styles.mates>

diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
@@ -18,7 +18,11 @@ import {
 } from '@/entities/shared-posts-filter';
 import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
 import { useRecommendationMate } from '@/features/recommendation';
-import { usePaging, useSharedPosts } from '@/features/shared';
+import {
+  usePaging,
+  useSharedPostProps,
+  useSharedPosts,
+} from '@/features/shared';
 import { type GetSharedPostsDTO } from '@/features/shared/';
 
 const styles = {
@@ -120,6 +124,8 @@ export function SharedPostsPage() {
     useState<GetSharedPostsDTO | null>(null);
   const { setAuthUserData } = useAuthActions();
 
+  const { reset: resetSharedPostProps } = useSharedPostProps();
+
   const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
   const { data: userData } = useUserData(auth?.accessToken != null);
 
@@ -178,9 +184,14 @@ export function SharedPostsPage() {
       <styles.createButtonRow>
         <SharedPostFilters selected={selected} />
         {(selected === 'hasRoom' || selected === 'dormitory') && (
-          <Link href="/shared/writing">
-            <styles.createButton>작성하기</styles.createButton>
-          </Link>
+          <styles.createButton
+            onClick={() => {
+              resetSharedPostProps();
+              router.push('/shared/writing');
+            }}
+          >
+            작성하기
+          </styles.createButton>
         )}
       </styles.createButtonRow>
       {selected === 'hasRoom' || selected === 'dormitory' ? (