From c7c4cbe92bef0663526a5fbc95c6398eb8122354 Mon Sep 17 00:00:00 2001
From: LimHeeJung <138123134+heejung0413@users.noreply.github.com>
Date: Wed, 10 Apr 2024 21:47:49 +0900
Subject: [PATCH] #131 [Design]  (#140)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* design: writeRetro 페이지 전체적인 자잘한 디자인 수정

* :sparkles: Feat: 회원가입 후 최초 한 번만 SurveyPage로 이동 구현 완료 (#133)

* :sparkles: Feat: Main 페이지 내비 태그 연결 (#135)

* fix: 라우터 정리

* fix: WriteRetroRevisePage로 페이지 네임 수정

* fix: 주석 설정

* Design: WriteRetroReviseTeam 페이지 퍼블리싱 1차 작업

* Design: WriteRetroReviseTeam 페이지 퍼블리싱 12 작업 완성

---------

Co-authored-by: 공정민 <102538362+jeongmin59@users.noreply.github.com>
Co-authored-by: Yena Kim <76564438+yeneua@users.noreply.github.com>
---
 src/App.tsx                                   |   2 +
 src/components/layout/parts/MainNavBar.tsx    |  50 +++++-
 .../writeRetro/revise/ManageTeamMembers.tsx   |  58 +++++++
 .../writeRetro/revise/ReviseSetting.tsx       | 154 ++++++++++++++++++
 .../writeRetro/task/PersonalTask.tsx          |   8 +-
 src/pages/WriteRetroRevisePage.tsx            |  56 +++----
 src/styles/writeRetroStyles/Layout.style.ts   |  13 +-
 .../writeRetroStyles/ReviseLayout.style.ts    |  87 ++++++----
 8 files changed, 349 insertions(+), 79 deletions(-)
 create mode 100644 src/components/writeRetro/revise/ManageTeamMembers.tsx
 create mode 100644 src/components/writeRetro/revise/ReviseSetting.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5367201..4a0a908 100644
--- 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
index 8f57bff..82eb91d 100644
--- 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
new file mode 100644
index 0000000..146d028
--- /dev/null
+++ 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>2115891@donga.ac.kr</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
new file mode 100644
index 0000000..f3ad789
--- /dev/null
+++ 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
index 62eefe9..59199cb 100644
--- 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
index 508d209..41848ca 100644
--- 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>2115891@donga.ac.kr</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>
     </>
   );
diff --git a/src/styles/writeRetroStyles/Layout.style.ts b/src/styles/writeRetroStyles/Layout.style.ts
index 906e2dd..c2f49dd 100644
--- a/src/styles/writeRetroStyles/Layout.style.ts
+++ b/src/styles/writeRetroStyles/Layout.style.ts
@@ -121,7 +121,7 @@ export const TaskBox = styled.div`
   background-color: #ffffff;
   border-radius: 5px;
   box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
-  margin-left: 3px;
+  margin: 0 3px;
   margin-top: 25px;
 `;
 
@@ -371,20 +371,17 @@ export const ActionTaskText = styled(TaskText)`
 `;
 
 export const ManagerStyle = styled.div`
-  width: 50px;
-  height: auto;
   display: flex;
-  margin-top: 6px;
-  margin-left: 9px;
+  flex-direction: row-reverse;
+  margin: 10px;
 `;
 
 export const ManagerText = styled.p`
-  width: 21px;
-  height: 28px;
-  font-size: 8px;
+  font-size: 15px;
   font-weight: 500;
   color: #1a265c;
   line-height: 28px;
+  margin: 0 5px;
 `;
 
 export const ManagerButton = styled.button`
diff --git a/src/styles/writeRetroStyles/ReviseLayout.style.ts b/src/styles/writeRetroStyles/ReviseLayout.style.ts
index dfa25d2..f399807 100644
--- a/src/styles/writeRetroStyles/ReviseLayout.style.ts
+++ b/src/styles/writeRetroStyles/ReviseLayout.style.ts
@@ -1,11 +1,7 @@
 import styled from 'styled-components';
 
 export const TitleBox = styled.div`
-  width: auto;
-  height: auto;
-  position: absolute;
-  top: 95px;
-  left: 357px;
+  margin: 0 10px;
 `;
 
 export const TitleText = styled.p`
@@ -18,22 +14,16 @@ export const TitleText = styled.p`
 `;
 
 export const SettingMenuStyle = styled.div`
-  width: 1409px;
-  height: 61px;
   box-shadow: 0px -2px 0px #a9a9a9 inset;
   display: flex;
-  position: absolute;
-  top: 273px;
-  left: 389px;
+  flex-direction: column;
+  margin: 30px 0;
 `;
 
 export const SettingMenuBox = styled.div<{ color: string }>`
-  width: 129px;
-  height: 61px;
   font-size: 28px;
   font-weight: 500;
   color: ${props => props.color};
-  text-align: center;
   /* border-bottom: 4px solid ${props => props.color}; */
   margin-right: 10px;
   &:hover {
@@ -212,12 +202,16 @@ export const ReviseButtonStyle = styled.button`
 `;
 
 export const ManageStyle = styled.div`
-  width: auto;
-  /* height: auto; */
-  height: 800px;
-  position: absolute;
-  top: 111px;
-  left: 10px;
+  display: flex;
+  flex-direction: column;
+  margin: 20px 30px;
+`;
+
+export const SettingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 20px auto;
+  width: 700px;
 `;
 
 export const ManageTitleStyle = styled.p`
@@ -246,11 +240,10 @@ export const InvitationLinkButton = styled.button`
 `;
 
 export const LinkExpirationText = styled.p`
-  font-size: 9px;
+  font-size: 15px;
   font-weight: 500;
   color: #f93333;
-  margin-top: 23px;
-  margin-left: 10px;
+  margin: auto 10px;
 `;
 
 export const ManageSearchInput = styled.input`
@@ -269,6 +262,7 @@ export const ManageSearchButton = styled.button`
   height: 33px;
   font-size: 14px;
   font-weight: 500;
+  margin: 0 10px;
   color: #ffffff;
   line-height: 33px;
   text-align: center;
@@ -279,15 +273,10 @@ export const ManageSearchButton = styled.button`
   }
 `;
 
-export const ManageTableStyle = styled.div`
-  width: auto;
-  height: auto;
-  margin-top: 40px;
-`;
+export const ManageTableStyle = styled.div``;
 
 export const ManageTableTrStyle = styled.tr`
