Skip to content
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

πŸ’„ Style(#345): 메인 νŽ˜μ΄μ§€ λ°°λ„ˆ μ‚­μ œ 및 인기 μŠ€ν…Œλ”” λ ˆμ΄μ•„μ›ƒ λ„ˆλΉ„ μ‘°μ • #346

Merged
merged 2 commits into from
Jan 12, 2024
Merged

πŸ’„ Style(#345): 메인 νŽ˜μ΄μ§€ λ°°λ„ˆ μ‚­μ œ 및 인기 μŠ€ν…Œλ”” λ ˆμ΄μ•„μ›ƒ λ„ˆλΉ„ μ‘°μ • #346

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
78b81f2
πŸ“ Chore(#345): 메인 νŽ˜μ΄μ§€ λ°°λ„ˆ μ‚­μ œ
sscoderati Jan 12, 2024
b104969
πŸ’„ Style(#345): 인기 μŠ€ν…Œλ”” λ ˆμ΄μ•„μ›ƒ λ„ˆλΉ„ μ‘°μ •
sscoderati Jan 12, 2024
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
Binary file removed public/images/dolphin.png
View file
Open in desktop
Binary file not shown.
Binary file removed public/images/turtle.png
View file
Open in desktop
Binary file not shown.
Binary file removed public/images/walrus.png
View file
Open in desktop
Binary file not shown.
111 changes: 3 additions & 108 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,9 @@ import Image from "next/image";
import Link from "next/link";
import Pagination from "@/components/Pagination";
import Posts from "@/components/Posts";
import Dolphin from "@/images/dolphin.png";
import First from "@/images/first.svg";
import Second from "@/images/second.svg";
import Third from "@/images/third.svg";
import Turtle from "@/images/turtle.png";
import Walrus from "@/images/walrus.png";
import { cn } from "@/lib/utils";
import useAuthStore from "@/stores/isAuth";
import useIsSearchBarFocusStore from "@/stores/isSearchBarFocus";
Expand Down Expand Up @@ -51,7 +48,6 @@ const Home = () => {
const [recruit, setRecruit] = useState(true);
const [post, setPost] = useState<Steadies>();
const [type, setType] = useState("all");
const [activeIndex, setActiveIndex] = useState(0);
const [keyword, setKeyword] = useState("");
const [debouncedValue, setDebouncedValue] = useState("");
const [deadline, setDeadline] = useState(false);
Expand Down Expand Up @@ -164,10 +160,6 @@ const Home = () => {
setPost(data);
};

const handleNext = () => {
setActiveIndex((prevIndex) => (prevIndex + 1) % 3);
};

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setKeyword(e.target.value);
};
Expand Down Expand Up @@ -253,14 +245,6 @@ const Home = () => {
}
}, [debouncedValue]);

useEffect(() => {
const interval = setInterval(() => {
handleNext();
}, 4000);

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

useEffect(() => {
if (!isInitialRender) {
setPage(0);
Expand Down Expand Up @@ -299,99 +283,10 @@ const Home = () => {
};
}, []);

const bannerDefaultStyle =
"flex h-250 md:h-300 lg:h-350 w-full justify-center flex-shrink-0 rounded-lg motion-reduce:transition-none float-left";

return (
<main className="relative flex flex-col items-center">
<div className="flex h-250 w-full overflow-hidden md:h-300 lg:h-350">
<div
className={`${
activeIndex === 0
? ""
: activeIndex === 1
? "-translate-x-[100%]"
: "-translate-x-[200%]"
} flex duration-300 ease-in-out`}
>
<div className={`${bannerDefaultStyle} bg-banner-bg`}>
<div className="flex w-3/5 items-center justify-around">
<div className="flex flex-col">
<div className="text-2xl font-bold text-st-white md:text-3xl lg:text-4xl xl:text-5xl">
μŠ€ν…Œλ””λ‘œ
</div>
<div className="mt-10 text-2xl font-bold text-st-white md:text-3xl lg:text-4xl xl:text-5xl">
λ™λ£Œλ₯Ό μ°Ύμ•„λ³΄μ„Έμš”!
</div>
</div>
<div className="h-150 w-150 md:h-150 md:w-150 lg:h-200 lg:w-200 xl:h-250 xl:w-250">
<Image
src={Turtle}
alt="Turtle"
/>
</div>
</div>
</div>
<div className={`${bannerDefaultStyle} bg-banner-bg2`}>
<div className="flex w-3/5 items-center justify-around">
<div className="flex flex-col">
<div className="text-2xl font-bold text-st-white md:text-3xl lg:text-4xl xl:text-5xl">
μŠ€ν…Œλ””λŠ”
</div>
<div className="mt-10 text-2xl font-bold text-st-white md:text-3xl lg:text-4xl xl:text-5xl">
μ‚¬λž‘μž…λ‹ˆλ‹€~!
</div>
</div>
<div className="h-150 w-150 md:h-150 md:w-150 lg:h-200 lg:w-200 xl:h-250 xl:w-250">
<Image
src={Dolphin}
alt="Turtle"
/>
</div>
</div>
</div>
<div className={`${bannerDefaultStyle} bg-banner-bg3`}>
<div className="flex w-3/5 items-center justify-around">
<div className="flex flex-col">
<div className="text-2xl font-bold text-st-white md:text-3xl lg:text-4xl xl:text-5xl">
μŠ€ν…Œλ””μ—
</div>
<div className="mt-10 text-2xl font-bold text-st-white md:text-3xl lg:text-4xl xl:text-5xl">
도전해 λ³΄μ„Έμš”!
</div>
</div>
<div className="h-150 w-150 md:h-150 md:w-150 lg:h-200 lg:w-200 xl:h-250 xl:w-250">
<Image
src={Walrus}
alt="Turtle"
/>
</div>
</div>
</div>
</div>
</div>
<div className="m-10 flex items-center justify-center gap-20">
<div
className={`h-7 w-7 rounded-full md:h-10 md:w-10 ${
activeIndex === 0 ? "bg-st-gray-400" : "bg-st-gray-100"
} cursor-pointer`}
onClick={() => setActiveIndex(0)}
></div>
<div
className={`h-7 w-7 rounded-full md:h-10 md:w-10 ${
activeIndex === 1 ? "bg-st-gray-400" : "bg-st-gray-100"
} cursor-pointer`}
onClick={() => setActiveIndex(1)}
></div>
<div
className={`h-7 w-7 rounded-full md:h-10 md:w-10 ${
activeIndex === 2 ? "bg-st-gray-400" : "bg-st-gray-100"
} cursor-pointer`}
onClick={() => setActiveIndex(2)}
></div>
</div>
<section className="mb-20 mt-50 flex flex-col flex-wrap items-center justify-center overflow-hidden">
<div className="w-3/4 text-xl font-bold md:text-2xl xl:w-full">
<div className="w-1300 text-xl font-bold md:w-500 md:text-2xl lg:w-1000 xl:w-1300">
πŸ”₯ 인기 μŠ€ν…Œλ””
</div>
<div className="mt-20 flex h-160 flex-wrap items-center justify-center overflow-hidden md:h-220">
Expand All @@ -400,7 +295,7 @@ const Home = () => {
key={item.id}
href={`/steady/detail/${item.id}`}
>
<div className="relative m-20 flex h-120 w-210 cursor-pointer flex-col items-center justify-center gap-12 rounded-20 shadow-lg transition hover:scale-105 md:h-170 md:w-300 md:gap-20">
<div className="relative m-18 flex h-120 w-210 cursor-pointer flex-col items-center justify-center gap-12 rounded-20 shadow-lg transition hover:scale-105 md:h-170 md:w-295 md:gap-20">
{index <= 2 ? (
<Image
src={rankImageArray[index].image}
Expand All @@ -410,7 +305,7 @@ const Home = () => {
) : (
""
)}
<div className="flex w-170 items-center justify-end md:w-210 md:w-250">
<div className="flex w-170 items-center justify-end md:w-250">
<div className="flex h-20 w-40 items-center justify-center rounded-20 border border-st-red shadow-md md:h-28 md:w-60">
<div className="h-16 w-36 rounded-20 bg-st-red text-center text-12 font-bold text-st-white md:h-22 md:w-54 md:text-16">
D-{calcDateDifference(item.deadline)}
Expand Down
Loading