✨ Feat : app.tsx 경로 재설정 및 WriteRetroRevise 페이지 기능 추가 (#125)

Co-authored-by: geumbin <[email protected]>

src/App.tsx

@@ -80,6 +80,30 @@ const App = () => {
               }
             ></Route>
           </Route>
+          <Route
+            path="/WriteRetroPersonalPage"
+            element={
+              <PrivateRoute>
+                <WriteRetroPersonalPage />
+              </PrivateRoute>
+            }
+          ></Route>
+          <Route
+            path="/WriteRetroReviseTeamPage"
+            element={
+              <PrivateRoute>
+                <WriteRetroReviseTeamPage />
+              </PrivateRoute>
+            }
+          ></Route>
+          <Route
+            path="/WriteRetroRevisePersonalPage"
+            element={
+              <PrivateRoute>
+                <WriteRetroRevisePersonalPage />
+              </PrivateRoute>
+            }
+          ></Route>
           <Route element={<ProfileLayout />}>
             <Route
               path="/my"

src/components/writeRetro/layout/Manage.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { IoPersonCircle } from 'react-icons/io5';
+import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
+
+export const ManageMenu = () => {
+  const [clicked, setClicked] = useState(false);
+  const handleClick = () => {
+    setClicked(!clicked);
+  };
+  const color = clicked ? '#111B47' : '#A9A9A9';
+
+  return (
+    <>
+      <S.SettingMenuStyle>
+        <S.SettingMenuBox color={color} onClick={handleClick}>
+          팀원 관리
+        </S.SettingMenuBox>
+        <Manage></Manage>
+      </S.SettingMenuStyle>
+    </>
+  );
+};
+
+export const Manage = () => {
+  return (
+    <>
+      <S.ManageStyle>
+        <ManageTitle></ManageTitle>
+        <ManageSearch></ManageSearch>
+        <ManageTable></ManageTable>
+      </S.ManageStyle>
+    </>
+  );
+};
+
+export const ManageTitle = () => {
+  return (
+    <div style={{ height: '46px', display: 'flex' }}>
+      <S.ManageTitleStyle>팀원 관리</S.ManageTitleStyle>
+      <S.InvitationLinkButton>팀원 초대 링크</S.InvitationLinkButton>
+      <S.LinkExpirationText>ꞏ 링크는 2시간 후에 만료됩니다.</S.LinkExpirationText>
+    </div>
+  );
+};
+
+export const ManageSearch = () => {
+  return (
+    <div style={{ display: 'flex', marginTop: '20px' }}>
+      <S.ManageSearchInput placeholder="이름 또는 이메일 주소를 검색"></S.ManageSearchInput>
+      <S.ManageSearchButton>검색</S.ManageSearchButton>
+    </div>
+  );
+};
+
+export const ManageTable = () => {
+  return (
+    <>
+      <S.ManageTableStyle>
+        {/* TableHeader */}
+        <S.ManageTableTrStyle>
+          <S.ManageTableNickNameTh>닉네임</S.ManageTableNickNameTh>
+          <S.ManageTableEmailTh>이메일</S.ManageTableEmailTh>
+          <S.ManageTableDateTh>회고 참여 일자</S.ManageTableDateTh>
+          <S.ManageTableTaskTh>직업</S.ManageTableTaskTh>`
+        </S.ManageTableTrStyle>
+        {/* TableBody */}
+        <ManageTableData></ManageTableData>
+      </S.ManageTableStyle>
+    </>
+  );
+};
+
+export const ManageTableData = () => {
+  const nickName: string = '이채연';
+  const Email: string = '[email protected]';
+  const Date: string = '2024-03-12 12:50';
+
+  return (
+    <>
+      <S.ManageTableTrStyle>
+        <S.ManageTableNickNameTd>
+          <div style={{ display: 'flex', backgroundColor: 'red' }}>
+            <div>
+              <IoPersonCircle size={'39px'} color="#C3CAD9" />
+            </div>
+            <div style={{ width: '164px', textAlign: 'center' }}>{nickName}</div>
+          </div>
+        </S.ManageTableNickNameTd>
+        <S.ManageTableEmailTd>{Email}</S.ManageTableEmailTd>
+        <S.ManageTableDateTd>{Date}</S.ManageTableDateTd>
+        <S.ManageTableTaskTd></S.ManageTableTaskTd>
+      </S.ManageTableTrStyle>
+    </>
+  );
+};

src/components/writeRetro/layout/Setting.tsx

@@ -40,6 +40,24 @@ export const SettingMenu = () => {
   );
 };
 
+export const Setting = () => {
+  return (
+    <>
+      <S.SettingStyle>
+        <SettingImage></SettingImage>
+        <ReviseTitle></ReviseTitle>
+        <ReviseType></ReviseType>
+        <ReviseTemplateType></ReviseTemplateType>
+        <ReviseLeader></ReviseLeader>
+        <ReviseExplanation></ReviseExplanation>
+        <ReviseCompletion></ReviseCompletion>
+        <ReviseDelete></ReviseDelete>
+        <ReviseButton></ReviseButton>
+      </S.SettingStyle>
+    </>
+  );
+};
+
 export const SettingImage = () => {
   return (
     <>
@@ -174,29 +192,11 @@ export const ReviseDelete = () => {
 
 export const ReviseButton = () => {
   return (
-    <div style={{ marginTop: '25x', position: 'relative' }}>
+    <div style={{ marginTop: '25px', position: 'relative' }}>
       <div style={{ display: 'flex', marginLeft: '200px' }}>
         <S.ReviseButtonStyle>CANCLE</S.ReviseButtonStyle>
         <S.ReviseButtonStyle>SAVE</S.ReviseButtonStyle>
       </div>
     </div>
   );
 };
-
-export const Setting = () => {
-  return (
-    <>
-      <S.SettingStyle>
-        <SettingImage></SettingImage>
-        <ReviseTitle></ReviseTitle>
-        <ReviseType></ReviseType>
-        <ReviseTemplateType></ReviseTemplateType>
-        <ReviseLeader></ReviseLeader>
-        <ReviseExplanation></ReviseExplanation>
-        <ReviseCompletion></ReviseCompletion>
-        <ReviseDelete></ReviseDelete>
-        <ReviseButton></ReviseButton>
-      </S.SettingStyle>
-    </>
-  );
-};

src/pages/WriteRetroReviseTeamPage.tsx

@@ -1,10 +1,12 @@
-import { SettingMenu, SettingTitle } from '@/components/writeRetro/layout/Setting';
+import { ManageMenu } from '@/components/writeRetro/layout/Manage';
+import { SettingTitle } from '@/components/writeRetro/layout/Setting';
 
 export const WriteRetroReviseTeamPage = () => {
   return (
     <>
       <SettingTitle></SettingTitle>
-      <SettingMenu></SettingMenu>
+      {/* <SettingMenu></SettingMenu> */}
+      <ManageMenu></ManageMenu>
     </>
   );
 };

src/styles/writeRetroStyles/ReviseLayout.style.ts

@@ -210,3 +210,138 @@ export const ReviseButtonStyle = styled.button`
     cursor: pointer;
   }
 `;
+
+export const ManageStyle = styled.div`
+  width: auto;
+  /* height: auto; */
+  height: 800px;
+  position: absolute;
+  top: 111px;
+  left: 10px;
+`;
+
+export const ManageTitleStyle = styled.p`
+  width: auto;
+  height: 46px;
+  font-size: 30px;
+  font-weight: 500;
+  color: #434343;
+`;
+
+export const InvitationLinkButton = styled.button`
+  width: 130px;
+  height: 33px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 33px;
+  text-align: center;
+  background-color: #2f4dce;
+  border-radius: 5px;
+  margin: auto 0;
+  margin-left: 35px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const LinkExpirationText = styled.p`
+  font-size: 9px;
+  font-weight: 500;
+  color: #f93333;
+  margin-top: 23px;
+  margin-left: 10px;
+`;
+
+export const ManageSearchInput = styled.input`
+  width: 253px;
+  height: 33px;
+  font-size: 13px;
+  font-weight: 500;
+  background-color: #ffffff;
+  border: 0.3px solid rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  padding: 0px 7px;
+`;
+
+export const ManageSearchButton = styled.button`
+  width: 66px;
+  height: 33px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 33px;
+  text-align: center;
+  background-color: #111b47;
+  border-radius: 4px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const ManageTableStyle = styled.div`
+  width: auto;
+  height: auto;
+  margin-top: 40px;
+`;
+
+export const ManageTableTrStyle = styled.tr`
+  width: 1443px;
+  height: 78px;
+  &:hover {
+    cursor: pointer;
+    background-color: #f9fafb;
+  }
+`;
+
+export const ManageTableDateTh = styled.th`
+  width: 581px;
+  height: 78px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+  line-height: 78px;
+  text-align: left;
+  padding: 26px 16px;
+`;
+
+export const ManageTableEmailTh = styled(ManageTableDateTh)`
+  width: 428px;
+  box-shadow: 0px -1px 0px rgba(181, 181, 181, 0.2) inset;
+`;
+
+export const ManageTableNickNameTh = styled(ManageTableDateTh)`
+  width: 240px;
+  box-shadow: 0px -1px 0px rgba(181, 181, 181, 0.2) inset;
+`;
+
+export const ManageTableTaskTh = styled(ManageTableDateTh)`
+  width: 194px;
+  text-align: center;
+`;
+
+export const ManageTableDateTd = styled.td`
+  width: 581px;
+  height: 78px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #1f2937;
+  line-height: 78px;
+  text-align: left;
+  padding: 26px 16px;
+`;
+
+export const ManageTableEmailTd = styled(ManageTableDateTd)`
+  width: 428px;
+  box-shadow: 0px -1px 0px rgba(181, 181, 181, 0.2) inset;
+`;
+
+export const ManageTableNickNameTd = styled(ManageTableDateTd)`
+  width: 240px;
+  box-shadow: 0px -1px 0px rgba(181, 181, 181, 0.2) inset;
+`;
+
+export const ManageTableTaskTd = styled(ManageTableDateTd)`
+  width: 194px;
+  text-align: center;
+`;