[feat] 카카오 배포 링크 수정, 내팀-지원한 팀 페이지 api 연동 전 완료 (#68)

* feat(#63) : 내가 오픈한 팀 관리

* feat(#63) :내가 지원한 팀 페이지 어느정도 완료

* feat(#63) : 오픈된 팀  상세보기 페이지 레이아웃

* feat(#63) : one-button-modal 완료. 네모

* feat(#63) : 티켓수 확인, 티켓 사용 로직 에러시 모달

* feat(#63) : 카카오 배포 링크 수정, vercel 배포

* fix(#63) : route myteam 대소문자 변경

* fix(#63) : myTeamApply 미사용 변수 제거

* feat(#63) : vercel production branch 반영 체크용 커밋

src/Router.tsx

@@ -18,6 +18,9 @@ import ScrollToTop from './components/common/ScrollToTop';
 import MyTeam from './pages/myteam/MyTeam';
 import MyTeamOpen from './components/myteam/MyTeamOpen';
 import ContestTeam from './pages/contestTeam/ContestTeam';
+import MyTeamManagement from './pages/myteam/MyTeamManagement';
+import MyTeamApply from './pages/myteam/MyTeamApply';
+import Modal from './components/common/Modal';
 import ExternalReview from './pages/review/ExternalReview';
 import MyTeamCreate from './pages/myteam/MyTeamCreate';
 
@@ -44,10 +47,14 @@ function Router() {
 
         <Route path="/myteam/:userId" element={<MyTeam />}>
           <Route path="open" element={<MyTeamOpen />} />
-          <Route path="apply" element={<div>지원한 팀</div>} />
+          <Route path="apply" element={<MyTeamApply />} />
           <Route path="active" element={<div>활동중인 팀</div>} />
           <Route path="end" element={<div>활동했던 팀</div>} />
         </Route>
+        <Route
+          path="/myteam/:userId/:contestId/:teamId"
+          element={<MyTeamManagement />}
+        ></Route>
 
         <Route path="/myteam/create/:contestId" element={<MyTeamCreate />} />
         <Route path="/list/:contestId" element={<Contest />} />
@@ -64,6 +71,7 @@ function Router() {
         <Route path="/payment/charge" element={<PaymentCharge />} />
       </Routes>
       <Footer />
+      <Modal />
     </BrowserRouter>
   );
 }

src/apis/myTeam/getAppliedTeam.ts

@@ -0,0 +1,9 @@
+import { AxiosPromise } from 'axios';
+import Axios from '../axios';
+
+import { ResponseAppliedTeam } from '../../interface/MyTeam';
+
+export const getAppliedTeam = (): AxiosPromise<ResponseAppliedTeam> =>
+  Axios.get(`/api/team/applied-team`, {});
+
+export default getAppliedTeam;

src/components/common/Modal.tsx

@@ -0,0 +1,19 @@
+import NeedLoginModal from './NeedLoginModal';
+import { useRecoilState } from 'recoil';
+import { loginModalState } from '../../recoil/atom';
+
+const Modal = () => {
+  const [isLoginModalVisible, setIsLoginModalVisible] =
+    useRecoilState(loginModalState);
+  return (
+    <>
+      isLoginModalVisible && (
+      <NeedLoginModal
+        isModalVisible={isLoginModalVisible}
+        setIsModalVisible={setIsLoginModalVisible}
+      />
+      )
+    </>
+  );
+};
+export default Modal;

src/components/common/NeedLoginModal.tsx

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+
+import loginSrc from '/assets/images/common/login-modal.svg';
+import OneSquareButtonModal from './OneSquareButtonModal';
+import { useNavigate } from 'react-router-dom';
+
+interface NeedLoginModalProps {
+  isModalVisible: boolean;
+  setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  currTicketAmount?: number;
+}
+const NeedLoginModal: React.FC<NeedLoginModalProps> = ({
+  isModalVisible,
+  setIsModalVisible,
+}) => {
+  const navigate = useNavigate();
+  const handleButtonClick = () => {
+    // handleUseTicket.mutate();
+    // setIsModalVisible(false);
+    // window.location.reload();
+    setIsModalVisible(false);
+    navigate('./login');
+  };
+  const handleCloseButtonClick = () => {
+    setIsModalVisible(false);
+  };
+
+  return (
+    <OneSquareButtonModal
+      button={{
+        text: '로그인 하러 가기',
+        onClickFunc: handleButtonClick,
+      }}
+      $isModalVisible={isModalVisible}
+      onCloseClickFunc={handleCloseButtonClick}
+    >
+      <LoginModalInner>
+        <LoginModalimg src={loginSrc} />
+
+        <LoginModalTitle>비회원은 프로필을 볼 수 없어요</LoginModalTitle>
+        <LoginModalContent>
+          지금 로그인하고 팀원들의 프로필을 자유롭게 둘러보세요!
+        </LoginModalContent>
+      </LoginModalInner>
+    </OneSquareButtonModal>
+  );
+};
+const LoginModalInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.8rem;
+
+  padding: 5rem;
+`;
+const LoginModalimg = styled.img`
+  width: 12.7rem;
+`;
+const LoginModalTitle = styled.div`
+  ${({ theme }) => theme.fonts.heading4};
+  color: ${({ theme }) => theme.colors.primary60};
+`;
+const LoginModalContent = styled.div`
+  ${({ theme }) => theme.fonts.bodyL};
+  color: ${({ theme }) => theme.colors.gray90};
+`;
+export default NeedLoginModal;

src/components/common/OneSquareButtonModal.tsx

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+import { ReactNode } from 'react';
+
+import closeSrc from '/assets/images/common/closeButton.svg';
+
+interface OneSquareButtonModalProps {
+  children: ReactNode; // 자식 컴포넌트
+  button: {
+    text: string; // 버튼 텍스트
+    onClickFunc: () => void; // 버튼 onClick 콜백 함수
+  };
+  onCloseClickFunc: () => void; // x버튼 onClick 콜백 함수
+  $isModalVisible: boolean; // 모달창이 보여지는지 여부
+}
+const OneSquareButtonModal: React.FC<OneSquareButtonModalProps> = ({
+  children,
+  button,
+  onCloseClickFunc,
+  $isModalVisible,
+}) => {
+  return (
+    <BlurLayout $isModalVisible={$isModalVisible}>
+      <ModalContainer>
+        <CloseImg src={closeSrc} onClick={onCloseClickFunc} />
+        {children}
+
+        <Button onClick={button.onClickFunc}>{button.text}</Button>
+      </ModalContainer>
+    </BlurLayout>
+  );
+};
+const BlurLayout = styled.div<{ $isModalVisible: boolean }>`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(43, 43, 46, 0.5);
+  backdrop-filter: blur(8px);
+  color: ${({ theme }) => theme.colors.white};
+  z-index: 999;
+
+  display: ${(props) => (props.$isModalVisible ? 'flex' : 'none')};
+  justify-content: center;
+  align-items: center;
+`;
+const ModalContainer = styled.div`
+  position: relative;
+  min-width: 60rem;
+  /* height: 36rem; */
+
+  border-radius: 1.2rem;
+  border: 1px solid ${({ theme }) => theme.colors.gray20};
+  background-color: ${({ theme }) => theme.colors.white};
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-between;
+
+  //모달창을 벗어나지 않음
+  overflow: hidden;
+
+  /* padding: 3rem; */
+`;
+
+const CloseImg = styled.img`
+  position: absolute;
+  right: 1.5rem;
+  top: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+`;
+const Button = styled.div`
+  width: 100%;
+  height: 7.5rem;
+
+  ${({ theme }) => theme.fonts.heading5};
+
+  display: flex;
+  flex-grow: 0;
+
+  background-color: ${({ theme }) => theme.colors.primary60};
+  color: ${({ theme }) => theme.colors.white};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;
+
+export default OneSquareButtonModal;

src/components/common/ProfileBoxMember.tsx

@@ -81,7 +81,7 @@ const Name = styled.div`
   color: ${(props) => props.theme.colors.gray90};
   margin: 0.8rem 0;
 
-  font-size: 130%;
+  /* font-size: 130%; */
 `;
 const Hr = styled.div`
   width: 100%;
@@ -95,7 +95,7 @@ const Hr = styled.div`
 const Part = styled.div`
   ${(props) => props.theme.fonts.bodyXS};
   color: ${(props) => props.theme.colors.gray70};
-  font-size: 90%;
+  /* font-size: 90%; */
 
   text-align: center;
 

src/components/contest/ContestInfo.tsx

@@ -53,7 +53,7 @@ const ContestInfoLayout = styled.div`
   margin: auto;
 `;
 const ContestInfoTitle = styled.div`
-  ${(props) => props.theme.fonts.heading2_1};
+  ${(props) => props.theme.fonts.heading3};
   color: ${(props) => props.theme.colors.gray90};
 
   margin-top: 3rem;

src/components/contestTeam/TeamMembers.tsx

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+import { ProfileBoxProps, ProfileProps } from '../../interface/Contest';
+import ProfileBoxMember from '../common/ProfileBoxMember';
+
+const TeamMembers = ({
+  memberDatas,
+  leftMember,
+  cur,
+  max,
+}: {
+  memberDatas?: ProfileProps[];
+  leftMember?: number;
+  cur?: number;
+  max?: number;
+}) => {
+  return (
+    <TeamMembersLayout>
+      <TeamMembersTitle>
+        팀원들
+        <TeamMembersLeft>
+          <span>{leftMember}</span>자리 남았어요!
+        </TeamMembersLeft>
+      </TeamMembersTitle>
+      <TeamMembersLeftInfo>
+        지금까지 정원 <span>{max}</span>명 중 <span>{cur}</span>명의 팀원이
+        합류했어요.
+      </TeamMembersLeftInfo>
+      <TeamMembersProfileContainer>
+        {memberDatas?.map((memberData, index) => {
+          const teamMemberDataProps: ProfileBoxProps = {
+            hasProfileButton: false,
+            isBgColorWhite: false,
+            hasBorder: true,
+            memberInfo: memberData,
+            width: 20,
+            height: 27.6,
+          };
+          return <ProfileBoxMember {...teamMemberDataProps} key={index} />;
+        })}
+      </TeamMembersProfileContainer>
+    </TeamMembersLayout>
+  );
+};
+const TeamMembersLayout = styled.div`
+  width: 100%;
+`;
+const TeamMembersTitle = styled.div`
+  ${(props) => props.theme.fonts.heading3};
+  color: ${(props) => props.theme.colors.gray100};
+
+  display: flex;
+  /* justify-content: center; */
+  align-items: center;
+  gap: 1.6rem;
+`;
+const TeamMembersLeft = styled.div`
+  ${(props) => props.theme.fonts.bodyM};
+  color: ${(props) => props.theme.colors.gray100};
+
+  border: 1px solid ${(props) => props.theme.colors.error20};
+  border-radius: 0.8rem;
+  padding: 0.4rem 1.2rem;
+  span {
+    ${(props) => props.theme.fonts.subtitleM};
+    color: ${(props) => props.theme.colors.error90};
+  }
+`;
+const TeamMembersLeftInfo = styled.div`
+  ${(props) => props.theme.fonts.bodyXL};
+  color: ${(props) => props.theme.colors.gray80};
+
+  span {
+    ${(props) => props.theme.fonts.subtitleXL};
+    color: ${(props) => props.theme.colors.primary60};
+  }
+`;
+const TeamMembersProfileContainer = styled.div``;
+export default TeamMembers;

src/components/footer/Footer.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Footer = () => {
-  return <Test>이거 프리텐다드맞아d안녕하세요!A</Test>;
+  return <Test>제발 반영돼라 제발!A</Test>;
 };
 export default Footer;
 

src/components/join/JoinCompleteModal.tsx

@@ -15,7 +15,7 @@ const JoinCompleteModal: React.FC<JoinCompleteModalProps> = ({
   };
   const handleRightButtonClick = () => {
     console.log('right clicked');
-    navigate('/profile/41314'); //수정 필요
+    navigate('./create'); //수정 필요
   };
   const handleCloseButtonClick = () => {
     console.log('close clicked');