Skip to content

Commit ebda03f

Browse files
HarrySeopHarrySeop
authored
Merge pull request #294 from StarSync-FE/develop
📦Chore: main으로 배포
2 parents de91a6d + cc9a7cf commit ebda03f

File tree

4 files changed

+163
-234
lines changed

4 files changed

+163
-234
lines changed

‎index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,28 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>StarSync</title>
7+
<meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
8+
<meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
9+
<meta name="author" content="Team StarSync" />
10+
11+
<meta property="og:type" content="website" />
12+
<meta property="og:title" content="StarSync" />
13+
<meta
14+
property="og:description"
15+
content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
16+
/>
17+
<meta property="og:image" content="https://www.starsync.wiki/default-og.png" />
18+
<meta property="og:url" content="https://www.starsync.wiki/" />
19+
<meta property="og:site_name" content="StarSync" />
20+
21+
<meta name="twitter:card" content="summary_large_image" />
22+
<meta name="twitter:title" content="StarSync" />
23+
<meta
24+
name="twitter:description"
25+
content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
26+
/>
27+
<meta name="twitter:image" content="https://www.starsync.wiki/default-og.png" />
28+
729
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
830
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
931
<style>

‎src/pages/landing/LandingPage.jsx‎

Lines changed: 53 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,6 @@ const LandingPage = () => {
5555
const { list } = useLoaderData();
5656
console.log('리스트:', list);
5757

58-
const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
59-
6058
const handleClearStorage = () => {
6159
localStorage.clear();
6260
};
@@ -94,90 +92,63 @@ const LandingPage = () => {
9492
};
9593

9694
return (
97-
<>
98-
<title>StarSync</title>
99-
<meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
100-
<meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
101-
<meta name="author" content="Team StarSync" />
102-
103-
{/* Open Graph */}
104-
<meta property="og:type" content="website" />
105-
<meta property="og:title" content="StarSync" />
106-
<meta
107-
property="og:description"
108-
content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
109-
/>
110-
<meta property="og:image" content={DEFAULT_OG_IMAGE} />
111-
<meta property="og:url" content="https://www.starsync.wiki/" />
112-
<meta property="og:site_name" content="StarSync" />
113-
114-
{/* Twitter */}
115-
<meta name="twitter:card" content="summary_large_image" />
116-
<meta name="twitter:title" content="StarSync" />
117-
<meta
118-
name="twitter:description"
119-
content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
120-
/>
121-
<meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
122-
123-
<div css={S.pageContainer}>
124-
<div css={S.backgroundStarsWrapper}>
125-
{stars.map((star) => (
126-
<div key={star.id} css={S.starStyle(star)} />
127-
))}
128-
</div>
129-
130-
{/* Dot Navigation */}
131-
<nav css={S.navDots}>
132-
{sections.map((section, idx) => (
133-
<button
134-
key={section.id}
135-
type="button"
136-
css={[S.dot, activeIndex === idx && S.activeDot]}
137-
onClick={() => handleSmoothScroll(idx)}
138-
aria-label={`Move to ${section.id} section`}
139-
/>
140-
))}
141-
</nav>
95+
<div css={S.pageContainer}>
96+
<div css={S.backgroundStarsWrapper}>
97+
{stars.map((star) => (
98+
<div key={star.id} css={S.starStyle(star)} />
99+
))}
100+
</div>
142101

143-
{/* Sections */}
102+
{/* Dot Navigation */}
103+
<nav css={S.navDots}>
144104
{sections.map((section, idx) => (
145-
<section
105+
<button
146106
key={section.id}
147-
data-index={idx}
148-
ref={(el) => {
149-
sectionRefs.current[idx] = el;
150-
}}
151-
css={S.section}
152-
>
153-
<motion.div
154-
css={S.sectionContent}
155-
initial={{ opacity: 0, y: 50 }}
156-
animate={{ opacity: activeIndex === idx ? 1 : 0.3, y: activeIndex === idx ? 0 : 50 }}
157-
transition={{ duration: 0.8 }}
158-
>
159-
<h1>{section.title}</h1>
160-
<p>{section.description}</p>
161-
<Link to="/list" onClick={handleClearStorage}>
162-
<CustomButton type="button" variant="landing">
163-
{section.buttonText}
164-
</CustomButton>
165-
</Link>
166-
{section.showScrollGuide && (
167-
<button
168-
type="button"
169-
css={S.scrollGuide}
170-
onClick={handleScrollGuideClick}
171-
aria-label="Scroll to next section"
172-
>
173-
스크롤하여 아래로 이동
174-
</button>
175-
)}
176-
</motion.div>
177-
</section>
107+
type="button"
108+
css={[S.dot, activeIndex === idx && S.activeDot]}
109+
onClick={() => handleSmoothScroll(idx)}
110+
aria-label={`Move to ${section.id} section`}
111+
/>
178112
))}
179-
</div>
180-
</>
113+
</nav>
114+
115+
{/* Sections */}
116+
{sections.map((section, idx) => (
117+
<section
118+
key={section.id}
119+
data-index={idx}
120+
ref={(el) => {
121+
sectionRefs.current[idx] = el;
122+
}}
123+
css={S.section}
124+
>
125+
<motion.div
126+
css={S.sectionContent}
127+
initial={{ opacity: 0, y: 50 }}
128+
animate={{ opacity: activeIndex === idx ? 1 : 0.3, y: activeIndex === idx ? 0 : 50 }}
129+
transition={{ duration: 0.8 }}
130+
>
131+
<h1>{section.title}</h1>
132+
<p>{section.description}</p>
133+
<Link to="/list" onClick={handleClearStorage}>
134+
<CustomButton type="button" variant="landing">
135+
{section.buttonText}
136+
</CustomButton>
137+
</Link>
138+
{section.showScrollGuide && (
139+
<button
140+
type="button"
141+
css={S.scrollGuide}
142+
onClick={handleScrollGuideClick}
143+
aria-label="Scroll to next section"
144+
>
145+
스크롤하여 아래로 이동
146+
</button>
147+
)}
148+
</motion.div>
149+
</section>
150+
))}
151+
</div>
181152
);
182153
};
183154

