-
+
);
}
diff --git a/src/GlobalStyle.js b/src/GlobalStyle.js
index 5264ae6..bf48272 100644
--- 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
index b123721..884747c 100644
--- 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 ? (
-
-
+
+
Loadingโฆ
-
-
+
+
) : null;
}
diff --git a/src/SearchBox/SearchBox.js b/src/SearchBox/SearchBox.js
index 9e97ff3..22917a6 100644
--- 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 (
-
-
+
+
์ฐพ๋ ๋ฌธ์ ๊ฐ ์์ผ์ ๊ฐ์?
Repository์ ํ์ด๋ฅผ ์ ๋ณดํด์ฃผ์ธ์
-
+
);
}
diff --git a/src/SearchBox/components/SearchableList.js b/src/SearchBox/components/SearchableList.js
index 3b64c4a..e84af80 100644
--- 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 (
-
+
+
);
}
diff --git a/src/SearchResult/SearchResult.js b/src/SearchResult/SearchResult.js
index c1050a5..09fc20f 100644
--- a/src/SearchResult/SearchResult.js
+++ b/src/SearchResult/SearchResult.js
@@ -1,13 +1,17 @@
import { formattedFileName } from './utils/format.js';
import { copyText } from './utils/copyText.js';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil';
import { solutionState, solutionNoState } from '../index.js';
import styled from 'styled-components';
const SearchResultDiv = styled.div`
- margin-left: 50px;
+ margin-left: -200px;
width: 800px;
+ display: inline-block;
+ position: absolute;
+ top: 178px;
+ left: 50%;
`;
const SolutionNavigator = styled.div`
@@ -15,14 +19,6 @@ const SolutionNavigator = styled.div`
float: right;
position: relative;
top: 55px;
-
- .btnSolnMove {
- cursor: pointer;
- }
- .btnSolnMoveInactive {
- opacity: 0.4;
- cursor: not-allowed;
- }
`;
const Button = styled.div`
@@ -34,6 +30,14 @@ const Button = styled.div`
font-size: 25px;
font-weight: 700;
border: 0;
+ ${({ state }) => {
+ if (state) {
+ return 'opacity:1; cursor:pointer';
+ } else {
+ return 'opacity:0.4; cursor:not-allowed';
+ }
+ }};
+
color: ${props => props.theme.textBtn};
&:first-child {
border-radius: 50px 15px 15px 50px;
@@ -131,6 +135,13 @@ export default function SearchResult() {
const solutionNo = useRecoilValue(solutionNoState);
const setSolutionNo = useSetRecoilState(solutionNoState);
let [copyMessage, changeCopyMessage] = useState();
+ const [prev, setPrev] = useState(false);
+ const [next, setNext] = useState(false);
+
+ useEffect(() => {
+ setPrev(solutionNo > 0 ? true : false);
+ setNext(solutionNo < solution.length - 1 ? true : false);
+ });
function copyCode(e) {
const src = e.target.previousElementSibling;
@@ -149,34 +160,20 @@ export default function SearchResult() {
}
return (
-
-
-
+
-
+
+
);
}
diff --git a/src/SearchBox/components/SearchInput.js b/src/SearchBox/components/SearchInput.js
index ff1eb6f..5457b97 100644
--- 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 (
-
-
+
);
}
diff --git a/src/SearchBox/components/SearchPhrases.js b/src/SearchBox/components/SearchPhrases.js
index 401218e..8d95c1a 100644
--- 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 (
- Repository์ ํ์ด๋ฅผ ์ ๋ณดํด์ฃผ์ธ์