diff --git a/DEMO.md b/DEMO.md
new file mode 100644
index 0000000..c33aef6
--- /dev/null
+++ b/DEMO.md
@@ -0,0 +1,67 @@
+# 시연 영상
+
+### 회원가입 - 로그인
+
+<img src="./public/demo/join-login.gif">
+<br>
+
+### 로그인 - 로그아웃
+
+<img src="./public/demo/login-logout.gif">
+<br>
+
+### 소셜 로그인(네이버, 구글)
+
+<img src="./public/demo/login-naver.gif">
+<img src="./public/demo/login-google.gif">
+<br>
+
+### 메인페이지 게시글 무한스크롤 - 필터(인기순)
+
+<img src="./public/demo/scroll-popular.gif">
+<br>
+
+### 메인페이지 게시글 무한스크롤 - 필터(가격순) - 재정렬
+
+<img src="./public/demo/scroll-realign.gif">
+<br>
+
+### 양도글 검색
+
+<img src="./public/demo/search.gif">
+<br>
+
+### 양도글 작성
+
+<img src="./public/demo/write.gif">
+<br>
+
+### 양도글 수정
+
+<img src="./public/demo/edit.gif">
+<br>
+
+### 관심등록 - 관심삭제
+
+<img src="./public/demo/like.gif">
+<br>
+
+### 댓글 작성 - 댓글 수정 - 댓글 삭제
+
+<img src="./public/demo/comment.gif">
+<br>
+
+### 마이페이지 - 회원정보 수정
+
+<img src="./public/demo/mypage.gif">
+<br>
+
+### 모바일사이즈 로그인 - 마이페이지
+
+<img src="./public/demo/mobile.gif">
+<br>
+
+### 관리자 로그인 - 게시글 블라인드
+
+<img src="./public/demo/admin.gif">
+<br>
diff --git a/public/demo/admin.gif b/public/demo/admin.gif
new file mode 100644
index 0000000..31ac20e
Binary files /dev/null and b/public/demo/admin.gif differ
diff --git a/public/demo/comment.gif b/public/demo/comment.gif
new file mode 100644
index 0000000..6ca356d
Binary files /dev/null and b/public/demo/comment.gif differ
diff --git a/public/demo/edit.gif b/public/demo/edit.gif
new file mode 100644
index 0000000..1458c73
Binary files /dev/null and b/public/demo/edit.gif differ
diff --git a/public/demo/join-login.gif b/public/demo/join-login.gif
new file mode 100644
index 0000000..66fd1b1
Binary files /dev/null and b/public/demo/join-login.gif differ
diff --git a/public/demo/like.gif b/public/demo/like.gif
new file mode 100644
index 0000000..d8009aa
Binary files /dev/null and b/public/demo/like.gif differ
diff --git a/public/demo/login-google.gif b/public/demo/login-google.gif
new file mode 100644
index 0000000..74886d3
Binary files /dev/null and b/public/demo/login-google.gif differ
diff --git a/public/demo/login-logout.gif b/public/demo/login-logout.gif
new file mode 100644
index 0000000..b927c4e
Binary files /dev/null and b/public/demo/login-logout.gif differ
diff --git a/public/demo/login-naver.gif b/public/demo/login-naver.gif
new file mode 100644
index 0000000..9c0adbc
Binary files /dev/null and b/public/demo/login-naver.gif differ
diff --git a/public/demo/mobile.gif b/public/demo/mobile.gif
new file mode 100644
index 0000000..d64bf92
Binary files /dev/null and b/public/demo/mobile.gif differ
diff --git a/public/demo/mypage.gif b/public/demo/mypage.gif
new file mode 100644
index 0000000..c6a26f3
Binary files /dev/null and b/public/demo/mypage.gif differ
diff --git a/public/demo/scroll-popular.gif b/public/demo/scroll-popular.gif
new file mode 100644
index 0000000..4b238e3
Binary files /dev/null and b/public/demo/scroll-popular.gif differ
diff --git a/public/demo/scroll-realign.gif b/public/demo/scroll-realign.gif
new file mode 100644
index 0000000..0f84040
Binary files /dev/null and b/public/demo/scroll-realign.gif differ
diff --git a/public/demo/search.gif b/public/demo/search.gif
new file mode 100644
index 0000000..197f3c5
Binary files /dev/null and b/public/demo/search.gif differ
diff --git a/public/demo/write.gif b/public/demo/write.gif
new file mode 100644
index 0000000..d8fd507
Binary files /dev/null and b/public/demo/write.gif differ
diff --git a/src/components/SocialLogin/SocialLogin.tsx b/src/components/SocialLogin/SocialLogin.tsx
index df60162..ac25439 100644
--- a/src/components/SocialLogin/SocialLogin.tsx
+++ b/src/components/SocialLogin/SocialLogin.tsx
@@ -2,10 +2,12 @@ import styled from 'styled-components'
 import { COLORS } from '@src/globalStyles'
 import { SocialLoginGoogleIcon, SocialLoginNaverIcon } from '@src/constants/icons'
 
+const SOCIAL_URL = import.meta.env.VITE_SOCIAL_URL
+
 const SocialLogin = () => {
   const socialLoginHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault()
-    const LINK = `https://field-passer.store/oauth2/authorization/${e.currentTarget.dataset.name}`
+    const LINK = SOCIAL_URL + e.currentTarget.dataset.name
     window.location.replace(LINK)
   }