Merge pull request #100 from TripInfoWeb/dev_diary

Design: 여행일기 반응형
TripInfoWeb · Jul 8, 2024 · 8bc01d0 · 8bc01d0
2 parents b712ab8 + 42ec62b
commit 8bc01d0
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 23 deletions.
diff --git a/public/test.png b/public/test.png
diff --git a/src/app/diary/list/page.tsx b/src/app/diary/list/page.tsx
@@ -1,5 +1,5 @@
 import DiaryList from "@/components/diary/list/DiaryList";
-import DiaryListSkeleton from "@/components/skeleton/diary/DiaryListSkeleton";
+import DiaryListSkeleton from "@/components/skeleton/diary/list/DiaryListSkeleton";
 import { Metadata } from "next";
 import { Suspense } from "react";
 

diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx
@@ -15,12 +15,12 @@ const SignIn = () => {
           lottieFile={introLottie}
           className="h-full w-[275px]"
         />
-        <div className="absolute left-[4.5rem] top-[6.25rem]">
+        <div className="absolute left-[4.5rem] top-[6.25rem] h-[107px] w-[177px]">
           <Image
-            src={"/solitour-intro-image.svg"}
+            src={"/test.png"}
             alt={"kakao-logo-image"}
-            width={177}
-            height={107}
+            fill={true}
+            style={{ objectFit: "cover" }}
           />
         </div>
       </div>

diff --git a/src/components/diary/list/DiaryCard.tsx b/src/components/diary/list/DiaryCard.tsx
@@ -13,7 +13,7 @@ const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => {
   if (isFlipped) {
     return (
       <div
-        className={`${flag ? "animate-cardFlip" : "animate-cardFlip2"} flex h-[38.9375rem] w-[29.375rem] flex-col rounded-2xl border-[0.0625rem] border-gray3 px-9 py-9 hover:border-main hover:bg-[#F2FAF7] dark:bg-slate-800 dark:hover:bg-slate-600`}
+        className={`${flag ? "animate-cardFlip" : "animate-cardFlip2"} flex h-[38.9375rem] w-[29.375rem] flex-col rounded-2xl border-[0.0625rem] border-gray3 px-9 py-9 hover:border-main hover:bg-[#F2FAF7] max-[518px]:w-full dark:bg-slate-800 dark:hover:bg-slate-600`}
         onClick={() => {
           if (flag) {
             flip();
@@ -22,7 +22,7 @@ const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => {
       >
         <div className="flex flex-row items-center gap-14">
           <Image src="/day-text.svg" alt="day-text" width={41} height={25} />
-          <div className="flex flex-row items-center gap-8">
+          <div className="flex flex-row items-center gap-8 truncate">
             {[1, 2, 3, 4, 5, 6, 7].map((value) => (
               <p
                 key={value}
@@ -42,7 +42,7 @@ const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => {
           />
         </div>
         <Link
-          className="mt-12 w-fit truncate text-2xl font-bold hover:text-main dark:text-slate-200"
+          className="mt-12 w-full truncate text-2xl font-bold hover:text-main dark:text-slate-200"
           href="/diary/1"
         >
           {diaryData.title}
@@ -59,22 +59,22 @@ const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => {
 
   return (
     <button
-      className={`${flag ? "animate-cardFlip2" : "animate-cardFlip"} relative h-[38.9375rem] w-[29.375rem] rounded-2xl border-[0.0625rem] border-gray3 hover:border-main`}
+      className={`${flag ? "animate-cardFlip2" : "animate-cardFlip"} relative h-[38.9375rem] w-[29.375rem] rounded-2xl border-[0.0625rem] border-gray3 hover:border-main max-[518px]:w-full`}
       onClick={() => {
         if (!flag) {
           flip();
         }
       }}
     >
       <Image
-        className="-z-10 dark:opacity-65"
+        className="-z-10 rounded-2xl dark:opacity-65"
         src={diaryData.image}
         alt="diary-image"
         fill={true}
         style={{ objectFit: "cover" }}
       />
-      <div className="absolute bottom-9 left-9 flex flex-col items-start gap-1 text-white">
-        <h2 className="text-2xl font-bold dark:text-slate-200">
+      <div className="absolute bottom-9 left-9 flex flex-col items-start gap-1 pr-9 text-white">
+        <h2 className="text-start text-2xl font-bold dark:text-slate-200">
           {diaryData.title}
         </h2>
         <p className="text-lg dark:text-slate-200">{diaryData.period}</p>

diff --git a/src/components/diary/list/DiaryList.tsx b/src/components/diary/list/DiaryList.tsx
@@ -35,7 +35,7 @@ const DiaryList = async () => {
   ];
 
   return (
-    <div className="w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
+    <div className="w-[60rem] max-[1024px]:w-[29.375rem] max-[518px]:w-[calc(100%_-_48px)]">
       <h1 className="py-[2.375rem] text-[1.75rem] font-bold dark:text-slate-200">
         여행 일기
       </h1>

diff --git a/src/components/diary/list/DiaryWriteButton.tsx b/src/components/diary/list/DiaryWriteButton.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 const DiaryWriteButton = () => {
   return (
     <Link
-      className="flex h-[38.9375rem] w-[29.375rem] animate-cardFlip flex-col items-center justify-center rounded-2xl border-[0.0625rem] border-gray3 bg-[#FBFBFB] hover:border-main dark:bg-slate-800 dark:hover:bg-slate-600"
+      className="flex h-[38.9375rem] w-[29.375rem] animate-cardFlip flex-col items-center justify-center rounded-2xl border-[0.0625rem] border-gray3 bg-[#FBFBFB] hover:border-main max-[518px]:w-full dark:bg-slate-800 dark:hover:bg-slate-600"
       href="/diary/write"
     >
       <Image

diff --git a/src/components/diary/write/DiaryEditor.tsx b/src/components/diary/write/DiaryEditor.tsx
@@ -27,28 +27,28 @@ const DiaryEditor = ({ content, onChange }: Props) => {
           placeholder="제목을 입력하세요."
         />
       </div>
-      <div className="mt-12 flex flex-row items-center gap-[6.75rem]">
-        <div className="flex flex-row items-center gap-7">
+      <div className="mt-12 flex flex-row items-center gap-[6.75rem] max-[1024px]:flex-col max-[1024px]:items-start max-[1024px]:gap-12">
+        <div className="flex flex-row items-center gap-7 max-[1024px]:items-start">
           <h2 className="text-lg font-semibold text-black dark:text-slate-200">
             날짜<span className="text-2xl text-main">*</span>
           </h2>
-          <div className="flex h-[3.3125rem] flex-row items-center gap-[1.125rem]">
+          <div className="flex flex-row items-center gap-[1.125rem] max-[585px]:flex-col">
             <input
-              className="h-full flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-sm outline-none hover:border-main"
+              className="h-[3.3125rem] flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-sm outline-none hover:border-main"
               type="text"
               name="placeName"
               placeholder="YYYY.MM.DD"
             />
             <p className="text-lg font-semibold text-black">~</p>
             <input
-              className="h-full flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-sm outline-none hover:border-main"
+              className="h-[3.3125rem] flex-grow rounded-full border-[0.0625rem] border-gray3 bg-transparent pl-5 text-sm outline-none hover:border-main"
               type="text"
               name="placeName"
               placeholder="YYYY.MM.DD"
             />
           </div>
         </div>
-        <div className="flex h-[3.3125rem] flex-grow flex-row items-center gap-7">
+        <div className="flex h-[3.3125rem] flex-grow flex-row items-center gap-7 max-[1024px]:w-full">
           <h2 className="text-lg font-semibold text-black dark:text-slate-200">
             장소<span className="text-2xl text-main">*</span>
           </h2>
@@ -64,7 +64,7 @@ const DiaryEditor = ({ content, onChange }: Props) => {
         <h2 className="text-lg font-semibold text-black dark:text-slate-200">
           하루 기분은 어땠나요?
         </h2>
-        <div className="flex flex-row items-center gap-[2.375rem]">
+        <div className="flex flex-wrap items-center gap-[2.375rem]">
           {["신나요", "좋아요", "그냥 그래요", "슬퍼요", "화나요"].map(
             (value, index) => (
               <button

diff --git a/src/components/diary/write/QuillEditor.tsx b/src/components/diary/write/QuillEditor.tsx
@@ -3,6 +3,7 @@
 import dynamic from "next/dynamic";
 import "react-quill/dist/quill.snow.css";
 import "@/styles/quillEditor.css";
+import QuillEditorSkeleton from "@/components/skeleton/diary/write/QuillEditorSkeleton";
 
 interface Props {
   content: string;
@@ -14,7 +15,7 @@ interface Props {
 // 이를 통해 "document is not found" 에러를 방지할 수 있다.
 const ReactQuill = dynamic(() => import("react-quill"), {
   ssr: false,
-  loading: () => <div>loading...</div>,
+  loading: () => <QuillEditorSkeleton />,
 });
 
 const QuillEditor = ({ content, onChange }: Props) => {

diff --git a/...ents/skeleton/diary/DiaryCardSkeleton.tsx → ...skeleton/diary/list/DiaryCardSkeleton.tsx b/...ents/skeleton/diary/DiaryCardSkeleton.tsx → ...skeleton/diary/list/DiaryCardSkeleton.tsx
diff --git a/...ents/skeleton/diary/DiaryListSkeleton.tsx → ...skeleton/diary/list/DiaryListSkeleton.tsx b/...ents/skeleton/diary/DiaryListSkeleton.tsx → ...skeleton/diary/list/DiaryListSkeleton.tsx
diff --git a/src/components/skeleton/diary/write/QuillEditorSkeleton.tsx b/src/components/skeleton/diary/write/QuillEditorSkeleton.tsx
@@ -0,0 +1,12 @@
+const QuillEditorSkeleton = () => {
+  return (
+    <div className="mt-[1.125rem] flex h-[24.625rem] w-full animate-pulse flex-col rounded-2xl border-[0.0625rem] border-gray3">
+      <div className="flex h-[2.65625rem] items-center rounded-t-2xl border-b-[0.0625rem] border-gray3 bg-gray-100" />
+      <div className="w-full p-4">
+        <div className="h-6 max-w-[28.5rem] bg-gray-100" />
+      </div>
+    </div>
+  );
+};
+
+export default QuillEditorSkeleton;
diff --git a/src/styles/quillEditor.css b/src/styles/quillEditor.css
@@ -13,7 +13,7 @@
 .ql-editor {
   padding-top: 1rem;
   padding-left: 1rem;
-  min-height: 22.625rem;
+  min-height: 21.875rem;
   font-size: 1rem;
   line-height: 1.5;
 }