Skip to content

Chore: 메인홈페이지 바로가기 아이콘 슬라이드 및 디자인 리팩토링 #243

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wannabeing merged 2 commits into from
Dec 28, 2025
Merged

Chore: 메인홈페이지 바로가기 아이콘 슬라이드 및 디자인 리팩토링 #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0e009a
chore: 가정예배 댓글 가리고 있어서 패딩 추가
wannabeing Dec 28, 2025
844644b
chore: 메인 바로가기 디자인 리팩토링
wannabeing Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 27 additions & 5 deletions apps/client/src/components/home/banner/card/lg.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,34 @@ interface IHomeBannerLgCardProps {
}

const HomeBannerLgCard = ({ description, handleClick, image }: IHomeBannerLgCardProps) => {
return (
<button className="flex w-full cursor-pointer" onClick={handleClick}>
<div className="relative h-[92px] w-[92px]">
<Image src={`/images/home/${image}.jpeg`} alt="image" fill={true} objectFit="cover" />
const renderIcon = () => {
if (image === "onair") {
return (
<div className="flex h-[92px] w-[92px] items-center justify-center bg-red-500">
<div className="relative">
<svg className="h-14 w-14 text-white drop-shadow-lg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
</svg>
<span className="absolute -right-0.5 -top-0.5 flex h-4 w-4">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
<span className="relative inline-flex h-4 w-4 rounded-full bg-white shadow-lg"></span>
</span>
</div>
</div>
);
}

return (
<div className="relative h-[92px] w-[92px] overflow-hidden">
<Image src={`/images/home/${image}.jpeg`} alt="image" fill={true} className="object-cover" />
</div>
<div className="flex h-[92px] w-[231px] items-center justify-center whitespace-pre bg-white text-[18px] font-bold leading-[21px] text-[#222222]">
);
};

return (
<button className="group flex w-full cursor-pointer overflow-hidden rounded-lg shadow-md transition-all hover:shadow-xl" onClick={handleClick}>
{renderIcon()}
<div className="flex h-[92px] w-[231px] items-center justify-center whitespace-pre bg-white text-[18px] font-bold leading-[21px] text-[#222222] transition-all group-hover:bg-gray-50">
{description}
</div>
</button>
Expand Down
44 changes: 39 additions & 5 deletions apps/client/src/components/home/banner/card/sm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,46 @@ interface IHomeBannerSmCardProps {
}

const HomeBannerSmCard = ({ description, handleClick, image }: IHomeBannerSmCardProps) => {
return (
<div className="flex w-full cursor-pointer" onClick={handleClick}>
<div className="relative h-[70px] min-w-[70px]">
<Image src={`/images/home/${image}.jpeg`} alt="image" fill={true} objectFit="cover" />
const renderIcon = () => {
if (image === "onair") {
return (
<div className="flex h-[70px] w-[70px] shrink-0 items-center justify-center bg-red-500">
<div className="relative">
<svg
className="h-11 w-11 text-white drop-shadow-lg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
</svg>
<span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
<span className="relative inline-flex h-3.5 w-3.5 rounded-full bg-white shadow-lg"></span>
</span>
</div>
</div>
);
}

return (
<div className="relative h-[70px] w-[70px] shrink-0 overflow-hidden">
<Image
src={`/images/home/${image}.jpeg`}
alt="image"
fill={true}
className="object-cover"
/>
</div>
<div className="flex h-[70px] w-full items-center bg-white pl-[41px] text-[17px] font-bold text-[#222222] sm:pl-[38px] sm:text-[18px] md:pl-[33px]">
);
};

return (
<div
className="flex w-full cursor-pointer overflow-hidden rounded-lg shadow-md"
onClick={handleClick}
>
{renderIcon()}
<div className="flex h-[70px] w-full items-center break-keep bg-white pl-[41px] text-[17px] font-semibold text-[#222222] sm:pl-[38px] sm:text-[18px] md:pl-[33px]">
{description}
</div>
</div>
Expand Down
14 changes: 13 additions & 1 deletion apps/client/src/components/home/banner/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import CaretLeftIcon from "./caretLeft";
import CaretRightIcon from "./caretRight";
import { useGetLive } from "@/query/youtube";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useState, useEffect } from "react";
import HomeBannerLgCard from "./card/lg";
import HomeBannerSmCard from "./card/sm";

Expand All @@ -21,6 +21,18 @@ const HomeBanner = () => {

const { data } = useGetLive();

useEffect(() => {
const interval = setInterval(() => {
setCurrentBanner((prev) => {
if (prev === HomeBannerEnum.Live) return HomeBannerEnum.Bible;
if (prev === HomeBannerEnum.Bible) return HomeBannerEnum.HomeWorship;
return HomeBannerEnum.Live;
});
}, 4000);

return () => clearInterval(interval);
}, []);

const handleOpenLive = () => {
open(data?.url);
};
Expand Down
24 changes: 19 additions & 5 deletions apps/client/src/components/homeWorship/detail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,23 @@ const HomeWorshipDetail = () => {
<div className="flex min-h-screen flex-col bg-white">
{/* 헤더 */}
<div className="flex items-center justify-between border-b border-gray-200 px-4 py-4">
<button onClick={() => push("/discipleship/homeworship")} className="flex items-center gap-2 text-gray-700">
<button
onClick={() => push("/discipleship/homeworship")}
className="flex items-center gap-2 text-gray-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
<span className="text-base">뒤로</span>
</button>
Expand Down Expand Up @@ -84,7 +92,9 @@ const HomeWorshipDetail = () => {
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
<span>{data?.date && format(new Date(data.date), "yyyy년 M월 d일", { locale: ko })}</span>
<span>
{data?.date && format(new Date(data.date), "yyyy년 M월 d일", { locale: ko })}
</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-900">
<svg
Expand Down Expand Up @@ -153,7 +163,11 @@ const HomeWorshipDetail = () => {
<div className="flex flex-col gap-2">
{data.imageUrls.map((imageUrl) => (
<div key={imageUrl} className="overflow-hidden rounded-lg border border-gray-300">
<img src={imageUrl} alt="예배 이미지" className="h-auto w-full max-w-full object-contain" />
<img
src={imageUrl}
alt="예배 이미지"
className="h-auto w-full max-w-full object-contain"
/>
</div>
))}
</div>
Expand All @@ -165,7 +179,7 @@ const HomeWorshipDetail = () => {
</div>

{/* 댓글 */}
<div className="mt-6">
<div className="mt-6 p-40">
<HomeWorshipDetailComments />
</div>
</div>
Expand Down