Merge pull request #104 from TripInfoWeb/dev_diary

Design: 일기 상세 페이지 퍼블리싱

src/components/diary/detail/DiaryViewer.tsx

@@ -15,7 +15,20 @@ const DiaryViewer = async ({ id }: Props) => {
   return (
     <div className="flex w-[60rem] flex-col items-start max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
       <div className="flex flex-row items-center gap-14">
-        <Image src="/day-text.svg" alt="day-text" width={41} height={25} />
+        <Image
+          className="hidden dark:block"
+          src="/day-text-dark-mode.svg"
+          alt="day-text"
+          width={41}
+          height={25}
+        />
+        <Image
+          className="dark:hidden"
+          src="/day-text.svg"
+          alt="day-text"
+          width={41}
+          height={25}
+        />
         {[1, 2, 3, 4, 5, 6, 7].map((value) => (
           <Link
             key={value}
@@ -34,17 +47,63 @@ const DiaryViewer = async ({ id }: Props) => {
           style={{ objectFit: "contain" }}
         />
       </div>
-      <h1 className="mt-12 text-[1.75rem] font-bold">나 홀로 제주여행</h1>
-      <div className="mt-6 flex w-full flex-row items-center justify-between text-lg">
+      <h1 className="mt-12 text-[1.75rem] font-bold dark:text-slate-200">
+        나 홀로 제주여행
+      </h1>
+      <div className="mt-6 flex w-full flex-row items-center justify-between text-lg text-gray1 dark:text-slate-400">
         <p>2024.06.07</p>
         <div className="flex flex-row items-center gap-1">
           <TiLocation className="text-main" size={"1.3rem"} />
-          <p className="font-medium text-gray1 dark:text-slate-400">
-            제주특별자치도, 제주도
-          </p>
+          <p>제주특별자치도, 제주도</p>
         </div>
       </div>
-      <div className="mt-6 flex w-full flex-row items-center justify-end gap-3 text-sm">
+      <div className="mt-16 flex w-full flex-col dark:text-slate-400">
+        <p>7월 나 홀로 3박 4일 제주도 여행을 다녀왔다.</p>
+        <p>
+          제주도는 언제가도 너무 좋아 자주 와봤는데 혼자 여행은 처음이라 많은
+          것을 느낀 여행이였다.
+        </p>
+        <div className="relative my-[2.375rem] aspect-[9/4] w-full">
+          <Image
+            className="rounded-2xl dark:opacity-65"
+            src="/example/diary/detail/diary-image1.svg"
+            alt="diary-image"
+            fill={true}
+            style={{ objectFit: "contain" }}
+          />
+        </div>
+        <p>
+          해안도로 에서 자전거를 탔을 때가 가장 기억이 많이 난다. 날씨도 너무
+          좋고 바다도 예뻐 혼자 2시간을 목적지 없이 자전거를 탔다. 새삼 체력이
+          좋아진 듯하다!
+        </p>
+        <div className="my-[2.375rem] flex flex-row items-center gap-5 max-[1024px]:flex-col">
+          <div className="relative h-[26.1875rem] w-[29.375rem] rounded-2xl max-[518px]:w-full">
+            <Image
+              className="rounded-2xl dark:opacity-65"
+              src="/example/diary/detail/diary-image2.svg"
+              alt="diary-image"
+              fill={true}
+              style={{ objectFit: "contain" }}
+            />
+          </div>
+          <div className="relative h-[26.1875rem] w-[29.375rem] rounded-2xl max-[518px]:w-full">
+            <Image
+              className="rounded-2xl dark:opacity-65"
+              src="/example/diary/detail/diary-image3.svg"
+              alt="diary-image"
+              fill={true}
+              style={{ objectFit: "contain" }}
+            />
+          </div>
+        </div>
+        <p>
+          그리고 솔리투어에서 추천해준 오셜록 티뮤지엄에 갔는데 생각보다 볼 것도
+          많고 가보길 잘한...
+        </p>
+      </div>
+
+      <div className="mb-32 mt-6 flex w-full flex-row items-center justify-end gap-3 text-sm">
         <button className="flex flex-row items-center gap-1 hover:text-main dark:text-slate-400">
           <GoPencil />
           수정

src/components/diary/list/DiaryCard.tsx

@@ -21,7 +21,20 @@ 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} />
+          <Image
+            className="hidden dark:block"
+            src="/day-text-dark-mode.svg"
+            alt="day-text"
+            width={41}
+            height={25}
+          />
+          <Image
+            className="dark:hidden"
+            src="/day-text.svg"
+            alt="day-text"
+            width={41}
+            height={25}
+          />
           <div className="flex flex-row items-center gap-8 truncate">
             {[1, 2, 3, 4, 5, 6, 7].map((value) => (
               <p

src/components/diary/write/DiaryEditor.tsx

@@ -69,7 +69,7 @@ const DiaryEditor = ({ content, onChange }: Props) => {
             (value, index) => (
               <button
                 key={index + 1}
-                className="flex h-[4.625rem] flex-col items-center justify-between text-[0.9375rem] text-gray1 hover:text-main"
+                className="flex h-[4.625rem] flex-col items-center justify-between text-[0.9375rem] text-gray1 hover:text-main dark:text-slate-400"
               >
                 <div className="relative h-10 w-8">
                   <Image

src/components/diary/write/QuillEditor.tsx

@@ -47,7 +47,7 @@ const QuillEditor = ({ content, onChange }: Props) => {
         imageResize: {
           modules: ["Resize", "DisplaySize", "Toolbar"],
           handleStyles: {
-            backgroundColor: "black",
+            backgroundColor: "#00B488",
             border: "none",
             // other camelCase styles for size display
           },

src/components/skeleton/diary/list/DiaryListSkeleton.tsx

@@ -5,7 +5,7 @@ const DiaryListSkeleton = () => {
     <div className="w-[60rem] max-[1024px]:w-[39.75rem] max-[744px]:w-[calc(100%_-_48px)]">
       <h1 className="py-[2.375rem] text-[1.75rem] font-bold">여행 일기</h1>
       <div className="flex flex-row justify-end pb-4">
-        <div className="h-[2.625rem] w-[7.6875rem] rounded-full bg-gray-200 text-white hover:scale-105 dark:text-slate-600" />
+        <div className="h-[2.625rem] w-[7.6875rem] rounded-full bg-gray-200 text-white hover:scale-105 dark:bg-slate-600" />
       </div>
       <div className="flex flex-wrap justify-center gap-5">
         {[1, 2, 3, 4].map((value) => (

src/components/skeleton/diary/write/QuillEditorSkeleton.tsx

@@ -1,9 +1,9 @@
 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="flex h-[2.65625rem] items-center rounded-t-2xl border-b-[0.0625rem] border-gray3 bg-gray-100 dark:bg-slate-600" />
       <div className="w-full p-4">
-        <div className="h-6 max-w-[28.5rem] bg-gray-100" />
+        <div className="h-6 max-w-[28.5rem] bg-gray-100 dark:bg-slate-600" />
       </div>
     </div>
   );

src/styles/quillEditor.css

@@ -21,3 +21,10 @@
 .ql-editor.ql-blank::before {
   left: 1rem;
 }
+
+@media (prefers-color-scheme: dark) {
+  .ql-editor.ql-blank::before {
+    --tw-text-opacity: 1;
+    color: rgb(148 163 184 / var(--tw-text-opacity)) /* #94a3b8 */;
+  }
+}