-  width: 1443px;
-  height: 78px;
+  min-width: 1443px;
   &:hover {
     cursor: pointer;
     background-color: #f9fafb;
@@ -296,7 +285,6 @@ export const ManageTableTrStyle = styled.tr`
 
 export const ManageTableDateTh = styled.th`
   width: 581px;
-  height: 78px;
   font-size: 18px;
   font-weight: 700;
   color: #1f2937;
@@ -322,7 +310,7 @@ export const ManageTableTaskTh = styled(ManageTableDateTh)`
 
 export const ManageTableDateTd = styled.td`
   width: 581px;
-  height: 78px;
+
   font-size: 16px;
   font-weight: 400;
   color: #1f2937;
@@ -332,7 +320,6 @@ export const ManageTableDateTd = styled.td`
 `;
 
 export const ManageTableEmailTd = styled(ManageTableDateTd)`
-  width: 428px;
   box-shadow: 0px -1px 0px rgba(181, 181, 181, 0.2) inset;
 `;
 
@@ -345,3 +332,39 @@ export const ManageTableTaskTd = styled(ManageTableDateTd)`
   width: 194px;
   text-align: center;
 `;
+
+export const NotTextInput = styled.div`
+  background-color: #d9d9d9;
+  border-radius: 5px;
+  font-size: 20px;
+  padding: 3px;
+  margin: 20px 0;
+  color: #989898;
+`;
+
+export const NoteChangeText = styled.p`
+  font-size: 10px;
+  color: red;
+  margin: auto 10px;
+`;
+
+export const ReaderBox = styled.div`
+  border: 1px solid black;
+  border-radius: 5px;
+  font-size: 20px;
+  padding: 3px;
+  margin: 20px 0;
+  color: black;
+  display: flex;
+`;
+
+export const SettingLine = styled.div`
+  border: 1px solid black;
+  width: 100%;
+`;
+
+export const SettingDetailText = styled.p`
+  color: #636363;
+  font-size: 15px;
+  margin: auto 5px;
+`;