JCTG-JavaScript-Coding-Test-Group · chaerin-dev · Jun 24, 2022 · Jun 14, 2022 · Jun 15, 2022 · Jun 16, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,9 @@
     "g": "^2.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-redux": "^7.2.6",
     "react-scripts": "5.0.1",
+    "redux": "^4.1.2",
     "recoil": "^0.7.3",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"

diff --git a/src/App.js b/src/App.js
@@ -3,30 +3,19 @@ import SearchResult from './SearchResult/SearchResult';
 import Footer from './Footer/footer';
 import Loading from './Loading';
 
-import styled, { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 import { theme } from './theme';
 import { GlobalStyle } from './GlobalStyle';
 
-const AppDiv = styled.div`
-  display: flex;
-  width: 1170px;
-  margin: 0 auto;
-  justify-content: center;
-`;
-
 export default function App() {
   return (
-    <>
-      <ThemeProvider theme={theme}>
-        <GlobalStyle />
-        <h1>🔍 프로그래머스 해설 은행</h1>
-        <AppDiv className="app">
-          <Loading />
-          <SearchBox />
-          <SearchResult />
-          <Footer />
-        </AppDiv>
-      </ThemeProvider>
-    </>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <h1>🔍 프로그래머스 해설 은행</h1>
+      <Loading />
+      <SearchBox />
+      <SearchResult />
+      <Footer />
+    </ThemeProvider>
   );
 }
diff --git a/src/Footer/components/CopyRight.js b/src/Footer/components/CopyRight.js
@@ -1,6 +1,7 @@
 import { FooterDiv, FooterInAnchor } from '../footer';
+import { repoLink } from '../footer';
 
-export default function CopyRight({ repoLink }) {
+export default function CopyRight() {
   return (
     <>
       <FooterDiv>

diff --git a/src/Footer/components/Issuse.js b/src/Footer/components/Issuse.js
@@ -1,6 +1,7 @@
 import { FooterDiv, FooterTitle, FooterInAnchor } from '../footer';
+import { repoLink } from '../footer';
 
-export default function Issues({ repoLink }) {
+export default function Issues() {
   return (
     <FooterDiv className="Issues">
       <FooterTitle className="IssuesTitle footerTitle" title="이슈제보">

diff --git a/src/Footer/components/LogoBox.js b/src/Footer/components/LogoBox.js
@@ -1,6 +1,7 @@
 import gitHubLogoPath from '../../images/github.png';
 import programmersLogoPath from '../../images/programmers.png';
 import styled from 'styled-components';
+import { repoLink } from '../footer';
 
 const LogoBoxDiv = styled.div`
   position: absolute;
@@ -28,7 +29,7 @@ const FooterLogo = styled.img`
   cursor: pointer;
 `;
 
-export default function LogoBox({ repoLink }) {
+export default function LogoBox() {
   return (
     <LogoBoxDiv className="logoBox">
       <a href={repoLink} target="_blank">

diff --git a/src/Footer/components/Repo.js b/src/Footer/components/Repo.js
@@ -1,6 +1,7 @@
 import { FooterDiv, FooterTitle, FooterInAnchor } from '../footer';
+import { repoLink } from '../footer';
 
-export default function Repo({ repoLink }) {
+export default function Repo() {
   return (
     <FooterDiv className="repo">
       <FooterTitle className="repoTitle footerTitle" title="깃허브 레포지토리">

diff --git a/src/Footer/footer.js b/src/Footer/footer.js
@@ -40,14 +40,14 @@ export const repoLink =
 
 export default function Footer() {
   return (
-    <FooterBox id="footerBox">
-      <div className="footer">
-        <Repo repoLink={repoLink} />
-        <Issues repoLink={repoLink} />
+    <FooterBox>
+      <div>
+        <Repo />
+        <Issues />
         <Contributor />
-        <CopyRight repoLink={repoLink} />
+        <CopyRight />
       </div>
-      <LogoBox repoLink={repoLink} />
+      <LogoBox />
     </FooterBox>
   );
 }
diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js
@@ -20,4 +20,9 @@ export const GlobalStyle = createGlobalStyle`
     border-bottom: 4px solid ${props => props.theme.borderLevelTitle};
     }
 
+    #root {
+    width:100%;
+    margin: 0 auto;
+    justify-content: center;
+    }
 `;
diff --git a/src/Loading.js b/src/Loading.js
@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { loadingState } from './index.js';
 import styled from 'styled-components';
 
-const LoadingDiv = styled.div`
+const Wrapper = styled.div`
   display: flex;
   position: absolute;
   top: -50px;
@@ -12,13 +12,15 @@ const LoadingDiv = styled.div`
   align-items: center;
   color: #0aa1dd;
   font-size: 18px;
-  min-width: 2500px;
+  min-width: 1500px;
+  width: 100%;
   min-height: 2000px;
+  height: 100%;
   z-index: 5;
   background-color: ${props => props.theme.background};
 `;
 
-const LoadingChild = styled.div`
+const Content = styled.div`
   position: relative;
   top: 400px;
   align-items: center;
@@ -29,11 +31,11 @@ const LoadingChild = styled.div`
 export default function Loading() {
   const loading = useRecoilValue(loadingState);
   return loading ? (
-    <LoadingDiv className="loading">
-      <LoadingChild>
+    <Wrapper>
+      <Content>
         <img src={spinnerPath} alt="Loading..." />
         Loading…
-      </LoadingChild>
-    </LoadingDiv>
+      </Content>
+    </Wrapper>
   ) : null;
 }
diff --git a/src/SearchBox/SearchBox.js b/src/SearchBox/SearchBox.js
@@ -1,13 +1,22 @@
 import SearchInput from './components/SearchInput';
 import SearchableList from './components/SearchableList';
 import SearchPhrases from './components/SearchPhrases';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  margin-left: -600px;
+  width: 320px;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+`;
 
 export default function SearchBox() {
   return (
-    <div className="searchBox">
+    <Wrapper>
       <SearchInput />
       <SearchableList />
       <SearchPhrases />
-    </div>
+    </Wrapper>
   );
 }
diff --git a/src/SearchBox/components/SearchInput.js b/src/SearchBox/components/SearchInput.js
@@ -1,7 +1,7 @@
 import { CreateFuzzyMatcher } from '../utils/koreanFuzzy';
 import styled from 'styled-components';
 
-const SearchInputDiv = styled.input`
+const Input = styled.input`
   width: 320px;
   height: 50px;
   background-color: ${props => props.theme.background};
@@ -29,13 +29,11 @@ export default function SearchInput() {
   }
 
   return (
-    <div className="searchInput">
-      <SearchInputDiv
-        type="search"
-        id="searchInput"
-        placeholder="문제 이름을 검색하세요."
-        onChange={search}
-      />
-    </div>
+    <Input
+      type="search"
+      id="searchInput"
+      placeholder="문제 이름을 검색하세요."
+      onChange={search}
+    />
   );
 }
diff --git a/src/SearchBox/components/SearchPhrases.js b/src/SearchBox/components/SearchPhrases.js
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
-const SearchPhrasesDiv = styled.div`
+const Wrapper = styled.div`
   width: 320px;
   text-align: center;
   font-size: 20px;
   font-weight: 600;
   font-family: 'Noto Sans KR', sans-serif;
-  color: #3c6382;
+  color: ${props => props.theme.phrasesColor};
   margin: 20px 0;
 `;
 
@@ -17,12 +17,12 @@ const Anchor = styled.div`
 
 export default function SearchPhrases() {
   return (
-    <SearchPhrasesDiv className="searchPhrases">
-      <Anchor href="#footerBox">
+    <Wrapper>
+      <Anchor>
         찾는 문제가 없으신가요?
         <br />
         Repository에 풀이를 제보해주세요
       </Anchor>
-    </SearchPhrasesDiv>
+    </Wrapper>
   );
 }
diff --git a/src/SearchBox/components/SearchableList.js b/src/SearchBox/components/SearchableList.js
@@ -5,8 +5,9 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { solutionState, loadingState, solutionNoState } from '../../index.js';
 import styled from 'styled-components';
 
-const SearchableListDiv = styled.div`
+const Wrapper = styled.div`
   width: 320px;
+  display: inline;
 `;
 
 const FileListContainer = styled.div`
@@ -59,6 +60,22 @@ const FileListContainer = styled.div`
   }
 `;
 
+// const FileList = styled.div`
+//   background-color: ${props => props.theme.bgColor};
+//   position: relative;
+//   top: 0;
+//   padding: 10px;
+//   margin: 0;
+//   border-bottom: 1px solid ${props => props.theme.bgBtn2};
+//   outline: none;
+//   color: $text-color;
+//   font-size: 18px;
+//   font-weight: 700;
+//   &:last-child {
+//     border: none;
+//   }
+// `;
+
 export default function SearchableList() {
   let [fileListHTML, changeState] = useState('');
   const setSolutionInfo = useSetRecoilState(solutionState);
@@ -107,13 +124,12 @@ export default function SearchableList() {
   }
 
   return (
-    <SearchableListDiv className="searchableList">
+    <Wrapper>
       <FileListContainer
-        className="file-list-container"
         onClick={showResult}
         solutionNoState={0}
         dangerouslySetInnerHTML={{ __html: fileListHTML }}
       ></FileListContainer>
-    </SearchableListDiv>
+    </Wrapper>
   );
 }