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.

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

[feat] 스크롤 관련 구현 #68

Merged
merged 5 commits into from
Aug 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import CommentSection from "./comment";
import QnA from "./qna";
import Footer from "./footer";
import Modal from "./modal/modal.jsx";
import InteractionPage from "./interactions";

function App() {
useEffect(() => {
Expand All @@ -19,6 +20,7 @@ function App() {
<IntroSection />
<Header />
<SimpleInformation />
<InteractionPage />
<DetailInformation />
<CommentSection />
<QnA />
Expand Down
11 changes: 10 additions & 1 deletion src/comment/index.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
import CommentCarousel from "./commentCarousel";
import decoration from "./assets/decoration.svg";
import { useRef } from "react";
import useSectionInitialize from "../scroll/useSectionInitialize";

function CommentSection() {
const SECTION_IDX = 2;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0~3까지, 즉 useSectionInitialize가 사용하는 매직넘버를 별도의 상수로 분리해서 관리한다면, 모달 등 다른 페이지에서 명시적으로 쓰기 편할 겁니다.

const sectionRef = useRef(null);
useSectionInitialize(SECTION_IDX, sectionRef);

return (
<section className="w-full flex flex-col items-center py-24 lg:py-60 gap-40">
<section
ref={sectionRef}
className="w-full flex flex-col items-center py-24 lg:py-60 gap-40"
>
<div className="w-full flex flex-col items-center">
<div className="relative flex flex-col gap-3 lg:gap-9 text-center font-bold items-center">
<p className="text-body-m text-neutral-600 w-fit py-3 lg:py-5">
Expand Down
11 changes: 10 additions & 1 deletion src/detailInformation/index.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
import DetailSwiper from "./DetailSwiper.jsx";
import content from "./content.json";
import decoration from "./assets/decoration.svg";
import { useRef } from "react";
import useSectionInitialize from "../scroll/useSectionInitialize.js";

function DetailInformation() {
const SECTION_IDX = 1;
const sectionRef = useRef(null);
useSectionInitialize(SECTION_IDX, sectionRef);

return (
<section className="w-full flex flex-col items-center py-24 lg:py-60 gap-16 lg:gap-40">
<section
ref={sectionRef}
className="w-full flex flex-col items-center py-24 lg:py-60 gap-16 lg:gap-40"
>
<div className="relative flex flex-col gap-3 lg:gap-9 text-center font-bold items-center">
<p className="text-body-m text-neutral-600 w-fit py-3 lg:py-5">
차량 상세 정보
Expand Down
21 changes: 9 additions & 12 deletions src/header/index.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { useState } from "react";
import style from "./index.module.css";
import scrollTo from "../scroll/scrollTo";
import { useSectionStore } from "../scroll/store";

export default function Header() {
const ITEM_WIDTH = 96; // w-24
const ITEM_GAP = 32; // gap-8
const [scrollState, setScrollState] = useState(-1);
const currentSection = useSectionStore((state) => state.currentSection);
const scrollSectionList = [
"추첨 이벤트",
"차량 상세정보",
Expand All @@ -17,12 +18,8 @@ export default function Header() {
}

function onClickScrollSection(index) {
/*
* 클릭시 하단의 다양한 영역으로 스크롤되는 코드 미작성
*/

if (index !== scrollState) {
setScrollState(index);
if (index !== currentSection) {
scrollTo(index);
}
}

Expand All @@ -33,10 +30,10 @@ export default function Header() {
}

function scrollDynamicStyle() {
if (scrollState < 0) return;
if (currentSection < 0) return;

const position = Math.floor(
ITEM_WIDTH / 4 + scrollState * (ITEM_WIDTH + ITEM_GAP),
ITEM_WIDTH / 4 + currentSection * (ITEM_WIDTH + ITEM_GAP),
);
return {
"--pos": position,
Expand All @@ -57,15 +54,15 @@ export default function Header() {
<div
key={index}
onClick={() => onClickScrollSection(index)}
className={`flex justify-center items-center w-24 cursor-pointer ${scrollState === index ? "text-black" : "text-neutral-300"}`}
className={`flex justify-center items-center w-24 cursor-pointer ${currentSection === index ? "text-black" : "text-neutral-300"}`}
>
{scrollSection}
</div>
))}

<div
style={scrollDynamicStyle()}
className={`w-[50px] h-[3px] bg-black transition ease-in-out duration-200 absolute bottom-0 left-0 ${scrollState < 0 ? "hidden" : style.moveBar}`}
className={`w-[50px] h-[3px] bg-black transition ease-in-out duration-200 absolute bottom-0 left-0 ${currentSection < 0 ? "hidden" : style.moveBar}`}
/>
</div>

Expand Down
10 changes: 10 additions & 0 deletions src/interactions/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { useRef } from "react";
import useSectionInitialize from "../scroll/useSectionInitialize";

export default function InteractionPage() {
const SECTION_IDX = 0;
const sectionRef = useRef(null);
useSectionInitialize(SECTION_IDX, sectionRef);

return <div ref={sectionRef} className="bg-black h-[2017px]"></div>;
}
4 changes: 2 additions & 2 deletions src/introSection/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ function IntroSection() {

return (
<>
<div ref={introRef} className="flex flex-col items-center">
<section ref={introRef} className="flex flex-col items-center">
<div className="z-50 fixed w-full flex justify-center top-[500px] -translate-y-1/2 pointer-events-none">
<h1
className={`${style.openTitle} ease-in text-8xl font-bold text-black z-50`}
Expand Down Expand Up @@ -118,7 +118,7 @@ function IntroSection() {
alt="다음으로 넘어가기"
className="pt-32 pb-32 animate-bounce"
/>
</div>
</section>

<div
onClick={onClickTimer}
Expand Down
7 changes: 7 additions & 0 deletions src/scroll/scrollTo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { useSectionStore } from "./store";

export default function scrollTo(scrollIndex) {
const state = useSectionStore.getState();
const sectionDOM = state.sectionList[scrollIndex];
sectionDOM.scrollIntoView({ behavior: "smooth" });
}
Comment on lines +3 to +7
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋습니다

13 changes: 13 additions & 0 deletions src/scroll/store.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { create } from "zustand";

export const useSectionStore = create((set) => ({
sectionList: [null, null, null, null],
currentSection: -1,
setCurrentSection: (newSection) => set({ currentSection: newSection }),
uploadSection: (index, section) =>
set((state) => {
const updatedList = [...state.sectionList];
updatedList[index] = section;
return { sectionList: updatedList };
}),
}));
41 changes: 41 additions & 0 deletions src/scroll/useSectionInitialize.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { useEffect } from "react";
import { useSectionStore } from "./store";

export default function useSectionInitialize(SECTION_IDX, sectionRef) {
const uploadSection = useSectionStore((state) => state.uploadSection);
const setCurrentSection = useSectionStore((state) => state.setCurrentSection);
const currentSection = useSectionStore((state) => state.currentSection);

useEffect(() => {
const sectionDOM = sectionRef.current;
if (sectionDOM) {
uploadSection(SECTION_IDX, sectionRef.current);
}

const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 미구현
}
});
},
{ threshold: 0.05 },
);

if (sectionDOM) {
observer.observe(sectionDOM);
}
return () => {
if (sectionDOM) {
observer.unobserve(sectionDOM);
}
};
}, [
SECTION_IDX,
sectionRef,
uploadSection,
setCurrentSection,
currentSection,
]);
}
9 changes: 7 additions & 2 deletions src/simpleInformation/index.jsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { useRef } from "react";
import JSONData from "./contentList.json";
import ContentSection from "./contentSection";
import useSectionInitialize from "../scroll/useSectionInitialize";

export default function SimpleInformation() {
const SECTION_IDX = -1;
const sectionRef = useRef(null);
const contentList = JSONData.content;
useSectionInitialize(SECTION_IDX, sectionRef);

return (
<div className="w-full p-6 flex justify-center ">
<section ref={sectionRef} className="w-full p-6 flex justify-center ">
<div className="w-full max-w-[1200px] flex flex-col gap-20 md:gap-30 lg:gap-40">
<div className="flex flex-col text-black font-bold pt-[240px]">
<span className="text-title-s md:text-title-m">
Expand All @@ -19,6 +24,6 @@ export default function SimpleInformation() {
<ContentSection key={index} content={content} />
))}
</div>
</div>
</section>
);
}