From 536ceef44ebfa163fb7733f3e475dd924c5bd563 Mon Sep 17 00:00:00 2001
From: HarrySeop <harryseop@gmail.com>
Date: Tue, 29 Apr 2025 19:44:17 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8FRefactor:=20SEO=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 커밋 메시지 형식
# <이모지><타입>: <제목> (#이슈 번호)
#
# ⛔ 제목은 100자 이내, 끝에 마침표(.) 사용 금지
# ⛔ 이모지와 타입 사이에 공백 없이 붙여 씁니다 (예: ✨Feat)
# ⛔ 제목과 콜론(:) 사이에 공백 없이 붙이고, 콜론 뒤에는 공백 1칸 필요

# ✅ 제목은 커밋의 "무엇"을 나타냅니다
# ✅ 본문은 "왜", "어떻게"를 요약하며, 선택사항입니다
# ✅ 본문은 여러 줄의 메시지를 작성할 땐 "-"로 구분

# 예시:
# ✨Feat: 마이페이지 수정 기능 추가 (#15)

# 커밋 타입 가이드:
# ✨ Feat     : 새로운 기능 추가
# 🐛 Fix      : 버그 수정
# 📦 Chore    : 설정/빌드 수정, 기타 잡일
# 💄 Style    : 포맷팅, 세미콜론 등 비즈니스 로직 없는 변경
# 📝 Docs     : 문서 작성 및 수정
# ♻️ Refactor : 리팩토링 (동작 변경 없이 코드 개선)
---
 index.html                        |  22 ++++
 src/pages/landing/LandingPage.jsx | 135 +++++++++--------------
 src/pages/list/ListPage.jsx       |  69 ++++--------
 src/pages/my/MyPage.jsx           | 171 ++++++++++++------------------
 4 files changed, 163 insertions(+), 234 deletions(-)

diff --git a/index.html b/index.html
index e6a50d95..ecd9c241 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,28 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>StarSync</title>
+    <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
+    <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
+    <meta name="author" content="Team StarSync" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="StarSync" />
+    <meta
+      property="og:description"
+      content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+    />
+    <meta property="og:image" content="https://www.starsync.wiki/default-og.png" />
+    <meta property="og:url" content="https://www.starsync.wiki/" />
+    <meta property="og:site_name" content="StarSync" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="StarSync" />
+    <meta
+      name="twitter:description"
+      content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+    />
+    <meta name="twitter:image" content="https://www.starsync.wiki/default-og.png" />
+
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
     <style>
