Merge branch 'main' of https://github.com/AgainIoT/Open-Set-Go_client …

…into feature/103

src/components/common/Slide.js

@@ -1,8 +1,8 @@
+import styled from "styled-components";
 import React, { useState, useEffect } from "react";
+import axios from "axios";
 import Slider from "react-slick";
 import SlideContent from "./SlideContent";
-import styled from "styled-components";
-import axios from "axios";
 
 //Slide: Component for Implementing the License Page using the React Slick
 const Slide = () => {
@@ -70,24 +70,22 @@ const StSlide = styled.div`
 `;
 
 const StyledSlider = styled(Slider)`
+  display: flex;
   width: 100%;
   height: 100%;
-  display: flex;
-  /* min-width:50rem; */
-
   .slick-list {
-    //슬라이드 스크린
+    //slide screen
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 90%;
     height: 100%;
     margin: 0 auto;
-    justify-content: center;
-    align-items: center;
-    display: flex;
   }
 
   .slick-track {
-    height: 100%;
     display: flex;
+    height: 100%;
   }
 
   .slick-center {

src/components/common/SlideContent.js

@@ -1,8 +1,8 @@
 import styled from "styled-components";
-import { PropTypes } from "prop-types";
-import { Button } from "@mui/material";
 import { useRecoilState } from "recoil";
+import { Button } from "@mui/material";
 import { repoDataAtomFamily } from "../../recoil/repoData";
+import { PropTypes } from "prop-types";
 
 //SlideContent: Internal component in the slick to be used in the license page
 //using props to connect data to Slide
@@ -105,32 +105,32 @@ SlideContent.propTypes = {
 const StSlideContent = styled.div`
   display: flex;
   justify-content: center;
-  border-radius: 0.5rem;
-  border: 0.01rem outset #dedede;
+  align-items: center;
+  flex-direction: column;
+  width: 80%;
+  height: 100%;
   padding: 2rem;
   margin: 0 auto;
-  white-space: pre-wrap;
+  border: 0.01rem outset #dedede;
+  border-radius: 0.5rem;
   background-color: white;
+  white-space: pre-wrap;
   box-shadow: 0.2rem 0.2rem 0.3rem #dedede;
-  flex-direction: column;
-  align-items: center;
-  width: 80%;
-  height: 100%;
 `;
 
 const DivBox = styled.div`
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   gap: 1.4rem;
 `;
 
 const InformationBox = styled.div`
-  margin: auto;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  margin: auto;
 `;
 
 const Title = styled.h1`
@@ -141,23 +141,23 @@ const Title = styled.h1`
 
 const Content = styled.p`
   font-size: 1rem;
-  line-height: 1.7rem;
   text-align: justify;
+  line-height: 1.7rem;
 `;
 
 const ConditionBox = styled.div`
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
+  flex-direction: row;
   width: 100%;
   gap: 0.5rem;
 
   div {
     //div for permissions limitations conditions
     display: flex;
+    flex: 1;
     flex-direction: column;
     height: 100%;
-    flex: 1;
   }
 
   ul {
@@ -168,14 +168,14 @@ const ConditionBox = styled.div`
 `;
 
 const Condition = styled.h2`
-  font-size: 1.1rem;
   justify-items: center;
+  font-size: 1.1rem;
   font-weight: bold;
 `;
 
 const SharedContent = `
-display: block;
-padding-inline-start: 2ch;
+  display: block;
+  padding-inline-start: 2ch;
 `;
 
 const PermissionContent = styled.li`
@@ -194,17 +194,17 @@ const ConditionContent = styled.li`
 `;
 
 const LinkBox = styled.div`
-  width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
 `;
 
 const LinkDiv = styled.div`
   display: flex;
+  justify-content: left;
   width: 100%;
   height: fit-content;
-  justify-content: left;
 `;
 
 const LinkText = styled.p`
@@ -226,22 +226,23 @@ const LinkA = styled.a`
   }
 `;
 const BtnDiv = styled.div`
-  width: 100%;
   display: flex;
-  justify-content: end;
   align-items: end;
+  justify-content: end;
+  width: 100%;
   gap: 0.5rem;
 `;
 
 const SharedBtn = `
-  font-size: 1.1rem;
-  height: fit-content;
   width: 25%;
-  text-transform: none; //대문자 고정 취소
-  white-space: nowrap;
+  height: fit-content;
   padding: 0.5rem 1rem 0.4rem 1rem;
+  font-size: 1.1rem;
+  text-transform: none; //Turn off uppercase default settings
+  white-space: nowrap;
   box-shadow: 0.2rem 0.2rem 0.3rem #dedede;
 `;
+
 const SelectedBtn = styled(Button)`
   ${SharedBtn}
   background-color: green;

src/components/common/StepInfo.js

@@ -1,9 +1,9 @@
 import styled from "styled-components";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { Box, Typography } from "@mui/material";
-import StepData from "../../data/StepData.json";
 import Button from "@mui/material/Button";
+import StepData from "../../data/StepData.json";
 import { activeState } from "../../recoil/commonState";
-import { useRecoilState, useRecoilValue } from "recoil";
 import { eachStepState, modalState } from "../../recoil/commonState";
 
 //StepInfo: Component for description of each step (located on the left side of the screen)
@@ -47,9 +47,9 @@ const StepInfo = () => {
 
 const StStepInfo = styled.div`
   display: flex;
-  margin-top: 10%;
-  flex-direction: column;
   align-items: center;
+  flex-direction: column;
+  margin-top: 10%;
   gap: 2rem;
 `;
 
@@ -60,24 +60,24 @@ const TitleH1 = styled(Typography)`
 
 const ContentP = styled.p`
   margin: 0rem 2rem 0rem 2rem;
-  text-align: justify;
   font-size: 1.3rem;
+  text-align: justify;
   line-height: 2.2rem;
 `;
 
 const ButtonWrapper = styled(Button)`
-  padding: 0.8rem 1.6rem 0.8rem 1.6rem;
   height: 100%;
+  padding: 0.8rem 1.6rem 0.8rem 1.6rem;
   margin-top: 50%;
   font-size: 2rem;
 `;
 
 const Box_ = styled.div`
-  gap: 2rem;
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
+  flex-direction: column;
   height: 100%;
+  gap: 2rem;
 `;
 
 export default StepInfo;

src/components/main/Footer.js

@@ -1,7 +1,8 @@
-import { COLOR } from "../../styles/color.js";
 import { styled } from "styled-components";
+import { COLOR } from "../../styles/color.js";
 import LOGO from "../../assets/images/title.svg";
 import GitHubIcon from "@mui/icons-material/GitHub";
+
 export default function Footer() {
   return (
     <StFooter>
@@ -32,22 +33,21 @@ export default function Footer() {
 }
 
 const StFooter = styled.div`
-  height: 15rem;
-  background-color: ${COLOR.MAIN_WHITE};
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  flex-direction: row;
+  height: 15rem;
+  background-color: ${COLOR.MAIN_WHITE};
 `;
 
 const LogoDiv = styled.div`
-  height: 100%;
-  width: 33%;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 33%;
+  height: 100%;
   padding: 1rem 0rem 1rem 0rem;
-  /* border: 1px solid green; */
 `;
 
 const LogoImg = styled.img`
@@ -56,42 +56,39 @@ const LogoImg = styled.img`
 `;
 
 const InfoDiv = styled.div`
-  height: 100%;
-  width: 33%;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  /* border: 1px solid red; */
+  flex-direction: column;
+  width: 33%;
+  height: 100%;
   padding-left: 5rem;
   padding-top: 1rem;
 `;
 
 const InfoP = styled.p`
-  /* border: 1px solid aqua; */
   justify-content: center;
   align-content: center;
   font-size: 1.2rem;
 `;
 
 const VlineDiv = styled.div`
-  border-left: thin solid #c9c9c9;
   height: 10rem;
+  border-left: thin solid #c9c9c9;
 `;
 const GithubDiv = styled.div`
-  height: 100%;
-  width: 33%;
-  /* border: 1px solid blue; */
   display: flex;
-  align-items: center;
   justify-content: space-evenly;
+  align-items: center;
+  width: 33%;
+  height: 100%;
 `;
 
 const DocsP = styled.p`
   font-family: "Inter", sans-serif;
 `;
 
 const GithubIcon = styled(GitHubIcon)`
+  margin-left: 2rem;
   color: ${COLOR.MAIN_BLACK};
   font-size: "3.3rem";
-  margin-left: 2rem;
 `;