refactor, build: github actions OIDC 수정 및 배포 업데이트

.github/workflows/deploy.yml

@@ -9,7 +9,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
     permissions:
+      id-token: write
       contents: read
+    env:
+      AWS_REGION: ${{ secrets.AWS_REGION }}
+      AWS_ROLE_ARN: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ secrets.AWS_OIDC_ROLE_NAME }}
+      S3_BUCKET: ${{ secrets.AWS_BUCKET_NAME }}
+      CF_DISTRIBUTION_ID: ${{ secrets.AWS_DISTRIBUTION_ID }}
 
     steps:
       - name: Checkout source
@@ -31,12 +37,12 @@ jobs:
         env:
           VITE_BASE_URL: ${{ secrets.VITE_BASE_URL }}
 
-      - name: Configure AWS Credentials
+      - name: Configure AWS credentials via OIDC
         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 }}
+          role-to-assume: ${{ env.AWS_ROLE_ARN }}
+          role-session-name: github-actions-${{ github.run_id }}
+          aws-region: ${{ env.AWS_REGION }}
 
       - name: Deploy to S3 (validate & upload)
         shell: bash
@@ -45,21 +51,20 @@ jobs:
 
           test -f dist/index.html
 
-          BUCKET="${{ secrets.AWS_BUCKET_NAME }}"
-          [[ -n "$BUCKET" ]]
-          [[ "$BUCKET" != s3://* ]]
+          [[ -n "${S3_BUCKET}" ]]
+          [[ "${S3_BUCKET}" != s3://* ]]
 
-          aws s3 cp "dist" "s3://$BUCKET" \
+          aws s3 cp "dist" "s3://${S3_BUCKET}" \
             --recursive \
             --exclude "index.html" \
             --cache-control "public, max-age=31536000, immutable"
 
-          aws s3 cp "dist/index.html" "s3://$BUCKET/index.html" \
+          aws s3 cp "dist/index.html" "s3://${S3_BUCKET}/index.html" \
             --cache-control "no-cache, no-store, must-revalidate" \
             --content-type "text/html"
 
       - name: Invalidate CloudFront cache (HTML only)
         run: |
           aws cloudfront create-invalidation \
-            --distribution-id ${{ secrets.AWS_DISTRIBUTION_ID }} \
-            --paths "/index.html"
+            --distribution-id "${CF_DISTRIBUTION_ID}" \
+            --paths "/index.html" "/assets/*" "/static/*"

src/api/projectMember.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+import { BASE_URL, PROJECTS_MEMBER_URL } from '../constants/endpoint';
+
+export const getProjectMember = async (projectId: number) => {
+  const { data } = await axios.get(
+    `${BASE_URL}${PROJECTS_MEMBER_URL(projectId)}`,
+  );
+  return data.payload;
+};

src/components/common/Button/OtherIconButton.tsx

@@ -88,7 +88,7 @@ export const BookmarkButton = ({
   isBookmarked,
   disabled,
 }: BookmarkButtonProps) => {
-  // const updateBookmark = usePostBookmarkQuery(projectId);
+  const updateBookmark = usePostBookmarkQuery(projectId!);
   const [isActive, setIsActive] = useState(isBookmarked);
   const [isLoginSuggestionModalOpen, setIsLoginSuggestionModalOpen] =
     useState(false);
@@ -101,17 +101,19 @@ export const BookmarkButton = ({
       setIsLoginSuggestionModalOpen(true);
       return;
     }
-    // updateBookmark.mutate();
+    updateBookmark.mutate();
     setIsActive((prev) => !prev);
   };
 
   return (
     <>
       <button
-        className="group flex h-[4.4rem] w-[4.4rem] items-center justify-center rounded-b-[0.4rem] bg-black-40 hover:bg-primary-10"
+        className={`group flex h-[4.4rem] w-[4.4rem] items-center justify-center rounded-b-[0.4rem] ${isActive ? 'bg-primary-10' : 'bg-black-40'} hover:bg-primary-10`}
         onClick={handleClick}
       >
-        <BookmarkIcon className="fill-transparent stroke-black-70 group-hover:fill-primary group-hover:stroke-transparent" />
+        <BookmarkIcon
+          className={`${isActive ? 'fill-primary stroke-transparent' : 'fill-transparent stroke-black-70'} group-hover:fill-primary group-hover:stroke-transparent`}
+        />
       </button>
       <LoginSuggestionModal
         size="large"
@@ -145,7 +147,7 @@ export const ShadowButton = ({
   color,
   disabled,
   children,
-  onClick
+  onClick,
 }: ShadowButtonProps) => {
   return (
     <button className="group flex h-[3.8rem] w-[3.8rem] items-center justify-center">
@@ -157,4 +159,4 @@ export const ShadowButton = ({
       </div>
     </button>
   );
-};
+};

src/hooks/useProjectMember.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import { getProjectMember } from '../api/projectMember';
+import { MemberPayload } from '../types/api/response/payload/member';
+
+export const useProjectsMemberQuery = (projectId: number) => {
+  return useQuery<MemberPayload[], Error>({
+    queryKey: ['projectMember', projectId],
+    queryFn: () => getProjectMember(projectId),
+    enabled: !!projectId,
+    staleTime: 1000 * 60 * 5, // 5분 동안 캐시 유지
+    refetchOnWindowFocus: false, // 윈도우 포커스 시 재요청하지 않음
+  });
+};