diff --git a/src/pages/landing/LandingPage.jsx b/src/pages/landing/LandingPage.jsx
index 9292f652..eeba5247 100644
--- a/src/pages/landing/LandingPage.jsx
+++ b/src/pages/landing/LandingPage.jsx
@@ -55,8 +55,6 @@ const LandingPage = () => {
   const { list } = useLoaderData();
   console.log('리스트:', list);
 
-  const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
-
   const handleClearStorage = () => {
     localStorage.clear();
   };
@@ -94,90 +92,63 @@ const LandingPage = () => {
   };
 
   return (
-    <>
-      <title>StarSync</title>
-      <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
-      <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
-      <meta name="author" content="Team StarSync" />
-
-      {/* Open Graph */}
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content="StarSync" />
-      <meta
-        property="og:description"
-        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
-      />
-      <meta property="og:image" content={DEFAULT_OG_IMAGE} />
-      <meta property="og:url" content="https://www.starsync.wiki/" />
-      <meta property="og:site_name" content="StarSync" />
-
-      {/* Twitter */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:title" content="StarSync" />
-      <meta
-        name="twitter:description"
-        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
-      />
-      <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
-
-      <div css={S.pageContainer}>
-        <div css={S.backgroundStarsWrapper}>
-          {stars.map((star) => (
-            <div key={star.id} css={S.starStyle(star)} />
-          ))}
-        </div>
-
-        {/* Dot Navigation */}
-        <nav css={S.navDots}>
-          {sections.map((section, idx) => (
-            <button
-              key={section.id}
-              type="button"
-              css={[S.dot, activeIndex === idx && S.activeDot]}
-              onClick={() => handleSmoothScroll(idx)}
-              aria-label={`Move to ${section.id} section`}
-            />
-          ))}
-        </nav>
+    <div css={S.pageContainer}>
+      <div css={S.backgroundStarsWrapper}>
+        {stars.map((star) => (
+          <div key={star.id} css={S.starStyle(star)} />
+        ))}
+      </div>
 
-        {/* Sections */}
+      {/* Dot Navigation */}
+      <nav css={S.navDots}>
         {sections.map((section, idx) => (
-          <section
+          <button
             key={section.id}
-            data-index={idx}
-            ref={(el) => {
-              sectionRefs.current[idx] = el;
-            }}
-            css={S.section}
-          >
-            <motion.div
-              css={S.sectionContent}
-              initial={{ opacity: 0, y: 50 }}
-              animate={{ opacity: activeIndex === idx ? 1 : 0.3, y: activeIndex === idx ? 0 : 50 }}
-              transition={{ duration: 0.8 }}
-            >
-              <h1>{section.title}</h1>
-              <p>{section.description}</p>
-              <Link to="/list" onClick={handleClearStorage}>
-                <CustomButton type="button" variant="landing">
-                  {section.buttonText}
-                </CustomButton>
-              </Link>
-              {section.showScrollGuide && (
-                <button
-                  type="button"
-                  css={S.scrollGuide}
-                  onClick={handleScrollGuideClick}
-                  aria-label="Scroll to next section"
-                >
-                  스크롤하여 아래로 이동
-                </button>
-              )}
-            </motion.div>
-          </section>
+            type="button"
+            css={[S.dot, activeIndex === idx && S.activeDot]}
+            onClick={() => handleSmoothScroll(idx)}
+            aria-label={`Move to ${section.id} section`}
+          />
         ))}
-      </div>
-    </>
+      </nav>
+
+      {/* Sections */}
+      {sections.map((section, idx) => (
+        <section
+          key={section.id}
+          data-index={idx}
+          ref={(el) => {
+            sectionRefs.current[idx] = el;
+          }}
+          css={S.section}
+        >
+          <motion.div
+            css={S.sectionContent}
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: activeIndex === idx ? 1 : 0.3, y: activeIndex === idx ? 0 : 50 }}
+            transition={{ duration: 0.8 }}
+          >
+            <h1>{section.title}</h1>
+            <p>{section.description}</p>
+            <Link to="/list" onClick={handleClearStorage}>
+              <CustomButton type="button" variant="landing">
+                {section.buttonText}
+              </CustomButton>
+            </Link>
+            {section.showScrollGuide && (
+              <button
+                type="button"
+                css={S.scrollGuide}
+                onClick={handleScrollGuideClick}
+                aria-label="Scroll to next section"
+              >
+                스크롤하여 아래로 이동
+              </button>
+            )}
+          </motion.div>
+        </section>
+      ))}
+    </div>
   );
 };
 
