Merge pull request #9 from LikeLionHGU/hwan_#7/검사결과

Hwan #7/검사결과
LikeLionHGU · May 19, 2024 · 99fb808 · 99fb808
2 parents a6b7976 + ff05467
commit 99fb808
Show file tree

Hide file tree

Showing 13 changed files with 839 additions and 104 deletions.
diff --git a/src/imgs/downArrow.svg b/src/imgs/downArrow.svg
diff --git a/src/imgs/maemulju_big.svg b/src/imgs/maemulju_big.svg
diff --git a/src/imgs/maepgu_big.svg b/src/imgs/maepgu_big.svg
diff --git a/src/imgs/maepgu.svg → src/imgs/maepgu_small.svg b/src/imgs/maepgu.svg → src/imgs/maepgu_small.svg
diff --git a/src/imgs/maepmulju.svg → src/imgs/maepmulju_small.svg b/src/imgs/maepmulju.svg → src/imgs/maepmulju_small.svg
diff --git a/src/imgs/maepnose_big.svg b/src/imgs/maepnose_big.svg
diff --git a/src/imgs/maepnose.svg → src/imgs/maepnose_small.svg b/src/imgs/maepnose.svg → src/imgs/maepnose_small.svg
diff --git a/src/imgs/silbifairy_big.svg b/src/imgs/silbifairy_big.svg
diff --git a/src/imgs/silbifairy_small.svg b/src/imgs/silbifairy_small.svg
diff --git a/src/imgs/upArrow.svg b/src/imgs/upArrow.svg
diff --git a/src/imgs/wiamplanner_big.svg b/src/imgs/wiamplanner_big.svg
diff --git a/src/imgs/wiamplanner.svg → src/imgs/wiamplanner_small.svg b/src/imgs/wiamplanner.svg → src/imgs/wiamplanner_small.svg
diff --git a/src/routes/TestResult.jsx b/src/routes/TestResult.jsx
@@ -0,0 +1,116 @@
+import Header from "../components/header/header";
+import styled from "styled-components";
+
+import SlibFairyBig from "../imgs/silbifairy_big.svg";
+import MaepguSmall from "../imgs/maepgu_small.svg";
+import MaepnoseSmall from "../imgs/maepnose_small.svg";
+import DownArrow from "../imgs/downArrow.svg";
+import UpArrow from "../imgs/upArrow.svg";
+
+const StyleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Above = styled.div`
+  display: flex;
+`;
+
+const AboveLeft = styled.div``;
+
+const AboveRight = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Bottom = styled.div`
+  display: flex;
+`;
+
+const ImgContainer = styled.div`
+  /* position: relative; */
+  width: 244px; /* 이미지 크기에 맞게 설정 */
+  height: 356px; /* 이미지 크기에 맞게 설정 */
+  perspective: 1000px;
+`;
+
+const Flipper = styled.div`
+  width: 100%;
+  height: 100%;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+  position: relative;
+
+  &:hover {
+    transform: rotateY(180deg);
+  }
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: hidden;
+  top: 0;
+  left: 0;
+`;
+
+const FrontImage = styled(Image)`
+  transform: rotateY(0deg);
+`;
+
+const BackImage = styled(Image)`
+  transform: rotateY(180deg);
+`;
+
+export default function TestResult() {
+  return (
+    <>
+      <Header />
+      <StyleContainer>
+        <Above>
+          <AboveLeft>
+            <div>5단계 : 실비요정</div>
+            <img src={SlibFairyBig} alt="big" />
+          </AboveLeft>
+          <AboveRight>
+            <div>캐릭터 설명</div>
+            <button>지도 보러가기</button>
+          </AboveRight>
+        </Above>
+        <div>다른 캐릭터들 보러 가기</div>
+        <img src={DownArrow} alt="downarrow" />
+        <img src={UpArrow} alt="uparrow" />
+        <div>내 캐릭터 보러 가기</div>
+        <Bottom>
+          <ImgContainer>
+            <Flipper>
+              <FrontImage src={MaepguSmall} alt="1" />
+              <BackImage src={MaepnoseSmall} alt="1" />
+            </Flipper>
+          </ImgContainer>
+          <ImgContainer>
+            <Flipper>
+              <FrontImage src={MaepguSmall} alt="2" />
+              <BackImage src={MaepnoseSmall} alt="2" />
+            </Flipper>
+          </ImgContainer>
+          <ImgContainer>
+            <Flipper>
+              <FrontImage src={MaepguSmall} alt="3" />
+              <BackImage src={MaepnoseSmall} alt="3" />
+            </Flipper>
+          </ImgContainer>
+          <ImgContainer>
+            <Flipper>
+              <FrontImage src={MaepguSmall} alt="4" />
+              <BackImage src={MaepnoseSmall} alt="4" />
+            </Flipper>
+          </ImgContainer>
+        </Bottom>
+      </StyleContainer>
+    </>
+  );
+}