fix: 내 정보 QA 반영

src/app/(sidebar)/(my-info)/components/AddInfoCardDialog.tsx

@@ -10,6 +10,7 @@ import { useGetCardTags } from '../apis/useGetCardTags';
 import { usePostCard } from '../apis/usePostCard';
 import { TouchButton } from '@/components/TouchButton';
 import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
 
 export function AddInfoCardDialog({ children }: PropsWithChildren) {
   const router = useRouter();
@@ -61,7 +62,7 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
               disabled={selectedTagList.length === 3}
               onChange={(open) => setIsOpenTagSelector(open)}>
               <TagSelector.Trigger className="w-full bg-neutral-1 h-46 border-b-0 py-10 px-12 text-neutral-30">
-                <div className="w-full flex justify-between">
+                <div className="w-full flex justify-between items-center">
                   <If condition={!selectedTagList.length}>키워드 태그를 선택해주세요</If>
                   <If condition={!!selectedTagList.length}>
                     <ul className="flex gap-8">
@@ -82,7 +83,15 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
                       ))}
                     </ul>
                   </If>
-                  {!isOpenTagSelector && <Icon name="downChevron" color="#878A93" size={20} />}
+                  <motion.div
+                    variants={{
+                      closed: { rotate: '0deg' },
+                      opened: { rotate: '-180deg' },
+                    }}
+                    transition={{ duration: 0.1 }}
+                    animate={isOpenTagSelector ? 'opened' : 'closed'}>
+                    <Icon name="downChevron" color="#878A93" />
+                  </motion.div>
                 </div>
               </TagSelector.Trigger>
 
@@ -124,7 +133,7 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
             </TagSelector>
             <TagSelector className="w-full" onChange={(open) => setIsOpenTypeSelector(open)}>
               <TagSelector.Trigger className="w-full bg-neutral-1 h-46 border-b-0 py-10 px-12 text-neutral-30">
-                <div className="w-full flex justify-between">
+                <div className="w-full flex justify-between items-center">
                   <If condition={selectedType == null}>글의 종류를 선택해주세요</If>
                   <If condition={selectedType != null}>
                     <ul className="flex gap-8">
