Merge pull request #84 from DoTheZ-Team/GLUE-381-QA-수정

Glue 381 qa 수정

src/api/core.ts

@@ -24,10 +24,7 @@ axiosInstance.interceptors.request.use(
     if (!accessToken) {
       return config;
     }
-    config.headers.set(
-      'Authorization',
-      `Bearer ${process.env.NEXT_PUBLIC_MASTER_TOKEN}`,
-    );
+    config.headers.set('Authorization', `Bearer ${accessToken}`);
     return config;
   },
   (error: AxiosError) => {

src/app/(publish)/components/PostEditor/index.tsx

@@ -29,15 +29,14 @@ const Editor = dynamic(() => import('@/components/Common/Editor'), {
 
 interface PostEditorProp {
   postDetail?: Partial<PostDetailResponse['postDetail']>;
+  hashtagNames?: string[];
 }
 
-export default function PostEditor({ postDetail = {} }: PostEditorProp) {
-  const {
-    title = '',
-    categoryName = '카테고리 선택',
-    content,
-    hashtags: initialData = [],
-  } = postDetail;
+export default function PostEditor({
+  postDetail = {},
+  hashtagNames: initialData = [],
+}: PostEditorProp) {
+  const { title = '', categoryName = '카테고리 선택', content } = postDetail;
 
   const port = usePortal({ id: 'publish-container' });
 

src/app/blog/[blogId]/components/Albums/Slider.tsx

@@ -19,6 +19,7 @@ export default function Slider({ photos }: { photos: string[] }) {
           <div key={photo} className="relative flex-none w-1/5 h-200">
             <div className="w-full h-full">
               <Image
+                loader={() => photo || temp}
                 alt="photo"
                 src={photo || temp}
                 layout="fill"

src/app/blog/[blogId]/components/BlogBackground/index.tsx

@@ -12,6 +12,7 @@ export default function BlogBackground() {
     <div className="relative w-full h-screen">
       <div className="relative w-full h-full group">
         <Image
+          loader={() => background}
           src={background}
           alt="background"
           layout="fill"

src/app/blog/[blogId]/components/Board/BoardContent.tsx

@@ -32,6 +32,7 @@ export default function BoardContent({
           >
             <div className="absolute w-150 h-150">
               <Image
+                loader={() => photoUrl || '/tempImage/4.jpg'}
                 src={photoUrl || '/tempImage/4.jpg'}
                 alt={String(postId)}
                 layout="fill"

src/app/blog/[blogId]/components/ProfileBox/index.tsx

@@ -16,7 +16,13 @@ export default function ProfileBox() {
   return (
     <section className="flex flex-col  items-center mr-50">
       <div className="relative w-250 h-300 my-10 ">
-        <Image src={profile} alt="profile" layout="fill" objectFit="cover" />
+        <Image
+          loader={() => profile}
+          src={profile}
+          alt="profile"
+          layout="fill"
+          objectFit="cover"
+        />
       </div>
       <div className="text-xl text-center mt-10 ">{memberName}</div>
       <p className="w-200 h-3 bg-primary" />

src/app/blog/[blogId]/post/[postId]/components/CommentsWrapper/Comments/ChildComments/ChildComments.tsx

@@ -25,6 +25,7 @@ export default function ChildComments({ commentId }: { commentId: number }) {
             <div className="flex gap-8 items-center">
               {blogProfile ? (
                 <Image
+                  loader={() => blogProfile}
                   src={blogProfile}
                   width={40}
                   height={40}

src/app/blog/[blogId]/post/[postId]/components/CommentsWrapper/Comments/Comment.tsx

@@ -29,7 +29,13 @@ export default function Comment(commentItem: CommentProp & { postId: number }) {
     >
       <div className="flex gap-8 items-center">
         {blogProfile ? (
-          <Image src={blogProfile} width={40} height={40} alt={blogTitle} />
+          <Image
+            loader={() => blogProfile}
+            src={blogProfile}
+            width={40}
+            height={40}
+            alt={blogTitle}
+          />
         ) : (
           <div className="bg-[black] w-40 h-40 rounded-full" />
         )}

src/app/blog/[blogId]/post/[postId]/components/CommentsWrapper/index.tsx

@@ -12,7 +12,7 @@ export default function CommentsWrapper({ postId }: { postId: string }) {
   const { handleLike, likeCount, like = 0 } = useLike(Number(postId));
 
   return (
-    <div className="w-[530px] mt-130 mb-[30vh] mx-auto">
+    <div className="w-[530px] mt-10 mb-[30vh] mx-auto">
       <div className="flex justify-between items-center pb-13 border-b-1 border-[#E0E0E0]">
         <p className="flex items-center text-33 font-bold">댓글</p>
 

src/app/blog/[blogId]/post/[postId]/components/PostDetailFetcher/types.ts

@@ -24,13 +24,14 @@ export interface PostDetailResponse {
     memberId: number;
     blogId: number;
     isLike: boolean;
-    isSubscribe: boolean;
     categoryName: string;
-    hashtags: string[];
 
     photoUrls: string[];
 
     postStickerItems: Sticker[];
+    postHashtags: string[];
+    isSubscribe: boolean;
+    nickname: string;
   };
 
   loginMemberId: number;

src/app/blog/[blogId]/post/[postId]/components/PostDetailHeader/index.tsx

@@ -11,11 +11,11 @@ import { useDeletePosting } from './api/quries';
 
 export default function PostDetailHeader({ postId }: { postId: string }) {
   const {
-    postDetail: { title, createdAt, memberId },
+    postDetail: { title, createdAt, memberId, nickname },
     loginMemberId,
   } = usePostDetailContext();
   const { follow, handleFollow } = useFollow(Number(postId));
-  const name = '김성민';
+
   const port = usePortal({ id: 'edit-container' });
   const { mutate } = useDeletePosting();
 
@@ -58,7 +58,7 @@ export default function PostDetailHeader({ postId }: { postId: string }) {
             {/* TODO: Image fedch */}
             <div className="w-30 h-30 rounded-full bg-primary" />
 
-            <p>{name}</p>
+            <p>{nickname}</p>
             <p className="text-[#BABABA]">{formatDate(createdAt)}</p>
           </div>
 

src/app/blog/[blogId]/post/[postId]/page.tsx

@@ -18,7 +18,7 @@ export default function Page({
   params: { postId: string };
 }) {
   const {
-    postDetail: { content },
+    postDetail: { content, postHashtags },
   } = usePostDetailContext();
 
   return (
@@ -29,6 +29,15 @@ export default function Page({
 
       <Editor editable={false} initialData={content} className="min-h-500" />
 
+      <div className="mx-45 flex gap-10 mt-130">
+        {postHashtags.map((hashtag, index) => (
+          // eslint-disable-next-line
+          <div key={index} className="text-[#999]">
+            #{hashtag}
+          </div>
+        ))}
+      </div>
+
       <CommentsWrapper postId={postId} />
     </>
   );

src/app/match/page.tsx

@@ -22,6 +22,7 @@ export default function Page() {
               <Card width="w-190" height="h-247">
                 <Card.Image>
                   <Image
+                    loader={() => profile}
                     src={profile}
                     fill
                     objectFit="contain"

src/app/mypage/components/Common/FileThumbnails.tsx

@@ -40,6 +40,7 @@ export default function FileThumbnails({
           )}
         >
           <Image
+            loader={() => preview}
             src={preview}
             alt="Selected Image"
             layout="fill"

src/app/search/components/BlogList/BlogCard.tsx

@@ -21,6 +21,7 @@ export default function BlogCard({
     >
       <div className="relative w-250 h-130">
         <Image
+          loader={() => photoUrl}
           src={photoUrl}
           alt="bg"
           layout="fill"

src/app/subscribe/components/FeedBox/index.tsx

@@ -33,6 +33,7 @@ export default function FeedBox({
       </div>
       <div className="relative w-250 h-170 p-30 mt-10 border border-[#bcbcbc] rounded-4">
         <Image
+          loader={() => photo || fallbackImage}
           src={photo || fallbackImage}
           alt="image"
           layout="fill"

src/components/Common/Icons/Mypage.tsx

@@ -0,0 +1,29 @@
+import { SVGProps } from 'react';
+
+export default function Mypage({ ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
+        stroke="#212121"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
+        stroke="#212121"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

src/components/Common/Icons/index.tsx

@@ -15,3 +15,4 @@ export { default as PaginationLeft } from './PaginationLeft';
 export { default as PaginationRight } from './PaginationRight';
 export { default as UpArrow } from './UpArrow';
 export { default as DownArrow } from './DownArrow';
+export { default as Mypage } from './Mypage';

src/components/MouseImageGallery/index.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { MouseEvent, useRef } from 'react';
 import { range } from '@/utils';
-import { LikeIcon, Trending, Write } from '../Common';
+import { LikeIcon, Mypage, Trending, Write } from '../Common';
 
 export default function MouseImageGallery() {
   let steps = 0;
@@ -100,6 +100,10 @@ export default function MouseImageGallery() {
             <LikeIcon color="#000" />
           </Link>
 
+          <Link href="/mypage" className="flex gap-10 z-[100]">
+            <Mypage />
+          </Link>
+
           <Link href="/write" className="flex gap-10 z-[100]">
             <Write />
           </Link>