fix(qa) QA에서 발견된 오류 수정

src/app/(sidebar)/layout.tsx

@@ -1,13 +1,16 @@
 import { Sidebar } from '@/container/Sidebar/Sidebar';
 import { PropsWithChildren } from 'react';
 import { CardWindowLayout } from '@/components/CardWindow/context';
+import AuthRedirect from '../AuthRedirect';
 
 export default function SidebarLayout({ children }: PropsWithChildren) {
   return (
     <div className="flex">
       <Sidebar />
       <div className="flex-grow relative">
-        <CardWindowLayout>{children}</CardWindowLayout>
+        <AuthRedirect>
+          <CardWindowLayout>{children}</CardWindowLayout>
+        </AuthRedirect>
       </div>
     </div>
   );

src/app/(sidebar)/write/[id]/api/useGetCardDetail/useGetCardDetail.ts

@@ -8,6 +8,8 @@ export interface GetCardDetailResponse {
   title: string;
   content: JSONContent;
   updatedDate: `${string} ${string}`;
+  createdDate: `${string} ${string}`;
+  recruitTitle: string;
   cardTypeValueList: Array<TypeTag>;
   tagList: Array<TagType>;
   cardTypeValueGroup: CardGroup;

src/app/(sidebar)/write/[id]/api/usePostMemo.ts

@@ -1,14 +1,20 @@
 import { http } from '@/apis/http';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export const postMemo = (cardId: number, content: string) =>
   http.post({
     url: `/cards/${cardId}/card-memo`,
     data: { content },
   });
 
-export const usePostMemo = (cardId: number) =>
-  useMutation({
+export const usePostMemo = (cardId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
     mutationKey: ['post-memo', cardId],
     mutationFn: (content: string) => postMemo(cardId, content),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['get-memos'] });
+    },
   });
+};

src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/DeleteMemoDialog.tsx

@@ -15,8 +15,12 @@ export function DeleteMemoDialog({
       <DialogTrigger asChild>{children}</DialogTrigger>
 
       <DialogContent className="border-1 w-460 h-232 p-32 pt-24 flex flex-col gap-36">
-        <div className="mt-36 text-20 font-bold text-center">
-          <p className="w-360 overflow-hidden text-ellipsis whitespace-pre-wrap">{memo}</p>
+        <div className="mt-36 text-20 font-bold text-center flex flex-col items-center justify-center">
+          <div className="flex">
+            <span>'</span>
+            <p className="w-370 overflow-hidden text-ellipsis whitespace-nowrap">{memo}</p>
+            <span>'</span>
+          </div>
           <p>메모를 정말 삭제하시겠습니까?</p>
         </div>
 

src/app/(sidebar)/write/[id]/components/MemoContainer/Memo/Memo.tsx

@@ -7,10 +7,8 @@ import { AnimatePresence } from 'framer-motion';
 import { motion } from 'framer-motion';
 import { GetMemosResponse } from '../../../api/useGetMemos';
 import { useMemosContext } from '../../../fetcher/MemosFetcher';
-import { useDeleteMemo } from '../../../api/useDeleteMemo';
 import { usePutMemo } from '@/app/(sidebar)/write/[id]/api/usesPutMemo';
 import { If } from '@/system/utils/If';
-import { Dialog } from '@/system/components/Dialog/Dialog';
 import { DeleteMemoDialog } from './DeleteMemoDialog';
 
 export default function Memo({ id: memoId, content, updatedDate }: GetMemosResponse[number]) {

src/app/(sidebar)/write/[id]/fetcher/CardTagFetcher.tsx

@@ -14,6 +14,8 @@ const [CardDetailTagsProvider, useCardDetailTagsContext] = generateContext<GetCa
     tagList: [],
     updatedDate: ' ',
     cardTypeValueGroup: '내_정보',
+    createdDate: ' ',
+    recruitTitle: '',
   },
 });
 

src/app/(sidebar)/write/[id]/hooks/index.ts

@@ -8,6 +8,7 @@ import { useTagsContext } from '../fetcher/TagsFetcher';
 import { usePutCardType } from '@/app/(sidebar)/write/[id]/api/usePutCardType/usePutCardType';
 import { useQueryClient } from '@tanstack/react-query';
 import { TypeTag } from '@/types/info';
