Skip to content

Commit 8ca55fc

Browse files
SUNSUN
SUN
authored and
SUN
committed
design: main 전체 수정
1 parent 00c2ef9 commit 8ca55fc

File tree

24 files changed

+1229
-40
lines changed

24 files changed

+1229
-40
lines changed

‎apps/client/next.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const nextConfig = {
77
{ protocol: "https", hostname: "www.myungmoon.or.kr" },
88
{ protocol: "https", hostname: "firebasestorage.googleapis.com" },
99
{ protocol: "https", hostname: "imagedelivery.net" },
10+
{ protocol: "https", hostname: "images.unsplash.com" },
1011
],
1112
},
1213
reactStrictMode: true,

‎apps/client/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"@ckeditor/ckeditor5-build-classic": "^41.2.1",
1313
"@ckeditor/ckeditor5-react": "^6.2.0",
1414
"@plaiceholder/next": "^3.0.0",
15+
"@radix-ui/react-dialog": "^1.1.15",
16+
"@radix-ui/react-dropdown-menu": "^2.1.7",
1517
"@radix-ui/react-icons": "^1.3.0",
1618
"@radix-ui/react-slot": "^1.2.0",
1719
"@suspensive/react": "^2.18.12",
@@ -24,6 +26,7 @@
2426
"form-data": "^4.0.0",
2527
"framer-motion": "^11.1.7",
2628
"helper": "workspace:*",
29+
"lucide-react": "^0.438.0",
2730
"next": "14.1.2",
2831
"nuqs": "^1.17.4",
2932
"plaiceholder": "^3.0.0",

‎apps/client/public/images/logo.svg‎

Lines changed: 31 additions & 0 deletions
Loading

‎apps/client/public/images/logo_horizon.svg‎

Lines changed: 28 additions & 0 deletions
Loading

‎apps/client/public/images/main_four_people.jpeg‎

8.76 MB
Loading

‎apps/client/public/images/myungmoon_logo.png‎

62 KB
Loading

‎apps/client/src/components/home/index.tsx‎

