help추가

AjouThonTeam6 · Mar 18, 2023 · c6c5f8f · c6c5f8f
1 parent 1ba7459
commit c6c5f8f
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 15 deletions.
diff --git a/ajouthon/src/components/ClubTale/Search.tsx b/ajouthon/src/components/ClubTale/Search.tsx
@@ -102,9 +102,10 @@ const FileLabel = styled.label``;
 const FileInput = styled.input``;
 const Form = styled.form`
   display: flex;
+  left:0px;
   width: 200px;
-  position: relative;
-  left: 590px;
+  margin-bottom: 10px;
+  margin-left: auto;
 `;
 const Button = styled.button`
   width: 58px;

diff --git a/ajouthon/src/components/ClubTale/index.tsx b/ajouthon/src/components/ClubTale/index.tsx
@@ -39,7 +39,7 @@ const ClubTable = ({ columnData, datas, needCheckBox }: ClubTableType) => {
     }
   }, [allChecked]);
   return (
-    <>
+    <SearchTableContainer>
       <Search onSubmit={setGlobalFilter}></Search>
       <StyledTable align="center" width="800" {...getTableProps()}>
         <StyledThead>
@@ -100,7 +100,7 @@ const ClubTable = ({ columnData, datas, needCheckBox }: ClubTableType) => {
           })}
         </StyledTBody>
       </StyledTable>
-    </>
+    </SearchTableContainer>
   );
 };
 
@@ -129,4 +129,10 @@ const StyledTd = styled.td`
   vertical-align: middle;
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 `;
+
+const SearchTableContainer=styled.div`
+  display:flex;
+  flex-direction:column;
+`
+
 export default ClubTable;
diff --git a/ajouthon/src/pages/activity/activitySociety/ActivitySociety.tsx b/ajouthon/src/pages/activity/activitySociety/ActivitySociety.tsx
@@ -67,7 +67,7 @@ const MemberClub = () => {//동아리 회원 관리 페이지
         <InfoBox title='활동 내역' value={`${dummyData.length} 건`}></InfoBox>
         <InfoBox title='임시저장 내역' value={`${dummyData.length} 건`}></InfoBox>
       </InfoBoxContainer>
-      <button style={buttonSytle}>활동내역 추가</button>
+      <button>활동내역추가</button>
       <ClubTable
         columnData={ActivityModelColumn}
         datas={dummyData}

diff --git a/ajouthon/src/pages/help/Help.tsx b/ajouthon/src/pages/help/Help.tsx
@@ -24,23 +24,83 @@ const data = [
   },
 ];
 
+const HelpOuterContainer = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  width: 1440px;
+  padding: 30px;
+  margin: 50px;
+  margin:0 auto;
+`;
+
+const HelpTitle=styled.div`
+  font-size: 25px;
+  font-weight: bold;
+`
+
+const HelpInnerContainer=styled.div`
+  display: flex;
+  margin: 20px;
+  flex-direction: column;
+  justify-content: space-evenly;
+  text-align:center;
+  padding: 30px;
+  border-radius: 40px;
+  background-color: #c1e1ff;
+  width: 650px;
+  height: 500px;
+  margin:0 auto;
+`
+
 const CSVForm = styled(CSVLink)`
   padding: 20px;
   border-radius: 40px;
-  background-color: #69f479;
-`;
-
-const HelpContainer = styled.div`
-  margin: 50px 20px;
+  width: 150px;
+  color: white;
+  background-color: #1890ff;
+  text-align:center;
+  font-weight:bolder;
+  margin:0 auto;
 `;
 
+const HelpCommandContainer=styled.div`
+  display: flex;
+  flex-direction: column;
+`
+const HelpCommand=styled.div`
+  margin: 20px;
+  font-weight: bold;
+  line-height: 25px;
+`
 const Help = () => {
   return (
-    <HelpContainer>
-      <CSVForm data={data} headers={headers} filename={"CSV_양식"}>
-        양식 다운로드
-      </CSVForm>
-    </HelpContainer>
+    <HelpOuterContainer>
+      <HelpInnerContainer>
+        <HelpTitle>부원 자동 업로드 하는 법</HelpTitle>
+        <CSVForm data={data} headers={headers} filename={"CSV_양식"}>
+          양식 다운로드
+        </CSVForm>
+        <HelpCommandContainer>
+          <HelpCommand>1. 위 양식 파일을 다운로드 한다.</HelpCommand>
+          <HelpCommand>2. 파일의 라벨에 따라 정보를 기입한다.</HelpCommand>
+          <HelpCommand>   (직책을 표기할 시. 회장은 1, 부회장은 2, 총무는 3, 회원은 4로 기입한다.)</HelpCommand>
+          <HelpCommand>3. 모든 정보를 기입한 csv파일을 부원 관리 페이지에 업로드 한다.</HelpCommand>
+        </HelpCommandContainer>
+      </HelpInnerContainer>
+
+      <HelpInnerContainer>
+        <HelpTitle>동아리 활동 관리 업로드 하는 법</HelpTitle>
+        <HelpCommandContainer>
+          <HelpCommand> 1. 활동관리 페이지에서 활동내역추가 버튼을 클릭한다. </HelpCommand>
+          <HelpCommand> 2. 정보를 기입하고 활동보고서 자동작성을 클릭한다. </HelpCommand>
+          <HelpCommand> 3. AI가 작성한 보고서를 확인하고 저장 또는 저장 후 업로드 한다. </HelpCommand>
+          <HelpCommand> 
+            4. 임시저장 후 업로드 할 시에는 원하는 활동을 선택하고<br></br>
+            학사서비스 업로드를 클릭한다. 
+          </HelpCommand>
+        </HelpCommandContainer>
+      </HelpInnerContainer>
+    </HelpOuterContainer>
   );
 };