From 5a4741bf94f4518ada2692b75582b9143b959e28 Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sat, 30 Jul 2022 17:27:38 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?=
 =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EB=AA=A8=ED=82=B9=20=EC=84=9C=EB=B2=84=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/postJoiningStudy.ts      | 8 ++++++++
 frontend/src/mocks/detailStudyHandlers.ts | 5 +++++
 2 files changed, 13 insertions(+)
 create mode 100644 frontend/src/api/postJoiningStudy.ts

diff --git a/frontend/src/api/postJoiningStudy.ts b/frontend/src/api/postJoiningStudy.ts
new file mode 100644
index 000000000..defe5b535
--- /dev/null
+++ b/frontend/src/api/postJoiningStudy.ts
@@ -0,0 +1,8 @@
+import axiosInstance from '@api/axiosInstance';
+
+const postNewStudy = async (studyId: number) => {
+  const response = await axiosInstance.post(`/api/studies/${studyId}`);
+  return response;
+};
+
+export default postNewStudy;
diff --git a/frontend/src/mocks/detailStudyHandlers.ts b/frontend/src/mocks/detailStudyHandlers.ts
index f70a0be27..e260d8050 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));
+  }),
 ];
 
 export default detailStudyHandlers;

From a253173ce3353797260bf53b582464d3e883568f Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sat, 30 Jul 2022 17:28:04 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EA=B0=80=EC=9E=85=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/detail-page/DetailPage.tsx | 37 ++++++++++++++++---
 .../study-float-box/StudyFloatBox.tsx         |  6 +--
 .../StudyWideFloatBox.tsx                     |  6 +--
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/detail-page/DetailPage.tsx b/frontend/src/pages/detail-page/DetailPage.tsx
index 6b0114be7..179f12a57 100644
--- a/frontend/src/pages/detail-page/DetailPage.tsx
+++ b/frontend/src/pages/detail-page/DetailPage.tsx
@@ -1,7 +1,16 @@
-import { useParams } from 'react-router-dom';
+import { AxiosResponse } from 'axios';
+import { useContext } from 'react';
+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 { LoginContext } from '@context/login/LoginProvider';
+
 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 +27,32 @@ import useFetchDetail from '@detail-page/hooks/useFetchDetail';
 const DetailPage = () => {
   const { studyId } = useParams() as { studyId: string };
 
+  const { isLoggedIn } = useContext(LoginContext);
+
   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');
+      },
+    });
   };
 
