하단 Navigation바에서 프로필 이미지가 노출되지 않는 문제

Fix: 소소한 수정 권장되는 부분들 수정

src/components/common/MultiSelector/index.tsx

@@ -106,7 +106,7 @@ const StyledItem = styled.button<{ isDarkMode: boolean; isSelected: boolean }>`
     props.isDarkMode
       ? props.isSelected
         ? palette.SECONDARY
-        : palette.WHITE
+        : palette.GRAY900
       : props.isSelected
       ? palette.BLUE
       : palette.TERTIARY};

src/components/common/NavigationBar/index.tsx

@@ -1,11 +1,14 @@
 import { IoChatbox } from "react-icons/io5";
 import { MdHome } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
+import { getMyProfileDataOptions } from "@/libs/react-query/options/getMyProfileData.ts";
 import styled from "@emotion/styled";
+import { useQuery } from "@tanstack/react-query";
 import Avatar from "@/components/common/Avatar";
 import { FlexBox } from "@/components/common/Flexbox";
 import { Text } from "@/components/common/Text";
 import { palette } from "@/styles/palette";
+import useAuthStore from "@/store/AuthStore.tsx";
 import defaultProfileImage from "@/assets/images/defaultProfileImage.png";
 
 type NavigationBarProps = {
@@ -14,6 +17,11 @@ type NavigationBarProps = {
 
 const NavigationBar = ({ isDarkMode }: NavigationBarProps) => {
   const navigate = useNavigate();
+  const { data } = useQuery({
+    ...getMyProfileDataOptions,
+    enabled: useAuthStore.getState().authTokens?.accessToken !== null,
+  });
+
   const moveFromNavigationBar = (path: string) => {
     navigate(`/${path}`);
   };
@@ -74,7 +82,7 @@ const NavigationBar = ({ isDarkMode }: NavigationBarProps) => {
               <Avatar
                 width={30}
                 height={30}
-                imgUrl={defaultProfileImage}
+                imgUrl={data?.profileImageUrl ?? defaultProfileImage}
                 margin={"0"}
               />
             </StyledProfileImageWrapper>

src/components/common/RegisterInput/index.tsx

@@ -9,26 +9,29 @@ interface InputProps extends ComponentProps<"input"> {
   height?: number;
   placeholder: string;
   type?: string;
+  isDarkMode: boolean;
 }
 
 /**
- * @param width : input width
- * @param height : input height
- * @param placeholder : input placeholder
- * @param type : input type
- * @param props : input other props
+ * @param width : number 너비
+ * @param height : number 높이
+ * @param placeholder : string 빈 값일 때 보여줄 텍스트
+ * @param type : string input 타입
+ * @param props : string 기타 props
+ * @param isDarkMode : boolean 다크모드 여부
  * @description : 정보 등록 및 수정 페이지에서 활용하는 Input 컴포넌트입니다. form 구성 시 {...register("label")}를 prop으로 전달해주세요.
  * @returns
  */
 const RegisterInput = forwardRef<HTMLInputElement, InputProps>(
-  ({ width, height, placeholder, type, ...props }, ref) => {
+  ({ width, height, placeholder, type, isDarkMode, ...props }, ref) => {
     return (
       <StyleInputWrapper>
         <StyleInput
           widthProps={width}
           heightProps={height}
           placeholder={placeholder}
           type={type}
+          isDarkMode={isDarkMode}
           {...props}
           ref={ref}
         />
@@ -45,10 +48,10 @@ const StyleInputWrapper = styled.span`
   align-items: center;
   /* width: 100%; */
 `;
-const StyleInput = styled.input<{ widthProps?: number; heightProps?: number }>`
-  background-color: ${palette.WHITE};
+const StyleInput = styled.input<{ widthProps?: number; heightProps?: number; isDarkMode: boolean }>`
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.WHITE)};
   height: ${({ heightProps }) => (heightProps ? `${heightProps}px` : "46px")};
-  border: 1px solid ${palette.GRAY200};
+  border: 1px solid ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.GRAY200)};
   border-radius: 10px;
   width: ${({ widthProps }) => (widthProps ? `${widthProps}px` : "100%")};
   font-size: ${typo.Body_14()};

src/pages/chatListDetail/ChatListDetail.tsx

@@ -66,6 +66,7 @@ const ChatListDetail = () => {
                 ref={messageRef}
                 width={250}
                 height={35}
+                isDarkMode={false}
                 placeholder={"대화 불가능한 상태입니다."}
                 disabled
               ></RegisterInput>

src/pages/loginPending/LoginPending.tsx

@@ -32,7 +32,7 @@ const LoginPending = () => {
         const { userId, accessToken, refreshToken, isRegistered } = res.data;
 
         if (!isRegistered) {
-          navigate("/register/user", { state: { userId: userId } });
+          navigate("/register/user");
         }
 
         if (isRegistered) {

src/pages/profile/ProfileCompanyEdit.tsx

@@ -146,6 +146,7 @@ const ProfileCompanyEdit = () => {
               width={343}
               placeholder={"회사 이름"}
               defaultValue={data?.companyName}
+              isDarkMode={isDarkMode}
               {...companyInfoForm.register("companyName")}
             />
             <div>
@@ -166,6 +167,7 @@ const ProfileCompanyEdit = () => {
               <RegisterInput
                 width={260}
                 placeholder={"회사 이메일"}
+                isDarkMode={isDarkMode}
                 {...companyInfoForm.register("companyEmail")}
               />
               <NormalButton
@@ -200,6 +202,7 @@ const ProfileCompanyEdit = () => {
               <RegisterInput
                 width={343}
                 placeholder={"인증코드 6자리 입력"}
+                isDarkMode={isDarkMode}
                 {...companyInfoForm.register("certCode")}
               />
               <StyleVerificationEmailButton

src/pages/profile/ProfileEdit.tsx

@@ -37,8 +37,8 @@ const ProfileEdit = () => {
   const userInfoForm = useForm<UserInfoStateType>({
     resolver: zodResolver(UserInfoSchema),
   });
-  const queryClient = useQueryClient();
 
+  const queryClient = useQueryClient();
   const data = queryClient.getQueryData<MyProfileData>(["myProfileData"]);
 
   const checkNicknameDuplicated = (nickname: string) => {
@@ -76,7 +76,6 @@ const ProfileEdit = () => {
             type: "success",
             isDarkMode,
           });
-          await queryClient.invalidateQueries({ queryKey: ["myProfileData"] });
           await queryClient.refetchQueries({ queryKey: ["myProfileData"] });
         })
         .catch(() => {
@@ -110,7 +109,6 @@ const ProfileEdit = () => {
           type: "success",
           isDarkMode,
         });
-        await queryClient.invalidateQueries({ queryKey: ["myProfileData"] });
         await queryClient.refetchQueries({ queryKey: ["myProfileData"] });
         navigate("/profile");
       })
@@ -146,7 +144,7 @@ const ProfileEdit = () => {
           <Avatar
             width={80}
             height={80}
-            imgUrl={data?.profileImageUrl ?? imgSrc}
+            imgUrl={imgSrc === "default_image_url" ? data!.profileImageUrl : imgSrc}
           />
           <Spacing size={20} />
           <label htmlFor={"profile-image-upload"}>
@@ -166,6 +164,7 @@ const ProfileEdit = () => {
                 width={240}
                 placeholder={"닉네임 (10자 제한)"}
                 defaultValue={data?.nickname}
+                isDarkMode={isDarkMode}
                 {...userInfoForm.register("nickname")}
               />
               <NormalButton