Merge branch 'feat/file-upload' of https://github.com/boostcampwm-2024/web05-Denamu into docs/file-upload

Author: asn6878

.github/workflows/deploy_infra.yml

@@ -0,0 +1,27 @@
+name: Infra Deployment
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - docker-compose/docker-compose.prod*.yml
+  workflow_dispatch:
+
+jobs:
+  deployment:
+    runs-on: ubuntu-latest
+    steps:
+      # public 서버로 ssh 접속
+      - name: ssh connection
+        uses: appleboy/[email protected]
+        with:
+          host: ${{ secrets.CLOUD_PUBLIC_INSTANCE_HOST }}
+          username: ${{ secrets.CLOUD_PUBLIC_INSTANCE_USERNAME }}
+          key: ${{ secrets.CLOUD_PUBLIC_INSTANCE_SSH_KEY }}
+          port: ${{ secrets.CLOUD_PUBLIC_INSTANCE_PORT }}
+          script: |
+            cd /var/web05-Denamu
+            git pull origin main
+            docker-compose -f docker-compose/docker-compose.prod.yml down
+            docker-compose -f docker-compose/docker-compose.prod.yml up -d

.github/workflows/deploy_server.yml

@@ -45,6 +45,8 @@ jobs:
             echo "ACCESS_TOKEN_EXPIRE=${{secrets.ACCESS_TOKEN_EXPIRE}}" >> env/.env.prod
             echo "GOOGLE_CLIENT_ID=${{secrets.GOOGLE_CLIENT_ID}}" >> env/.env.prod
             echo "GOOGLE_CLIENT_SECRET=${{secrets.GOOGLE_CLIENT_SECRET}}" >> env/.env.prod
+            echo "GITHUB_CLIENT_ID=${{secrets.GIT_CLIENT_ID}}" >> env/.env.prod
+            echo "GITHUB_CLIENT_SECRET=${{secrets.GIT_CLIENT_SECRET}}" >> env/.env.prod
 
             cd /var/web05-Denamu
             docker-compose -f docker-compose/docker-compose.prod.yml up --build --no-deps -d app

client/src/components/auth/AuthSignInForm.tsx

@@ -65,14 +65,21 @@ export const AuthSignInForm = () => {
           </Button>
         </form>
         <AuthSocialLoginButtons />
-        <div className="mt-4">
+        <div className="mt-4 flex justify-between">
           <Button
             variant="link"
             className="text-muted-foreground underline underline-offset-4 h-auto p-0"
             onClick={() => navigate("/signup", { state: { from: location.pathname } })}
           >
             계정이 없으신가요?
           </Button>
+          <Button
+            variant="link"
+            className="text-muted-foreground underline underline-offset-4 h-auto p-0"
+            onClick={() => navigate("/")}
+          >
+            메인 페이지로 돌아가기
+          </Button>
         </div>
       </AuthCard>
     </>

client/src/components/auth/AuthSocialLoginButtons.tsx

@@ -7,10 +7,16 @@ import { Button } from "@/components/ui/button.tsx";
 import { useCustomToast } from "@/hooks/common/useCustomToast.ts";
 
 import { TOAST_MESSAGES } from "@/constants/messages.ts";
+import { BASE_URL, OAUTH } from "@/constants/endpoints.ts";
 
 export const AuthSocialLoginButtons = () => {
   const { toast } = useCustomToast();
-  const handleSocialLogin = () => {
+
+  const handleSocialLogin = (provider: "google" | "github") => {
+    window.location.href = `${BASE_URL}${OAUTH.LOGIN}?type=${provider}`;
+  };
+
+  const handleNotPrepared = () => {
     toast(TOAST_MESSAGES.SERVICE_NOT_PREPARED);
   };
 
@@ -26,19 +32,19 @@ export const AuthSocialLoginButtons = () => {
       </div>
 
       <div className="grid gap-2">
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={() => handleSocialLogin("github")}>
           <GitHub />
           <span className="text-muted-foreground">Github로 계속하기</span>
         </Button>
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={() => handleSocialLogin("google")}>
           <Google />
           <span className="text-muted-foreground">Google로 계속하기</span>
         </Button>
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={handleNotPrepared}>
           <Naver className="text-[#03C75A]" />
           <span className="text-muted-foreground">네이버로 계속하기</span>
         </Button>
-        <Button variant="outline" className="w-full" onClick={handleSocialLogin}>
+        <Button variant="outline" className="w-full" onClick={handleNotPrepared}>
           <Kakao className="text-[#FEE500]" />
           <span className="text-muted-foreground">카카오로 계속하기</span>
         </Button>

client/src/constants/endpoints.ts

@@ -40,3 +40,7 @@ export const USER = {
   LOGIN: "/api/user/login",
   CERTIFICATE: "/api/user/certificate",
 };
+
+export const OAUTH = {
+  LOGIN: "/api/oauth",
+};

client/src/pages/OAuthSuccessPage.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { useAuthStore } from "@/store/useAuthStore.ts";
+
+export default function OAuthSuccessPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { setUserFromToken } = useAuthStore();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const accessToken = searchParams.get("token");
+
+    if (accessToken) {
+      setUserFromToken(accessToken);
+      navigate("/", { replace: true });
+    } else {
+      navigate("/signin", { replace: true });
+    }
+  }, [location, navigate, setUserFromToken]);
+
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <p className="text-lg">로그인 처리 중입니다...</p>
+    </div>
+  );
+}

