diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 45f6ff537..1d7d9aba5 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,11 +1,10 @@
-import { useContext } from 'react';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { css } from '@emotion/react';
 
 import { PATH } from '@constants';
 
-import { LoginContext } from '@context/login/LoginProvider';
+import { useAuth } from '@hooks/useAuth';
 
 import Footer from '@layout/footer/Footer';
 import Header from '@layout/header/Header';
@@ -20,7 +19,7 @@ import MyStudyPage from '@pages/my-study-page/MyStudyPage';
 import DetailPage from '@detail-page/DetailPage';
 
 const App = () => {
-  const { isLoggedIn } = useContext(LoginContext);
+  const { isLoggedIn } = useAuth();
 
   return (
     <div>
diff --git a/frontend/src/api/postJoiningStudy.ts b/frontend/src/api/postJoiningStudy.ts
new file mode 100644
index 000000000..3ca556513
--- /dev/null
+++ b/frontend/src/api/postJoiningStudy.ts
@@ -0,0 +1,8 @@
+import axiosInstance from '@api/axiosInstance';
+
+const postJoiningStudy = async (studyId: number) => {
+  const response = await axiosInstance.post(`/api/studies/${studyId}`);
+  return response.data;
+};
+
+export default postJoiningStudy;
diff --git a/frontend/src/api/postNewStudy.ts b/frontend/src/api/postNewStudy.ts
index 353a37109..cf66d2698 100644
--- a/frontend/src/api/postNewStudy.ts
+++ b/frontend/src/api/postNewStudy.ts
@@ -20,7 +20,7 @@ const postNewStudy = async (data: StudyDetailPostData) => {
     `/api/studies`,
     data,
   );
-  return response;
+  return response.data;
 };
 
 export default postNewStudy;
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index 17c1e4323..58c0cddd0 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -5,7 +5,7 @@ import { ACCESS_TOKEN_KEY } from '@constants';
 import { LoginContext } from '@context/login/LoginProvider';
 
 export const useAuth = () => {
-  const { setIsLoggedIn } = useContext(LoginContext);
+  const { isLoggedIn, setIsLoggedIn } = useContext(LoginContext);
 
   const login = (accesssToken: string) => {
     window.sessionStorage.setItem(ACCESS_TOKEN_KEY, accesssToken);
@@ -17,5 +17,5 @@ export const useAuth = () => {
     setIsLoggedIn(false);
   };
 
-  return { login, logout };
+  return { isLoggedIn, login, logout };
 };
diff --git a/frontend/src/layout/header/Header.tsx b/frontend/src/layout/header/Header.tsx
index d57e3b4b7..e5a1d7611 100644
--- a/frontend/src/layout/header/Header.tsx
+++ b/frontend/src/layout/header/Header.tsx
@@ -7,7 +7,6 @@ import { PATH, PROFILE_IMAGE_URL } from '@constants';
 
 import { useAuth } from '@hooks/useAuth';
 
-import { LoginContext } from '@context/login/LoginProvider';
 import { SearchContext } from '@context/search/SearchProvider';
 
 import * as S from '@layout/header/Header.style';
@@ -23,14 +22,13 @@ export type HeaderProps = {
 };
 
 const Header: React.FC<HeaderProps> = ({ className }) => {
-  const { isLoggedIn } = useContext(LoginContext);
   const { setKeyword } = useContext(SearchContext);
 
   const [openDropDownBox, setOpenDropDownBox] = useState(false);
 
   const navigate = useNavigate();
 
-  const { logout } = useAuth();
+  const { logout, isLoggedIn } = useAuth();
 
   const handleKeywordSubmit = (e: React.FormEvent<HTMLFormElement>, inputName: string) => {
     e.preventDefault();
diff --git a/frontend/src/layout/header/components/drop-down-box/DropDownBox.style.tsx b/frontend/src/layout/header/components/drop-down-box/DropDownBox.style.tsx
index d42c0fb76..e43d4dcdd 100644
--- a/frontend/src/layout/header/components/drop-down-box/DropDownBox.style.tsx
+++ b/frontend/src/layout/header/components/drop-down-box/DropDownBox.style.tsx
@@ -26,5 +26,16 @@ export const DropDownBox = styled.div<Pick<DropDownBoxProps, 'top' | 'bottom' |
     border-radius: 5px;
     background-color: ${theme.colors.secondary.light};
     z-index: 3;
+
+    transform-origin: top;
+    animation: slide-down 0.1s ease;
+    @keyframes slide-down {
+      0% {
+        transform: scale(1, 0);
+      }
+      100% {
+        transform: scale(1, 1);
+      }
+    }
   `}
 `;
diff --git a/frontend/src/mocks/detailStudyHandlers.ts b/frontend/src/mocks/detailStudyHandlers.ts
index fd590f9ec..bfe0fd087 100644
--- a/frontend/src/mocks/detailStudyHandlers.ts
+++ b/frontend/src/mocks/detailStudyHandlers.ts
@@ -11,6 +11,11 @@ const detailStudyHandlers = [
 
     return res(ctx.status(200), ctx.json(study));
   }),
+  rest.post('/api/studies/:studyId', (req, res, ctx) => {
+    const studyId = req.params.studyId;
+
+    return res(ctx.status(200));
+  }),
   rest.get('/api/studies/:studyId/reviews', (req, res, ctx) => {
     const size = req.url.searchParams.get('size');
     if (size) {
diff --git a/frontend/src/mocks/studies.json b/frontend/src/mocks/studies.json
index 8d77ec662..43bd9b7fb 100644
--- a/frontend/src/mocks/studies.json
+++ b/frontend/src/mocks/studies.json
@@ -7,7 +7,7 @@
       "thumbnail": "https://picsum.photos/id/28/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 28,
+      "currentMemberCount": 29,
       "maxMemberCount": 33,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-10",
@@ -16,7 +16,7 @@
       "owner": {
         "id": 1,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -206,7 +206,7 @@
       "thumbnail": "https://picsum.photos/id/27/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 8,
+      "currentMemberCount": 9,
       "maxMemberCount": 19,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-03",
@@ -215,7 +215,7 @@
       "owner": {
         "id": 2,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -283,7 +283,7 @@
       "thumbnail": "https://picsum.photos/id/35/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 31,
+      "currentMemberCount": 32,
       "maxMemberCount": 39,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-29",
@@ -292,7 +292,7 @@
       "owner": {
         "id": 3,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -500,7 +500,7 @@
       "thumbnail": "https://picsum.photos/id/31/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 23,
+      "currentMemberCount": 24,
       "maxMemberCount": 23,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-12",
@@ -509,7 +509,7 @@
       "owner": {
         "id": 4,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -665,7 +665,7 @@
       "thumbnail": "https://picsum.photos/id/83/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 12,
+      "currentMemberCount": 13,
       "maxMemberCount": 37,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-27",
@@ -674,7 +674,7 @@
       "owner": {
         "id": 5,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -765,7 +765,7 @@
       "thumbnail": "https://picsum.photos/id/25/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 25,
+      "currentMemberCount": 26,
       "maxMemberCount": 36,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-28",
@@ -774,7 +774,7 @@
       "owner": {
         "id": 6,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -946,7 +946,7 @@
       "thumbnail": "https://picsum.photos/id/60/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 21,
+      "currentMemberCount": 22,
       "maxMemberCount": 36,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-14",
@@ -955,7 +955,7 @@
       "owner": {
         "id": 7,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -1120,7 +1120,7 @@
       "thumbnail": "https://picsum.photos/id/4/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 25,
+      "currentMemberCount": 26,
       "maxMemberCount": 26,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-24",
@@ -1348,7 +1348,7 @@
       "thumbnail": "https://picsum.photos/id/17/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 26,
+      "currentMemberCount": 27,
       "maxMemberCount": 38,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-21",
@@ -1576,7 +1576,7 @@
       "thumbnail": "https://picsum.photos/id/88/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 39,
+      "currentMemberCount": 40,
       "maxMemberCount": 39,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-16",
@@ -1906,7 +1906,7 @@
       "thumbnail": "https://picsum.photos/id/52/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 10,
+      "currentMemberCount": 11,
       "maxMemberCount": 34,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-12",
@@ -1915,7 +1915,7 @@
       "owner": {
         "id": 8,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -1994,7 +1994,7 @@
       "thumbnail": "https://picsum.photos/id/41/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 38,
+      "currentMemberCount": 39,
       "maxMemberCount": 38,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-18",
@@ -2003,7 +2003,7 @@
       "owner": {
         "id": 9,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -2082,7 +2082,7 @@
       "thumbnail": "https://picsum.photos/id/91/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 14,
+      "currentMemberCount": 15,
       "maxMemberCount": 25,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-05",
@@ -2091,7 +2091,7 @@
       "owner": {
         "id": 10,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -2198,7 +2198,7 @@
       "thumbnail": "https://picsum.photos/id/71/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 19,
+      "currentMemberCount": 20,
       "maxMemberCount": 28,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-23",
@@ -2207,7 +2207,7 @@
       "owner": {
         "id": 11,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -2340,7 +2340,7 @@
       "thumbnail": "https://picsum.photos/id/35/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 29,
+      "currentMemberCount": 30,
       "maxMemberCount": 30,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-06",
@@ -2349,7 +2349,7 @@
       "owner": {
         "id": 12,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -2574,7 +2574,7 @@
       "thumbnail": "https://picsum.photos/id/12/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 4,
+      "currentMemberCount": 5,
       "maxMemberCount": 34,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-18",
@@ -2646,7 +2646,7 @@
       "thumbnail": "https://picsum.photos/id/81/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 22,
+      "currentMemberCount": 23,
       "maxMemberCount": 35,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-31",
@@ -2814,7 +2814,7 @@
       "thumbnail": "https://picsum.photos/id/74/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 35,
+      "currentMemberCount": 36,
       "maxMemberCount": 38,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-20",
@@ -2823,7 +2823,7 @@
       "owner": {
         "id": 13,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -3056,7 +3056,7 @@
       "thumbnail": "https://picsum.photos/id/65/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 11,
+      "currentMemberCount": 12,
       "maxMemberCount": 37,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-06",
@@ -3065,7 +3065,7 @@
       "owner": {
         "id": 14,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -3144,7 +3144,7 @@
       "thumbnail": "https://picsum.photos/id/13/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 12,
+      "currentMemberCount": 13,
       "maxMemberCount": 14,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-13",
@@ -3153,7 +3153,7 @@
       "owner": {
         "id": 15,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -3306,8 +3306,8 @@
       "thumbnail": "https://picsum.photos/id/51/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 38,
-      "maxMemberCount": 38,
+      "currentMemberCount": 39,
+      "maxMemberCount": 39,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-30",
       "startDate": "2022-07-18",
@@ -3315,7 +3315,7 @@
       "owner": {
         "id": 16,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -3567,7 +3567,7 @@
       "thumbnail": "https://picsum.photos/id/5/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 10,
+      "currentMemberCount": 11,
       "maxMemberCount": 22,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-03",
@@ -3576,7 +3576,7 @@
       "owner": {
         "id": 17,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -3631,7 +3631,7 @@
       "thumbnail": "https://picsum.photos/id/74/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 36,
+      "currentMemberCount": 37,
       "maxMemberCount": 39,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-03",
@@ -3895,7 +3895,7 @@
       "thumbnail": "https://picsum.photos/id/43/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 6,
+      "currentMemberCount": 7,
       "maxMemberCount": 40,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-07",
@@ -3997,7 +3997,7 @@
       "thumbnail": "https://picsum.photos/id/8/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 33,
+      "currentMemberCount": 34,
       "maxMemberCount": 40,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-15",
@@ -4273,7 +4273,7 @@
       "thumbnail": "https://picsum.photos/id/45/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 10,
+      "currentMemberCount": 11,
       "maxMemberCount": 26,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-24",
@@ -4393,7 +4393,7 @@
       "thumbnail": "https://picsum.photos/id/27/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 6,
+      "currentMemberCount": 7,
       "maxMemberCount": 19,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-15",
@@ -4402,7 +4402,7 @@
       "owner": {
         "id": 18,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -4602,7 +4602,7 @@
       "thumbnail": "https://picsum.photos/id/17/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 32,
+      "currentMemberCount": 33,
       "maxMemberCount": 37,
       "createdAt": "2022-07-09",
       "enrollmentEndDate": "2022-07-05",
@@ -4611,7 +4611,7 @@
       "owner": {
         "id": 19,
         "username": "jaejae-yoo",
-        "imageUrl": "images/123",
+        "imageUrl":  "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
         "profileUrl": "https://github.com/user/jaejae-yoo"
       },
       "members": [
@@ -4854,7 +4854,7 @@
       "thumbnail": "https://picsum.photos/id/54/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 20,
+      "currentMemberCount": 21,
       "maxMemberCount": 24,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-10",
@@ -5058,7 +5058,7 @@
       "thumbnail": "https://picsum.photos/id/59/200/300",
       "recruitmentStatus": "RECRUITMENT_END",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 12,
+      "currentMemberCount": 13,
       "maxMemberCount": 28,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-13",
@@ -5208,7 +5208,7 @@
       "thumbnail": "https://picsum.photos/id/27/200/300",
       "recruitmentStatus": "RECRUITMENT_START",
       "description": "# Prettier plugin sort imports\n\nA prettier plugin to sort import declarations by provided Regular Expression order.\n\n**Note: If you are migrating from v2.x.x to v3.x.x, [Please Read Migration Guidelines](./docs/MIGRATION.md)**\n\n### Input\n\n```javascript\nimport React, {\n  FC,\n  useEffect,\n  useRef,\n  ChangeEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { logger } from \"@core/logger\";\nimport { reduce, debounce } from \"lodash\";\nimport { Message } from \"../Message\";\nimport { createServer } from \"@server/node\";\nimport { Alert } from \"@ui/Alert\";\nimport { repeat, filter, add } from \"../utils\";\nimport { initializeApp } from \"@core/app\";\nimport { Popup } from \"@ui/Popup\";\nimport { createConnection } from \"@server/database\";\n```\n\n### Output\n\n```javascript\nimport { debounce, reduce } from \"lodash\";\nimport React, {\n  ChangeEvent,\n  FC,\n  KeyboardEvent,\n  useEffect,\n  useRef,\n} from \"react\";\n\nimport { createConnection } from \"@server/database\";\nimport { createServer } from \"@server/node\";\n\nimport { initializeApp } from \"@core/app\";\nimport { logger } from \"@core/logger\";\n\nimport { Alert } from \"@ui/Alert\";\nimport { Popup } from \"@ui/Popup\";\n\nimport { Message } from \"../Message\";\nimport { add, filter, repeat } from \"../utils\";\n```\n",
-      "currentMemberCount": 27,
+      "currentMemberCount": 28,
       "maxMemberCount": 38,
       "createdAt": "2022-07-21",
       "enrollmentEndDate": "2022-07-09",
diff --git a/frontend/src/pages/detail-page/DetailPage.tsx b/frontend/src/pages/detail-page/DetailPage.tsx
index dd2a12f3b..443d4a9e4 100644
--- a/frontend/src/pages/detail-page/DetailPage.tsx
+++ b/frontend/src/pages/detail-page/DetailPage.tsx
@@ -1,7 +1,15 @@
-import { useParams } from 'react-router-dom';
+import { AxiosResponse } from 'axios';
+import { useMutation } from 'react-query';
+import { Navigate, useParams } from 'react-router-dom';
+
+import { PATH } from '@constants';
 
 import { changeDateSeperator } from '@utils/dates';
 
+import postJoiningStudy from '@api/postJoiningStudy';
+
+import { useAuth } from '@hooks/useAuth';
+
 import StudyMemberSection from '@pages/detail-page/components/study-member-section/StudyMemberSection';
 import StudyWideFloatBox from '@pages/detail-page/components/study-wide-float-box/StudyWideFloatBox';
 
@@ -18,12 +26,33 @@ import useFetchDetail from '@detail-page/hooks/useFetchDetail';
 const DetailPage = () => {
   const { studyId } = useParams() as { studyId: string };
 
+  const { isLoggedIn } = useAuth();
+
   const studyDetailQueryResult = useFetchDetail(Number(studyId));
+  const { mutate } = useMutation<AxiosResponse, Error, number>(postJoiningStudy);
+
+  const handleRegisterBtnClick = () => {
+    if (!isLoggedIn) {
+      alert('로그인이 필요합니다.');
+      return;
+    }
 
-  const handleRegisterBtnClick = (studyId: number) => () => {
-    alert('아직 준비중입니다 :D');
+    mutate(Number(studyId), {
+      onError: () => {
+        alert('가입에 실패했습니다.');
+      },
+      onSuccess: () => {
+        alert('가입했습니다 :D');
+        studyDetailQueryResult.refetch();
+      },
+    });
   };
 
+  if (!studyId) {
+    alert('잘못된 접근입니다.');
+    return <Navigate to={PATH.MAIN} replace={true} />;
+  }
+
   if (studyDetailQueryResult.isFetching) return <div>Loading...</div>;
 
   if (!studyDetailQueryResult.data) return <div>No Data</div>;
@@ -62,12 +91,11 @@ const DetailPage = () => {
             <MarkdownRender markdownContent={description} />
           </S.MarkDownContainer>
           <Divider space={2} />
-          <StudyMemberSection members={members} />
+          <StudyMemberSection owner={owner} members={members} />
         </S.MainDescription>
         <S.FloatButtonContainer>
           <S.StickyContainer>
             <StudyFloatBox
-              studyId={id}
               ownerName={owner.username}
               currentMemberCount={currentMemberCount}
               maxMemberCount={maxMemberCount}
@@ -82,7 +110,6 @@ const DetailPage = () => {
       <StudyReviewSection studyId={id} />
       <S.FixedBottomContainer>
         <StudyWideFloatBox
-          studyId={id}
           currentMemberCount={currentMemberCount}
           maxMemberCount={maxMemberCount}
           enrollmentEndDate={enrollmentEndDate}
diff --git a/frontend/src/pages/detail-page/components/study-float-box/StudyFloatBox.tsx b/frontend/src/pages/detail-page/components/study-float-box/StudyFloatBox.tsx
index 754eb80f1..744a057f5 100644
--- a/frontend/src/pages/detail-page/components/study-float-box/StudyFloatBox.tsx
+++ b/frontend/src/pages/detail-page/components/study-float-box/StudyFloatBox.tsx
@@ -6,18 +6,15 @@ import Button from '@components/button/Button';
 
 import * as S from '@detail-page/components/study-float-box/StudyFloatBox.style';
 
-// TODO: 스터디에 가입한 사람인지 아닌지 상태도 받아야 함
 export type StudyFloatBoxProps = Pick<
   StudyDetail,
   'enrollmentEndDate' | 'currentMemberCount' | 'maxMemberCount' | 'recruitmentStatus'
 > & {
-  studyId: number;
   ownerName: string;
-  handleRegisterBtnClick: (studyId: number) => React.MouseEventHandler<HTMLButtonElement>;
+  handleRegisterBtnClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 const StudyFloatBox: React.FC<StudyFloatBoxProps> = ({
-  studyId,
   enrollmentEndDate,
   currentMemberCount,
   maxMemberCount,
@@ -51,7 +48,7 @@ const StudyFloatBox: React.FC<StudyFloatBoxProps> = ({
           <span>{ownerName}</span>
         </S.Owner>
       </S.StudyInfo>
-      <Button disabled={!isOpen} onClick={handleRegisterBtnClick(studyId)}>
+      <Button disabled={!isOpen} onClick={handleRegisterBtnClick}>
         {isOpen ? '스터디 가입하기' : '모집이 마감되었습니다'}
       </Button>
     </S.StudyFloatBox>
diff --git a/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.style.tsx b/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.style.tsx
index b51dd6900..12527ab9e 100644
--- a/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.style.tsx
+++ b/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.style.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { mqDown } from '@utils/index';
@@ -32,6 +33,20 @@ export const MemberList = styled.ul`
   }
 `;
 
+export const Owner = styled.li`
+  ${({ theme }) => css`
+    position: relative;
+
+    & svg {
+      position: absolute;
+      top: 5px;
+      left: 20px;
+      stroke: ${theme.colors.tertiary.base};
+      fill: ${theme.colors.tertiary.base};
+    }
+  `}
+`;
+
 export const MoreButtonContainer = styled.div`
   padding: 15px 0;
 
diff --git a/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.tsx b/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.tsx
index d034dc155..60ef2acb6 100644
--- a/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.tsx
+++ b/frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.tsx
@@ -1,10 +1,11 @@
 import { useState } from 'react';
+import { TbCrown } from 'react-icons/tb';
 
 import { DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT } from '@constants';
 
 import { changeDateSeperator } from '@utils/dates';
 
-import { Member } from '@custom-types/index';
+import { Member, Owner } from '@custom-types/index';
 
 import StudyMemberCard from '@pages/detail-page/components/study-member-card/StudyMemberCard';
 import * as S from '@pages/detail-page/components/study-member-section/StudyMemberSection.style';
@@ -12,48 +13,89 @@ import * as S from '@pages/detail-page/components/study-member-section/StudyMemb
 import MoreButton from '@detail-page/components/more-button/MoreButton';
 
 export interface StudyMemberSectionProps {
+  owner: Owner;
   members: Array<Member>;
 }
 
-const StudyMemberSection: React.FC<StudyMemberSectionProps> = ({ members }) => {
+const StudyMemberSection: React.FC<StudyMemberSectionProps> = ({ owner, members }) => {
   const [showAll, setShowAll] = useState<boolean>(false);
 
+  const totalMembers = [owner, ...members];
+
   const handleShowMoreBtnClick = () => {
     setShowAll(prev => !prev);
   };
 
+  const renderMembers = () => {
+    if (totalMembers.length === 0) {
+      return <li>스터디원이 없습니다</li>;
+    }
+
+    if (showAll) {
+      return (
+        <>
+          <S.Owner key={owner.id}>
+            <a href={owner.profileUrl}>
+              <TbCrown size={20} />
+              <StudyMemberCard
+                username={owner.username}
+                imageUrl={owner.imageUrl}
+                startDate={changeDateSeperator('2022-07-15')}
+                studyCount={10}
+              />
+            </a>
+          </S.Owner>
+          {members.map(({ id, username, imageUrl, profileUrl }) => (
+            <li key={id}>
+              <a href={profileUrl}>
+                <StudyMemberCard
+                  username={username}
+                  imageUrl={imageUrl}
+                  startDate={changeDateSeperator('2022-07-15')}
+                  studyCount={10}
+                />
+              </a>
+            </li>
+          ))}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <S.Owner key={owner.id}>
+          <a href={owner.profileUrl}>
+            <TbCrown size={20} />
+            <StudyMemberCard
+              username={owner.username}
+              imageUrl={owner.imageUrl}
+              startDate={changeDateSeperator('2022-07-15')}
+              studyCount={10}
+            />
+          </a>
+        </S.Owner>
+        {members.slice(0, DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT - 1).map(({ id, username, imageUrl, profileUrl }) => (
+          <li key={id}>
+            <a href={profileUrl}>
+              <StudyMemberCard
+                username={username}
+                imageUrl={imageUrl}
+                startDate={changeDateSeperator('2022-07-15')}
+                studyCount={10}
+              />
+            </a>
+          </li>
+        ))}
+      </>
+    );
+  };
+
   return (
     <S.StudyMemberSection>
       <S.Title>
-        스터디원 <span>{members.length}명</span>
+        스터디원 <span>{totalMembers.length}명</span>
       </S.Title>
-      <S.MemberList>
-        {showAll
-          ? members.map(({ id, username, imageUrl, profileUrl }) => (
-              <li key={id}>
-                <a href={profileUrl}>
-                  <StudyMemberCard
-                    username={username}
-                    imageUrl={imageUrl}
-                    startDate={changeDateSeperator('2022-07-15')}
-                    studyCount={10}
-                  />
-                </a>
-              </li>
-            ))
-          : members.slice(0, DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT).map(({ id, username, imageUrl, profileUrl }) => (
-              <li key={id}>
-                <a href={profileUrl}>
-                  <StudyMemberCard
-                    username={username}
-                    imageUrl={imageUrl}
-                    startDate={changeDateSeperator('2022-07-15')}
-                    studyCount={10}
-                  />
-                </a>
-              </li>
-            ))}
-      </S.MemberList>
+      <S.MemberList>{renderMembers()}</S.MemberList>
       {members.length > DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT && (
         <S.MoreButtonContainer>
           <MoreButton
diff --git a/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx b/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx
index 8e07019f2..10b5c9742 100644
--- a/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx
+++ b/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx
@@ -13,12 +13,10 @@ export type StudyWideFloatBoxProps = Pick<
   StudyDetail,
   'enrollmentEndDate' | 'currentMemberCount' | 'maxMemberCount' | 'recruitmentStatus'
 > & {
-  studyId: number;
-  handleRegisterBtnClick: (studyId: number) => React.MouseEventHandler<HTMLButtonElement>;
+  handleRegisterBtnClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
-  studyId,
   enrollmentEndDate,
   currentMemberCount,
   maxMemberCount,
@@ -55,7 +53,7 @@ const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
           `}
           fluid={true}
           disabled={!isOpen}
-          onClick={handleRegisterBtnClick(studyId)}
+          onClick={handleRegisterBtnClick}
         >
           {isOpen ? '가입하기' : '모집 마감'}
         </Button>
diff --git a/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx b/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
index f90fcfaf6..269714e6b 100644
--- a/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
+++ b/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
 import { useMutation } from 'react-query';
-import { Navigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { PATH } from '@constants';
 
 import type { TokenQueryData } from '@custom-types/index';
 
@@ -13,34 +15,30 @@ import Wrapper from '@components/wrapper/Wrapper';
 const LoginRedirectPage: React.FC = () => {
   const [searchParams] = useSearchParams();
   const codeParam = searchParams.get('code') as string;
+  const navigate = useNavigate();
 
   const { login } = useAuth();
 
-  const { data, mutate, isSuccess, isError, error } = useMutation<TokenQueryData, Error, string>(getAccessToken);
-
-  useEffect(() => {
-    mutate(codeParam);
-  }, []);
+  const { mutate } = useMutation<TokenQueryData, Error, string>(getAccessToken);
 
   useEffect(() => {
-    if (isSuccess) {
-      login(data.token);
+    if (!codeParam) {
+      alert('잘못된 접근입니다.');
+      navigate(PATH.MAIN, { replace: true });
+      return;
     }
-  }, [isSuccess]);
 
-  if (!codeParam) {
-    alert('잘못된 접근입니다.');
-    return <Navigate to="/" replace={true} />;
-  }
-
-  if (isError) {
-    alert(error.message);
-    return <Navigate to="/" replace={true} />;
-  }
-
-  if (isSuccess) {
-    return <Navigate to="/" replace={true} />;
-  }
+    mutate(codeParam, {
+      onError: error => {
+        alert(error.message ?? '로그인에 실패했습니다.');
+        navigate(PATH.MAIN, { replace: true });
+      },
+      onSuccess: data => {
+        login(data.token);
+        navigate(PATH.MAIN, { replace: true });
+      },
+    });
+  }, []);
 
   return (
     <Wrapper>
diff --git a/frontend/src/pages/main-page/MainPage.tsx b/frontend/src/pages/main-page/MainPage.tsx
index af815bc39..24adc9d6d 100644
--- a/frontend/src/pages/main-page/MainPage.tsx
+++ b/frontend/src/pages/main-page/MainPage.tsx
@@ -8,7 +8,8 @@ import type { Study, StudyListQueryData, TagInfo } from '@custom-types/index';
 
 import { getStudyList } from '@api/getStudyList';
 
-import { LoginContext } from '@context/login/LoginProvider';
+import { useAuth } from '@hooks/useAuth';
+
 import { SearchContext } from '@context/search/SearchProvider';
 
 import * as S from '@pages/main-page/MainPage.style';
@@ -30,8 +31,9 @@ const defaultParam = {
 };
 
 const MainPage: React.FC = () => {
-  const { isLoggedIn } = useContext(LoginContext);
+  const { isLoggedIn } = useAuth();
   const { keyword } = useContext(SearchContext);
+
   const [selectedFilters, setSelectedFilters] = useState<Array<TagInfo>>([]);
   const navigate = useNavigate();
 
diff --git a/frontend/src/pages/main-page/components/create-new-study-button/CreateNewStudyButton.style.tsx b/frontend/src/pages/main-page/components/create-new-study-button/CreateNewStudyButton.style.tsx
index 0203e2734..e2bdc48e9 100644
--- a/frontend/src/pages/main-page/components/create-new-study-button/CreateNewStudyButton.style.tsx
+++ b/frontend/src/pages/main-page/components/create-new-study-button/CreateNewStudyButton.style.tsx
@@ -16,6 +16,7 @@ export const CreateNewStudyButton = styled.button`
     padding: 8px;
 
     border-radius: 50%;
+    border: none;
     background-color: ${theme.colors.primary.base};
 
     &:hover {
diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
index 491911c53..960bd25f5 100644
--- a/frontend/src/styles/theme.ts
+++ b/frontend/src/styles/theme.ts
@@ -1,6 +1,5 @@
-export interface Theme {}
-
 export const COLORS = {
+  YELLOW200: '#FFD54F',
   BLUE100: '#534bae',
   BLUE200: '#1a237e',
   BLUE300: '#000051',
@@ -23,6 +22,9 @@ export const theme = {
       light: COLORS.GRAY100,
       dark: COLORS.GRAY300,
     },
+    tertiary: {
+      base: COLORS.YELLOW200,
+    },
     white: COLORS.WHITE,
     black: COLORS.BLACK,
   },