Merge pull request #13 from TaePoong719/feature/#3

Feature/#3

src/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+// import { render, screen } from '@testing-library/react';
+// import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+// test('renders learn react link', () => {
+//   render(<App />);
+//   const linkElement = screen.getByText(/learn react/i);
+//   expect(linkElement).toBeInTheDocument();
+// });

src/components/Sidebar.css

@@ -1,5 +1,14 @@
-.sidebar__link-wrapper{
-  display:flex;
+.sidebar__link-wrapper {
+  height: calc(100vh - 300px);
+  min-height: 200px;
+  overflow-y: auto;  
+  display: flex;
   flex-flow: column;
   gap: 20px;
-}
+}
+
+.sidebar__bottom {
+  bottom: 0;
+  text-align: center;
+}
+

src/components/Sidebar.tsx

@@ -16,7 +16,7 @@ const Sidebar = () => {
     // Wiki 사이드바
     return (
       <Container>
-        <ul className="sidebar__link_wrapper">
+        <ul className="sidebar__link-wrapper">
           <li key={"출석"}>
             <Link to={`/Wiki/`}>출석</Link>
           </li>
@@ -35,24 +35,68 @@ const Sidebar = () => {
             <Link to={`/Wiki/학습 일정`}>금주의 학습 일정</Link>
           </li>
         </ul>
+        <SidebarBottom />
       </Container>
     );
 
     // Gallery 사이드바
   } else if (hashSplit[1] === "Gallery") {
-    return <Container>Gallery Sidebar</Container>;
+    return (
+      <Container>
+        <ul className="sidebar__link-wrapper">
+          <li>갤러리글 1</li>
+          <li>갤러리글 2</li>
+          <li>갤러리글 3</li>
+        </ul>
+        <SidebarBottom />
+      </Container>
+    );
   }
 };
 
 const Container = styled.aside`
   position: fixed;
   z-index: 9;
-  width: 180px;
-  height: 100vh;
-  border-right: 2px solid #ddd;
-  box-sizing: border-box;
-  padding: 5px;
+  width: 140px;
+  height: 100%;
+  background-color: #ddd;
+`;
 
