📦Chore: 배포를 위한 main 브랜치로 PR

.github/workflows/preview-cleanup.yml

@@ -0,0 +1,34 @@
+name: PR Preview Cleanup (S3 Cleanup + CloudFront 무효화)
+
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  cleanup-preview:
+    runs-on: ubuntu-latest
+
+    env:
+      BUCKET_NAME: starsync
+
+    steps:
+      - name: AWS 인증 정보 설정
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Preview S3 파일 삭제 (PR 닫힐 때)
+        run: |
+          PREVIEW_PATH="preview/pr-${{ github.event.pull_request.number }}"
+          echo "🧹 S3 경로 삭제 중: s3://$BUCKET_NAME/$PREVIEW_PATH/"
+          aws s3 rm s3://$BUCKET_NAME/$PREVIEW_PATH/ --recursive
+
+      - name: CloudFront 캐시 무효화 (Preview PR 경로)
+        run: |
+          INVALIDATION_PATH="/preview/pr-${{ github.event.pull_request.number }}/*"
+          echo "🌀 캐시 무효화 대상: $INVALIDATION_PATH"
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "$INVALIDATION_PATH"

.github/workflows/preview.yml

@@ -0,0 +1,54 @@
+name: PR Preview Deploy to S3 and CloudFront
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - main
+
+permissions:
+  pull-requests: write
+  contents: read      
+
+jobs:
+  Deploy:
+    runs-on: ubuntu-latest
+
+    env:
+      BUCKET_NAME: starsync
+      VITE_BASE_URL: ${{ secrets.VITE_BASE_URL }}
+
+    steps:
+    - name: Github Repository 파일 불러오기
+      uses: actions/checkout@v4
+
+    - name: Node.js 환경 설정
+      uses: actions/setup-node@v4
+      with:
+        node-version: 22.14.0
+
+    - name: 의존성 설치 (npm ci)
+      run: npm ci
+
+    - name: 프로젝트 빌드 (Vite)
+      run: npm run build -- --mode production
+
+    - name: AWS 인증 정보 설정
+      uses: aws-actions/configure-aws-credentials@v4
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.AWS_REGION }}
+
+    - name: Preview S3 업로드 (PR 번호 기준)
+      run: |
+        PREVIEW_PATH="preview/pr-${{ github.event.pull_request.number }}"
+        echo "Preview 경로: s3://$BUCKET_NAME/$PREVIEW_PATH/"
+        aws s3 sync dist/ s3://$BUCKET_NAME/$PREVIEW_PATH/ --delete
+
+    - name: PR에 Preview 링크 남기기
+      uses: marocchino/sticky-pull-request-comment@v2
+      with:
+        message: |
+          🚀 **PR Preview 배포 완료!**
+          🔗 [Preview 확인하기](https://preview.starsync.wiki/preview/pr-${{ github.event.pull_request.number }})

biome.json

@@ -18,7 +18,7 @@
     "attributePosition": "auto"
   },
   "organizeImports": {
-    "enabled": true
+    "enabled": false
   },
   "linter": {
     "enabled": true,

src/App.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { RouterProvider } from 'react-router-dom';
-import { SplashScreen } from './components/loadingStatus/splashScreen';
+import { AlertManager } from './components/alertManager';
+import { SplashScreen } from './components/loadingStatus';
 
 export default function App({ router }) {
   const [showSplashScreen, setShowSplashScreen] = useState(true);
@@ -19,5 +20,10 @@ export default function App({ router }) {
     () => clearInterval(splashScreenInterval);
   }, []);
 
-  return <>{showSplashScreen ? <SplashScreen /> : <RouterProvider router={router} />}</>;
+  return (
+    <>
+      <AlertManager />
+      {showSplashScreen ? <SplashScreen /> : <RouterProvider router={router} />}
+    </>
+  );
 }

src/Root.jsx

@@ -1,24 +1,40 @@
+import { Outlet, useLocation, useNavigation } from 'react-router-dom';
 import { Header } from '@/components/header';
 import { LAYOUT } from '@/constants/layout';
