Merge pull request #696 from sparcs-kaist/#690.2-profile-image-caching

#690.2 Profile image caching
sparcs-kaist · Jan 2, 2024 · 59217e6 · 59217e6
2 parents 8f8f0e0 + d32cf7d
commit 59217e6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 29 deletions.
diff --git a/src/components/ModalPopup/ModalMypageModify.tsx b/src/components/ModalPopup/ModalMypageModify.tsx
@@ -26,14 +26,10 @@ import theme from "@/tools/theme";
 type ModalMypageModifyProps = Omit<
   Parameters<typeof Modal>[0],
   "padding" | "children" | "onEnter"
-> & { profToken?: string; onUpdate?: () => void };
+>;
 
 type ProfileImageLargeProps = Parameters<typeof ProfileImage>[0];
 
-type ButtonProfileImageProps = {
-  onUpdate?: ModalMypageModifyProps["onUpdate"];
-};
-
 const ProfileImageLarge = (props: ProfileImageLargeProps) => (
   <div
     css={{
@@ -48,7 +44,7 @@ const ProfileImageLarge = (props: ProfileImageLargeProps) => (
   </div>
 );
 
-const ButtonProfileImage = ({ onUpdate }: ButtonProfileImageProps) => {
+const ButtonProfileImage = () => {
   const { t } = useTranslation("mypage");
   const axios = useAxios();
 
@@ -88,7 +84,6 @@ const ButtonProfileImage = ({ onUpdate }: ButtonProfileImageProps) => {
           });
           if (data2?.result) {
             fetchLoginInfo();
-            onUpdate?.();
             setProfileAlert("SUCCESS");
             return;
           }
@@ -98,7 +93,7 @@ const ButtonProfileImage = ({ onUpdate }: ButtonProfileImageProps) => {
     } catch (e) {
       setProfileAlert("FAIL");
     }
-  }, [onUpdate]);
+  }, []);
 
   const onClick = useCallback(() => {
     if (!profileAlert) inputRef.current?.click();
@@ -140,11 +135,7 @@ const ButtonProfileImage = ({ onUpdate }: ButtonProfileImageProps) => {
   );
 };
 
-const ModalMypageModify = ({
-  profToken,
-  onUpdate,
-  ...modalProps
-}: ModalMypageModifyProps) => {
+const ModalMypageModify = ({ ...modalProps }: ModalMypageModifyProps) => {
   const { t } = useTranslation("mypage");
   const axios = useAxios();
 
@@ -227,9 +218,9 @@ const ModalMypageModify = ({
     <Modal padding="32px 10px 10px" onEnter={handleEditProfile} {...modalProps}>
       <div css={styleName}>{loginInfo?.name}</div>
       {loginInfo?.profileImgUrl && (
-        <ProfileImageLarge url={loginInfo?.profileImgUrl} token={profToken} />
+        <ProfileImageLarge url={loginInfo?.profileImgUrl} />
       )}
-      <ButtonProfileImage onUpdate={onUpdate} />
+      <ButtonProfileImage />
       <DottedLine direction="row" margin="0 2px" />
       <div css={{ rowGap: "10px", padding: "0px 20px" }}>
         <div css={{ ...styleTitle, marginTop: "24px" }}>

diff --git a/src/components/User/ProfileImage.tsx b/src/components/User/ProfileImage.tsx
@@ -1,20 +1,19 @@
 import { useEffect, useState } from "react";
 
 import theme from "@/tools/theme";
-import { getS3Url } from "@/tools/trans";
 
 import defaultImg from "@/static/assets/profileImgOnError.png";
 
 type ProfileImageProps = {
   url: string;
-  token?: string;
 };
 
-const ProfileImage = ({ url, token }: ProfileImageProps) => {
-  const getSrc = () => getS3Url(`/profile-img/${url}?token=${token || ""}`);
-  const [src, setSrc] = useState(getSrc());
+const ProfileImage = ({ url }: ProfileImageProps) => {
+  const [src, setSrc] = useState(url);
 
-  useEffect(() => setSrc(getSrc()), [url, token]);
+  useEffect(() => {
+    setSrc(url);
+  }, [url]);
 
   return (
     <div

diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import useDateToken from "@/hooks/useDateToken";
 import { useValueRecoilState } from "@/hooks/useFetchRecoilState";
 
 import AdaptiveDiv from "@/components/AdaptiveDiv";
@@ -29,7 +28,6 @@ import { isNotificationOn } from "@/tools/trans";
 
 const Mypage = () => {
   const { t, i18n } = useTranslation("mypage");
-  const [profImgToken, refreshProfImgToken] = useDateToken();
   const loginInfo = useValueRecoilState("loginInfo");
   const notificationOptions = useValueRecoilState("notificationOptions");
   const { id: userId } = loginInfo || {};
@@ -102,10 +100,7 @@ const Mypage = () => {
             <div css={{ display: "flex", alignItems: "center" }}>
               <div css={styleProfImg}>
                 {loginInfo?.profileImgUrl && (
-                  <ProfileImage
-                    url={loginInfo.profileImgUrl}
-                    token={profImgToken}
-                  />
+                  <ProfileImage url={loginInfo.profileImgUrl} />
                 )}
               </div>
               <div css={theme.font16_bold} className="selectable">
@@ -155,8 +150,6 @@ const Mypage = () => {
           <ModalMypageModify
             isOpen={isOpenProfileModify}
             onChangeIsOpen={setIsOpenProfileModify}
-            onUpdate={refreshProfImgToken}
-            profToken={profImgToken}
           />
           <ModalReport isOpen={isOpenReport} onChangeIsOpen={setIsOpenReport} />
           <ModalNotification