+  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>;
@@ -67,7 +96,6 @@ const DetailPage = () => {
         <S.FloatButtonContainer>
           <S.StickyContainer>
             <StudyFloatBox
-              studyId={id}
               owner={owner.username}
               currentMemberCount={currentMemberCount}
               maxMemberCount={maxMemberCount}
@@ -82,7 +110,6 @@ const DetailPage = () => {
       <StudyReviewSection studyId={id} />
       <S.FixedBottomContainer>
         <StudyWideFloatBox
-          studyId={id}
           currentMemberCount={currentMemberCount}
           maxMemberCount={maxMemberCount}
           deadline={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 fe329b0fc..0f8d1fc4a 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
@@ -5,17 +5,15 @@ import Button from '@components/button/Button';
 import * as S from '@detail-page/components/study-float-box/StudyFloatBox.style';
 
 export type StudyFloatBoxProps = {
-  studyId: number;
   deadline: string;
   currentMemberCount: number;
   maxMemberCount: number;
   owner: string;
   status: 'OPEN' | 'CLOSE'; // TODO: 스터디에 가입한 사람인지 아닌지 상태도 받아야 함
-  handleRegisterBtnClick: (studyId: number) => React.MouseEventHandler<HTMLButtonElement>;
+  handleRegisterBtnClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 const StudyFloatBox: React.FC<StudyFloatBoxProps> = ({
-  studyId,
   deadline,
   currentMemberCount,
   maxMemberCount,
@@ -49,7 +47,7 @@ const StudyFloatBox: React.FC<StudyFloatBoxProps> = ({
           <span>{owner}</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-wide-float-box/StudyWideFloatBox.tsx b/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx
index ae79d3666..9f27039a8 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
@@ -7,16 +7,14 @@ import Button from '@components/button/Button';
 import * as S from '@detail-page/components/study-wide-float-box/StudyWideFloatBox.style';
 
 export type StudyWideFloatBoxProps = {
-  studyId: number;
   deadline: string;
   currentMemberCount: number;
   maxMemberCount: number;
   status: 'OPEN' | 'CLOSE'; // TODO: 스터디에 가입한 사람인지 아닌지 상태도 받아야 함
-  handleRegisterBtnClick: (studyId: number) => React.MouseEventHandler<HTMLButtonElement>;
+  handleRegisterBtnClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
-  studyId,
   deadline,
   currentMemberCount,
   maxMemberCount,
@@ -53,7 +51,7 @@ const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
           `}
           fluid={true}
           disabled={!isOpen}
-          onClick={handleRegisterBtnClick(studyId)}
+          onClick={handleRegisterBtnClick}
         >
           {isOpen ? '가입하기' : '모집 마감'}
         </Button>

From 6a22092704bc096e1ca0faed47142c3649b03cfb Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sat, 30 Jul 2022 17:28:22 +0900
Subject: [PATCH 03/10] =?UTF-8?q?refactor:=20LoginRedirectPage=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../login-redirect-page/LoginRedirectPage.tsx | 42 +++++++++----------
 1 file changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx b/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
index f90fcfaf6..ce1437ffb 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>

From 7f37285bbae815c78632c69702b7cddc5e6515d9 Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sat, 30 Jul 2022 17:48:32 +0900
Subject: [PATCH 04/10] =?UTF-8?q?style:=20DropDownBox=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/drop-down-box/DropDownBox.style.tsx    | 11 +++++++++++
 1 file changed, 11 insertions(+)

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..423d86f8b 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: slidein 0.1s ease;
+    @keyframes slidein {
+      0% {
+        transform: scale(1, 0);
+      }
+      100% {
+        transform: scale(1, 1);
+      }
+    }
   `}
 `;

From 7c18d741352802f3f51065a15490d4e3cfd272b7 Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sat, 30 Jul 2022 19:10:36 +0900
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EC=8A=A4=ED=84=B0=EB=94=94=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=84=B0=EB=94=94=EC=9B=90=EC=97=90=20=EC=8A=A4=ED=84=B0?=
 =?UTF-8?q?=EB=94=94=EC=9E=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/studies.json               | 102 +++++++++---------
 frontend/src/pages/detail-page/DetailPage.tsx |   3 +-
 .../StudyMemberSection.tsx                    |  62 ++++++-----
 .../CreateNewStudyButton.style.tsx            |   1 +
 4 files changed, 89 insertions(+), 79 deletions(-)

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 78a928163..a29034810 100644
--- a/frontend/src/pages/detail-page/DetailPage.tsx
+++ b/frontend/src/pages/detail-page/DetailPage.tsx
@@ -44,6 +44,7 @@ const DetailPage = () => {
       },
       onSuccess: () => {
         alert('가입했습니다 :D');
+        studyDetailQueryResult.refetch();
       },
     });
   };
@@ -91,7 +92,7 @@ const DetailPage = () => {
             <MarkdownRender markdownContent={description} />
           </S.MarkDownContainer>
           <Divider space={2} />
-          <StudyMemberSection members={members} />
+          <StudyMemberSection members={[owner, ...members]} />
         </S.MainDescription>
         <S.FloatButtonContainer>
           <S.StickyContainer>
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..60e9958de 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
@@ -22,38 +22,46 @@ const StudyMemberSection: React.FC<StudyMemberSectionProps> = ({ members }) => {
     setShowAll(prev => !prev);
   };
 
+  const renderMembers = () => {
+    if (members.length === 0) {
+      return <li>스터디원이 없습니다</li>;
+    }
+
+    if (showAll) {
+      return 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 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>
+    ));
+  };
+
   return (
     <S.StudyMemberSection>
       <S.Title>
         스터디원 <span>{members.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/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 {

From e84f16b50eda562c18a91325f38b458273f620f9 Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sat, 30 Jul 2022 19:42:53 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EB=B0=A9=EC=9E=A5=EA=B3=BC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=84=B0=EB=94=94=EC=9B=90=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B5=AC=EB=B3=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/detail-page/DetailPage.tsx |  2 +-
 .../StudyMemberSection.style.tsx              | 15 ++++
 .../StudyMemberSection.tsx                    | 84 +++++++++++++------
 frontend/src/styles/theme.ts                  |  6 +-
 4 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/detail-page/DetailPage.tsx b/frontend/src/pages/detail-page/DetailPage.tsx
index a29034810..007f01907 100644
--- a/frontend/src/pages/detail-page/DetailPage.tsx
+++ b/frontend/src/pages/detail-page/DetailPage.tsx
@@ -92,7 +92,7 @@ const DetailPage = () => {
             <MarkdownRender markdownContent={description} />
           </S.MarkDownContainer>
           <Divider space={2} />
-          <StudyMemberSection members={[owner, ...members]} />
+          <StudyMemberSection owner={owner} members={members} />
         </S.MainDescription>
         <S.FloatButtonContainer>
           <S.StickyContainer>
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 60e9958de..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,54 +13,87 @@ 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 (members.length === 0) {
+    if (totalMembers.length === 0) {
       return <li>스터디원이 없습니다</li>;
     }
 
     if (showAll) {
-      return members.map(({ id, username, imageUrl, profileUrl }) => (
-        <li key={id}>
-          <a href={profileUrl}>
+      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={username}
-              imageUrl={imageUrl}
+              username={owner.username}
+              imageUrl={owner.imageUrl}
               startDate={changeDateSeperator('2022-07-15')}
               studyCount={10}
             />
           </a>
-        </li>
-      ));
-    }
-
-    return 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.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>{renderMembers()}</S.MemberList>
       {members.length > DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT && (
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,
   },

From dd4a8558995f1baaa6a11e081aea61d426e2616c Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 16:06:22 +0900
Subject: [PATCH 07/10] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=ED=99=95=EC=9D=B8=20=EB=A1=9C=EC=A7=81?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useAuth 확장
---
 frontend/src/App.tsx                          | 7 +++----
 frontend/src/hooks/useAuth.ts                 | 4 ++--
 frontend/src/layout/header/Header.tsx         | 4 +---
 frontend/src/pages/detail-page/DetailPage.tsx | 5 ++---
 frontend/src/pages/main-page/MainPage.tsx     | 6 ++++--
 5 files changed, 12 insertions(+), 14 deletions(-)

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/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/pages/detail-page/DetailPage.tsx b/frontend/src/pages/detail-page/DetailPage.tsx
index 007f01907..443d4a9e4 100644
--- a/frontend/src/pages/detail-page/DetailPage.tsx
+++ b/frontend/src/pages/detail-page/DetailPage.tsx
@@ -1,5 +1,4 @@
 import { AxiosResponse } from 'axios';
-import { useContext } from 'react';
 import { useMutation } from 'react-query';
 import { Navigate, useParams } from 'react-router-dom';
 
@@ -9,7 +8,7 @@ import { changeDateSeperator } from '@utils/dates';
 
 import postJoiningStudy from '@api/postJoiningStudy';
 
-import { LoginContext } from '@context/login/LoginProvider';
+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';
@@ -27,7 +26,7 @@ import useFetchDetail from '@detail-page/hooks/useFetchDetail';
 const DetailPage = () => {
   const { studyId } = useParams() as { studyId: string };
 
-  const { isLoggedIn } = useContext(LoginContext);
+  const { isLoggedIn } = useAuth();
 
   const studyDetailQueryResult = useFetchDetail(Number(studyId));
   const { mutate } = useMutation<AxiosResponse, Error, number>(postJoiningStudy);
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();
 

From 5035b8b09312ab65d915fa9b65a2940e4bac08c3 Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 16:33:55 +0900
Subject: [PATCH 08/10] =?UTF-8?q?feat:=20post=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EB=B0=98=ED=99=98=EA=B0=92=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/postJoiningStudy.ts | 6 +++---
 frontend/src/api/postNewStudy.ts     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/api/postJoiningStudy.ts b/frontend/src/api/postJoiningStudy.ts
index defe5b535..3ca556513 100644
--- a/frontend/src/api/postJoiningStudy.ts
+++ b/frontend/src/api/postJoiningStudy.ts
@@ -1,8 +1,8 @@
 import axiosInstance from '@api/axiosInstance';
 
-const postNewStudy = async (studyId: number) => {
+const postJoiningStudy = async (studyId: number) => {
   const response = await axiosInstance.post(`/api/studies/${studyId}`);
-  return response;
+  return response.data;
 };
 
-export default postNewStudy;
+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;

From 4c65cf2b7194fda92ab508acb97894ea7f33a9ce Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 16:34:38 +0900
Subject: [PATCH 09/10] refactor: slidein -> slide-down

---
 .../header/components/drop-down-box/DropDownBox.style.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 423d86f8b..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
@@ -28,8 +28,8 @@ export const DropDownBox = styled.div<Pick<DropDownBoxProps, 'top' | 'bottom' |
     z-index: 3;
 
     transform-origin: top;
-    animation: slidein 0.1s ease;
-    @keyframes slidein {
+    animation: slide-down 0.1s ease;
+    @keyframes slide-down {
       0% {
         transform: scale(1, 0);
       }

From 598c4b2a2fbddb5d376d7b776d6acd9992422e4f Mon Sep 17 00:00:00 2001
From: nan-noo <54002105+nan-noo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 16:35:01 +0900
Subject: [PATCH 10/10] =?UTF-8?q?refactor:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20=EC=97=90=EB=9F=AC=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx b/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
index ce1437ffb..269714e6b 100644
--- a/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
+++ b/frontend/src/pages/login-redirect-page/LoginRedirectPage.tsx
@@ -30,7 +30,7 @@ const LoginRedirectPage: React.FC = () => {
 
     mutate(codeParam, {
       onError: error => {
-        alert(error.message);
+        alert(error.message ?? '로그인에 실패했습니다.');
         navigate(PATH.MAIN, { replace: true });
       },
       onSuccess: data => {