-`
+function SidebarBottom(): JSX.Element {
+  return (
+    <>
+      <div className="sidebar__bottom">
+        <hr className="sidebar__bottom-hr" />
+        <a href="https://app.slack.com/client/T057XJP4T34/C05FRTBDHDL">
+          <img
+            className="sidebar__bottom_QRcode"
+            src={process.env.PUBLIC_URL + "/svg/AttendanceQR.svg"}
+            alt="QR코드"
+          />
+        </a>
+        <div className="sidebar__bottom_icon">
+          <a href="https://www.notion.so/X-24f85bf2ff4e4c69bd45ddc4e05d464b">
+            <img
+              src={process.env.PUBLIC_URL + "/svg/icon-notion.svg"}
+              alt="notion"
+            />
+          </a>
+          <a href="https://docs.google.com/spreadsheets/d/1Ffg--2TCzecwLMODoBHrTAk7zWufPLrJoyLVCwE4ea4/edit#gid=1823006152">
+            <img
+              src={process.env.PUBLIC_URL + "/svg/icon-sheet.svg"}
+              alt="sheet"
+            />
+          </a>
+          <a href="https://us06web.zoom.us/j/4912611157?pwd=N2swc3kxRG9uYTFKa2lBTUI2dS9NZz09#success">
+            <img
+              src={process.env.PUBLIC_URL + "/svg/icon-zoom.svg"}
+              alt="zoom"
+            />
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}
 
 export default Sidebar;

src/index.css

@@ -1,30 +1,35 @@
-html{
-  font-size:16px;
-  --main-color: #ED234B;
+html {
+  font-size: 16px;
+  --main-color: #ed234b;
   --main-black: #171717;
 }
 
 body {
   margin: 0;
 }
 
-li{
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+li {
   list-style: none;
 }
 
-a{
+a {
   text-decoration: none;
   color: black;
 }
 
 @media (max-width: 768px) {
-  html{
+  html {
     font-size: 14px;
   }
 }
 
-@media(max-width: 480px){
-  html{
+@media (max-width: 480px) {
+  html {
     font-size: 12px;
   }
 }

src/pages/Gallery.tsx

@@ -1,55 +1,15 @@
-import Sidebar from 'components/Sidebar'
-import React from 'react'
-import styled from 'styled-components'
+import Sidebar from "components/Sidebar";
+import React from "react";
+import styled from "styled-components";
 
 const Gallery = () => {
   return (
     <>
-      <Sidebar/>
-      <Container>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium pellentesque facilisis. Praesent at auctor risus. Mauris tempus mattis justo, ut rhoncus lectus interdum egestas. Nam mattis est eros, sed blandit nunc egestas nec. Nulla in mauris id nisl finibus tincidunt et facilisis lorem. Cras suscipit vel dui non dictum. Etiam a accumsan augue. Sed lorem eros, vestibulum at consequat vitae, faucibus ac risus. Cras gravida quis ligula in bibendum. Vivamus dapibus tellus semper tempor eleifend. Vivamus posuere sapien pretium est pharetra vehicula. Nullam suscipit quis eros gravida varius. Nullam porta consequat rutrum.
-
-Proin interdum felis neque, sed semper massa viverra sit amet. Suspendisse nec lacus ut ex rutrum hendrerit consectetur et augue. Nunc id est convallis, iaculis nisl sed, sodales dolor. Donec ac metus sagittis, maximus quam vel, varius orci. Suspendisse vitae diam lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse sit amet felis et arcu eleifend pharetra quis nec neque. Fusce posuere varius nisl, ut vulputate tellus volutpat ut. Praesent erat ante, lobortis id egestas sit amet, placerat ac sapien. Nunc hendrerit gravida leo. Aenean rhoncus sapien justo, non pretium magna posuere non. Vivamus sapien mi, faucibus sit amet dictum sed, feugiat ac felis. Cras maximus leo nulla, quis vulputate arcu dignissim at.
-
-Donec elementum dolor nec erat pulvinar, sed dignissim sem facilisis. Pellentesque nec tempor ex, vitae ultrices orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Ut a nisl ac neque tempor mattis. Etiam at libero quis nulla tincidunt facilisis ut at lectus. Mauris pulvinar elit vulputate, malesuada lacus sed, blandit ligula. Vestibulum ornare sit amet ex vitae convallis. Cras sed magna quam. Mauris pellentesque consectetur elementum. Quisque auctor sapien in lobortis ullamcorper. Nam porta consectetur mauris at porttitor. Fusce at tempus lectus. Nunc enim tellus, scelerisque in mollis eget, convallis consectetur enim. Maecenas varius ultricies fermentum.
-
-Etiam auctor mauris eu lorem hendrerit finibus. Etiam et iaculis nisi. Nam sit amet massa dignissim, pretium risus non, suscipit diam. Quisque rutrum, est eu gravida ultrices, magna lacus dictum odio, in eleifend nisl libero in mi. Cras sagittis quis nunc in feugiat. Proin pulvinar eros eget consectetur faucibus. Nullam eget mattis mauris, congue posuere eros.
-
-Mauris non nunc purus. Pellentesque pretium, eros nec convallis dignissim, turpis libero auctor arcu, vitae aliquet elit turpis sed eros. Proin eu semper est, interdum venenatis ante. Donec malesuada vel massa at volutpat. Sed in felis quis dolor eleifend imperdiet. Mauris nec leo non ex ultricies rhoncus. Vivamus volutpat orci id dui posuere hendrerit. Curabitur mollis magna sapien. Aenean eget posuere urna. Maecenas ut sagittis lacus, a sodales nunc. Aliquam erat volutpat. Curabitur placerat massa et felis tincidunt, a laoreet odio tincidunt. Curabitur porttitor elit sit amet ex porta, vitae ornare eros convallis. Pellentesque posuere, ex ac consequat ornare, nibh eros lacinia leo, ac dignissim ipsum ipsum ut ex. Fusce sit amet lorem neque. Morbi odio nibh, ullamcorper nec accumsan et, mattis quis eros.
-
-Quisque posuere semper mi, lacinia dictum dui posuere et. Mauris non ante tincidunt, molestie ipsum eget, luctus metus. Integer molestie lorem faucibus, faucibus erat eget, pulvinar ex. Nulla nec nibh scelerisque tellus fringilla dapibus at sed nisl. Donec malesuada risus quis erat lacinia rutrum. Nam id magna felis. Ut varius neque in dictum ultricies. Sed hendrerit eget mi non efficitur. Nunc vitae purus nec enim elementum maximus sit amet eu urna. Quisque viverra eros sed mauris efficitur eleifend. Fusce ac purus eros. Vestibulum et orci vel ligula luctus vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin arcu odio, pulvinar quis mattis id, tempus eget ex.
-
-Suspendisse non dictum ipsum. Nullam egestas pretium lorem cursus vulputate. Aenean blandit euismod ullamcorper. Vivamus a consequat nunc. Phasellus arcu nunc, blandit sed ante sed, facilisis molestie libero. Vivamus viverra lacus massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam metus est, fringilla a malesuada sit amet, accumsan ac tellus. Curabitur egestas urna non urna consectetur, ac vulputate nunc iaculis. Morbi in augue at lorem congue lobortis. Integer id ligula diam. Praesent molestie dolor ligula, ac semper ante lobortis quis. Vestibulum hendrerit rutrum urna, sit amet cursus augue bibendum vel.
-
-Pellentesque molestie lectus vitae libero luctus viverra. Sed non lectus quis ante commodo sollicitudin nec id augue. Phasellus volutpat eu tellus eget cursus. Sed molestie et felis quis dapibus. Morbi dictum dolor ut ante aliquet, eget vulputate enim vulputate. In faucibus ex nisi. Cras volutpat rhoncus quam. Sed ultricies egestas magna. Nullam efficitur sem libero, eu egestas justo tincidunt eget. Vivamus dignissim molestie ultrices. Etiam blandit egestas ex, vitae consequat ipsum efficitur non.
-
-Vivamus non maximus neque, ut consectetur arcu. Nulla scelerisque varius massa, nec fringilla dui consequat id. Maecenas suscipit bibendum dignissim. Cras vel varius nunc. Maecenas enim mi, ornare vitae nulla vel, venenatis ullamcorper quam. Phasellus eu iaculis quam. Sed venenatis mi ante, vel volutpat arcu tristique eu. Morbi tempor vulputate molestie. Vestibulum scelerisque, ante sed maximus laoreet, est purus dictum augue, eu porttitor est nibh id ex. Integer non sapien libero. In elementum nunc eu arcu condimentum, vulputate efficitur leo auctor. Nulla eget tempor elit. Aliquam erat volutpat. Aliquam accumsan nec ligula sed porta.
-
-Aenean volutpat egestas porta. Nullam laoreet ultricies quam, et ornare nisi imperdiet non. Donec at purus semper, euismod dui ac, iaculis orci. Sed eu libero eu libero vestibulum bibendum. Integer id neque facilisis felis aliquet gravida finibus sit amet lorem. Cras suscipit, mi a pretium tincidunt, sapien odio iaculis est, sit amet vestibulum massa eros malesuada erat. Nullam pellentesque posuere urna id consequat. Maecenas consectetur at ex ut volutpat. Fusce vel nulla bibendum, vehicula lorem quis, luctus ipsum. Aliquam vel eleifend lectus, in luctus sapien. Pellentesque id imperdiet urna, et accumsan sapien. Integer vestibulum, nulla elementum varius tincidunt, ante velit venenatis nibh, quis mollis lorem ante sit amet mi. Vivamus ut faucibus est. Donec at ipsum pharetra, placerat nisl et, lobortis velit.
-
-Curabitur in odio nisi. Aenean dapibus ultricies est, vitae pretium sem. Duis non urna nec felis consequat imperdiet. Quisque malesuada vitae augue et elementum. Nullam eget luctus arcu, at elementum sem. Aliquam et neque ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis massa euismod mauris pellentesque, ullamcorper commodo risus euismod. Pellentesque a suscipit purus. Nullam eu nisl condimentum sem viverra condimentum pretium sed sem. Ut id libero in lacus pulvinar porttitor quis eget ex. Duis imperdiet sed tortor pulvinar tristique. Mauris accumsan aliquet rhoncus. Nunc ac rhoncus mauris. Vivamus tristique urna non blandit porta. Sed nec faucibus orci, sed placerat tellus.
-
-Nam in posuere elit. Nam facilisis pharetra lectus, ut imperdiet risus efficitur sit amet. Sed in felis sodales, convallis justo vitae, dapibus felis. Duis bibendum dictum vulputate. Maecenas scelerisque, velit non bibendum posuere, augue urna pharetra orci, eu vestibulum nulla massa eget ante. Praesent nunc nibh, maximus nec sapien eget, ornare vehicula neque. Quisque in rhoncus nisi. Ut venenatis arcu molestie gravida iaculis. Sed dignissim lacinia nibh, id commodo mi eleifend eget.
-
-Nullam quis fermentum nunc. Vivamus nec felis turpis. Curabitur eget volutpat odio, nec sagittis nulla. Morbi dapibus velit ex, at elementum orci lacinia viverra. Curabitur iaculis auctor magna non maximus. Quisque gravida congue dolor sed volutpat. In ex orci, tristique et augue non, semper ullamcorper elit. Vestibulum vitae nisi semper, faucibus augue ac, tempus lacus. Fusce quis tellus purus. Integer leo turpis, aliquet eu hendrerit id, ullamcorper viverra nisl.
-
-Nam urna elit, rhoncus ac felis sed, ullamcorper mattis nibh. Mauris gravida enim gravida sapien iaculis, bibendum tristique leo interdum. Sed eget nibh sollicitudin odio dictum auctor. Sed quis risus sed metus lacinia maximus. Etiam ut ultrices ex, id vulputate lorem. Duis mollis lacus vel eros pellentesque hendrerit. Proin eget ipsum at dui accumsan auctor sit amet non enim. Pellentesque justo augue, efficitur a luctus ut, dapibus eget risus. In rutrum imperdiet lorem a congue.
-
-Morbi lobortis lobortis lacinia. Proin ut turpis id arcu sagittis cursus nec ut odio. Mauris iaculis pharetra suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam aliquam felis ut dolor condimentum porttitor. Donec non bibendum est, ut sagittis elit. Ut nisi leo, rhoncus sed tristique vel, suscipit ac metus. Nam sagittis lacus id tristique dictum. Sed at ipsum eget ante vehicula malesuada. Nam purus erat, ornare sed purus sed, pulvinar sodales dolor. Phasellus ornare nisl sed arcu hendrerit sagittis. Nunc convallis sapien vel egestas pharetra. Maecenas eget felis luctus, ornare sem a, ultrices orci.
-
-Etiam consectetur, eros eu mattis accumsan, mi diam tempus urna, et interdum nisi ipsum id felis. Nullam quis mauris cursus, commodo libero sed, blandit risus. Vestibulum iaculis maximus augue eu luctus. Cras facilisis nisl vel urna condimentum, quis pellentesque dui semper. Sed tristique massa enim, et sollicitudin enim imperdiet ut. Integer volutpat metus ac lectus volutpat, vel malesuada dui scelerisque. Suspendisse nisl ipsum, consequat at elit ac, consectetur consectetur lorem. Nulla imperdiet interdum libero, quis facilisis enim finibus at. In vitae ex sed est finibus rhoncus quis eu mauris.
-
-Vestibulum pulvinar mi quis feugiat maximus. Suspendisse vitae ligula venenatis, porttitor justo eu, posuere orci. Cras vulputate vel nibh vitae posuere. Proin sagittis lectus ipsum, quis convallis lacus elementum efficitur. Curabitur in nisi ac nisi vehicula venenatis. Pellentesque nisi nisi, tincidunt ut condimentum sit amet, lobortis vitae arcu. Duis placerat pretium lectus vitae posuere. Etiam eget tincidunt leo, at blandit nulla.
-
-Nullam consequat risus non diam facilisis, vel ultrices elit convallis. Morbi dui orci, molestie eu egestas nec, dictum quis mi. Aliquam laoreet neque sit amet elit elementum auctor. Cras placerat nisl at nisl rhoncus iaculis. Nunc eu nulla at erat condimentum volutpat. Sed pellentesque nisi nunc, ac aliquam lorem tristique nec. Vivamus iaculis sapien ac turpis volutpat cursus.
-
-Etiam sollicitudin tempus facilisis. Suspendisse fermentum, dui sit amet vulputate ornare, lectus arcu porta sem, quis vestibulum libero eros a sem. Pellentesque non ipsum augue. Nullam lorem purus, lobortis sit amet sollicitudin sit amet, cursus nec quam. Integer non egestas tortor, quis interdum nulla. Morbi sollicitudin urna id nisl commodo, ac interdum diam luctus. Etiam vulputate porttitor tincidunt. Ut pharetra ac nisi ut vehicula. Nullam porttitor faucibus ipsum, at ullamcorper nibh dignissim quis. Sed pretium, massa sed tempor pharetra, nisi mi accumsan ante, et ultrices ante dolor et orci. Nulla viverra massa sed viverra facilisis. In convallis, massa commodo consectetur sollicitudin, urna magna ultricies orci, convallis semper nunc urna scelerisque urna. Aenean elementum ac massa cursus rhoncus. Cras ut ex eu odio interdum bibendum et in lectus.
-
-Vivamus sed aliquet lacus. Aenean pharetra quis mi vel tempor. Duis id velit aliquet elit porttitor lobortis. Phasellus sit amet mauris vulputate, convallis tortor eu, porttitor odio. Vivamus nulla elit, vestibulum et diam at, ultrices rutrum dui. Nulla porttitor, neque eget cursus blandit, dui ipsum pulvinar justo, et sagittis lacus massa ut justo. Ut porttitor sodales purus. Nam lacinia urna vitae dui condimentum tempor. Etiam et risus risus. Quisque vitae augue in purus tristique ultricies. Nulla convallis auctor mauris, ut cursus lorem ultrices non.
-      </Container>
+      <Sidebar />
+      <Container></Container>
     </>
-  )
-}
+  );
+};
 
 const Container = styled.section`
   position: relative;
@@ -58,6 +18,6 @@ const Container = styled.section`
   width: calc(100% - 180px);
   padding: 5px;
   box-sizing: border-box;
-`
+`;
 
-export default Gallery
+export default Gallery;

src/pages/Wiki.tsx

@@ -38,6 +38,6 @@ const Container = styled.section`
   width: calc(100% - 180px);
   padding: 5px;
   box-sizing: border-box;
-`
+`;
 
 export default Wiki;