Feature/result2

src/Pages/MainPage/index.jsx

@@ -1,15 +1,22 @@
-import Box, * as S from "./style";
-
+import * as S from "./style";
+import { Link } from "react-router-dom";
 const Main = () => {
-  return (
-    <div>
-      <S.Container>
-        <S.ContainerTitle>
-          <S.ContainerText>Fortune</S.ContainerText>
-        </S.ContainerTitle>
-        <Box></Box>
-      </S.Container>
-    </div>
-  );
+	return (
+		<div>
+			<S.Container>
+				<S.ContainerTitle>
+					<S.ContainerText>Fortune</S.ContainerText>
+				</S.ContainerTitle>
+				<S.ContainerButtonBox>
+					<Link to="/Fortune">
+						<S.ContainerButton>운세뽑기</S.ContainerButton>
+					</Link>
+					<Link to="/Match">
+						<S.ContainerButton>궁합보기</S.ContainerButton>
+					</Link>
+				</S.ContainerButtonBox>
+			</S.Container>
+		</div>
+	);
 };
 export default Main;

src/Pages/MainPage/style.js

@@ -1,6 +1,4 @@
 import styled from 'styled-components';
-import React from 'react';
-import { Link } from 'react-router-dom';
 
 export const Container = styled.div`
     height: 100vh;
@@ -46,33 +44,5 @@ export const ContainerButton = styled.button`
     }
 `;
 
-export const Box = () => {
-    const changeColor = (e) => {
-        console.log("It's working!!");
-        e.target.style.color = 'grey';
-        console.log(e.target);
-    };
-    return (
-        <ContainerButtonBox>
-            <Link to="/Fortune">
-                <ContainerButton
-                    onClick={(e) => {
-                        changeColor(e);
-                    }}
-                >
-                    운세뽑기
-                </ContainerButton>
-            </Link>
-            <Link to="/Match">
-                <ContainerButton
-                    onClick={(e) => {
-                        changeColor(e);
-                    }}
-                >
-                    궁합보기
-                </ContainerButton>
-            </Link>
-        </ContainerButtonBox>
-    );
-};
-export default Box;
+
+

src/Pages/MatchResult/index.jsx

@@ -1,85 +1,85 @@
-import * as S from './style';
-import { useLocation, Link } from 'react-router-dom';
-import heart from '../../imgs/heart.png';
-import { useState, useEffect } from 'react';
-import MatchLoading from '../MatchLoading';
-import { counting } from './hangul';
+import * as S from "./style";
+import { useLocation, Link } from "react-router-dom";
+import heart from "../../imgs/heart.png";
+import { useState, useEffect } from "react";
+import MatchLoading from "../MatchLoading";
+import { counting } from "./hangul";
 
 const MatchResult = () => {
-    const [delay, setDelay] = useState(true); //로딩 화면 확인 변수
+	const [delay, setDelay] = useState(true); //로딩 화면 확인 변수
 
-    const location = useLocation(); // 파라미터를 받기 위함
-    const props = location.state;
+	const location = useLocation(); // 파라미터를 받기 위함
+	const props = location.state;
 
-    let name1 = [props.names[0][0], props.names[0][1], props.names[0][2]]; // 첫 번째 이름을 획마다 나눈것
-    let name2 = [props.names[1][0], props.names[1][1], props.names[1][2]]; // 두 번째 이름을 획마다 나눈것
+	let name1 = [props.names[0][0], props.names[0][1], props.names[0][2]]; // 첫 번째 이름을 획마다 나눈것
+	let name2 = [props.names[1][0], props.names[1][1], props.names[1][2]]; // 두 번째 이름을 획마다 나눈것
 
-    const [result, setResult] = useState('100'); // 궁합 결과 설정
+	const [result, setResult] = useState("100"); // 궁합 결과 설정
 
-    const getMatch = (userNames) => {
-        // 궁합을 보는 로직이 있는 함수
-        let matchResult2 = []; // 반복문을 돌면서 결과가 나오는 과정에 필요한 공간
-        let final; // 최종 결과
-        for (let i = 0; i < 4; i++) {
-            // 각 획수를 비교하는 과정을 전체적으로 4번 반복함
-            if (i % 2 === 0)
-                // 2회 반복될 때마다 저장 공간 교체
-                for (let j = 0; j < 5 - i; j++) {
-                    // 점차 반복 횟수가 줄어들게(아래로 뾰족한 삼각형처럼)
-                    matchResult2[j] = (userNames[j] + userNames[j + 1]) % 10; // j인덱스에 있는 획수와 그 다음 인덱스에 있는 획수를 더해서 10으로 나눈 나머지를 구함
-                }
-            else
-                for (let j = 0; j < 5 - i; j++) {
-                    // 점차 반복 횟수가 줄어들게(아래로 뾰족한 삼각형처럼)
-                    userNames[j] = (matchResult2[j] + matchResult2[j + 1]) % 10; // j인덱스에 있는 획수와 그 다음 인덱스에 있는 획수를 더해서 10으로 나눈 나머지를 구함
-                }
-        }
-        final = `${userNames[0]}${userNames[1]}`; // 문자열로 변환해서 저장
-        return final;
-    };
+	const getMatch = (userNames) => {
+		// 궁합을 보는 로직이 있는 함수
+		let matchResult2 = []; // 반복문을 돌면서 결과가 나오는 과정에 필요한 공간
+		let final; // 최종 결과
+		for (let i = 0; i < 4; i++) {
+			// 각 획수를 비교하는 과정을 전체적으로 4번 반복함
+			if (i % 2 === 0)
+				// 2회 반복될 때마다 저장 공간 교체
+				for (let j = 0; j < 5 - i; j++) {
+					// 점차 반복 횟수가 줄어들게(아래로 뾰족한 삼각형처럼)
+					matchResult2[j] = (userNames[j] + userNames[j + 1]) % 10; // j인덱스에 있는 획수와 그 다음 인덱스에 있는 획수를 더해서 10으로 나눈 나머지를 구함
+				}
+			else
+				for (let j = 0; j < 5 - i; j++) {
+					// 점차 반복 횟수가 줄어들게(아래로 뾰족한 삼각형처럼)
+					userNames[j] = (matchResult2[j] + matchResult2[j + 1]) % 10; // j인덱스에 있는 획수와 그 다음 인덱스에 있는 획수를 더해서 10으로 나눈 나머지를 구함
+				}
+		}
+		final = `${userNames[0]}${userNames[1]}`; // 문자열로 변환해서 저장
+		return final;
+	};
 
-    useEffect(() => {
-        setTimeout(() => setDelay(false), 3000); // 3초동안 로딩
+	useEffect(() => {
+		setTimeout(() => setDelay(false), 3000); // 3초동안 로딩
 
-        name1 = counting(name1); // 각 획수를 센다
-        name2 = counting(name2); // 각 획수를 센다
-        const userNames = [
-            name1[0],
-            name2[0],
-            name1[1],
-            name2[1],
-            name1[2],
-            name2[2],
-        ];
-        setResult(getMatch(userNames)); // 결과를 구한다
-    }, []);
+		name1 = counting(name1); // 각 획수를 센다
+		name2 = counting(name2); // 각 획수를 센다
+		const userNames = [
+			name1[0],
+			name2[0],
+			name1[1],
+			name2[1],
+			name1[2],
+			name2[2],
+		];
+		setResult(getMatch(userNames)); // 결과를 구한다
+	}, []);
 
-    return (
-        <div>
-            {delay ? (
-                <MatchLoading></MatchLoading>
-            ) : (
-                <S.Container>
-                    <S.VioletText>
-                        {props.names[2]}님과 {props.names[3]}님의 궁합은?
-                    </S.VioletText>
-                    <S.HeartDiv>
-                        <S.RelativeText>{result}%</S.RelativeText>
-                        <S.ViewPicture src={heart} />
-                    </S.HeartDiv>
-                    <S.ButtonBox>
-                        <Link
-                            to={{ pathname: '/match' }}
-                            style={{ textDecoration: 'none' }}
-                        >
-                            <S.TextContainer>돌아가기</S.TextContainer>
-                        </Link>
-                        <S.TextContainer>공유하기</S.TextContainer>
-                    </S.ButtonBox>
-                </S.Container>
-            )}
-        </div>
-    );
+	return (
+		<div>
+			{delay ? (
+				<MatchLoading></MatchLoading>
+			) : (
+				<S.Container>
+					<S.VioletText>
+						{props.names[2]}님과 {props.names[3]}님의 궁합은?
+					</S.VioletText>
+					<S.HeartDiv>
+						<S.RelativeText>{result}%</S.RelativeText>
+						<S.ViewPicture src={heart} />
+					</S.HeartDiv>
+					<S.ButtonBox>
+						<Link
+							to={{ pathname: "/match" }}
+							style={{ textDecoration: "none" }}
+						>
+							<S.TextContainer>돌아가기</S.TextContainer>
+						</Link>
+						<S.TextContainer>공유하기</S.TextContainer>
+					</S.ButtonBox>
+				</S.Container>
+			)}
+		</div>
+	);
 };
 
 export default MatchResult;