-import { Outlet, useLocation, useNavigation } from 'react-router-dom';
-import { Footer } from './components/footer';
-import { PendingUI } from './components/loadingStatus/pendingUI';
+import { Footer } from '@/components/footer';
+import { PendingUI } from './components/loadingStatus';
 
 function Root() {
   const navigation = useNavigation();
-  const isLoading = navigation.state !== 'idle'; // 'loading' 또는 'submitting'
+  const location = useLocation();
+
+  const currentPath = location.pathname;
+  const nextPath = navigation.location?.pathname;
+  const isSamePath = currentPath === nextPath;
 
-  const { pathname } = useLocation();
-  const isLanding = pathname === '/';
+  const isLoading = navigation.state !== 'idle' && !isSamePath;
+
+  const isLanding = currentPath === '/';
 
   return (
     <>
-      {isLoading && <PendingUI />}
-      {!isLanding && <Header />}
-      <main style={{ paddingTop: !isLanding ? `${LAYOUT.HEADER_HEIGHT}px` : 0 }}>
-        <Outlet />
-      </main>
-      {!isLanding && <Footer />}
+
+      {isLoading ? (
+        <PendingUI />
+      ) : (
+        <>
+          {!isLanding && <Header />}
+          <main
+            style={{
+              paddingTop: !isLanding ? `${LAYOUT.HEADER_HEIGHT}px` : 0,
+            }}
+          >
+            <Outlet />
+          </main>
+          {!isLanding && <Footer />}
+        </>
+      )}
+
     </>
   );
 }

src/api/chart.js

@@ -0,0 +1,9 @@
+import { ENDPOINTS } from '@/constants/api';
+import { requestGet } from '@/utils/api';
+
+async function fetchCharts({ gender = 'female', limit = 10, cursor = 0 }) {
+  const url = `${ENDPOINTS.GET_CHART}?gender=${gender}&pageSize=${limit}&cursor=${cursor}`;
+  return requestGet(url);
+}
+
+export default fetchCharts;

src/api/donation.js

@@ -0,0 +1,9 @@
+import { ENDPOINTS } from '@/constants/api';
+import { requestGet } from '@/utils/api';
+
+async function fetchDonations({ limit = 10, cursor = 0 }) {
+  const url = `${ENDPOINTS.GET_DONATIONS}?pageSize=${limit}&cursor=${cursor}`;
+  return requestGet(url);
+}
+
+export default fetchDonations;

src/api/idol.js

@@ -0,0 +1,9 @@
+import { ENDPOINTS } from '@/constants/api';
+import { requestGet } from '@/utils/api';
+
+async function fetchIdols({ limit = 30, cursor = 0 }) {
+  const url = `${ENDPOINTS.GET_IDOLS}?pageSize=${limit}&cursor=${cursor}`;
+  return requestGet(url);
+}
+
+export default fetchIdols;

src/api/index.js

@@ -0,0 +1,3 @@
+export { default as fetchCharts } from './chart';
+export { default as fetchIdols } from './idol';
+export { default as fetchDonations } from './donation';

src/components/alert/Alert.jsx

@@ -1,12 +1,13 @@
+import React from 'react';
 import successIcon from '@/assets/icons/success-icon.png';
 import warningIcon from '@/assets/icons/warning-icon.png';
 import * as S from './alert.styles';
 
