[FE] issue133, 173: 스터디 가입 기능 구현 및 스터디원에 스터디장 추가

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;

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);
+      }
+    }
   `}
 `;

frontend/src/mocks/detailStudyHandlers.ts

@@ -11,6 +11,11 @@ const detailStudyHandlers = [
 
     return res(ctx.status(200), ctx.json(study));
   }),
+  rest.post('/api/studies/:studyId', (req, res, ctx) => {
+    const studyId = req.params.studyId;
+
+    return res(ctx.status(200));
+  }),
   rest.get('/api/studies/:studyId/reviews', (req, res, ctx) => {
     const size = req.url.searchParams.get('size');
     if (size) {

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,33 @@ 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');
+        studyDetailQueryResult.refetch();
+      },
+    });
   };
 
+  if (!studyId) {
+    alert('잘못된 접근입니다.');
+    return <Navigate to={PATH.MAIN} replace={true} />;
+  }
+
   if (studyDetailQueryResult.isFetching) return <div>Loading...</div>;
 
   if (!studyDetailQueryResult.data) return <div>No Data</div>;
@@ -62,12 +92,11 @@ const DetailPage = () => {
             <MarkdownRender markdownContent={description} />
           </S.MarkDownContainer>
           <Divider space={2} />
-          <StudyMemberSection members={members} />
+          <StudyMemberSection owner={owner} members={members} />
         </S.MainDescription>
         <S.FloatButtonContainer>
           <S.StickyContainer>
             <StudyFloatBox
-              studyId={id}
               ownerName={owner.username}
               currentMemberCount={currentMemberCount}
               maxMemberCount={maxMemberCount}
@@ -82,7 +111,6 @@ const DetailPage = () => {
       <StudyReviewSection studyId={id} />
       <S.FixedBottomContainer>
         <StudyWideFloatBox
-          studyId={id}
           currentMemberCount={currentMemberCount}
           maxMemberCount={maxMemberCount}
           enrollmentEndDate={enrollmentEndDate}

frontend/src/pages/detail-page/components/study-float-box/StudyFloatBox.tsx

@@ -6,18 +6,15 @@ import Button from '@components/button/Button';
 
 import * as S from '@detail-page/components/study-float-box/StudyFloatBox.style';
 
-// TODO: 스터디에 가입한 사람인지 아닌지 상태도 받아야 함
 export type StudyFloatBoxProps = Pick<
   StudyDetail,
   'enrollmentEndDate' | 'currentMemberCount' | 'maxMemberCount' | 'recruitmentStatus'
 > & {
-  studyId: number;
   ownerName: string;
-  handleRegisterBtnClick: (studyId: number) => React.MouseEventHandler<HTMLButtonElement>;
+  handleRegisterBtnClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 const StudyFloatBox: React.FC<StudyFloatBoxProps> = ({
-  studyId,
   enrollmentEndDate,
   currentMemberCount,
   maxMemberCount,
@@ -51,7 +48,7 @@ const StudyFloatBox: React.FC<StudyFloatBoxProps> = ({
           <span>{ownerName}</span>
         </S.Owner>
       </S.StudyInfo>
-      <Button disabled={!isOpen} onClick={handleRegisterBtnClick(studyId)}>
+      <Button disabled={!isOpen} onClick={handleRegisterBtnClick}>
         {isOpen ? '스터디 가입하기' : '모집이 마감되었습니다'}
       </Button>
     </S.StudyFloatBox>

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;
 

frontend/src/pages/detail-page/components/study-member-section/StudyMemberSection.tsx

@@ -1,59 +1,101 @@
 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';
 
 import MoreButton from '@detail-page/components/more-button/MoreButton';
 
 export interface StudyMemberSectionProps {
+  owner: Owner;
   members: Array<Member>;
 }
 
-const StudyMemberSection: React.FC<StudyMemberSectionProps> = ({ members }) => {
+const StudyMemberSection: React.FC<StudyMemberSectionProps> = ({ owner, members }) => {
   const [showAll, setShowAll] = useState<boolean>(false);
 
+  const totalMembers = [owner, ...members];
+
   const handleShowMoreBtnClick = () => {
     setShowAll(prev => !prev);
   };
 
+  const renderMembers = () => {
+    if (totalMembers.length === 0) {
+      return <li>스터디원이 없습니다</li>;
+    }
+
+    if (showAll) {
+      return (
+        <>
+          <S.Owner key={owner.id}>
+            <a href={owner.profileUrl}>
+              <TbCrown size={20} />
+              <StudyMemberCard
+                username={owner.username}
+                imageUrl={owner.imageUrl}
+                startDate={changeDateSeperator('2022-07-15')}
+                studyCount={10}
+              />
+            </a>
+          </S.Owner>
+          {members.map(({ id, username, imageUrl, profileUrl }) => (
+            <li key={id}>
+              <a href={profileUrl}>
+                <StudyMemberCard
+                  username={username}
+                  imageUrl={imageUrl}
+                  startDate={changeDateSeperator('2022-07-15')}
+                  studyCount={10}
+                />
+              </a>
+            </li>
+          ))}
+        </>
+      );
+    }
+
+    return (
+      <>
+        <S.Owner key={owner.id}>
+          <a href={owner.profileUrl}>
+            <TbCrown size={20} />
+            <StudyMemberCard
+              username={owner.username}
+              imageUrl={owner.imageUrl}
+              startDate={changeDateSeperator('2022-07-15')}
+              studyCount={10}
+            />
+          </a>
+        </S.Owner>
+        {members.slice(0, DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT - 1).map(({ id, username, imageUrl, profileUrl }) => (
+          <li key={id}>
+            <a href={profileUrl}>
+              <StudyMemberCard
+                username={username}
+                imageUrl={imageUrl}
+                startDate={changeDateSeperator('2022-07-15')}
+                studyCount={10}
+              />
+            </a>
+          </li>
+        ))}
+      </>
+    );
+  };
+
   return (
     <S.StudyMemberSection>
       <S.Title>
-        스터디원 <span>{members.length}명</span>
+        스터디원 <span>{totalMembers.length}명</span>
       </S.Title>
-      <S.MemberList>
-        {showAll
-          ? members.map(({ id, username, imageUrl, profileUrl }) => (
-              <li key={id}>
-                <a href={profileUrl}>
-                  <StudyMemberCard
-                    username={username}
-                    imageUrl={imageUrl}
-                    startDate={changeDateSeperator('2022-07-15')}
-                    studyCount={10}
-                  />
-                </a>
-              </li>
-            ))
-          : members.slice(0, DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT).map(({ id, username, imageUrl, profileUrl }) => (
-              <li key={id}>
-                <a href={profileUrl}>
-                  <StudyMemberCard
-                    username={username}
-                    imageUrl={imageUrl}
-                    startDate={changeDateSeperator('2022-07-15')}
-                    studyCount={10}
-                  />
-                </a>
-              </li>
-            ))}
-      </S.MemberList>
+      <S.MemberList>{renderMembers()}</S.MemberList>
       {members.length > DEFAULT_VISIBLE_STUDY_MEMBER_CARD_COUNT && (
         <S.MoreButtonContainer>
           <MoreButton

frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx

@@ -13,12 +13,10 @@ export type StudyWideFloatBoxProps = Pick<
   StudyDetail,
   'enrollmentEndDate' | 'currentMemberCount' | 'maxMemberCount' | 'recruitmentStatus'
 > & {
-  studyId: number;
-  handleRegisterBtnClick: (studyId: number) => React.MouseEventHandler<HTMLButtonElement>;
+  handleRegisterBtnClick: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
-  studyId,
   enrollmentEndDate,
   currentMemberCount,
   maxMemberCount,
@@ -55,7 +53,7 @@ const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
           `}
           fluid={true}
           disabled={!isOpen}
-          onClick={handleRegisterBtnClick(studyId)}
+          onClick={handleRegisterBtnClick}
         >
           {isOpen ? '가입하기' : '모집 마감'}
         </Button>

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>

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 {