@@ -139,7 +148,15 @@ export function AddInfoCardDialog({ children }: PropsWithChildren) {
                       </TagSelector.RemovalbleTag>
                     </ul>
                   </If>
-                  {!isOpenTypeSelector && <Icon name="downChevron" color="#878A93" size={20} />}
+                  <motion.div
+                    variants={{
+                      closed: { rotate: '0deg' },
+                      opened: { rotate: '-180deg' },
+                    }}
+                    transition={{ duration: 0.1 }}
+                    animate={isOpenTypeSelector ? 'opened' : 'closed'}>
+                    <Icon name="downChevron" color="#878A93" />
+                  </motion.div>
                 </div>
               </TagSelector.Trigger>
               <TagSelector.Content className="w-full left-0 top-46 border-t-0 px-16 pt-16 pb-20">

src/app/(sidebar)/(my-info)/components/InfoCardList.tsx

@@ -3,6 +3,8 @@
 import { InfoType } from '@/types/info';
 import { useGetInfoCardList } from '../apis/useGetInfoCardList';
 import { InfoCard } from '@/components/InfoCard';
+import { Icon } from '@/system/components';
+import { If } from '@/system/utils/If';
 
 interface InfoCardListProps {
   cardType: InfoType;
@@ -13,17 +15,21 @@ export function InfoCardList({ cardType }: InfoCardListProps) {
 
   return (
     <section>
-      {infoCardList?.length ? (
+      <If condition={!!infoCardList.length}>
         <ul className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
-          {infoCardList?.map((info) => (
+          {infoCardList.map((info) => (
             <li key={info.id} className="min-w-[343px]">
               <InfoCard {...info} />
             </li>
           ))}
         </ul>
-      ) : (
-        <div className="mt-50 text-center text-body1 text-neutral-30">아직 생성된 정보 카드가 없어요!</div>
-      )}
+      </If>
+      <If condition={!infoCardList.length}>
+        <div className="flex flex-col h-[calc(100vh-400px)] items-center justify-center gap-16">
+          <Icon name="empty" size={280} />
+          <p className="text-center text-body1 text-neutral-30">아직 생성된 정보 카드가 없어요!</p>
+        </div>
+      </If>
     </section>
   );
 }

src/components/CardWindow/CardWindow.tsx

@@ -1,13 +1,10 @@
 import { TouchButton } from '@/components/TouchButton';
-import { Icon, Tag } from '@/system/components';
+import { Icon } from '@/system/components';
 import { color } from '@/system/token/color';
-import { ReactNode, useState } from 'react';
-import { useGetInfoCardDetail } from '../../hooks/apis/useGetInfoCardDetail';
-import { Spacing } from '@/system/utils/Spacing';
-import { formatToYYMMDD } from '@/utils/date';
+import { ReactNode, Suspense, useState } from 'react';
 import { motion } from 'framer-motion';
-import { If } from '@/system/utils/If';
 import { useRouter } from 'next/navigation';
+import { CardWindowContent } from './CardWindowContent';
 
 interface CardWindowProps {
   cardId: number;
@@ -18,8 +15,6 @@ export function CardWindow({ cardId, onClose }: CardWindowProps) {
   const router = useRouter();
   const [isRight, setIsRight] = useState(true);
 
-  const { data: card, isLoading } = useGetInfoCardDetail(cardId);
-
   return (
     <motion.div
       initial={{
@@ -43,7 +38,7 @@ export function CardWindow({ cardId, onClose }: CardWindowProps) {
         duration: 0.2,
       }}
       layout
-      className="absolute bottom-16 w-368 max-h-[768px] rounded-20 bg-white shadow-[0px_3px_8px_0px_rgba(0,0,0,0.24)]">
+      className="absolute bottom-16 w-368 max-h-[768px] rounded-20 bg-white shadow-[0px_3px_8px_0px_rgba(0,0,0,0.24)] z-[200]">
       <div className="p-20 pb-24">
         <div className="flex justify-between">
           <div className="flex gap-12">
@@ -68,36 +63,9 @@ export function CardWindow({ cardId, onClose }: CardWindowProps) {
           </TouchButton>
         </div>
       </div>
-      <If condition={isLoading}>
-        <Skeleton />
-      </If>
-      <If condition={!isLoading}>
-        <div className="px-20">
-          <div className="flex items-center">
-            <h1 className="flex-1 text-heading1 font-bold text-neutral-95 truncate">
-              {card?.title || '제목을 입력해주세요'}
-            </h1>
-            <p className="text-caption1 font-medium text-neutral-20">
-              {formatToYYMMDD(card?.updatedDate || '', { separator: '.' })}
-            </p>
-          </div>
-          <Spacing size={24} />
-          <div className="flex gap-8">
-            {card?.cardTypeValueList.map((type) => (
-              <Tag key={type} color="yellow">
-                {type.replaceAll('_', ' ')}
-              </Tag>
-            ))}
-            {card?.tagList.map(({ id, name, type }) => (
-              <Tag key={id} color={type === '역량' ? 'blue' : 'purple'}>
-                {name}
-              </Tag>
-            ))}
-          </div>
-          <Spacing size={20} />
-          <div className="min-h-200 max-h-[600px] overflow-auto">{card?.content || '내용을 입력해주세요'}</div>
-        </div>
-      </If>
+      <Suspense fallback={<Skeleton />}>
+        <CardWindowContent cardId={cardId} />
+      </Suspense>
     </motion.div>
   );
 }

src/components/CardWindow/CardWindowContent.tsx

@@ -0,0 +1,55 @@
+import { Tag } from '@/system/components';
+import { Spacing } from '@/system/utils/Spacing';
+import { formatToYYMMDD } from '@/utils/date';
+import { useGetInfoCardDetail } from './hooks/useGetInfoCardDetail';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { ExtensionKit } from '../Editor/extensionKit';
+
+interface CardWindowContentProps {
+  cardId: number;
+}
+export function CardWindowContent({ cardId }: CardWindowContentProps) {
+  const { data: card } = useGetInfoCardDetail(cardId);
+
+  const cardContent = card.content ? JSON.parse(card.content) : '내용을 입력해주세요';
+
+  const editor = useEditor(
+    {
+      content: cardContent,
+      extensions: [...ExtensionKit()],
+      editable: false,
+      immediatelyRender: false,
+    },
+    [cardId],
+  );
+
+  return (
+    <div className="px-20 max-h-[700px] overflow-hidden">
+      <div className="flex items-center">
+        <h1 className="flex-1 text-heading1 font-bold text-neutral-95 truncate">
+          {card.title || '제목을 입력해주세요'}
+        </h1>
+        <p className="text-caption1 font-medium text-neutral-20">
+          {formatToYYMMDD(card.updatedDate || '', { separator: '.' })}
+        </p>
+      </div>
+      <Spacing size={24} />
+      <div className="flex flex-wrap gap-8">
+        {card.cardTypeValueList.map((type) => (
+          <Tag key={type} color="yellow">
+            {type.replaceAll('_', ' ')}
+          </Tag>
+        ))}
+        {card.tagList.map(({ id, name, type }) => (
+          <Tag key={id} color={type === '역량' ? 'blue' : 'purple'}>
+            {name}
+          </Tag>
+        ))}
+      </div>
+      <Spacing size={20} />
+      <div className="min-h-200 max-h-[600px] pb-30 overflow-auto">
+        <EditorContent readOnly editor={editor} contentEditable={false} />
+      </div>
+    </div>
+  );
+}

src/hooks/apis/useGetInfoCardDetail.ts → src/components/CardWindow/hooks/useGetInfoCardDetail.ts

@@ -1,6 +1,6 @@
 import { http } from '@/apis/http';
 import { InfoType, TagType } from '@/types';
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 export interface GetInfoCardDetailResponse {
   title: string;
@@ -16,7 +16,7 @@ const getInfoCardDetail = (cardId: number) =>
   });
 
 export const useGetInfoCardDetail = (cardId: number) =>
-  useQuery({
+  useSuspenseQuery({
     queryKey: ['get-info-card-detail', cardId],
     queryFn: async () => {
       const res = await getInfoCardDetail(cardId);

src/components/InfoCard.tsx

@@ -62,7 +62,7 @@ export function InfoCard({ id, title, updatedDate, tagList }: InfoCardProps) {
             </DropdownMenu>
           </div>
         </div>
-        <div className="flex gap-[8px]">
+        <div className="flex gap-[8px] overflow-hidden">
           {tagList.map(({ id, type, name }) => (
             <Tag key={id} color={TAG_TYPE_COLOR[type]}>
               {name}

src/system/components/Dialog/Dialog.tsx

@@ -43,10 +43,10 @@ const DialogContent = React.forwardRef<
       )}
       {...props}>
       {children}
-      {/* <DialogPrimitive.Close className="absolute right-20 top-20 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+      <DialogPrimitive.Close className="absolute right-20 top-20 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
         <Icon name="x" color="#878A93" />
         <span className="sr-only">Close</span>
-      </DialogPrimitive.Close> */}
+      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
@@ -66,11 +66,7 @@ const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-body1 font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
+  <DialogPrimitive.Title ref={ref} className={cn('text-body1 font-semibold tracking-tight', className)} {...props} />
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;