Feat: 메인 페이지 업로드 부분 유저 이미지 연결#65

Author: jiyeeeah

components/pages/main/Feed/FeedHeader/Location.tsx

@@ -1,7 +1,7 @@
-export default function Title() {
+export default function Title({ nickname }: { nickname: string | undefined }) {
   return (
     <div className="header1">
-      <span className="text-primary-300">수박이</span>와 좋은 하루 되세요!
+      <span className="text-primary-300">{nickname}</span>님 좋은 하루 되세요!
     </div>
   );
 }

components/pages/main/Feed/FeedHeader/Title.tsx

@@ -7,7 +7,13 @@ import Avatar from '../../../../ui/Avatar';
 import Button from '../../../../ui/Button';
 import FlexBox from '../../../../ui/FlexBox';
 
-export default function Upload() {
+export default function Upload({
+  userImage,
+  nickname,
+}: {
+  userImage: string | undefined;
+  nickname: string | undefined;
+}) {
   const [postText, setPostText] = useState('');
   const [isUploading, setIsUploading] = useState(false);
 
@@ -47,8 +53,8 @@ export default function Upload() {
       <FlexBox justify="between" className="w-full gap-[24px]">
         <Avatar
           size="xxl"
-          image="/Feed/desktop/tempUserProfilePic.svg"
-          name="수박이"
+          image={userImage}
+          name={nickname ?? '로그인하세요'}
         />
         <div className="relative w-full">
           <textarea

components/pages/main/Feed/FeedHeader/Upload.tsx

@@ -1,25 +1,25 @@
 import FlexBox from '@/components/ui/FlexBox';
+import useGetUserInfo from '@/hooks/queries/useGetUserInfo';
 import Title from './Title';
-import Location from './Location';
 import Upload from './Upload';
 
 export default function FeedHeader() {
+  const { data } = useGetUserInfo();
   return (
     <FlexBox
       direction="column"
       align="start"
       justify="between"
       className="w-full gap-5 "
     >
-      <Title />
+      <Title nickname={data?.nickname} />
       <FlexBox
         direction="column"
         align="start"
         justify="between"
         className="w-full gap-4"
       >
-        <Location />
-        <Upload />
+        <Upload userImage={data?.imageUrl} nickname={data?.nickname} />
       </FlexBox>
     </FlexBox>
   );

components/pages/main/Feed/FeedHeader/index.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
 interface AvatarType {
-  image: string;
+  image: string | undefined;
   name: string;
   size?: 'small' | 'base' | 'large' | 'xl' | 'xxl';
 }

components/ui/Avatar/index.tsx

@@ -10,7 +10,6 @@ export default function FeedBoardCard({
   board: Board;
   setShowModal: Dispatch<SetStateAction<boolean>>;
 }) {
-  // const { data: commentList } = useGetShortCommentList(boardId);
   return (
     <FlexBox
       direction="column"