Lines changed: 148 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,155 @@
1-
import HomeAlbumSection from "./section/album";
2-
import NavSection from "./section/nav";
1+
import Image from "next/image";
32
import VideosSection from "./section/videos";
3+
import Link from "next/link";
4+
import { Button } from "../ui/button";
5+
import { useGetLive } from "@/query/youtube";
6+
import { Suspense } from "@suspensive/react";
7+
import { YoutubeVideo } from "ui";
8+
9+
const getYoutubeId = (url?: string) => {
10+
if (!url) return null;
11+
const trimmed = url.trim();
12+
if (trimmed.length === 11) return trimmed;
13+
14+
const videoRegExp = /^.*(youtu.be\/|v\/|u\/\w\/|shorts\/|live\/|watch\?v=|&v=)([^#&?]*).*/;
15+
const playlistRegExp = /[?&]list=([^#&?]+)/;
16+
17+
const videoMatch = trimmed.match(videoRegExp);
18+
const playlistMatch = trimmed.match(playlistRegExp);
19+
20+
const videoId = videoMatch && videoMatch[2]?.length === 11 ? videoMatch[2] : null;
21+
const playlistId = playlistMatch ? playlistMatch[1] : null;
22+
23+
return videoId || playlistId || null;
24+
};
25+
26+
const TopHeroYoutube = () => {
27+
// const { data } = useGetYoutubeLinkSuspense("main");
28+
// const firstVideoUrl = data?.videos?.[0]?.url;
29+
const firstVideoUrl = "https://youtu.be/9K0FrEAYQro";
30+
const videoId = getYoutubeId(firstVideoUrl);
31+
32+
if (!videoId) return null;
33+
34+
return (
35+
<div className="absolute inset-0 overflow-hidden opacity-70">
36+
<YoutubeVideo
37+
videoId={videoId}
38+
className="h-full w-full origin-center scale-[1.05] transform-gpu sm:scale-[1.2]"
39+
autoplay
40+
mute
41+
loop
42+
/>
43+
</div>
44+
);
45+
};
46+
47+
const HomePage2 = () => {
48+
const { data } = useGetLive();
449

5-
const HomePage = () => {
650
return (
7-
<div className="flex flex-col pb-12 md:pb-20 lg:pb-40">
8-
<NavSection />
9-
<VideosSection />
10-
{/* <div className="h-[8px] w-full bg-[#E6E6E6]" />
11-
<HomeAlbumSection /> */}
51+
<div className="flex min-h-screen flex-col bg-white">
52+
<main className="flex-1">
53+
{/* Video Hero Section - Compact */}
54+
<section className="relative z-0 aspect-[2.2] w-full overflow-hidden sm:aspect-[2.95]">
55+
<div className="absolute inset-0 bg-[#1e2a4a]" />
56+
<Suspense clientOnly fallback={<div className="absolute inset-0" />}>
57+
<TopHeroYoutube />
58+
</Suspense>
59+
</section>
60+
61+
{/* Welcome Section */}
62+
<section className="px-6 pb-24 pt-12 sm:pb-28 sm:pt-16 lg:px-16 lg:pb-36 lg:pt-20">
63+
<div className="mx-auto flex max-w-7xl flex-col gap-4">
64+
<div className="flex flex-col gap-16">
65+
<div className="flex flex-col gap-4">
66+
<h1 className="font-poppins flex flex-col text-3xl font-bold leading-tight text-[#1e2a4a] sm:text-5xl lg:text-6xl">
67+
<span className="text-[#333333]">LOVE BEGINS,</span>
68+
<span className="">MYUNGMOON CHURCH!</span>
69+
</h1>
70+
<p className="text-base font-bold text-[#1e2a4a] sm:text-[22px]">
71+
사랑의 시작, 명문교회에 오신 것을 환영합니다!
72+
</p>
73+
</div>
74+
<div className="flex flex-col gap-4 sm:flex-row">
75+
<Button className="rounded-none bg-[#1e2a4a] px-6 py-4 text-sm tracking-wider text-white hover:bg-[#2d3a5a] sm:px-8 sm:py-6">
76+
<Link href={data?.url || ""} target="_blank">
77+
유튜브 라이브
78+
</Link>
79+
</Button>
80+
<Button className="rounded-none bg-[#1e2a4a] px-6 py-4 text-sm tracking-wider text-white hover:bg-[#2d3a5a] sm:px-8 sm:py-6">
81+
<Link href="/discipleship/homeworship">가정 예배</Link>
82+
</Button>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
88+
{/* Plan Your Visit Section */}
89+
<section className="px-6 pb-24 lg:px-16">
90+
<div className="mx-auto max-w-7xl">
91+
<div className="flex flex-col gap-10 sm:gap-12 md:flex-row md:items-center md:gap-12 lg:gap-24">
92+
<div className="relative aspect-video w-full max-w-3xl">
93+
<Image
94+
src="/images/main_four_people.jpeg"
95+
alt="명문교회 찬양"
96+
fill
97+
className="object-cover"
98+
/>
99+
</div>
100+
<div className="md:max-w-md">
101+
<h2 className="text-nowrap text-3xl font-bold text-[#1e2a4a] sm:text-4xl">
102+
처음오셨나요?
103+
</h2>
104+
<div className="my-6 h-[2px] w-16 bg-[#1e2a4a]" />
105+
<p className="text-lg leading-relaxed text-[#496674]">
106+
여러분의 방문을 진심으로 환영합니다!
107+
<br />
108+
예배 안내와 오시는 방법 등 처음 방문 시
109+
<br />
110+
필요한 모든 정보를 확인해 보세요.
111+
</p>
112+
<div className="mt-8">
113+
<Button
114+
className="rounded-none bg-[#1e2a4a] px-8 py-6 text-sm tracking-wider text-white hover:bg-[#2d3a5a]"
115+
asChild
116+
>
117+
<Link href="/about/leadership">더 알아보기</Link>
118+
</Button>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</section>
124+
125+
<VideosSection />
126+
127+
{/* Next Generation Section */}
128+
<section className="bg-[#1e2a4a] px-6 py-16 text-white sm:py-20 lg:px-16 lg:py-24">
129+
<div className="mx-auto max-w-4xl text-center">
130+
<h2 className="text-3xl font-bold sm:text-4xl">Next Generation</h2>
131+
<div className="mx-auto my-6 h-[2px] w-16 bg-white" />
132+
<p
133+
className="mx-auto max-w-2xl text-lg leading-relaxed text-white/80"
134+
suppressHydrationWarning
135+
>
136+
{"영아부부터 청년부까지, 다음 세대를 위한"}
137+
<br />
138+
{"다양한 프로그램과 예배가 준비되어 있습니다."}
139+
</p>
140+
<div className="mt-10">
141+
<Button
142+
className="rounded-none bg-white px-8 py-6 text-sm tracking-wider text-[#1e2a4a] hover:bg-white/90"
143+
asChild
144+
>
145+
<Link href="/education">더 알아보기</Link>
146+
</Button>
147+
</div>
148+
</div>
149+
</section>
150+
</main>
12151
</div>
13152
);
14153
};
15154

16-
export default HomePage;
155+
export default HomePage2;

‎apps/client/src/components/layout/index.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import Head from "next/head";
22
import { useRouter } from "next/router";
33
import React, { ReactNode, useEffect } from "react";
4-
import { Banner, Footer, Header, cn } from "ui";
4+
import { Banner, cn } from "ui";
55
import { BannerImageComponent } from "./bannerImage";
66
import BannerIconList from "./bannerIconList";
77
import { IBannerIcon } from "@/types/banner/type";
88
import AOS from "aos";
9+
import { Header } from "../ui/header";
10+
import { Footer } from "../ui/footer";
911

1012
import "aos/dist/aos.css";
1113
import useAuth from "@/hooks/useAuth";
@@ -57,15 +59,19 @@ const Layout = ({
5759
useAuth({ mustLogin });
5860
const { asPath, push } = useRouter();
5961

60-
const addKeyToMenus = (menus: IInnerMenu[], key: string) => menus.map((menu) => ({ ...menu, key }));
62+
const addKeyToMenus = (menus: IInnerMenu[], key: string) =>
63+
menus.map((menu) => ({ ...menu, key }));
6164

6265
const allDetailMenus = [
6366
...addKeyToMenus(aboutInnerMenus, "/about"),
6467
...addKeyToMenus(sermonsInnerMenus, "/sermons"),
6568
...addKeyToMenus(educationInnerMenus, "/education"),
6669
...addKeyToMenus(newsInnerMenus, "/news"),
6770
...addKeyToMenus(discipleshipInnerMenus, "/discipleship"),
68-
...addKeyToMenus([{ label: "맛있는 가정예배", path: "/discipleship/homeworship" }], "/homeworship"),
71+
...addKeyToMenus(
72+
[{ label: "맛있는 가정예배", path: "/discipleship/homeworship" }],
73+
"/homeworship",
74+
),
6975
];
7076

7177
useEffect(() => {
@@ -81,17 +87,20 @@ const Layout = ({
8187
<meta name="description" content="복음으로! 오직 성령의 능력으로! 회복을 넘어 부흥으로!" />
8288
<meta property="og:title" content={`${pageTitle} | 명문교회`} />
8389
<meta property="og:url" content="https://myungmoon.or.kr/" />
84-
<meta property="og:description" content="복음으로! 오직 성령의 능력으로! 회복을 넘어 부흥으로!" />
90+
<meta
91+
property="og:description"
92+
content="복음으로! 오직 성령의 능력으로! 회복을 넘어 부흥으로!"
93+
/>
8594
<meta property="og:image" content="https://myungmoon.or.kr/images/LogoBlue.png" />
8695
<meta property="og:type" content="website" />
8796
</Head>
8897
<main className="relative">
89-
<Header push={push} asPath={asPath} />
98+
<Header />
9099
{customBanner ? customBanner : null}
91-
<div className={cn(hasChildrenPadding && "py-10")}>{children}</div>
100+
<div className={cn(hasChildrenPadding && "pt-[100px]")}>{children}</div>
92101
<div className="h-[8px] w-full bg-[#E6E6E6]" />
93-
<MapOfferingSection />
94-
<Footer push={push} />
102+
{/* <MapOfferingSection /> */}
103+
<Footer />
95104
</main>
96105
</>
97106
);

‎apps/client/src/components/news/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const News = () => {
5858
<div className="pb-60 pt-8">
5959
<NewsNavigation />
6060
<hr className="my-10 border-t-2 border-[#BBBBBB] sm:mx-16 md:mx-24" />
61-
<div className="flex flex-col gap-4 px-5 sm:px-16 md:px-24">
61+
{/* <div className="flex flex-col gap-4 px-5 sm:px-16 md:px-24">
6262
<div className="flex items-center gap-2">
6363
<p className="text-2xl font-bold text-[#001F54] md:text-3xl lg:text-4xl">교우 소식</p>
6464
<Icon
@@ -83,7 +83,7 @@ const News = () => {
8383
)}
8484
</div>
8585
</div>
86-
<hr className="my-10 border-t-2 border-[#BBBBBB] sm:mx-16 md:mx-24" />
86+
<hr className="my-10 border-t-2 border-[#BBBBBB] sm:mx-16 md:mx-24" /> */}
8787
<div className="flex flex-col gap-4 px-5 sm:px-16 md:px-24">
8888
<div className="flex items-center gap-2">
8989
<p className="text-2xl font-bold text-[#001F54] md:text-3xl lg:text-4xl">자료함</p>

0 commit comments

Comments
 (0)