#131 [Design] (#140)

* design: writeRetro 페이지 전체적인 자잘한 디자인 수정 * ✨ Feat: 회원가입 후 최초 한 번만 SurveyPage로 이동 구현 완료 (#133) * ✨ Feat: Main 페이지 내비 태그 연결 (#135) * fix: 라우터 정리 * fix: WriteRetroRevisePage로 페이지 네임 수정 * fix: 주석 설정 * Design: WriteRetroReviseTeam 페이지 퍼블리싱 1차 작업 * Design: WriteRetroReviseTeam 페이지 퍼블리싱 12 작업 완성 --------- Co-authored-by: 공정민 <[email protected]> Co-authored-by: Yena Kim <[email protected]>
donga-it-club · Apr 10, 2024 · c7c4cbe · c7c4cbe
1 parent 7f126b9
commit c7c4cbe
Show file tree

Hide file tree

Showing 8 changed files with 349 additions and 79 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -125,6 +125,7 @@ const App = () => {
                   </PrivateRoute>
                 }
               />
+
               <Route
                 path="/retrolist"
                 element={
@@ -133,6 +134,7 @@ const App = () => {
                   </PrivateRoute>
                 }
               />
+
             </Route>
 
             {/* MainLayout */}

diff --git a/src/components/layout/parts/MainNavBar.tsx b/src/components/layout/parts/MainNavBar.tsx
@@ -6,14 +6,60 @@ import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
 import UserNickname from '@/components/user/UserNickname';
 import { useAuth } from '@/hooks/useAuth';
+
 import { userNicknameState } from '@/recoil/user/userAtom';
 import * as S from '@/styles/layout/layout.style';
 
 const MainNavBar = () => {
   const navigate = useNavigate();
-  const { isLoggedIn, handleLoginOrLogout } = useAuth();
+
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
 
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    }
+  };
+
+  const handleLoginOrLogout = () => {
+    if (isLoggedIn) {
+      handleSignOut(); // 로그아웃 처리 함수 호출
+    } else {
+      navigate('/login');
+    }
+  };
+
+  // 로그아웃 처리 함수
+  async function handleSignOut() {
+    try {
+      await signOut({ global: true });
+      setIsLoggedIn(false); // 로그인 상태 업데이트
+      navigate('/'); // 로그아웃 후 홈으로 리디이렉션
+    } catch (error) {
+      console.log('로그아웃 에러', error);
+    }
+  }
+
+  // 닉네임 관련
+  async function handleFetchUserAttributes() {
+    try {
+      const userAttributes = await fetchUserAttributes();
+      console.log(userAttributes);
+      setUserNickname(userAttributes.nickname || null);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    checkLoginStatus();
+    handleFetchUserAttributes();
+  }, []);
+
   const navigateToMyPage = () => {
     navigate('/my');
   };
@@ -45,10 +91,12 @@ const MainNavBar = () => {
                   onClick={navigateToMyPage}
                 >
                   <PersonCircle style={{ width: '30px', margin: 'auto 3px' }} />
+
                   <p style={{ margin: 'auto 10px' }}>
                     <UserNickname setUserNickname={setUserNickname} />
                     {userNickname}
                   </p>
+
                 </div>
               </S.IconStyle>
 

diff --git a/src/components/writeRetro/revise/ManageTeamMembers.tsx b/src/components/writeRetro/revise/ManageTeamMembers.tsx
@@ -0,0 +1,58 @@
+import { BsPersonCircle } from 'react-icons/bs';
+import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Flex, Button } from '@chakra-ui/react';
+import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
+
+const ManageTeamMembers = () => {
+  return (
+    <S.ManageStyle>
+      <div style={{ height: '46px', display: 'flex' }}>
+        <S.ManageTitleStyle>팀원 관리</S.ManageTitleStyle>
+        <S.InvitationLinkButton>팀원 초대 링크</S.InvitationLinkButton>
+        <S.LinkExpirationText>링크는 2시간 후에 만료됩니다.</S.LinkExpirationText>
+      </div>
+      <div style={{ display: 'flex', marginTop: '20px' }}>
+        <S.ManageSearchInput placeholder="이름 또는 이메일 주소를 검색"></S.ManageSearchInput>
+        <S.ManageSearchButton>검색</S.ManageSearchButton>
+      </div>
+      <TableContainer marginTop="40px">
+        <Table variant="simple">
+          <Thead>
+            <Tr>
+              <Th fontSize={20} margin="0 auto">
+                닉네임
+              </Th>
+              <Th fontSize={20} margin="0 auto">
+                이메일
+              </Th>
+              <Th fontSize={20} margin="0 auto">
+                회고 참여 일자
+              </Th>
+              <Th fontSize={20} margin="0 auto">
+                작업
+              </Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            <Tr>
+              <Td>
+                <Flex>
+                  <BsPersonCircle style={{ margin: 'auto 10px' }} size={30} />
+                  <p style={{ margin: 'auto 0' }}>이채연</p>
+                </Flex>
+              </Td>
+              <Td>[email protected]</Td>
+              <Td>2024-03-12 12:50</Td>
+              <Td>
+                <Button colorScheme="red" fontSize={15}>
+                  제거
+                </Button>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </S.ManageStyle>
+  );
+};
+
+export default ManageTeamMembers;
diff --git a/src/components/writeRetro/revise/ReviseSetting.tsx b/src/components/writeRetro/revise/ReviseSetting.tsx
@@ -0,0 +1,154 @@
+import { ChangeEventHandler, MouseEventHandler, useRef, useState } from 'react';
+import { BsPersonCircle } from 'react-icons/bs';
+import { FaCheck } from 'react-icons/fa';
+import { IoIosInformationCircle } from 'react-icons/io';
+import { IoClose } from 'react-icons/io5';
+import { MdModeEdit, MdOutlineFileUpload } from 'react-icons/md';
+import {
+  Button,
+  ButtonGroup,
+  Editable,
+  EditableInput,
+  EditablePreview,
+  Flex,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Image,
+  Input,
+  Switch,
+  useEditableControls,
+} from '@chakra-ui/react';
+import * as L from '@/styles/writeRetroStyles/Layout.style';
+import * as S from '@/styles/writeRetroStyles/ReviseLayout.style';
+
+const ReviseSetting = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [image, setImage] = useState<string>('/Home.png');
+
+  const handleUploadButtonClick: MouseEventHandler<HTMLButtonElement> = () => {
+    inputRef.current?.click();
+  };
+
+  const handleImageChange: ChangeEventHandler<HTMLInputElement> = async event => {
+    const files = event.target.files;
+
+    if (!files || files.length === 0) return;
+
+    if (!files) return;
+
+    if (files) {
+      const file = files[0];
+      const imageUrl = URL.createObjectURL(file);
+      const imageUrlString: string = imageUrl;
+      setImage(imageUrlString);
+    }
+  };
+
+  const DeleteImage: MouseEventHandler<HTMLButtonElement> = () => {
+    setImage('');
+  };
+  function EditableControls() {
+    const { isEditing, getSubmitButtonProps, getCancelButtonProps, getEditButtonProps } = useEditableControls();
+
+    return isEditing ? (
+      <ButtonGroup justifyContent="center" size="sm">
+        <IconButton aria-label="Search database" icon={<FaCheck />} {...getSubmitButtonProps()} />
+        <IconButton aria-label="Search database" icon={<IoClose />} {...getCancelButtonProps()} />
+      </ButtonGroup>
+    ) : (
+      <Flex justifyContent="center">
+        <IconButton aria-label="Search database" size="sm" icon={<MdModeEdit />} {...getEditButtonProps()} />
+      </Flex>
+    );
+  }
+  return (
+    <S.SettingContainer>
+      <Image
+        src={image ?? '/Home.png'}
+        maxWidth={500}
+        margin="20px auto"
+        h="auto"
+        aspectRatio="1/1"
+        objectFit="contain"
+      ></Image>
+      <div style={{ margin: '0 auto' }}>
+        <Button colorScheme="brand" variant="outline" margin="0 30px" onClick={handleUploadButtonClick}>
+          <MdOutlineFileUpload style={{ margin: '0 5px' }} />
+          변경하기
+          <input type="file" ref={inputRef} onChange={handleImageChange} accept="image/*" hidden></input>
+        </Button>
+        <Button colorScheme="brand" variant="outline" margin="0 30px" onClick={DeleteImage}>
+          삭제하기
+        </Button>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <L.TaskText style={{ fontSize: '20px' }}>회고명 </L.TaskText>
+        <Input placeholder="회고명을 입력하세요." />
+        <div style={{ display: 'flex', margin: '10px 0' }}>
+          <L.TaskText style={{ fontSize: '20px', minWidth: 'auto', margin: 'auto 0' }}>회고 유형 </L.TaskText>
+          <S.NoteChangeText>변경 불가</S.NoteChangeText>
+        </div>
+
+        <S.NotTextInput>Team Project</S.NotTextInput>
+        <div style={{ display: 'flex', margin: '10px 0' }}>
+          <L.TaskText style={{ fontSize: '20px', minWidth: 'auto', margin: 'auto 0' }}>회고 템플릿 유형 </L.TaskText>
+          <S.NoteChangeText>변경 불가</S.NoteChangeText>
+        </div>
+        <S.NotTextInput>Kudos</S.NotTextInput>
+
+        <div style={{ display: 'flex', margin: '10px 0' }}>
+          <L.TaskText style={{ fontSize: '20px', minWidth: 'auto', margin: 'auto 0' }}>회고 리더 </L.TaskText>
+          <S.NoteChangeText>변경 불가</S.NoteChangeText>
+        </div>
+        <S.ReaderBox>
+          <BsPersonCircle size={30} style={{ margin: '5px' }} />
+          <p style={{ margin: 'auto 0' }}> Chae yeon 선애조아</p>
+        </S.ReaderBox>
+        <Editable
+          textAlign="center"
+          defaultValue="회고 설명을 적어주세요."
+          fontSize="xl"
+          isPreviewFocusable={false}
+          margin="10px 0"
+        >
+          <EditablePreview />
+          {/* Here is the custom input */}
+          <Input as={EditableInput} />
+          <EditableControls />
+        </Editable>
+        <L.TaskText style={{ fontSize: '20px' }}>회고 최종완료</L.TaskText>
+        <S.SettingLine />
+
+        <FormControl display="flex" alignItems="center">
+          <FormLabel htmlFor="email-alerts" mb="0" margin="20px 10px" display="flex">
+            <IoIosInformationCircle color="#FF4646" size={20} style={{ margin: 'auto 0' }} />
+            <S.SettingDetailText>최종 완료 시, Done으로 표시되며 참여자는 수정이 불가합니다.</S.SettingDetailText>
+          </FormLabel>
+          <Switch id="email-alerts" colorScheme="red" size="lg" />
+        </FormControl>
+        <L.TaskText style={{ fontSize: '20px' }}>회고 삭제</L.TaskText>
+        <S.SettingLine />
+        <div style={{ margin: '20px 10px', display: 'flex' }}>
+          <IoIosInformationCircle color="#FF4646" size={20} style={{ margin: 'auto 0' }} />
+          <S.SettingDetailText>최종 완료 시, Done으로 표시되며 참여자는 수정이 불가합니다.</S.SettingDetailText>
+        </div>
+        <Flex flexDirection="row-reverse" margin="30px">
+          <Button colorScheme="red" variant="outline">
+            회고 삭제
+          </Button>
+        </Flex>
+        <Flex flexDirection="row-reverse">
+          <Button colorScheme="grey" variant="outline">
+            SAVE
+          </Button>
+          <Button colorScheme="grey" variant="outline" margin="auto 20px">
+            CANCEL
+          </Button>
+        </Flex>
+      </div>
+    </S.SettingContainer>
+  );
+};
+
+export default ReviseSetting;
diff --git a/src/components/writeRetro/task/PersonalTask.tsx b/src/components/writeRetro/task/PersonalTask.tsx
@@ -39,10 +39,16 @@ const PersonalTask = () => {
             문서 작성 - 수기를 담당하신 분이 작성한 회의록
             <S.ReviseText>(수정됨)</S.ReviseText>
           </S.TaskText>
+          <S.ManagerStyle>
+            <div>
+              <S.ManagerButton>M</S.ManagerButton>
+            </div>
+            <S.ManagerText>담당자</S.ManagerText>
+          </S.ManagerStyle>
           {/* TaskTextModal */}
           <Modal isOpen={isOpen} onClose={onClose}>
             <ModalOverlay />
-            <ModalContent sx={{ width: 'auto', height: 'auto', borderRadius: '30px', position: 'relative' }}>
+            <ModalContent sx={{ borderRadius: '30px', position: 'relative' }}>
               <ReviseModal />
               <ModalCloseButton
                 sx={{

diff --git a/src/pages/WriteRetroRevisePage.tsx b/src/pages/WriteRetroRevisePage.tsx
@@ -1,3 +1,4 @@
+
 import { useState } from 'react';
 import { IoPersonCircle } from 'react-icons/io5';
 import { MdPeopleAlt } from 'react-icons/md';
@@ -10,6 +11,7 @@ const WriteRetroReviseTeamPage = () => {
   };
   const color = clicked ? '#111B47' : '#A9A9A9';
 
+
   return (
     <>
       <S.TitleBox>
@@ -20,43 +22,23 @@ const WriteRetroReviseTeamPage = () => {
       </S.TitleBox>
       {/* <SettingMenu></SettingMenu> */}
       <S.SettingMenuStyle>
-        <S.SettingMenuBox color={color} onClick={handleClick}>
-          팀원 관리
-        </S.SettingMenuBox>
-        <S.ManageStyle>
-          <div style={{ height: '46px', display: 'flex' }}>
-            <S.ManageTitleStyle>팀원 관리</S.ManageTitleStyle>
-            <S.InvitationLinkButton>팀원 초대 링크</S.InvitationLinkButton>
-            <S.LinkExpirationText>ꞏ 링크는 2시간 후에 만료됩니다.</S.LinkExpirationText>
-          </div>
-          <div style={{ display: 'flex', marginTop: '20px' }}>
-            <S.ManageSearchInput placeholder="이름 또는 이메일 주소를 검색"></S.ManageSearchInput>
-            <S.ManageSearchButton>검색</S.ManageSearchButton>
-          </div>
-          <S.ManageTableStyle>
-            {/* TableHeader */}
-            <S.ManageTableTrStyle>
-              <S.ManageTableNickNameTh>닉네임</S.ManageTableNickNameTh>
-              <S.ManageTableEmailTh>이메일</S.ManageTableEmailTh>
-              <S.ManageTableDateTh>회고 참여 일자</S.ManageTableDateTh>
-              <S.ManageTableTaskTh>직업</S.ManageTableTaskTh>`
-            </S.ManageTableTrStyle>
-            {/* TableBody */}
-            <S.ManageTableTrStyle>
-              <S.ManageTableNickNameTd>
-                <div style={{ display: 'flex', backgroundColor: 'red' }}>
-                  <div>
-                    <IoPersonCircle size={'39px'} color="#C3CAD9" />
-                  </div>
-                  <div style={{ width: '164px', textAlign: 'center' }}>이채연</div>
-                </div>
-              </S.ManageTableNickNameTd>
-              <S.ManageTableEmailTd>[email protected]</S.ManageTableEmailTd>
-              <S.ManageTableDateTd>2024-03-12 12:50</S.ManageTableDateTd>
-              <S.ManageTableTaskTd></S.ManageTableTaskTd>
-            </S.ManageTableTrStyle>
-          </S.ManageTableStyle>
-        </S.ManageStyle>
+
+        <Tabs colorScheme="brand" isFitted>
+          <TabList margin="0 40px" fontSize={60}>
+            <Tab>회고 설정</Tab>
+            <Tab>팀원 관리</Tab>
+          </TabList>
+
+          <TabPanels>
+            <TabPanel>
+              <ReviseSetting />
+            </TabPanel>
+            <TabPanel>
+              <ManageTeamMembers />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+
       </S.SettingMenuStyle>
     </>
   );