[merge] QnA 상세페이지 UI 수정

QnA상세페이지 UI 변경
re-Duck · Jun 3, 2024 · cdd0c10 · cdd0c10
2 parents 11e75ef + ceef248
commit cdd0c10
Show file tree

Hide file tree

Showing 60 changed files with 1,465 additions and 193 deletions.
diff --git a/client/package.json b/client/package.json
@@ -21,6 +21,7 @@
     "@tiptap/extension-highlight": "^2.1.12",
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-link": "^2.1.13",
+    "@tiptap/extension-placeholder": "^2.2.4",
     "@tiptap/pm": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",

diff --git a/client/src/app/board/components/PostDetail/index.tsx b/client/src/app/board/components/PostDetail/index.tsx
@@ -65,7 +65,7 @@ export default function PostDetail({ data, IS_AUTHOR }: PostDetail) {
         {data.postTitle}
       </h1>
       <div className="relative flex items-center pb-4 border-b border-blue-gray-scale-50">
-        <Avatar src={url} alt="user_icon" size="xs" />
+        <Avatar src={url} alt="user_icon" size="size-7" />
         <span className="ml-1 text-body3 text-gray-scale-900">
           {data.postAuthorName}
         </span>
@@ -85,12 +85,14 @@ export default function PostDetail({ data, IS_AUTHOR }: PostDetail) {
       </div>
       <div className="relative h-full">
         <FloatingBar.FloatingBarContainer>
-          <FloatingBar.FloatingBarLike
-            InitialLikes={data.likes}
-            postOriginId={data.postOriginId}
-          />
-          <FloatingBar.FloatingBarBookMark postOriginId={data.postOriginId} />
-          <FloatingBar.FloatingBarShare />
+          <FloatingBar.FloatingBarGroup>
+            <FloatingBar.FloatingBarLike
+              InitialLikes={data.likes}
+              postOriginId={data.postOriginId}
+            />
+            <FloatingBar.FloatingBarBookMark postOriginId={data.postOriginId} />
+            <FloatingBar.FloatingBarShare />
+          </FloatingBar.FloatingBarGroup>
         </FloatingBar.FloatingBarContainer>
         <EditorContent
           className="pt-8 pb-20"

diff --git a/client/src/app/board/components/PostProfile/index.tsx b/client/src/app/board/components/PostProfile/index.tsx
@@ -20,7 +20,7 @@ export default function PostProfile({ userId, userName, imageUrl }: IProps) {
         href={`/profile/${userId}`}
         className="flex flex-wrap items-center gap-6"
       >
-        <Avatar src={imageUrl} alt="user_icon" size="md" />
+        <Avatar src={imageUrl} alt="user_icon" size="size-20" />
         <div className="flex flex-col items-start flex-1 gap-2 min-w-fit">
           <h3 className="font-bold text-headline-6 sm:text-headline5">
             {userName}

diff --git a/client/src/app/chat/components/chat-message.tsx b/client/src/app/chat/components/chat-message.tsx
@@ -49,7 +49,7 @@ export default function ChatMessage({
           <Avatar
             src={userProfileImgPath ? `${BASE_URL}${userProfileImgPath}` : ''}
             alt="프로필 이미지"
-            size="xs"
+            size="size-7"
           />
         </div>
       )}

diff --git a/client/src/app/chat/components/user-tile.tsx b/client/src/app/chat/components/user-tile.tsx
@@ -82,7 +82,7 @@ const UserTile = ({
       className={`flex gap-2 font-semibold items-center px-2 py-4 ${addedStyle}`}
       onClick={handleClick}
     >
-      <Avatar src={src ? `${BASE_URL}${src}` : ''} alt="user_icon" size="sm" />
+      <Avatar src={src ? `${BASE_URL}${src}` : ''} alt="user_icon" />
       <div className="flex flex-col flex-1 overflow-hidden text-left">
         <span className="text-md">{name}</span>
         <span className="text-xs text-gray-400 truncate overflow-ellipsis">

diff --git a/client/src/app/community/components/WritePostButton/index.tsx b/client/src/app/community/components/WritePostButton/index.tsx
@@ -28,7 +28,7 @@ export function WritePostButton() {
 
   return (
     <article className="flex justify-center w-full items-center bg-white border-gray-100 border-[1px] h-25 p-6 gap-4">
-      <Avatar src={imgPath} alt="profileImg" size="sm" />
+      <Avatar src={imgPath} alt="profileImg" />
       {user.userId ? (
         <Link href={'/write'} className="w-10/12">
           <button className=" border-[1px] rounded-md w-full bg-gray-50 h-11">

diff --git a/client/src/app/profile/components/EditProfile/index.tsx b/client/src/app/profile/components/EditProfile/index.tsx
@@ -258,7 +258,7 @@ export default function EditProfile({
           <CustomForm.FormContainer>
             <CustomForm.FormLabel name="프로필 이미지" />
             <CustomForm.FormBox>
-              <Avatar src={profileImg} alt="profileImg" size="md" />
+              <Avatar src={profileImg} alt="profileImg" size="size-20" />
               <input
                 type="file"
                 accept="image/*"

diff --git a/client/src/app/profile/components/Follow/follow-user.tsx b/client/src/app/profile/components/Follow/follow-user.tsx
@@ -23,7 +23,11 @@ export default function FollowUser({ userName, userId, profileImg }: IProp) {
         href={`/profile/${userId}`}
         className="flex items-center gap-3 pr-20 [&>*:nth-child(1)]:shrink-0"
       >
-        <Avatar src={`${BASE_URL}${profileImg}`} alt="user_icon" size="md" />
+        <Avatar
+          src={`${BASE_URL}${profileImg}`}
+          alt="user_icon"
+          size="size-20"
+        />
         <div className="flex flex-col gap-1.5 font-bold">
           <span className="text-lg">{userName}</span>
           <span className="text-sm text-gray-400">{userId}</span>

diff --git a/client/src/app/profile/components/SideProfile/index.tsx b/client/src/app/profile/components/SideProfile/index.tsx
@@ -29,7 +29,7 @@ export default function SideProfile({
       <Avatar
         src={`${BASE_URL}${userProfileImgPath || ''}`}
         alt="profileImg"
-        size="xl"
+        size="size-60"
       />
       <div className="mt-4">
         <p>{name}</p>

diff --git a/client/src/app/profile/components/UserInfo/index.tsx b/client/src/app/profile/components/UserInfo/index.tsx
@@ -64,7 +64,6 @@ export default function UserInfo({ targetUserId }: { targetUserId: string }) {
         <Avatar
           src={`${BASE_URL}${userProfileImgPath || ''}`}
           alt="profileImg"
-          size="sm"
         />
       ),
     },

diff --git a/client/src/app/qna/[id]/error.tsx b/client/src/app/qna/[id]/error.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import ErrorFallback from '@/components/ErrorFallback';
+
+export default function Error({ error }: { error: Error }) {
+  return <ErrorFallback error={error} hasHomeButton={true} />;
+}
diff --git a/client/src/app/qna/[id]/loading.tsx b/client/src/app/qna/[id]/loading.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from '@/components';
+
+export default function Loading() {
+  return (
+    <article className="flex flex-col max-w-4xl gap-4 px-4 py-6 m-auto bg-white border-2 border-gray-100 sm:p-12">
+      <Skeleton.Box width="w-full" height="h-10" />
+      <Skeleton.Box width="w-full" height="h-72" />
+    </article>
+  );
+}
diff --git a/client/src/app/qna/[id]/page.tsx b/client/src/app/qna/[id]/page.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from 'react';
+
+//components
+import Loading from './loading';
+import QnaContent from '../components/QnaContent';
+
+export default async function QnaDetailPage() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <QnaContent />
+    </Suspense>
+  );
+}
diff --git a/client/src/app/qna/components/Post.tsx b/client/src/app/qna/components/Post.tsx
@@ -1,46 +1,55 @@
+import Link from 'next/link';
+
+//assets
 import { Check } from '@/assets/Icon';
+
+//components
 import PostAuthorAndDate from '@/components/PostAuthorAndDate';
+
+//types
 import { IPostInformation } from '@/types';
 interface PostProps {
   post: IPostInformation;
 }
 export default function Post({ post }: PostProps) {
   return (
-    <article className=" px-4 py-[26px] border-b border-gray-scale-400 w-full hover:shadow-md duration-300 cursor-pointer">
-      <section className="w-full h-[140px] flex">
-        <div className="w-[132px] h-full flex flex-col justify-center pr-6 items-end border-r-[1px] border-blue-gray-scale-50 gap-[17px]">
-          <div className="flex items-center gap-2">
-            <Check stroke="#1F9854" strokeWidth="3" />
-            <span className="text-blue-gray-scale-400 text-[14px] font-medium flex items-center gap-2">
-              <strong className="text-[24px] ">{post.commentsCount}</strong>
-              답변
+    <Link href={`qna/${post.postOriginId}`}>
+      <article className=" px-4 py-[26px] border-b border-gray-scale-400 w-full hover:shadow-md duration-300 cursor-pointer">
+        <section className="w-full h-[140px] flex">
+          <div className="w-[132px] h-full flex flex-col justify-center pr-6 items-end border-r-[1px] border-blue-gray-scale-50 gap-[17px]">
+            <div className="flex items-center gap-2">
+              <Check stroke="#1F9854" strokeWidth="3" />
+              <span className="text-blue-gray-scale-400 text-[14px] font-medium flex items-center gap-2">
+                <strong className="text-[24px] ">{post.commentsCount}</strong>
+                답변
+              </span>
+            </div>
+
+            <span className="text-blue-gray-scale-200 text-[14px] flex items-center gap-2">
+              <strong className="text-[24px] font-normal">{post.hits}</strong>
+              조회
             </span>
           </div>
 
-          <span className="text-blue-gray-scale-200 text-[14px] flex items-center gap-2">
-            <strong className="text-[24px] font-normal">{post.hits}</strong>
-            조회
-          </span>
-        </div>
-
-        <div className="flex flex-col w-full h-full gap-2 px-6 overflow-hidden">
-          <h3 className="text-[18px] font-medium">{post.postTitle}</h3>
-          <p className="text-ellipsis line-clamp-2 text-gray-scale-700">
-            {post.postContent}
-          </p>
+          <div className="flex flex-col w-full h-full gap-2 px-6 overflow-hidden">
+            <h3 className="text-[18px] font-medium">{post.postTitle}</h3>
+            <p className="text-ellipsis line-clamp-2 text-gray-scale-700">
+              {post.postContent}
+            </p>
 
-          <div>
-            <div className="flex w-full gap-1 h-[24px]">
-              <span className="flex justify-center items-center py-1 px-2 border-[1px] border-gray-scale-500 text-gray-scale-700 text-[12px] rounded-[2px]">
-                #tag
-              </span>
-            </div>
-            <div className="flex justify-end">
-              <PostAuthorAndDate post={post} />
+            <div>
+              <div className="flex w-full gap-1 h-[24px]">
+                <span className="flex justify-center items-center py-1 px-2 border-[1px] border-gray-scale-500 text-gray-scale-700 text-[12px] rounded-[2px]">
+                  #tag
+                </span>
+              </div>
+              <div className="flex justify-end">
+                <PostAuthorAndDate post={post} />
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-    </article>
+        </section>
+      </article>
+    </Link>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up @@
             <Avatar
               src={`${BASE_URL}${userProfileImgPath || ''}`}
               alt="profileImg"
-              size="sm"
             />
           ),
         },
@@ Expand Down @@