Merge pull request #167 from Donggrina/feature/diary-by-id

Fix: 다이어리 이미지 업로드 오류 수정 등
Donggrina · Jun 22, 2024 · 40c7eff · 40c7eff
2 parents f495479 + 73883e5
commit 40c7eff
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 25 deletions.
diff --git a/components/diaries/diary-content/content/index.tsx b/components/diaries/diary-content/content/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link';
+// import Link from 'next/link';
 import styles from './content.module.scss';
 
 interface ContentProps {
@@ -9,9 +9,9 @@ interface ContentProps {
 const Content: React.FC<ContentProps> = ({ content }) => {
   return (
     <div className={styles.contentContainer}>
-      <Link href="/">
-        <p className={styles.content}>{content}</p>
-      </Link>
+      {/* <Link href="/"> */}
+      <p className={styles.content}>{content}</p>
+      {/* </Link> */}
     </div>
   );
 };

diff --git a/components/diaries/diary-content/diary-content.module.scss b/components/diaries/diary-content/diary-content.module.scss
@@ -10,6 +10,7 @@
   border: 1px solid;
   box-shadow: 2px 4px 5px #dadada;
   border-color: var(--main-color);
+  cursor: pointer;
 
   .leftContainer {
     display: flex;

diff --git a/components/diaries/diary-content/diary-content.tsx b/components/diaries/diary-content/diary-content.tsx
@@ -5,6 +5,7 @@ import Response from '../diary-content/response';
 import Kebab from '../diary-content/kebab';
 import ContentImage from '../diary-content/content-image';
 import { useDiaries } from '@/hooks/queries/diary/use-diary-query';
+import { useRouter } from 'next/router';
 
 interface DiaryContentProps {
   date: string;
@@ -13,29 +14,35 @@ interface DiaryContentProps {
 const DiaryContent: React.FC<DiaryContentProps> = ({ date }) => {
   const { data, isError, isLoading } = useDiaries(date);
 
+  const router = useRouter();
+
   if (isLoading) return <p>Loading...</p>;
   if (!data || data.length === 0) return <></>;
   if (isError) return <p>error</p>;
 
   return (
     <div>
-      {data?.map((diary) => (
-        <div key={diary.diaryId} className={styles.diaryContent}>
-          <div className={styles.leftContainer}>
-            <Profile author={diary.author} authorImage={diary.authorImage} petImages={diary.petImages} />
-            <Content content={diary.content} />
-            <Response
-              commentCount={diary.commentCount}
-              favoriteCount={diary.favoriteCount}
-              favoriteState={diary.favoriteState}
-            />
-          </div>
-          <div className={styles.rightContainer}>
-            {diary.isMyDiary && <Kebab diaryId={diary.diaryId} />}
-            <ContentImage contentImage={diary.contentImage} />
+      {data?.map((diary) => {
+        const handleClick = () => router.push(`/diaries/${diary.diaryId}`);
+
+        return (
+          <div key={diary.diaryId} className={styles.diaryContent} onClick={handleClick}>
+            <div className={styles.leftContainer}>
+              <Profile author={diary.author} authorImage={diary.authorImage} petImages={diary.petImages} />
+              <Content content={diary.content} />
+              <Response
+                commentCount={diary.commentCount}
+                favoriteCount={diary.favoriteCount}
+                favoriteState={diary.favoriteState}
+              />
+            </div>
+            <div className={styles.rightContainer}>
+              {diary.isMyDiary && <Kebab diaryId={diary.diaryId} />}
+              <ContentImage contentImage={diary.contentImage} />
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 };

diff --git a/components/diaries/diary-content/kebab/index.tsx b/components/diaries/diary-content/kebab/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import styles from './kebab.module.scss';
 import DropdownMenu from '@/components/kebab/kebab';
 import useToggle from '@/hooks/use-toggle';
@@ -22,8 +22,10 @@ const Kebab: React.FC<KebabProps> = ({ diaryId }) => {
     }
   };
 
+  const handleClick: MouseEventHandler = (e) => e.stopPropagation();
+
   return (
-    <div className={styles.kebab}>
+    <div className={styles.kebab} onClick={handleClick}>
       <DropdownMenu value={{ isOpen, onOpenToggle, onCloseToggle }}>
         <DropdownMenu.Kebab />
         <DropdownMenu.Content>

diff --git a/components/diaries/diary-create/diary-create.tsx b/components/diaries/diary-create/diary-create.tsx
@@ -10,6 +10,7 @@ import usePetsQuery from '@/hooks/queries/calendar/use-pets-query';
 import { useQueryClient } from '@tanstack/react-query';
 import PetSelect from '@/components/diaries/pet-select';
 import PetCheckbox from '@/components/diaries/pet-checkbox';
+import { useRouter } from 'next/router';
 
 interface DiaryData {
   content: string;
@@ -40,6 +41,7 @@ const DiaryCreate: React.FC = () => {
   });
 
   const queryClient = useQueryClient();
+  const router = useRouter();
 
   const year = useCalenderDateStore.use.year().toString();
   const month = (useCalenderDateStore.use.month() + 1).toString().padStart(2, '0');
@@ -72,7 +74,7 @@ const DiaryCreate: React.FC = () => {
       try {
         const response = await postDiariesImage({ images: fileArray });
         const newImageIds = [...imageIds];
-        newImageIds[index] = response.data[index];
+        newImageIds[index] = response.data[0];
         setImageIds(newImageIds);
 
         const fileReader = new FileReader();
@@ -94,6 +96,7 @@ const DiaryCreate: React.FC = () => {
       const response = await postDiaries(completeData);
       console.log('Diary posted successfully:', response);
       queryClient.invalidateQueries({ queryKey: ['diaries'] });
+      router.push('/diaries');
     } catch (error) {
       console.error('failed to post diary:', error);
     }

diff --git a/pages/calendar/calendar.module.scss b/pages/calendar/calendar.module.scss
@@ -10,4 +10,5 @@
   color: var(--main-color);
   text-decoration: underline;
   cursor: pointer;
+  font-size: 12px;
 }
diff --git a/pages/diaries/[diaryId]/index.tsx b/pages/diaries/[diaryId]/index.tsx
@@ -69,10 +69,10 @@ export default function DiaryById({ diaryId }: InferGetServerSidePropsType<typeo
             authorImage={diaryQuery.data.authorImage}
             petImages={diaryQuery.data.petImages}
           />
-          <Image src={weatherIcon!.selectedIcon} alt={weatherIcon!.label} width={24} height={24} />
+          {weatherIcon && <Image src={weatherIcon.selectedIcon} alt={weatherIcon.label} width={24} height={24} />}
         </section>
 
-        <DiaryImages images={diaryQuery.data.contentImages} />
+        {!!diaryQuery.data.contentImages.length && <DiaryImages images={diaryQuery.data.contentImages} />}
 
         <section className={styles.content}>{diaryQuery.data.content}</section>