From 972ab4ca0fff84417f91b282663f60ef0f2e6cb6 Mon Sep 17 00:00:00 2001 From: oikkoikk Date: Wed, 11 Oct 2023 11:22:59 +0900 Subject: [PATCH 1/6] [SWM-360] Fix : LectureDetailModal navigation --- .../(.)search/[lecture_code]/loading.tsx | 2 +- src/app/@modal/default.tsx | 4 +-- .../lectureDetail/LectureDetailModal.tsx | 16 +++++---- .../lectureDetail/LectureDetailTabNav.tsx | 33 ++++++++++--------- .../LectureRecommendationsList.tsx | 2 +- 5 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/app/@modal/(.)search/[lecture_code]/loading.tsx b/src/app/@modal/(.)search/[lecture_code]/loading.tsx index a40ac71..8a4b2a9 100644 --- a/src/app/@modal/(.)search/[lecture_code]/loading.tsx +++ b/src/app/@modal/(.)search/[lecture_code]/loading.tsx @@ -3,7 +3,7 @@ type Props = {}; export default function Loading({}: Props) { return (
-
+
); } \ No newline at end of file diff --git a/src/app/@modal/default.tsx b/src/app/@modal/default.tsx index b722986..061546d 100644 --- a/src/app/@modal/default.tsx +++ b/src/app/@modal/default.tsx @@ -1,3 +1,3 @@ export default function Default() { - return null; -} \ No newline at end of file + return <>; +} diff --git a/src/components/lectureDetail/LectureDetailModal.tsx b/src/components/lectureDetail/LectureDetailModal.tsx index 40cff6a..d2e58af 100644 --- a/src/components/lectureDetail/LectureDetailModal.tsx +++ b/src/components/lectureDetail/LectureDetailModal.tsx @@ -7,10 +7,7 @@ import LectureDetailIndexList from './index/LectureDetailIndexList'; import LectureDetailReviewList from './review/LectureDetailReviewList'; import LectureDetailCard from './LectureDetailCard'; import LectureDetailIndexSkeleton from './index/LectureDetailIndexSkeleton'; -import { - INDEX_LIMIT, - REVIEW_LIMIT -} from '@/src/constants/skeleton/skeleton'; +import { INDEX_LIMIT, REVIEW_LIMIT } from '@/src/constants/skeleton/skeleton'; import LectureDetailHeading from './LectureDetailHeading'; import LectureDetailReviewSkeleton from './review/LectureDetailReviewSkeleton'; import OneStar from '../ui/rating/OneStar'; @@ -36,9 +33,14 @@ export default function LectureDetailModal({ const [isIndexListFetched, setIsIndexListFetched] = useState(false); const onCloseHandler = useCallback(() => { - return navigationType === 'soft' - ? router.back() - : router.push('/dashboard'); + if (navigationType === 'soft') { + return closeModalHandler('LECTURE_DETAIL', router.back); + } else { + return closeModalHandler('LECTURE_DETAIL', () => { + router.replace('/dashboard'); + router.refresh(); + }); + } }, [navigationType, router]); const isTheOnlyModalInPage = () => { diff --git a/src/components/lectureDetail/LectureDetailTabNav.tsx b/src/components/lectureDetail/LectureDetailTabNav.tsx index 922061c..59d4136 100644 --- a/src/components/lectureDetail/LectureDetailTabNav.tsx +++ b/src/components/lectureDetail/LectureDetailTabNav.tsx @@ -2,6 +2,7 @@ import TabNav from '../ui/TabNav'; import { useEffect, useState } from 'react'; import useIntersectionObserver from '@/src/hooks/useIntersectionObserver'; +import Link from 'next/link'; type Props = { is_playlist: boolean; @@ -15,7 +16,7 @@ export default function LectureDetailTabNav({ is_playlist }: Props) { setActiveId, document.getElementById('modal') ); - + useEffect(() => { const entries = document.querySelectorAll('section'); entries.forEach((entry) => observe(entry)); @@ -25,21 +26,23 @@ export default function LectureDetailTabNav({ is_playlist }: Props) { return ( -
  • - - 목차 - -
  • - + 목차 + +
    • +
  • + 후기 - +
    • ); diff --git a/src/components/recommendations/LectureRecommendationsList.tsx b/src/components/recommendations/LectureRecommendationsList.tsx index 22337e6..4e5e3b4 100644 --- a/src/components/recommendations/LectureRecommendationsList.tsx +++ b/src/components/recommendations/LectureRecommendationsList.tsx @@ -61,7 +61,7 @@ export default function LectureRecommendationsList() { return ( <> {recommendations.length > 0 && ( -
    +
    Date: Wed, 11 Oct 2023 11:41:46 +0900 Subject: [PATCH 2/6] [SWM-360] Fix : Lecture Detail Review infiniteQuery --- .../lectureDetail/review/LectureDetailReviewList.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/lectureDetail/review/LectureDetailReviewList.tsx b/src/components/lectureDetail/review/LectureDetailReviewList.tsx index edc97ad..9849c0c 100644 --- a/src/components/lectureDetail/review/LectureDetailReviewList.tsx +++ b/src/components/lectureDetail/review/LectureDetailReviewList.tsx @@ -27,9 +27,9 @@ export default async function LectureDetailReviewList({ lastPage: LectureReviewList | null, allPages: (LectureReviewList | null)[] ) => { - return lastPage && lastPage.length > 0 - ? allPages.length * lastPage.length - : 0; + if (lastPage === null || lastPage.length === 0) return undefined; + + return allPages.length * lastPage.length; }; const fetchLectureReviewList = async ({ pageParam: offset = 0 }) => { From d9a7f8a3f0ab3341874a5bfae1dec96ed0184061 Mon Sep 17 00:00:00 2001 From: oikkoikk Date: Wed, 11 Oct 2023 15:04:15 +0900 Subject: [PATCH 3/6] [SWM-360] Add : NAVER Analytics --- src/app/layout.tsx | 2 ++ .../tools/NaverAnalytics/NaverAnalytics.tsx | 22 +++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 src/components/tools/NaverAnalytics/NaverAnalytics.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5c83e94..5a13a7d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,6 +9,7 @@ import Footer from '../components/fnb/Footer'; import ChannelTalk from '../components/tools/ChannelTalk/ChannelTalk'; import ChannelTalkManager from '../components/tools/ChannelTalk/ChannelTalkManager'; import GoogleAnalytics from '../components/tools/GoogleAnalytics/GoogleAnalytics'; +import NaverAnalytics from '../components/tools/NaverAnalytics/NaverAnalytics'; const inter = Inter({ subsets: ['latin'] }); @@ -42,6 +43,7 @@ export default function RootLayout({ children, modal }: Props) { return ( + diff --git a/src/components/tools/NaverAnalytics/NaverAnalytics.tsx b/src/components/tools/NaverAnalytics/NaverAnalytics.tsx new file mode 100644 index 0000000..47a4080 --- /dev/null +++ b/src/components/tools/NaverAnalytics/NaverAnalytics.tsx @@ -0,0 +1,22 @@ +import Script from 'next/script'; + +export default function NaverAnalytics({}) { + return ( + <> + + + + ); +} From 9d6be6914d1d3f32a34a02b175e43a9399fd6517 Mon Sep 17 00:00:00 2001 From: oikkoikk Date: Wed, 11 Oct 2023 15:32:56 +0900 Subject: [PATCH 4/6] [SWM-360] Fix : IntersectionObserver in lecture detail modal --- .../lectureDetail/LectureDetailModal.tsx | 104 +++++++++--------- .../lectureDetail/LectureDetailTabNav.tsx | 7 +- src/hooks/useIntersectionObserver.ts | 4 +- 3 files changed, 60 insertions(+), 55 deletions(-) diff --git a/src/components/lectureDetail/LectureDetailModal.tsx b/src/components/lectureDetail/LectureDetailModal.tsx index d2e58af..5a757f2 100644 --- a/src/components/lectureDetail/LectureDetailModal.tsx +++ b/src/components/lectureDetail/LectureDetailModal.tsx @@ -82,63 +82,65 @@ export default function LectureDetailModal({ isIndexListFetched={isIndexListFetched} /> -
    - - {is_playlist ? ( - <> - } - > - - - - ) : ( - indexes && ( +
    +
    + + {is_playlist ? ( <> - - + } + > + + - ) - )} -
    -
    - -
    -

    {`(${lectureDetail.review_count})`}

    - {lectureDetail.review_count > 0 && ( + ) : ( + indexes && ( <> - -

    - {rating} -

    + + - )} -
    -     - +
    + +
    +

    {`(${lectureDetail.review_count})`}

    + {lectureDetail.review_count > 0 && ( + <> + +

    + {rating} +

    + + )} +
    +     + + } + > + - } - > - - -
    +     +
    +
    {is_playlist && isIndexListFetched === true && ( <> diff --git a/src/components/lectureDetail/LectureDetailTabNav.tsx b/src/components/lectureDetail/LectureDetailTabNav.tsx index 59d4136..165bc6e 100644 --- a/src/components/lectureDetail/LectureDetailTabNav.tsx +++ b/src/components/lectureDetail/LectureDetailTabNav.tsx @@ -14,11 +14,14 @@ export default function LectureDetailTabNav({ is_playlist }: Props) { ); const [observe, unobserve] = useIntersectionObserver( setActiveId, - document.getElementById('modal') + document.querySelector('#lecture-detail-container') ); useEffect(() => { - const entries = document.querySelectorAll('section'); + const entries = document.querySelectorAll( + 'dialog section' + ) as NodeListOf; + entries.forEach((entry) => observe(entry)); return () => entries.forEach((entry) => unobserve(entry)); diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index b1675e1..dc7a677 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -1,12 +1,12 @@ import { useCallback, useRef } from 'react'; export default function useIntersectionObserver( - setId: (id: string) => void, + setId: React.Dispatch>, root: HTMLElement | null, rootMargin?: string ) { const option = { - threshold: [0.1, 0.9], + threshold: [0.1, 0.5, 0.9], root, rootMargin }; From bfe8afda8e9ccf6bd17025af557ee036f0d5e0d8 Mon Sep 17 00:00:00 2001 From: oikkoikk Date: Wed, 11 Oct 2023 17:22:51 +0900 Subject: [PATCH 5/6] [SWM-360] Feat : auth/signin, auth/signout page --- src/app/auth/signin/page.tsx | 34 ++++++++++++++++++++----- src/app/auth/signout/page.tsx | 38 +++++++++++++++++++++++----- src/app/not-found.tsx | 8 +++--- src/components/gnb/NavBar.tsx | 5 ++-- src/components/login/LoginButton.tsx | 15 ++++++----- src/hooks/useAuth.ts | 5 ++-- src/middleware.ts | 9 ++++--- 7 files changed, 84 insertions(+), 30 deletions(-) diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx index 676cffe..233834c 100644 --- a/src/app/auth/signin/page.tsx +++ b/src/app/auth/signin/page.tsx @@ -1,9 +1,31 @@ -import React from 'react' +'use client'; +import LoginButton from '@/src/components/login/LoginButton'; +import Button from '@/src/components/ui/button/Button'; +import { useRouter } from 'next/navigation'; -type Props = {} +export default function Signin({}) { + const router = useRouter(); -export default function Signin({}: Props) { return ( -
    Signin
    - ) -} \ No newline at end of file +
    +
    +

    +

    {'스룸의 기능은 로그인을 해야'}

    +

    {'이용하실 수 있어요 :)'}

    +

    +

    + {'구글 로그인으로 간편하게 스룸을 이용해보세요!'} +

    + + +
    +
    + ); +} diff --git a/src/app/auth/signout/page.tsx b/src/app/auth/signout/page.tsx index de8cd10..efe7abd 100644 --- a/src/app/auth/signout/page.tsx +++ b/src/app/auth/signout/page.tsx @@ -1,9 +1,35 @@ -import React from 'react' +'use client'; +import Button from '@/src/components/ui/button/Button'; +import useAuth from '@/src/hooks/useAuth'; +import { useRouter } from 'next/navigation'; -type Props = {} +export default function Signout({}) { + const router = useRouter(); + const { logout } = useAuth(); -export default function Signout({}: Props) { return ( -
    Signout
    - ) -} \ No newline at end of file +
    +
    +

    +

    {'지금 로그아웃 하시면'}

    +

    {'스룸의 기능을 이용하실 수 없어요! :('}

    +

    +

    + {'이용 중이시던 서비스를 계속해서 즐겨보세요'} +

    + + +
    +
    + ); +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 280e3d0..b9ab68b 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -6,12 +6,12 @@ export default function NotFound({}) { const router = useRouter(); return ( -
    -
    -

    +
    +
    +

    {'해당 페이지를 찾을 수 없어요 :('}

    -

    +

    {'404 not found'}