-const Alert = ({ content = 'toast content', type = 'warning' }) => {
+const Alert = ({ content = 'toast content', type = 'warning', customStyle }) => {
   const iconSrc = type === 'success' ? successIcon : warningIcon;
 
   return (
-    <div css={S.alertWrapper}>
+    <div css={[customStyle, S.alertWrapper]}>
       <div css={S.contentBox}>
         <img src={iconSrc} alt={`${type}-icon`} />
         <p>{content}</p>

src/components/alert/alert.styles.js

@@ -1,5 +1,5 @@
-import media from '@/styles/responsive';
 import { css, keyframes } from '@emotion/react';
+import media from '@/styles/responsive';
 
 const bounceIn = keyframes`
   0% {
@@ -21,17 +21,25 @@ const bounceIn = keyframes`
 export const alertWrapper = css`
   display: flex;
   position: fixed;
+  top: 8vh;
+  left: 35%;
   z-index: 1111;
-  width: 30.7rem;
+  width: 30%;
   height: 6rem;
-  margin: auto;
   padding: 2.7rem ;
   border-radius: 3.6rem;
   color: var(--brown-dark);
   background-color: var(--pink-soft);
-  ${media({
-    top: ['10rem', '10rem', '10rem', '2rem', '2rem'],
-  })}
+    ${media({
+      width: [
+        '50%',
+        '50%', // 모바일 (375px 이하)
+        '50%', // 작은 태블릿 (744px 이하)
+        '30%', // 노트북 (1280px 이하)
+        '30%', // 데스크탑 (1920px 이하)
+      ],
+      left: ['25%', '25%', '25%', '35%', '35%'],
+    })}
   animation: ${bounceIn} 0.5s ease forwards;
 `;
 

src/components/alertManager/AlertManager.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+import { Alert } from '@/components/alert';
+import { registerAlertTrigger } from '@/utils/alert';
+
+const AlertManager = () => {
+  const [visible, setVisible] = useState(false);
+  const [content, setContent] = useState('');
+  const [type, setType] = useState('warning');
+  const [customStyle, setCustomStyle] = useState({});
+  const timeoutRef = useRef(null);
+  const triggerAlert = (message, type = 'warning', duration = 2000, style = {}) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setVisible(true);
+    setContent(message);
+    setType(type);
+    setCustomStyle(style);
+    timeoutRef.current = setTimeout(() => {
+      setVisible(false);
+      timeoutRef.current = null;
+    }, duration);
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    try {
+      registerAlertTrigger(triggerAlert);
+    } catch (error) {
+      console.log(error);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  if (!visible) return null;
+
+  return <Alert content={content} type={type} customStyle={customStyle} />;
+};
+
+export default AlertManager;

src/components/alertManager/index.js

@@ -0,0 +1 @@
+export { default as AlertManager } from './AlertManager';

src/components/avatar/avatar.styles.js

@@ -1,5 +1,5 @@
-import checkIcon from '@/assets/icons/check-icon.png';
 import { css } from '@emotion/react';
+import checkIcon from '@/assets/icons/check-icon.png';
 
 export const imageWrapper = (imgSize) => css`
   position: relative;
@@ -12,7 +12,7 @@ export const imageSelected = css`
     z-index: 0;
     width: 100%;
     height: 100%;
-    border: 4px solid var(--black);
+    border: 4px solid var(--black-deep);
     border-radius: 50%;
     background: linear-gradient(
       271.36deg,
@@ -41,8 +41,8 @@ export const image = (size) => css`
   width: 100%;
   height: 100%;
   aspect-ratio: 1/1;
-  border: 4px solid var(--black);
+  border: 4px solid var(--black-deep);
   border-radius: 50%;
-  box-shadow: 0 0 0 1px var(--orange);
+  box-shadow: 0 0 0 2px var(--orange);
   object-fit: cover;
 `;

src/components/button/arrowButton/ArrowButton.jsx

@@ -0,0 +1,60 @@
+import { css } from '@emotion/react';
+import * as S from './arrowButton.styles';
+
+/**
+ * ArrowButton 컴포넌트는 좌/우 방향을 나타내는 화살표 버튼을 렌더링합니다.
+ * 버튼 클릭 시 `onButtonClick` 콜백 함수가 호출됩니다.
+ *
+ * @component
+ * @example
+ * // 좌측 화살표 버튼을 렌더링하는 예시
+ * <ArrowButton direction="left" onButtonClick={handleClick} />
+ *
+ * @param {Object} props - 컴포넌트의 속성
+ * @param {'left' | 'right'} [props.direction='left'] - 버튼의 방향을 결정합니다. 기본값은 'left'입니다.
+ * @param {Object} [props.styles={}] - 추가적인 CSS 스타일을 객체 형태로 전달할 수 있습니다.
+ * @param {Function} [props.onButtonClick={}] - 버튼 클릭 시 호출되는 콜백 함수입니다. 기본값은 빈 객체입니다.
+ * @param {boolean} [props.disabled=false] - 버튼의 활성화 여부를 결정합니다. 기본값은 `false`입니다.
+ *
+ * @returns {JSX.Element|null} 좌측 또는 우측 화살표 버튼을 반환하며, 방향에 따라 다르게 렌더링됩니다.
+ */
+const ArrowButton = ({
+  direction = 'left',
+  styles = {},
+  onButtonClick = () => {},
+  disabled = false,
+}) => {
+  return (
+    <>
+      {direction === 'left' ? (
+        <button
+          type="button"
+          onClick={onButtonClick}
+          css={[S.navigationButton, css(styles)]}
+          disabled={disabled}
+          aria-label="이전"
+        >
+          <svg css={S.arrowIcon} viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
+            <title>이전</title>
+            <path d="M7 1L1 7L7 13" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      ) : direction === 'right' ? (
+        <button
+          type="button"
+          onClick={onButtonClick}
+          css={[S.navigationButton, css(styles)]}
+          disabled={disabled}
+          aria-label="다음"
+        >
+          <svg css={S.arrowIcon} viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg">
+            <title>다음</title>
+            <path d="M1 1L7 7L1 13" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </button>
+      ) : null}
+    </>
+  );
+};
+
+export default ArrowButton;