client/src/routes/index.tsx

@@ -13,6 +13,7 @@ const Profile = lazy(() => import("@/pages/Profile"));
 const SignIn = lazy(() => import("@/pages/SignIn"));
 const SignUp = lazy(() => import("@/pages/SignUp"));
 const UserCertificate = lazy(() => import("@/pages/UserCertificate"));
+const OAuthSuccessPage = lazy(() => import("@/pages/OAuthSuccessPage"));
 
 interface RouterProps {
   location: Location;
@@ -63,6 +64,14 @@ export const AppRouter = ({ location, state }: RouterProps) => {
             </Suspense>
           }
         />
+        <Route
+          path="/oauth-success"
+          element={
+            <Suspense fallback={<Loading />}>
+              <OAuthSuccessPage />
+            </Suspense>
+          }
+        />
         <Route
           path="/user/certificate"
           element={

docker-compose/docker-compose.dev.yml

@@ -53,6 +53,7 @@ services:
     build:
       context: ../server
       dockerfile: docker/Dockerfile.dev
+    image: denamu-dev-app:latest
     ports:
       - "8080:8080"
     networks:
@@ -78,6 +79,7 @@ services:
     build:
       context: ../feed-crawler
       dockerfile: docker/Dockerfile.dev
+    image: denamu-dev-feed-crawler:latest
     networks:
       - Denamu
     depends_on:

docker-compose/docker-compose.local.yml

@@ -26,6 +26,7 @@ services:
     build:
       context: ../server
       dockerfile: docker/Dockerfile.local
+    image: denamu-local-portfolio-app:latest
     ports:
       - "8080:8080"
     networks:
@@ -46,6 +47,7 @@ services:
     build:
       context: ../feed-crawler
       dockerfile: docker/Dockerfile.local
+    image: denamu-local-portfolio-feed-crawler:latest
     networks:
       - Denamu
     depends_on:

docker-compose/docker-compose.prod.infra.yml

@@ -35,6 +35,21 @@ services:
       timeout: 5s
       retries: 3
 
+  # MySQL Metrics
+  mysql_metrics:
+    image: prom/mysqld-exporter
+    ports:
+      - "9104:9104"
+    networks:
+      - Denamu
+    command:
+      - "--mysqld.username=$MYSQL_USER:$MYSQL_PASSWORD"
+      - "--mysqld.address=mysql-db:3306"
+    environment:
+      TZ: "Asia/Seoul"
+    depends_on:
+      - mysql-db
+
   # Redis 서비스
   redis:
     image: "redis:6.0.16-alpine"
@@ -58,6 +73,21 @@ services:
     environment:
       TZ: "Asia/Seoul"
 
+  # Redis Metrics
+  redis_metrics:
+    image: oliver006/redis_exporter
+    ports:
+      - "9121:9121"
+    networks:
+      - Denamu
+    environment:
+      REDIS_ADDR: "redis://redis:6379"
+      REDIS_USER: "${REDIS_USER}"
+      REDIS_PASSWORD: "${REDIS_PASSWORD}"
+      TZ: "Asia/Seoul"
+    depends_on:
+      - redis
+
   # Prometheus
   prometheus:
     image: "prom/prometheus"