Bug: 닉네임 5글자 넘어가면 레이아웃 깨지는 현상 외 1건 수정

Bug: 닉네임 5글자 넘어가면 레이아웃 깨지는 현상 외 1건 수정

src/apis/profile/type.ts

@@ -9,4 +9,5 @@ export type MyProfileData = {
   companyName: string;
   department: string;
   interests: string[];
+  oAuthProvider: string;
 };

src/components/common/AppHeader/index.tsx

@@ -2,6 +2,8 @@ import { BiSolidMoon } from "react-icons/bi";
 import { RiSunFill } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
 import styled from "@emotion/styled";
+import { useQuery } from "@tanstack/react-query";
+import getMyProfileData from "@/apis/profile/getMyProfileData.ts";
 import Avatar from "@/components/common/Avatar";
 import { FlexBox } from "@/components/common/Flexbox";
 import { Text } from "@/components/common/Text";
@@ -41,33 +43,42 @@ const StyledAppHeaderSmallText = styled(Text)<Pick<AppHeaderProps, "isDarkMode">
 `;
 
 type AppHeaderProps = {
-  nickname: string;
-  profileImageUrl: string;
+  isAuth: boolean;
   isDarkMode: boolean;
   height?: string;
   toggleDarkMode: () => void;
 };
 
 /**
- * @param nickname - 유저 닉네임
- * @param profileImageUrl - 유저 프로필 이미지 URL
+ * @param isAuth - 인증 여부
  * @param isDarkMode - 다크모드 여부
  * @param height - 컴포넌트 높이
  * @param toggleDarkMode - 다크모드 토글 함수
  */
 
-const AppHeader = ({
-  nickname,
-  profileImageUrl,
-  isDarkMode,
-  height,
-  toggleDarkMode,
-}: AppHeaderProps) => {
+const AppHeader = ({ isAuth, isDarkMode, height, toggleDarkMode }: AppHeaderProps) => {
   const navigate = useNavigate();
   const moveFromAppHeader = (path: string) => {
     navigate(`/${path}`);
   };
 
+  const { data, isError, isPending } = useQuery({
+    queryKey: ["myProfileData"],
+    queryFn: getMyProfileData,
+    staleTime: Infinity,
+    enabled: isAuth,
+  });
+
+  if (isPending) {
+    return <div>{"로딩중..."}</div>; // TODO: 로딩 컴포넌트로 대체
+  }
+
+  if (isError) {
+    return <div>{"에러가 발생했습니다."}</div>;
+  }
+
+  const { nickname, profileImageUrl } = data;
+
   return (
     <StyleAppHeader height={height}>
       <FlexBox
@@ -111,19 +122,24 @@ const AppHeader = ({
       <FlexBox align={"flex-end"}>
         <StyledAppHeaderLargeText
           isDarkMode={isDarkMode}
-          font={"Body_24"}
+          font={"Body_20"}
           fontWeight={600}
           letterSpacing={-0.5}
           style={{
             color: isDarkMode ? palette.DARK_WHITE : palette.WHITE,
             marginRight: 5,
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            wordBreak: "break-all",
+            maxWidth: "27%",
           }}
         >
           {nickname}
         </StyledAppHeaderLargeText>
         <StyledAppHeaderSmallText
           isDarkMode={isDarkMode}
-          font={"Body_18"}
+          font={"Body_16"}
           fontWeight={600}
           letterSpacing={-0.5}
           style={{

src/pages/home/Home.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import Card from "@/pages/home/components/Card.tsx";
 import AppHeader from "@/components/common/AppHeader";
@@ -13,8 +13,6 @@ import useAuthStore from "@/store/AuthStore.tsx";
 import useThemeStore from "@/store/ThemeStore";
 
 const Home = () => {
-  const [nickname, setNickname] = useState("");
-  const [profileImageUrl, setProfileImageUrl] = useState("");
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
   const toggleDarkMode = useThemeStore((state) => state.toggleDarkMode);
   const { authTokens } = useAuthStore();
@@ -30,17 +28,12 @@ const Home = () => {
       });
       navigate("/login");
     }
-    if (authTokens) {
-      setNickname(localStorage.getItem("nickname") || "");
-      setProfileImageUrl(localStorage.getItem("profileImageUrl") || "");
-    }
-  }, [nickname, profileImageUrl]);
+  }, []);
 
   return (
     <GradationBackground isDarkMode={isDarkMode}>
       <AppHeader
-        nickname={localStorage.getItem("nickname") || ""}
-        profileImageUrl={localStorage.getItem("profileImageUrl") || ""}
+        isAuth={!!authTokens?.accessToken}
         isDarkMode={isDarkMode}
         toggleDarkMode={toggleDarkMode}
       />

src/pages/profile/ProfileDefault.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { BiBuildings, BiChevronRight, BiPencil } from "react-icons/bi";
 import { MdOutlineRecordVoiceOver } from "react-icons/md";
 import { PiIdentificationCardBold } from "react-icons/pi";
 import { useNavigate } from "react-router-dom";
 import styled from "@emotion/styled";
+import { useQueryClient } from "@tanstack/react-query";
 import { axiosAPI } from "@/apis/axios";
+import type { MyProfileData } from "@/apis/profile/type.ts";
 import Avatar from "@/components/common/Avatar";
 import BackChevron from "@/components/common/BackChevron";
 import { InterestButton } from "@/components/common/Buttons/IconButton";
@@ -26,39 +27,25 @@ import useThemeStore from "@/store/ThemeStore";
 import KakaoIcon from "@/assets/icons/KakaoIcon.tsx";
 import NaverIcon from "@/assets/icons/NaverIcon";
 
-type MyProfileData = {
-  nickname: string;
-  profileImageUrl: string;
-  companyName: string;
-  department: string;
-  oAuthProvider: string;
-  interests: string[];
-};
-
 const ProfileDefault = () => {
   const navigate = useNavigate();
   const isDarkMode = useThemeStore((store) => store.isDarkMode);
-  const [myProfileData, setMyProfileData] = useState<MyProfileData>({
-    nickname: "",
-    profileImageUrl: "",
-    companyName: "",
-    oAuthProvider: "",
-    department: "",
-    interests: [""],
-  });
   const { openModal } = useModal();
   const { showToast } = useToast();
+  const queryClient = useQueryClient();
+
+  const data = queryClient.getQueryData<MyProfileData>(["myProfileData"]);
+
+  if (!data) {
+    showToast({
+      message: "필요한 정보를 불러오지 못했습니다! 다시 로그인해주세요!",
+      type: "warning",
+      isDarkMode,
+    });
+    navigate("/login");
+    return null;
+  }
 
-  const getProfileData = async () => {
-    await axiosAPI
-      .get("/v1/users/me")
-      .then((response) => {
-        setMyProfileData(response.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
   const handleLogout = () => {
     openModal({
       mainText: "로그아웃 하시겠습니까?",
@@ -98,9 +85,6 @@ const ProfileDefault = () => {
       isDarkMode,
     });
   };
-  useEffect(() => {
-    getProfileData();
-  }, []);
 
   return (
     <GradationBackground isDarkMode={isDarkMode}>
@@ -122,7 +106,7 @@ const ProfileDefault = () => {
             <Avatar
               width={49}
               height={49}
-              imgUrl={myProfileData && myProfileData.profileImageUrl}
+              imgUrl={data.profileImageUrl}
             />
             <StyledProfilePrimaryInfoTextWrapper>
               <TextWrapper
@@ -138,7 +122,7 @@ const ProfileDefault = () => {
                   fontWeight={600}
                   letterSpacing={-1}
                 >
-                  {myProfileData && myProfileData.nickname}
+                  {data.nickname}
                 </Text>
                 <Divider
                   width={"2px"}
@@ -151,7 +135,7 @@ const ProfileDefault = () => {
                   fontWeight={400}
                   letterSpacing={-1}
                 >
-                  {myProfileData && myProfileData.companyName}
+                  {data.companyName}
                 </Text>
               </TextWrapper>
               <TextWrapper
@@ -166,7 +150,7 @@ const ProfileDefault = () => {
                   fontWeight={600}
                   letterSpacing={-1}
                 >
-                  {myProfileData && myProfileData.department}
+                  {data.department}
                 </Text>
               </TextWrapper>
             </StyledProfilePrimaryInfoTextWrapper>
@@ -184,7 +168,7 @@ const ProfileDefault = () => {
         <Spacing size={17.5} />
         <InterestButton
           nickName={"나"}
-          interests={myProfileData && myProfileData.interests}
+          interests={data.interests}
           isDarkMode={isDarkMode}
         />
         <Spacing size={28.5} />
@@ -252,7 +236,7 @@ const ProfileDefault = () => {
             title={"소셜 로그인 계정"}
             isDarkMode={isDarkMode}
             additionalContent={
-              myProfileData && myProfileData.oAuthProvider === "NAVER" ? (
+              data.oAuthProvider === "NAVER" ? (
                 <NaverIcon
                   width={20}
                   height={20}

src/pages/profile/ProfileEdit.tsx

@@ -5,8 +5,7 @@ import type { UserInfoStateType } from "@/schemas/userInfo";
 import { UserInfoSchema } from "@/schemas/userInfo";
 import styled from "@emotion/styled";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useQuery } from "@tanstack/react-query";
-import getMyProfileData from "@/apis/profile/getMyProfileData.ts";
+import { useQueryClient } from "@tanstack/react-query";
 import postMyProfileImage from "@/apis/profile/postMyProfileImage.ts";
 import updateMyProfile from "@/apis/profile/updateMyProfile.ts";
 import getNicknameValid from "@/apis/register/getNicknameValid.ts";
@@ -31,24 +30,15 @@ const ProfileEdit = () => {
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
 
   const [nicknameDuplicated, setNicknameDuplicated] = useState<null | boolean>(null);
-  const [imgSrc, setImgSrc] = useState("");
+  const [imgSrc, setImgSrc] = useState("default_image_url");
   const { showToast } = useToast();
   const navigate = useNavigate();
   const userInfoForm = useForm<UserInfoStateType>({
     resolver: zodResolver(UserInfoSchema),
   });
+  const queryClient = useQueryClient();
 
-  const { data, error, isLoading, refetch } = useQuery({
-    queryKey: ["myProfileData"],
-    queryFn: getMyProfileData,
-  });
-
-  if (isLoading) {
-    return <div>{"로딩중..."}</div>;
-  }
-  if (error) {
-    return <div>{"에러가 발생했습니다."}</div>;
-  }
+  // const data = queryClient.getQueryData(["myProfileData"]);
 
   const checkNicknameDuplicated = (nickname: string) => {
     if (nickname.length === 0) {
@@ -87,7 +77,7 @@ const ProfileEdit = () => {
             type: "success",
             isDarkMode,
           });
-          refetch();
+          queryClient.invalidateQueries({ queryKey: ["myProfileData"] });
         })
         .catch(() => {
           showToast({
@@ -120,6 +110,7 @@ const ProfileEdit = () => {
           type: "success",
           isDarkMode,
         });
+        queryClient.invalidateQueries({ queryKey: ["myProfileData"] });
         navigate("/profile");
       })
       .catch(() => {
@@ -154,7 +145,7 @@ const ProfileEdit = () => {
           <Avatar
             width={80}
             height={80}
-            imgUrl={data?.profileImageUrl ?? imgSrc}
+            imgUrl={imgSrc}
           />
           <Spacing size={20} />
           <label htmlFor={"profile-image-upload"}>
@@ -172,7 +163,7 @@ const ProfileEdit = () => {
             <FlexBox gap={10}>
               <RegisterInput
                 width={240}
-                placeholder={"닉네임"}
+                placeholder={"닉네임 (10자 제한)"}
                 {...userInfoForm.register("nickname")}
               />
               <NormalButton

src/pages/register/RegisterUser.tsx

@@ -115,7 +115,7 @@ const RegisterUser = () => {
         <FlexBox gap={16}>
           <RegisterInput
             width={260}
-            placeholder={"닉네임"}
+            placeholder={"닉네임 (10자 제한)"}
             {...userInfoForm.register("nickname")}
           />
           <NormalButton

src/schemas/userInfo.ts

@@ -1,7 +1,10 @@
 import * as z from "zod";
 
 export const UserInfoSchema = z.object({
-  nickname: z.string().min(1, { message: "닉네임을 입력해주세요." }),
+  nickname: z
+    .string()
+    .min(1, { message: "닉네임을 입력해주세요." })
+    .max(10, { message: "닉네임은 10자 이내로 입력해주세요." }),
   interest: z.array(z.string()).min(1, { message: "관심사를 선택해주세요." }),
 });