+import { useDeleteCard } from '@/app/(sidebar)/(my-info)/apis/useDeleteCard';
 
 export function useWrite(id: number) {
   const {
@@ -17,6 +18,8 @@ export function useWrite(id: number) {
     content,
     cardTypeValueList,
     cardTypeValueGroup,
+    createdDate,
+    recruitTitle,
   } = useCardDetailTagsContext();
   const { tags } = useTagsContext();
   const isMyInfo = cardTypeValueGroup === '내_정보';
@@ -35,6 +38,7 @@ export function useWrite(id: number) {
   const { mutate: mutatePostCardTag } = usePostCardTag(id);
   const { mutate: mutateDeleteCardTag } = useDeleteCardTag(id);
   const { mutate: mutatePutCardType } = usePutCardType(id);
+  const { mutate: deleteCard } = useDeleteCard();
 
   const handlePutCardTitle = useCallback((value: string) => {
     setTitle(value);
@@ -101,6 +105,7 @@ export function useWrite(id: number) {
     handlePostCardTag,
     handleDeleteCardTag,
     handlePutCardType,
+    deleteCard,
     title,
     selectedTags,
     selectedCategories,
@@ -109,5 +114,7 @@ export function useWrite(id: number) {
     updatedDate: updatedDate.split(' ')[0].replaceAll(/-/g, '.'),
     content,
     disabledCount,
+    createdDate: createdDate.split(' ')[0].replaceAll(/-/g, '.'),
+    recruitTitle,
   };
 }

src/app/(sidebar)/write/[id]/page.tsx

@@ -37,12 +37,24 @@ export default function Page({ params: { id } }: { params: { id: string } }) {
     updatedDate,
     disabledCount,
     handlePutCardType,
+    deleteCard,
+    createdDate,
+    recruitTitle,
   } = useWrite(Number(id));
 
   return (
     <section className="h-full">
       <section className="flex">
-        <div className="pt-64 w-full">
+        <div className="pt-40 w-full">
+          <div className="h-16 pl-80">
+            <If condition={recruitTitle != null}>
+              <div className="flex gap-4 text-12 text-neutral-30 mt-8">
+                <Icon name="announcementFolder" size={16} color="#CCCDD1" />
+                <p>{recruitTitle}</p>
+              </div>
+            </If>
+          </div>
+
           <EditorProvider cardId={Number(id)} initialContent={content}>
             <div className="flex justify-between px-80">
               <Input
@@ -52,15 +64,23 @@ export default function Page({ params: { id } }: { params: { id: string } }) {
                 classNames={{ base: 'w-[552px]' }}
                 className="text-[24px] font-bold px-0 leading-32 tracking-[-0.0345rem] border-none"
               />
-              <div className="flex gap-8 items-center text-neutral-20">
-                <p>{updatedDate}</p>
+              <div className="flex gap-8 items-center text-neutral-20 whitespace-nowrap">
+                <div className="flex items-center gap-4">
+                  <If condition={updatedDate != null}>
+                    <p className="text-12 text-neutral-50">{updatedDate} 수정됨</p>
+                  </If>
+
+                  <p className="text-12">{updatedDate != null ? `(${createdDate || ''} 생성됨)` : createdDate}</p>
+                </div>
 
                 <DropdownMenu>
                   <DropdownMenuTrigger>
                     <Icon name="more" color="black" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem className="flex gap-4 w-176 h-52 pl-16 cursor-pointer">
+                    <DropdownMenuItem
+                      onClick={() => deleteCard(Number(id))}
+                      className="flex gap-4 w-176 h-52 pl-16 cursor-pointer">
                       <Icon name="trash" size={20} color="#FF5C5C" />
                       <p className="text-[#FF5C5C] text-15">삭제하기</p>
                     </DropdownMenuItem>

src/app/AuthRedirect.tsx

@@ -1,13 +1,14 @@
 import { Redirect } from '@/components/Redirect';
 import { StrictPropsWithChildren } from '@/types';
 import { cookies } from 'next/headers';
-import { ACCESS_TOKEN } from './login/constants/token';
+import { ACCESS_TOKEN, JOB_SELECTION } from './login/constants/token';
 
 export default async function AuthRedirect({ children }: StrictPropsWithChildren) {
   const accessToken = cookies().get(ACCESS_TOKEN)?.value;
+  const isJobSelection = cookies().get(JOB_SELECTION)?.value;
 
   return (
-    <Redirect condition={accessToken != null} to="/login">
+    <Redirect condition={accessToken == null || isJobSelection == null} to="/login">
       {children}
     </Redirect>
   );

src/app/layout.tsx

@@ -5,7 +5,7 @@ import '@/styles/memo.css';
 import { Inter } from 'next/font/google';
 import { cn } from '@/utils';
 import { Suspense } from 'react';
-import { GoogleProvider } from '@/app/GoogleProvider';
+import { GoogleProvider } from '@/lib/GoogleProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 

src/app/login/layout.tsx

@@ -1,5 +1,17 @@
+import { Redirect } from '@/components/Redirect';
 import { StrictPropsWithChildren } from '@/types';
+import { cookies } from 'next/headers';
+import { Suspense } from 'react';
+import { ACCESS_TOKEN } from './constants/token';
 
 export default async function Layout({ children }: StrictPropsWithChildren) {
-  return <main className="h-screen flex justify-center items-center bg-neutral-95">{children}</main>;
+  const accessToken = cookies().get(ACCESS_TOKEN)?.value;
+
+  return (
+    <main className="h-screen flex justify-center items-center bg-neutral-95">
+      <Redirect condition={accessToken != null} to="/">
+        <Suspense>{children}</Suspense>
+      </Redirect>
+    </main>
+  );
 }

src/app/login/page.tsx

@@ -10,12 +10,11 @@ import { ACCESS_TOKEN, JOB_SELECTION, SELECT } from './constants/token';
 export default function Page() {
   const Funnel = useFunnel(['login', 'select'] as const, { initialStep: 'login', stepQueryKey: 'auth' });
   const isSelectJob = getCookie(JOB_SELECTION) === SELECT;
-  const accessToken = !!getCookie(ACCESS_TOKEN);
 
   return (
     <Funnel mode="wait">
       <Funnel.Step name="login">
-        <Redirect condition={accessToken}>
+        <Redirect condition={!isSelectJob} to="/login?auth=select">
           <Login />
         </Redirect>
       </Funnel.Step>

src/components/Editor/useEditor.ts

@@ -2,10 +2,27 @@ import { JSONContent, useEditor as useTiptapEditor } from '@tiptap/react';
 import { ExtensionKit } from './extensionKit';
 import { useEffect, useState } from 'react';
 
-export function useEditor({ readOnly, initialContent = {} }: { initialContent?: JSONContent; readOnly?: boolean }) {
-  const [content, setContent] = useState<JSONContent>(JSON.parse((initialContent || JSON.stringify('')) as any) || {});
+export function useEditor({
+  readOnly = false,
+  initialContent = {},
+}: {
+  initialContent?: JSONContent | string;
+  readOnly?: boolean;
+}) {
+  const [content, setContent] = useState<JSONContent>(() => {
+    try {
+      const parsedContent = initialContent
+        ? JSON.parse(typeof initialContent === 'string' ? initialContent : JSON.stringify(initialContent))
+        : '';
+
+      return parsedContent || {};
+    } catch (error) {
+      return {};
+    }
+  });
 
   const editor = useTiptapEditor({
+    editable: !readOnly,
     autofocus: true,
     extensions: [...ExtensionKit()],
     editorProps: {

src/system/components/Icon/Icon.tsx

@@ -47,6 +47,7 @@ import { CodingSignUp } from './SVG/CodingSignUp';
 import { MemoColored } from './SVG/MemoColored';
 import { Downloads } from './SVG/Downloads';
 import { X } from './SVG/X';
+import { AnnouncementFolder } from './SVG/AnnouncementFolder';
 
 const iconMap = {
   bell: Bell,
@@ -97,6 +98,7 @@ const iconMap = {
   logout: Logout,
   profileFill: ProfileFill,
   folder: Folder,
+  announcementFolder: AnnouncementFolder,
 } as const;
 
 export interface IconProps extends IconBaseType {

src/system/components/Icon/SVG/AnnouncementFolder.tsx

@@ -0,0 +1,14 @@
+import { IconBaseType } from '@/system/components/Icon/SVG/type';
+
+export function AnnouncementFolder({ size, color }: IconBaseType) {
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.58667 10.5599H11.4133V9.55995H4.58667V10.5599ZM8.14 3.96661L6.63333 2.11328H1.5V13.8866H14.5V3.96661H8.14Z"
+        fill={color}
+      />
+    </svg>
+  );
+}