‎src/pages/list/ListPage.jsx‎

Lines changed: 18 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ const ListPage = () => {
1414
const [voteSuccessTrigger, setVoteSuccessTrigger] = useState(false);
1515
const { idols, donations } = useLoaderData(); // 여기서 데이터 받음
1616

17-
const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
18-
1917
useEffect(() => {
2018
const storedCredit = localStorage.getItem('selectedCredit');
2119
if (storedCredit) {
@@ -31,57 +29,26 @@ const ListPage = () => {
3129
};
3230

3331
return (
34-
<>
35-
<title>StarSync - 리스트</title>
36-
<meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
37-
<meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
38-
<meta name="author" content="Team StarSync" />
39-
40-
{/* Open Graph */}
41-
<meta property="og:type" content="website" />
42-
<meta property="og:title" content="StarSync" />
43-
<meta
44-
property="og:description"
45-
content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
32+
<div css={S.wrapper}>
33+
<div css={S.listTheme} />
34+
<Charge credit={credit} setModalType={setModalType} /> {/* Charge에 credit 전달 */}
35+
<Carousel data={donations} setModalType={setModalType} setSelectedIndex={setSelectedIndex} />
36+
<Chart
37+
setModalType={setModalType}
38+
selectedTab={selectedTab}
39+
setSelectedTab={setSelectedTab}
40+
voteSuccessTrigger={voteSuccessTrigger}
4641
/>
47-
<meta property="og:image" content={DEFAULT_OG_IMAGE} />
48-
<meta property="og:url" content="https://www.starsync.wiki/list" />
49-
<meta property="og:site_name" content="StarSync" />
50-
51-
{/* Twitter */}
52-
<meta name="twitter:card" content="summary_large_image" />
53-
<meta name="twitter:title" content="StarSync" />
54-
<meta
55-
name="twitter:description"
56-
content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
42+
<ListModal
43+
modalType={modalType}
44+
setModalType={setModalType}
45+
credit={credit}
46+
updateCredit={updateCredit}
47+
setVoteSuccessTrigger={setVoteSuccessTrigger}
48+
gender={selectedTab}
49+
donations={selectedIndex != null ? donations.list[selectedIndex] : null}
5750
/>
58-
<meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
59-
60-
<div css={S.wrapper}>
61-
<div css={S.listTheme} />
62-
<Charge credit={credit} setModalType={setModalType} /> {/* Charge에 credit 전달 */}
63-
<Carousel
64-
data={donations}
65-
setModalType={setModalType}
66-
setSelectedIndex={setSelectedIndex}
67-
/>
68-
<Chart
69-
setModalType={setModalType}
70-
selectedTab={selectedTab}
71-
setSelectedTab={setSelectedTab}
72-
voteSuccessTrigger={voteSuccessTrigger}
73-
/>
74-
<ListModal
75-
modalType={modalType}
76-
setModalType={setModalType}
77-
credit={credit}
78-
updateCredit={updateCredit}
79-
setVoteSuccessTrigger={setVoteSuccessTrigger}
80-
gender={selectedTab}
81-
donations={selectedIndex != null ? donations.list[selectedIndex] : null}
82-
/>
83-
</div>
84-
</>
51+
</div>
8552
);
8653
};
8754

0 commit comments

Comments
 (0)