From 1d4bbf3f6a21b20d04639d141bca3b17047c3294 Mon Sep 17 00:00:00 2001 From: HyunJinNo Date: Sat, 6 Jul 2024 17:24:52 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94?= =?UTF-8?q?=EC=97=90=20=EC=97=AC=ED=96=89=EC=9D=BC=EA=B8=B0=20=ED=95=AD?= =?UTF-8?q?=EB=AA=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{journal-image1.svg => diary-image1.svg} | 0 src/app/{journals => diary}/list/page.tsx | 4 +-- src/components/common/FloatingButton.tsx | 2 +- src/components/common/Header.tsx | 4 +-- src/components/common/HeaderSidebar.tsx | 30 +++++++++++++++---- src/components/diary/DiaryCard.tsx | 21 +++++++++++++ .../JournalList.tsx => diary/DiaryList.tsx} | 8 ++--- 7 files changed, 55 insertions(+), 14 deletions(-) rename public/{journal-image1.svg => diary-image1.svg} (100%) rename src/app/{journals => diary}/list/page.tsx (75%) create mode 100644 src/components/diary/DiaryCard.tsx rename src/components/{journals/JournalList.tsx => diary/DiaryList.tsx} (80%) diff --git a/public/journal-image1.svg b/public/diary-image1.svg similarity index 100% rename from public/journal-image1.svg rename to public/diary-image1.svg diff --git a/src/app/journals/list/page.tsx b/src/app/diary/list/page.tsx similarity index 75% rename from src/app/journals/list/page.tsx rename to src/app/diary/list/page.tsx index 99afb653..08e257fa 100644 --- a/src/app/journals/list/page.tsx +++ b/src/app/diary/list/page.tsx @@ -1,4 +1,4 @@ -import JournalList from "@/components/journals/JournalList"; +import DiaryList from "@/components/diary/DiaryList"; import { Metadata } from "next"; export const metadata: Metadata = { @@ -9,7 +9,7 @@ export const metadata: Metadata = { export default function page() { return (
- +
); } diff --git a/src/components/common/FloatingButton.tsx b/src/components/common/FloatingButton.tsx index e890861d..9f162be6 100644 --- a/src/components/common/FloatingButton.tsx +++ b/src/components/common/FloatingButton.tsx @@ -17,7 +17,7 @@ const FloatingButton = ({ visible, onClick, onScrollToTop }: MyProps) => {

일기

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index 96732d7c..5e5d6b72 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -105,12 +105,12 @@ const Header = ({ 여행일기 diff --git a/src/components/common/HeaderSidebar.tsx b/src/components/common/HeaderSidebar.tsx index 02913573..a89afa4e 100644 --- a/src/components/common/HeaderSidebar.tsx +++ b/src/components/common/HeaderSidebar.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; import { FaHotel, FaList, FaUserPlus } from "react-icons/fa"; import { FiActivity } from "react-icons/fi"; -import { IoMdInformationCircleOutline } from "react-icons/io"; +import { IoIosJournal, IoMdInformationCircleOutline } from "react-icons/io"; import { IoHome, IoPeople, IoRestaurant } from "react-icons/io5"; import { MdClose } from "react-icons/md"; import { RiLoginBoxLine } from "react-icons/ri"; @@ -46,7 +46,7 @@ const HeaderSidebar = ({ onClose }: MyProps) => {
diff --git a/src/components/diary/DiaryCard.tsx b/src/components/diary/DiaryCard.tsx new file mode 100644 index 00000000..108155a0 --- /dev/null +++ b/src/components/diary/DiaryCard.tsx @@ -0,0 +1,21 @@ +import Image from "next/image"; + +const DiaryCard = () => { + return ( +
+ diary-image +
+

나 홀로 제주여행

+

2024.06.07-2024.06.10

+
+
+ ); +}; + +export default DiaryCard; diff --git a/src/components/journals/JournalList.tsx b/src/components/diary/DiaryList.tsx similarity index 80% rename from src/components/journals/JournalList.tsx rename to src/components/diary/DiaryList.tsx index a88b5e1c..30d7065d 100644 --- a/src/components/journals/JournalList.tsx +++ b/src/components/diary/DiaryList.tsx @@ -1,6 +1,6 @@ -import JournalCard from "./JournalCard"; +import DiaryCard from "./DiaryCard"; -const JournalList = () => { +const DiaryList = () => { return (

여행 일기

@@ -11,11 +11,11 @@ const JournalList = () => {
{[1, 2, 3, 4].map((value) => ( - + ))}
); }; -export default JournalList; +export default DiaryList; From b80de180686badfa402a732431ce188a5a23a569 Mon Sep 17 00:00:00 2001 From: HyunJinNo Date: Sat, 6 Jul 2024 21:48:16 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=EC=97=AC=ED=96=89=EC=9D=BC=EA=B8=B0=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=8D=BC?= =?UTF-8?q?=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/day-text.svg | 3 + public/diary-image2.svg | 9 +++ public/mood-icon1.svg | 36 +++++++++ public/mood-icon2.svg | 36 +++++++++ public/mood-icon3.svg | 36 +++++++++ public/mood-icon4.svg | 40 +++++++++ public/mood-icon5.svg | 38 +++++++++ public/pencil-green-icon.svg | 5 ++ src/app/diary/list/page.tsx | 8 +- src/components/common/TopList.tsx | 2 +- src/components/diary/DiaryCard.tsx | 81 +++++++++++++++++-- src/components/diary/DiaryList.tsx | 47 +++++++++-- src/components/diary/DiaryWriteButton.tsx | 26 ++++++ src/components/home/ListTemplate.tsx | 11 +-- src/components/journals/JournalCard.tsx | 21 ----- .../skeleton/diary/DiaryCardSkeleton.tsx | 12 +++ .../skeleton/diary/DiaryListSkeleton.tsx | 19 +++++ .../common/KakaoMapAddressContainer.tsx | 2 +- src/containers/diary/DiaryCardContainer.tsx | 31 +++++++ src/styles/globals.css | 9 +++ src/types/DiaryDto.ts | 11 +++ tailwind.config.ts | 10 +++ 22 files changed, 446 insertions(+), 47 deletions(-) create mode 100644 public/day-text.svg create mode 100644 public/diary-image2.svg create mode 100644 public/mood-icon1.svg create mode 100644 public/mood-icon2.svg create mode 100644 public/mood-icon3.svg create mode 100644 public/mood-icon4.svg create mode 100644 public/mood-icon5.svg create mode 100644 public/pencil-green-icon.svg create mode 100644 src/components/diary/DiaryWriteButton.tsx delete mode 100644 src/components/journals/JournalCard.tsx create mode 100644 src/components/skeleton/diary/DiaryCardSkeleton.tsx create mode 100644 src/components/skeleton/diary/DiaryListSkeleton.tsx create mode 100644 src/containers/diary/DiaryCardContainer.tsx create mode 100644 src/types/DiaryDto.ts diff --git a/public/day-text.svg b/public/day-text.svg new file mode 100644 index 00000000..e49097e2 --- /dev/null +++ b/public/day-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/diary-image2.svg b/public/diary-image2.svg new file mode 100644 index 00000000..819af903 --- /dev/null +++ b/public/diary-image2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/mood-icon1.svg b/public/mood-icon1.svg new file mode 100644 index 00000000..062685bd --- /dev/null +++ b/public/mood-icon1.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mood-icon2.svg b/public/mood-icon2.svg new file mode 100644 index 00000000..85ca7b8a --- /dev/null +++ b/public/mood-icon2.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mood-icon3.svg b/public/mood-icon3.svg new file mode 100644 index 00000000..aac58173 --- /dev/null +++ b/public/mood-icon3.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mood-icon4.svg b/public/mood-icon4.svg new file mode 100644 index 00000000..fc58f00b --- /dev/null +++ b/public/mood-icon4.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/mood-icon5.svg b/public/mood-icon5.svg new file mode 100644 index 00000000..02413242 --- /dev/null +++ b/public/mood-icon5.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/pencil-green-icon.svg b/public/pencil-green-icon.svg new file mode 100644 index 00000000..3cbf7544 --- /dev/null +++ b/public/pencil-green-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/diary/list/page.tsx b/src/app/diary/list/page.tsx index 08e257fa..ebbf64c7 100644 --- a/src/app/diary/list/page.tsx +++ b/src/app/diary/list/page.tsx @@ -1,5 +1,7 @@ import DiaryList from "@/components/diary/DiaryList"; +import DiaryListSkeleton from "@/components/skeleton/diary/DiaryListSkeleton"; import { Metadata } from "next"; +import { Suspense } from "react"; export const metadata: Metadata = { title: "여행일기", @@ -8,8 +10,10 @@ export const metadata: Metadata = { export default function page() { return ( -
- +
+ }> + +
); } diff --git a/src/components/common/TopList.tsx b/src/components/common/TopList.tsx index 4403d30c..9ea84ffd 100644 --- a/src/components/common/TopList.tsx +++ b/src/components/common/TopList.tsx @@ -40,7 +40,7 @@ const TopList = async ({ title }: MyProps) => { >

{index + 1}.

{title} diff --git a/src/components/diary/DiaryCard.tsx b/src/components/diary/DiaryCard.tsx index 108155a0..5ca7e1ea 100644 --- a/src/components/diary/DiaryCard.tsx +++ b/src/components/diary/DiaryCard.tsx @@ -1,20 +1,85 @@ +import { DiaryResponseDto } from "@/types/DiaryDto"; import Image from "next/image"; +import Link from "next/link"; + +interface Props { + diaryData: DiaryResponseDto; + flag: boolean; + isFlipped: boolean; + flip: () => void; +} + +const DiaryCard = ({ diaryData, flag, isFlipped, flip }: Props) => { + if (isFlipped) { + return ( +
{ + if (flag) { + flip(); + } + }} + > +
+ day-text +
+ {[1, 2, 3, 4, 5, 6, 7].map((value) => ( +

+ {value} +

+ ))} +
+
+
+ mood-icon +
+ + {diaryData.title} + +

+ {diaryData.period.split("-")[0]} +

+

+ {diaryData.description} +

+
+ ); + } -const DiaryCard = () => { return ( -
+ ); }; diff --git a/src/components/diary/DiaryList.tsx b/src/components/diary/DiaryList.tsx index 30d7065d..4c25cd95 100644 --- a/src/components/diary/DiaryList.tsx +++ b/src/components/diary/DiaryList.tsx @@ -1,17 +1,52 @@ -import DiaryCard from "./DiaryCard"; +import DiaryCardContainer from "@/containers/diary/DiaryCardContainer"; +import DiaryWriteButton from "./DiaryWriteButton"; +import { DiaryResponseDto } from "@/types/DiaryDto"; + +const DiaryList = async () => { + await new Promise((resolve) => setTimeout(resolve, 2000)); + + // TODO + const data: DiaryResponseDto[] = [ + { + title: "나 홀로 제주여행", + period: "2024.06.07-2024.06.10", + image: "/diary-image1.svg", + moodLevel: 1, + description: + "7월 나 홀로 3박 4일 제주도 여행을 다녀왔다. 제주도는 언제 가도 너무 좋아 자주 와봤는데 혼자 여행은 처음이라 많은 것을 느낀 여행이었다. 해안도로에서 자전거를 탔을 때가 가장 기억이 많이 난다. 날씨도 너무 좋고 바다도 예뻐 혼자 2시간을 목적지 없이 자전거를 탔다. 그리고 솔리투어에서 추천해 준 장소에 방문한 기억도 잊지 못할 것 같다. 맑고 푸른 강과 산, 그리고 하늘 높이 떠 있는 구름들을 보며 문득 예전 기억들이 떠올랐다.", + }, + { + title: "나 홀로 제주여행", + period: "2024.06.07-2024.06.10", + image: "/diary-image1.svg", + moodLevel: 1, + description: + "7월 나 홀로 3박 4일 제주도 여행을 다녀왔다. 제주도는 언제 가도 너무 좋아 자주 와봤는데 혼자 여행은 처음이라 많은 것을 느낀 여행이었다. 해안도로에서 자전거를 탔을 때가 가장 기억이 많이 난다. 날씨도 너무 좋고 바다도 예뻐 혼자 2시간을 목적지 없이 자전거를 탔다. 그리고 솔리투어에서 추천해 준 장소에 방문한 기억도 잊지 못할 것 같다. 맑고 푸른 강과 산, 그리고 하늘 높이 떠 있는 구름들을 보며 문득 예전 기억들이 떠올랐다.", + }, + { + title: "밤하늘 별로 가득했던 강릉 안반데기", + period: "2024.07.19-2024.07.21", + image: "/diary-image2.svg", + moodLevel: 2, + description: + "7월 나 홀로 3박 4일 제주도 여행을 다녀왔다. 제주도는 언제 가도 너무 좋아 자주 와봤는데 혼자 여행은 처음이라 많은 것을 느낀 여행이었다. 해안도로에서 자전거를 탔을 때가 가장 기억이 많이 난다. 날씨도 너무 좋고 바다도 예뻐 혼자 2시간을 목적지 없이 자전거를 탔다. 그리고 솔리투어에서 추천해 준 장소에 방문한 기억도 잊지 못할 것 같다. 맑고 푸른 강과 산, 그리고 하늘 높이 떠 있는 구름들을 보며 문득 예전 기억들이 떠올랐다.", + }, + ]; -const DiaryList = () => { return (
-

여행 일기

+

+ 여행 일기 +

-
- {[1, 2, 3, 4].map((value) => ( - + + {data.map((value, index) => ( + ))}
diff --git a/src/components/diary/DiaryWriteButton.tsx b/src/components/diary/DiaryWriteButton.tsx new file mode 100644 index 00000000..cc93c53b --- /dev/null +++ b/src/components/diary/DiaryWriteButton.tsx @@ -0,0 +1,26 @@ +import Link from "next/link"; +import Image from "next/image"; + +const DiaryWriteButton = () => { + return ( + + pencil-green-icon +

+ 일기 쓰기 +

+

+ 이번 여행을 기록해보세요. +

+ + ); +}; + +export default DiaryWriteButton; diff --git a/src/components/home/ListTemplate.tsx b/src/components/home/ListTemplate.tsx index 466e14ed..efd7276b 100644 --- a/src/components/home/ListTemplate.tsx +++ b/src/components/home/ListTemplate.tsx @@ -1,19 +1,14 @@ import { useDragScrollType } from "@/hooks/useDragScroll"; import Link from "next/link"; -type MyProps = { +interface Props { titles: string[]; description: string; scrollHook: useDragScrollType; children: React.ReactNode; -}; +} -const ListTemplate = ({ - titles, - description, - scrollHook, - children, -}: MyProps) => { +const ListTemplate = ({ titles, description, scrollHook, children }: Props) => { return (
diff --git a/src/components/journals/JournalCard.tsx b/src/components/journals/JournalCard.tsx deleted file mode 100644 index 1ed692e3..00000000 --- a/src/components/journals/JournalCard.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Image from "next/image"; - -const JournalCard = () => { - return ( -
- journal-image -
-

나 홀로 제주여행

-

2024.06.07-2024.06.10

-
-
- ); -}; - -export default JournalCard; diff --git a/src/components/skeleton/diary/DiaryCardSkeleton.tsx b/src/components/skeleton/diary/DiaryCardSkeleton.tsx new file mode 100644 index 00000000..c6793655 --- /dev/null +++ b/src/components/skeleton/diary/DiaryCardSkeleton.tsx @@ -0,0 +1,12 @@ +const DiaryCardSkeleton = () => { + return ( +
+
+
+
+
+
+ ); +}; + +export default DiaryCardSkeleton; diff --git a/src/components/skeleton/diary/DiaryListSkeleton.tsx b/src/components/skeleton/diary/DiaryListSkeleton.tsx new file mode 100644 index 00000000..e1c39da0 --- /dev/null +++ b/src/components/skeleton/diary/DiaryListSkeleton.tsx @@ -0,0 +1,19 @@ +import DiaryCardSkeleton from "./DiaryCardSkeleton"; + +const DiaryListSkeleton = () => { + return ( +
+

여행 일기

+
+
+
+
+ {[1, 2, 3, 4].map((value) => ( + + ))} +
+
+ ); +}; + +export default DiaryListSkeleton; diff --git a/src/containers/common/KakaoMapAddressContainer.tsx b/src/containers/common/KakaoMapAddressContainer.tsx index 57c58165..4c5406fd 100644 --- a/src/containers/common/KakaoMapAddressContainer.tsx +++ b/src/containers/common/KakaoMapAddressContainer.tsx @@ -62,7 +62,7 @@ const KakaoMapAddressContainer = () => { detailAddr += `
경도: ${coords.getLng()}
`; const content = - '
' + + '
' + '법정동 주소정보' + detailAddr + "
"; diff --git a/src/containers/diary/DiaryCardContainer.tsx b/src/containers/diary/DiaryCardContainer.tsx new file mode 100644 index 00000000..a68924d4 --- /dev/null +++ b/src/containers/diary/DiaryCardContainer.tsx @@ -0,0 +1,31 @@ +"use client"; + +import DiaryCard from "@/components/diary/DiaryCard"; +import { DiaryResponseDto } from "@/types/DiaryDto"; +import { useState } from "react"; + +interface Props { + diaryData: DiaryResponseDto; +} + +const DiaryCardContainer = ({ diaryData }: Props) => { + const [flag, setFlag] = useState(false); + const [isFlipped, setIsFlipped] = useState(false); + + const flip = async () => { + setFlag(!flag); + await new Promise((resolve) => setTimeout(resolve, 450)); + setIsFlipped(!isFlipped); + }; + + return ( + + ); +}; + +export default DiaryCardContainer; diff --git a/src/styles/globals.css b/src/styles/globals.css index fb272119..72265b08 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -62,3 +62,12 @@ body { ::-webkit-scrollbar-thumb:vertical:hover { background: linear-gradient(to bottom, #dad0e9, #bae5ee); } + +.truncate-vertical { + text-overflow: ellipsis; + overflow: hidden; + word-break: break-word; + display: -webkit-box; + -webkit-line-clamp: 7; + -webkit-box-orient: vertical; +} diff --git a/src/types/DiaryDto.ts b/src/types/DiaryDto.ts new file mode 100644 index 00000000..cb4648b7 --- /dev/null +++ b/src/types/DiaryDto.ts @@ -0,0 +1,11 @@ +// Request 요청 Dto +export interface DiaryRequestDto {} + +// Request 요청 결과 Dto +export interface DiaryResponseDto { + title: string; + period: string; + image: string; + moodLevel: number; + description: string; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 634f563f..0f255007 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -40,6 +40,14 @@ const config: Config = { "50%": { bottom: "0px", opacity: "1" }, "100%": { bottom: "20px", opacity: "0" }, }, + cardFlip: { + from: { transform: "rotateY(-90deg)" }, + to: { transform: "rotateY(0deg)" }, + }, + cardFlip2: { + from: { transform: "rotateY(0deg)" }, + to: { transform: "rotateY(90deg)" }, + }, }, animation: { sidebarFadeIn: "sidebarFadeIn 0.3s", @@ -48,6 +56,8 @@ const config: Config = { bannerImage1: "bannerImage 2s linear infinite", bannerImage2: "bannerImage 2.5s linear infinite", bannerImage3: "bannerImage 3s linear infinite", + cardFlip: "cardFlip 0.5s linear", + cardFlip2: "cardFlip2 0.5s linear", }, }, },