diff --git a/src/pages/list/ListPage.jsx b/src/pages/list/ListPage.jsx
index 94ac9b14..7f0bed09 100644
--- a/src/pages/list/ListPage.jsx
+++ b/src/pages/list/ListPage.jsx
@@ -14,8 +14,6 @@ const ListPage = () => {
   const [voteSuccessTrigger, setVoteSuccessTrigger] = useState(false);
   const { idols, donations } = useLoaderData(); // 여기서 데이터 받음
 
-  const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
-
   useEffect(() => {
     const storedCredit = localStorage.getItem('selectedCredit');
     if (storedCredit) {
@@ -31,57 +29,26 @@ const ListPage = () => {
   };
 
   return (
-    <>
-      <title>StarSync - 리스트</title>
-      <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
-      <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
-      <meta name="author" content="Team StarSync" />
-
-      {/* Open Graph */}
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content="StarSync" />
-      <meta
-        property="og:description"
-        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+    <div css={S.wrapper}>
+      <div css={S.listTheme} />
+      <Charge credit={credit} setModalType={setModalType} /> {/* Charge에 credit 전달 */}
+      <Carousel data={donations} setModalType={setModalType} setSelectedIndex={setSelectedIndex} />
+      <Chart
+        setModalType={setModalType}
+        selectedTab={selectedTab}
+        setSelectedTab={setSelectedTab}
+        voteSuccessTrigger={voteSuccessTrigger}
       />
-      <meta property="og:image" content={DEFAULT_OG_IMAGE} />
-      <meta property="og:url" content="https://www.starsync.wiki/list" />
-      <meta property="og:site_name" content="StarSync" />
-
-      {/* Twitter */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:title" content="StarSync" />
-      <meta
-        name="twitter:description"
-        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
+      <ListModal
+        modalType={modalType}
+        setModalType={setModalType}
+        credit={credit}
+        updateCredit={updateCredit}
+        setVoteSuccessTrigger={setVoteSuccessTrigger}
+        gender={selectedTab}
+        donations={selectedIndex != null ? donations.list[selectedIndex] : null}
       />
-      <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
-
-      <div css={S.wrapper}>
-        <div css={S.listTheme} />
-        <Charge credit={credit} setModalType={setModalType} /> {/* Charge에 credit 전달 */}
-        <Carousel
-          data={donations}
-          setModalType={setModalType}
-          setSelectedIndex={setSelectedIndex}
-        />
-        <Chart
-          setModalType={setModalType}
-          selectedTab={selectedTab}
-          setSelectedTab={setSelectedTab}
-          voteSuccessTrigger={voteSuccessTrigger}
-        />
-        <ListModal
-          modalType={modalType}
-          setModalType={setModalType}
-          credit={credit}
-          updateCredit={updateCredit}
-          setVoteSuccessTrigger={setVoteSuccessTrigger}
-          gender={selectedTab}
-          donations={selectedIndex != null ? donations.list[selectedIndex] : null}
-        />
-      </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/pages/my/MyPage.jsx b/src/pages/my/MyPage.jsx
index 501d6a80..9b6298ad 100644
--- a/src/pages/my/MyPage.jsx
+++ b/src/pages/my/MyPage.jsx
@@ -20,8 +20,6 @@ const MyPage = () => {
   const maxPage = Math.ceil(allIdols.length / pageSize);
   const [screenSize, setScreenSize] = useState('desktop');
 
-  const DEFAULT_OG_IMAGE = 'https://www.starsync.wiki/default-og.png';
-
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
@@ -130,42 +128,49 @@ const MyPage = () => {
   };
 
   return (
-    <>
-      <title>StarSync - 마이페이지</title>
-      <meta name="description" content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간" />
-      <meta name="keywords" content="StarSync, 스타싱크, 팬, 후원, 팬 활동, 팬심, 아이돌" />
-      <meta name="author" content="Team StarSync" />
-
-      {/* Open Graph */}
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content="StarSync - 마이페이지" />
-      <meta
-        property="og:description"
-        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
-      />
-      <meta property="og:image" content={DEFAULT_OG_IMAGE} />
-      <meta property="og:url" content="https://www.starsync.wiki/mypage" />
-      <meta property="og:site_name" content="StarSync" />
-
-      {/* Twitter */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:title" content="StarSync - 마이페이지" />
-      <meta
-        name="twitter:description"
-        content="별처럼 연결되는 우리, 모든 별이 하나로 이어지는 순간"
-      />
-      <meta name="twitter:image" content={DEFAULT_OG_IMAGE} />
-
-      <div css={S.myPageWrapper}>
-        <div css={S.contentBox}>
-          <h2 css={[S.title, S.myIdolTitle]}>내가 관심있는 아이돌</h2>
-          <section css={[S.horizonList, S.scrollStyle]}>
-            {myIdol.map((idol) => {
+    <div css={S.myPageWrapper}>
+      <div css={S.contentBox}>
+        <h2 css={[S.title, S.myIdolTitle]}>내가 관심있는 아이돌</h2>
+        <section css={[S.horizonList, S.scrollStyle]}>
+          {myIdol.map((idol) => {
+            return (
+              <div key={idol.id}>
+                <AvatarButton
+                  imgUrl={idol.profilePicture}
+                  removeIdol={() => removeMyIdol(idol.id)}
+                />
+                <h3 css={S.idolName}>{idol.name}</h3>
+                <p css={S.groupName}>{idol.group}</p>
+              </div>
+            );
+          })}
+        </section>
+
+        <h2 css={[S.title, S.allIdolTitle]}>관심 있는 아이돌을 추가해보세요.</h2>
+        <div css={S.idolListWrapper}>
+          {screenSize !== 'mobile' && currentIdols.length > 0 ? (
+            <ArrowButton
+              direction={'left'}
+              styles={[S.arrowButton, S.prev]}
+              onButtonClick={() => {
+                if (currentPage > 1) {
+                  setCurrentPage((prev) => prev - 1);
+                }
+              }}
+              disabled={currentPage === 1}
+            />
+          ) : null}
+
+          <section
+            css={[screenSize === 'mobile' ? [S.mobileAllIdols, S.scrollStyle] : null, S.idolList]}
+          >
+            {currentIdols.map((idol) => {
               return (
-                <div key={idol.id}>
-                  <AvatarButton
+                <div key={idol.id} css={[S.allProfileSize]}>
+                  <Avatar
                     imgUrl={idol.profilePicture}
-                    removeIdol={() => removeMyIdol(idol.id)}
+                    onSelectToggle={() => toggleProfile(idol)}
+                    isSelected={selectedProfiles[idol.id]}
                   />
                   <h3 css={S.idolName}>{idol.name}</h3>
                   <p css={S.groupName}>{idol.group}</p>
@@ -173,76 +178,40 @@ const MyPage = () => {
               );
             })}
           </section>
-
-          <h2 css={[S.title, S.allIdolTitle]}>관심 있는 아이돌을 추가해보세요.</h2>
-          <div css={S.idolListWrapper}>
-            {screenSize !== 'mobile' && currentIdols.length > 0 ? (
-              <ArrowButton
-                direction={'left'}
-                styles={[S.arrowButton, S.prev]}
-                onButtonClick={() => {
-                  if (currentPage > 1) {
-                    setCurrentPage((prev) => prev - 1);
-                  }
-                }}
-                disabled={currentPage === 1}
-              />
-            ) : null}
-
-            <section
-              css={[screenSize === 'mobile' ? [S.mobileAllIdols, S.scrollStyle] : null, S.idolList]}
-            >
-              {currentIdols.map((idol) => {
-                return (
-                  <div key={idol.id} css={[S.allProfileSize]}>
-                    <Avatar
-                      imgUrl={idol.profilePicture}
-                      onSelectToggle={() => toggleProfile(idol)}
-                      isSelected={selectedProfiles[idol.id]}
-                    />
-                    <h3 css={S.idolName}>{idol.name}</h3>
-                    <p css={S.groupName}>{idol.group}</p>
-                  </div>
-                );
-              })}
-            </section>
-            {screenSize !== 'mobile' && currentIdols.length > 0 ? (
-              <ArrowButton
-                direction="right"
-                styles={[S.arrowButton, S.next]}
-                onButtonClick={() => {
-                  if (currentPage < maxPage) {
-                    setCurrentPage((prev) => prev + 1);
-                  }
-                }}
-                disabled={currentPage === maxPage}
-              />
-            ) : null}
-          </div>
-          <div css={S.customButtonWrapper}>
-            <CustomButton
-              type="button"
-              isRound={true}
-              style={S.customButtonStyle}
+          {screenSize !== 'mobile' && currentIdols.length > 0 ? (
+            <ArrowButton
+              direction="right"
+              styles={[S.arrowButton, S.next]}
               onButtonClick={() => {
-                const hasSelected = Object.values(selectedProfiles).some(
-                  (isSelected) => isSelected,
-                );
-
-                if (hasSelected) {
-                  addMyIdols();
-                } else {
-                  showAlert('관심있는 아이돌을 추가해 주세요', 'warning', 2000);
+                if (currentPage < maxPage) {
+                  setCurrentPage((prev) => prev + 1);
                 }
               }}
-            >
-              <img src={addIcon} alt="addIcon" css={S.buttonIcon} />
-              추가하기
-            </CustomButton>
-          </div>
+              disabled={currentPage === maxPage}
+            />
+          ) : null}
+        </div>
+        <div css={S.customButtonWrapper}>
+          <CustomButton
+            type="button"
+            isRound={true}
+            style={S.customButtonStyle}
+            onButtonClick={() => {
+              const hasSelected = Object.values(selectedProfiles).some((isSelected) => isSelected);
+
+              if (hasSelected) {
+                addMyIdols();
+              } else {
+                showAlert('관심있는 아이돌을 추가해 주세요', 'warning', 2000);
+              }
+            }}
+          >
+            <img src={addIcon} alt="addIcon" css={S.buttonIcon} />
+            추가하기
+          </CustomButton>
         </div>
       </div>
-    </>
+    </div>
   );
 };