Merge pull request #332 from TripInfoWeb/dev_diary

Refactor: 정보/여행일기 디자인 리팩토링
TripInfoWeb · Sep 20, 2024 · f76304a · f76304a
2 parents d377ff2 + 4645b07
commit f76304a
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 161 deletions.
diff --git a/src/components/diary/list/DiaryCard.tsx b/src/components/diary/list/DiaryCard.tsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import sanitizeHtml from "sanitize-html";
 import { motion } from "framer-motion";
+import { TiLocation } from "react-icons/ti";
 
 interface Props {
   diaryData: {
@@ -37,18 +38,15 @@ const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => {
         }}
       >
         <motion.div
-          className="flex flex-row items-center gap-14"
+          className="flex flex-row items-center gap-1"
           initial={{ opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ delay: 0.3 }}
         >
-          <Image
-            src="/diary/day-text.svg"
-            alt="day-text"
-            width={41}
-            height={25}
-          />
-          <p className="font-semibold text-main">1</p>
+          <TiLocation className="text-main" size={"1.3rem"} />
+          <p className="text-lg text-gray1">
+            {diaryData.diaryDayContentResponses.diaryDayContentDetail[0].place}
+          </p>
         </motion.div>
         <div className="mt-[8.75rem] flex flex-col max-[972px]:mt-[5.375rem]">
           <motion.div

diff --git a/src/components/diary/write/QuillEditor.tsx b/src/components/diary/write/QuillEditor.tsx
@@ -23,6 +23,7 @@ const QuillEditor = ({
     <div className="relative flex flex-col">
       <HashSpinner loading={loading} />
       <ReactQuill
+        className="quillEditor"
         ref={quillRef}
         theme="snow"
         placeholder="여행은 어땠나요? 자유롭게 기록하고 싶은 것들을 작성해보세요."

diff --git a/src/components/gathering/createUpdate/editor/modal/GatheringContent.tsx b/src/components/gathering/createUpdate/editor/modal/GatheringContent.tsx
@@ -2,100 +2,102 @@ import { useFormContext } from "react-hook-form";
 import { v4 as uuid } from "uuid";
 
 interface IGatheringContent {
-    onChangeInputTagHandler: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    deleteTagHandler: (tag: string) => void;
-    tags: string[]; // Add this prop
-    inputTagRef: React.RefObject<HTMLInputElement>; // Add this prop
+  onChangeInputTagHandler: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  deleteTagHandler: (tag: string) => void;
+  tags: string[]; // Add this prop
+  inputTagRef: React.RefObject<HTMLInputElement>; // Add this prop
 }
 
 const GatheringContent = ({
-    onChangeInputTagHandler,
-    deleteTagHandler,
-    tags, // Add this prop
-    inputTagRef, // Add this prop
+  onChangeInputTagHandler,
+  deleteTagHandler,
+  tags, // Add this prop
+  inputTagRef, // Add this prop
 }: IGatheringContent) => {
-    const formContext = useFormContext();
+  const formContext = useFormContext();
 
-    return (
-        <>
-            <article className={"flex flex-col gap-[2rem]"}>
-                <div className={"flex w-full items-center gap-x-[2rem]"}>
-                    <div className={"relative w-[7rem] flex-shrink-0"}>
-                        <span className={"w-[3.5rem] text-lg font-semibold"}>제목</span>
-                        <span className="absolute top-[-.5rem] text-lg text-main">*</span>
-                    </div>
-                    <input
-                        placeholder="제목을 입력하세요"
-                        className="h-[3.25rem] w-full rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
-                        {...formContext.register("title")}
-                    />
-                </div>
-                <textarea
-                    className={
-                        "min-h-[17.5rem] resize-none rounded-[1rem] p-[1.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
-                    }
-                    placeholder={
-                        "어떤 모임을 만들어볼까요? 모임 정보 및 목표를 작성해 새로운 솔리들과 함께해보세요."
-                    }
-                    {...formContext.register("content")}
-                    onChange={(e) => {
-                        formContext.setValue("content", e.target.value);
-                        formContext.trigger("content");
-                    }}
-                    maxLength={500}
-                />
-                <div className={"flex w-full justify-end"}>
-                    <span
-                        className={`${formContext.getValues("content").length >= 500 && "text-red-600"}`}
-                    >
-                        {formContext.getValues("content").length} / 500
-                    </span>
-                </div>
-            </article>
-
-            <article className={"flex flex-col gap-[2rem]"}>
-                <div className={"flex w-full items-center gap-x-[2rem]"}>
-                    <div className={"relative w-[7rem] flex-shrink-0"}>
-                        <span className={"w-[3.5rem] text-lg font-semibold"}>해시태그</span>
-                    </div>
-                    <input
-                        placeholder="#해시태그로 키워드를 써보세요!"
-                        className="h-[3.25rem] w-full rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
-                        onKeyUp={onChangeInputTagHandler}
-                        onKeyDown={(e) => {
-                            if (e.key === "#" || (inputTagRef.current as HTMLInputElement).value.length >= 15) {
-                                e.preventDefault();
-                            }
-                        }}
-                        ref={inputTagRef}
-                    />
-                </div>
-                <div>
-                    <span className="px-2 text-sm text-gray-400">
-                        (엔터를 입력하면 태그로 추가됩니다. 태그 클릭시 제거)
-                    </span>
-                </div>
-                <div
-                    className={
-                        "flex min-h-[5rem] flex-wrap gap-[.25rem] rounded-[1rem] p-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
-                    }
-                >
-                    {tags.map((tag) => (
-                        <button
-                            key={uuid()}
-                            className={
-                                "flex h-[3rem] min-w-[5rem] items-center justify-center gap-[.125rem] rounded-lg bg-main px-1 text-white"
-                            }
-                            onClick={() => deleteTagHandler(tag)}
-                        >
-                            <span> # </span>
-                            <span> {tag} </span>
-                        </button>
-                    ))}
-                </div>
-            </article>
-        </>
-    );
+  return (
+    <>
+      <article className={"flex flex-col gap-[2rem]"}>
+        <div className={"flex w-full items-center gap-x-[2rem]"}>
+          <div className={"relative w-[7rem] flex-shrink-0"}>
+            <span className={"w-[3.5rem] text-lg font-semibold"}>제목</span>
+            <span className="absolute top-[-.5rem] text-lg text-main">*</span>
+          </div>
+          <input
+            placeholder="제목을 입력하세요"
+            className="h-[3.25rem] w-full rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
+            {...formContext.register("title")}
+          />
+        </div>
+        <textarea
+          className={
+            "min-h-[17.5rem] resize-none rounded-[1rem] p-[1.5rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
+          }
+          placeholder={
+            "어떤 모임을 만들어볼까요? 모임 정보 및 목표를 작성해 새로운 솔리들과 함께해보세요."
+          }
+          {...formContext.register("content")}
+          onChange={(e) => {
+            formContext.setValue("content", e.target.value);
+            formContext.trigger("content");
+          }}
+          maxLength={500}
+        />
+        <div className={"flex w-full justify-end"}>
+          <span
+            className={`${formContext.getValues("content").length >= 500 && "text-red-600"}`}
+          >
+            {formContext.getValues("content").length} / 500
+          </span>
+        </div>
+      </article>
+      <article className={"flex flex-col gap-[2rem]"}>
+        <div className={"flex w-full items-center gap-x-[2rem]"}>
+          <div className={"relative w-[7rem] flex-shrink-0"}>
+            <span className={"w-[3.5rem] text-lg font-semibold"}>해시태그</span>
+          </div>
+          <input
+            placeholder="#해시태그로 키워드를 써보세요!"
+            className="h-[3.25rem] w-full rounded-[3rem] px-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
+            onKeyUp={onChangeInputTagHandler}
+            onKeyDown={(e) => {
+              if (
+                e.key === "#" ||
+                (inputTagRef.current as HTMLInputElement).value.length >= 15
+              ) {
+                e.preventDefault();
+              }
+            }}
+            ref={inputTagRef}
+          />
+        </div>
+        <div>
+          <span className="px-2 text-sm text-gray-400">
+            (엔터를 입력하면 태그로 추가됩니다. 태그 클릭시 제거)
+          </span>
+        </div>
+        <div
+          className={
+            "flex min-h-[5rem] flex-wrap gap-[.25rem] rounded-[1rem] p-[1rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]"
+          }
+        >
+          {tags.map((tag) => (
+            <button
+              key={uuid()}
+              className={
+                "flex h-[3rem] min-w-[5rem] items-center justify-center gap-[.125rem] rounded-lg bg-main px-1 text-white"
+              }
+              onClick={() => deleteTagHandler(tag)}
+            >
+              <span> # </span>
+              <span> {tag} </span>
+            </button>
+          ))}
+        </div>
+      </article>
+    </>
+  );
 };
 
 export default GatheringContent;
diff --git a/src/components/informations/detail/InformationViewer.tsx b/src/components/informations/detail/InformationViewer.tsx
@@ -96,10 +96,9 @@ const InformationViewer = ({ informationId, data }: Props) => {
             <TiLocation className="text-main" size={"1.1rem"} />
             <p className="text-xs font-medium text-gray1">{data.address}</p>
           </div>
-          <p
-            className="break-words py-4 font-medium text-gray1"
-            dangerouslySetInnerHTML={{ __html: data.content }}
-          />
+          <p className="whitespace-pre-wrap break-words py-4 font-medium text-gray1">
+            {data.content}
+          </p>
           <div className="flex flex-row flex-wrap items-center gap-1 pb-8">
             {data.tagResponses.map((tag, index) => (
               <ItemTag

diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
@@ -7,7 +7,6 @@ import PlaceModalContainer from "@/containers/informations/write/PlaceModalConta
 import CategoryModalContainer from "@/containers/informations/write/CategoryModalContainer";
 import Image from "next/image";
 import { MdClose } from "react-icons/md";
-import QuillEditor from "./QuillEditor";
 import { useFormContext } from "react-hook-form";
 import { FaCheck } from "react-icons/fa6";
 import React from "react";
@@ -145,16 +144,18 @@ const InformationEditor = ({
       <p className="text-sm font-medium text-gray1">
         사진 최대 용량은 10MB입니다.
       </p>
-      <QuillEditor
-        content={formContext.getValues("informationContent")}
-        onChange={(value: string, length: number) => {
-          formContext.setValue("informationContent", value);
-          formContext.setValue("contentLength", length);
+      <textarea
+        className="mt-[2.5rem] min-h-[21.875rem] resize-none rounded-2xl border-[0.0625rem] p-4 outline-none hover:border-main focus:border-main"
+        {...formContext.register("informationContent")}
+        placeholder="장소 방문은 어땠나요? 장소 정보 및 나의 경험을 작성해 다른 솔리들에게 도움을 주세요."
+        onChange={(e) => {
+          formContext.setValue("informationContent", e.target.value);
           formContext.trigger("informationContent");
         }}
+        maxLength={500}
       />
       <p className="pt-3 text-end text-sm font-medium text-gray1">
-        {formContext.getValues("contentLength")}/500
+        {formContext.getValues("informationContent").length}/500
       </p>
       <div className="mt-10 flex flex-row items-start gap-7 max-[744px]:flex-col max-[744px]:items-start max-[744px]:gap-2">
         <h2 className="flex w-44 flex-row items-center text-nowrap pt-3 text-lg font-bold text-black">

diff --git a/src/components/informations/write/QuillEditor.tsx b/src/components/informations/write/QuillEditor.tsx
diff --git a/src/containers/diary/write/DiaryEditorContainer.tsx b/src/containers/diary/write/DiaryEditorContainer.tsx
@@ -7,7 +7,7 @@ import { DiaryCreateFormSchema } from "@/lib/zod/schema/DiaryCreateFormSchema";
 import useAuthStore from "@/store/authStore";
 import { CreateDiaryRequestDto } from "@/types/DiaryDto";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import sanitizeHtml from "sanitize-html";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";

diff --git a/src/containers/diary/write/QuillEditorContainer.tsx b/src/containers/diary/write/QuillEditorContainer.tsx
@@ -132,9 +132,12 @@ const QuillEditorContainer = () => {
 
   useEffect(() => {
     setTimeout(() => {
-      document.querySelectorAll("img").forEach((img) => {
-        img.style.borderRadius = "1rem";
-      });
+      document
+        .querySelector(".quillEditor")
+        ?.querySelectorAll("img")
+        .forEach((img) => {
+          img.style.borderRadius = "1rem";
+        });
       onContentChange(quillRef.current!.getEditorContents().toString());
     }, 100);
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/containers/informations/edit/InformationEditorContainer.tsx b/src/containers/informations/edit/InformationEditorContainer.tsx
@@ -55,7 +55,6 @@ const InformationEditorContainer = ({ informationId, data }: Props) => {
     newContentImagesUrl: string[];
     deleteImagesUrl: string[];
     informationContent: string;
-    contentLength: number;
     hashtags: string[];
     tips: string[];
   }>({
@@ -78,7 +77,6 @@ const InformationEditorContainer = ({ informationId, data }: Props) => {
       newContentImagesUrl: Array<string>(0),
       deleteImagesUrl: Array<string>(0),
       informationContent: "",
-      contentLength: 0,
       hashtags: Array<string>(0),
       tips: [""],
     },

diff --git a/src/containers/informations/write/InformationEditorContainer.tsx b/src/containers/informations/write/InformationEditorContainer.tsx
@@ -44,7 +44,6 @@ const InformationEditorContainer = () => {
     thumbnailImageUrl: string;
     contentImagesUrl: string[];
     informationContent: string;
-    contentLength: number;
     hashtags: string[];
     tips: string[];
   }>({
@@ -64,7 +63,6 @@ const InformationEditorContainer = () => {
       thumbnailImageUrl: "",
       contentImagesUrl: [""],
       informationContent: "",
-      contentLength: 0,
       hashtags: [],
       tips: [],
     },

diff --git a/src/styles/quillEditor.css b/src/styles/quillEditor.css
@@ -20,8 +20,10 @@
 
 .ql-editor.ql-blank::before {
   font-style: normal;
+  font-family: "pretendrad";
+  src: url("/fonts/PretendardVariable.ttf") format("truetype");
   left: 1rem;
   color: darkgray;
   font-weight: 550;
-  font-size: 0.875rem;
+  font-size: 1rem;
 }