Skip to content

Commit

Permalink
Merge pull request #30 from Nexters/feat/#29
Browse files Browse the repository at this point in the history
[Feat/#29] 결과페이지 인터랙션 & 퍼블리싱
  • Loading branch information
ljh0608 authored Jan 30, 2025
2 parents 652af8d + 4ed9873 commit 87f78c6
Show file tree
Hide file tree
Showing 13 changed files with 1,482 additions and 19 deletions.
10 changes: 9 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
{
"extends": ["next/core-web-vitals", "next/typescript", "prettier"]
"extends": ["next/core-web-vitals", "next/typescript", "prettier"],
"rules": {
"react/self-closing-comp": [
"error",
{
"component": true
}
]
}
}
783 changes: 783 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@tanstack/react-query": "^5.63.0",
"@tanstack/react-query-devtools": "^5.63.0",
"axios": "^1.7.9",
"motion": "^12.0.5",
"next": "14.2.23",
"react": "^18",
"react-dom": "^18",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
"use client";

import * as motion from "motion/react-client";
import Image from "next/image";
import catHand from "@/shared/assets/images/catHand.png";
import cardBack from "@/shared/assets/images/cardBack.jpg";
import cardFront from "@/shared/assets/images/Card1.jpg";
import styled from "styled-components";
import { easeInOut } from "motion";
import { SetStateAction, useState, Dispatch } from "react";

type PropTypes = {
setTarotInteractation: Dispatch<SetStateAction<boolean>>;
};

const putCardtransition = {
duration: 0.6,
ease: easeInOut,
};

const handTransition = {
duration: 0.6,
delay: 0.6,
ease: easeInOut,
};

const cardRotateTransition = {
delay: 1.2,
duration: 0.6,
};

const TarotInteraction = ({ setTarotInteractation }: PropTypes) => {
const [isVisible, setIsVisible] = useState(true);

const routingTarotResult = () => {
setTimeout(() => {
setTarotInteractation(false);
}, 1000);
};
return (
<TarotWaitingWrapper>
<Center>
<Title>
두근두근 <br />
어떤 카드가 나올지 기대된다냥
</Title>
<TarotAnimationBackground>
<TaroAnimationWrapper
initial={{ opacity: 0, y: 200 }}
animate={{ opacity: 1, y: 0 }}
transition={putCardtransition}
>
<CardInner
animate={{ rotateY: -180 }}
transition={cardRotateTransition}
onAnimationComplete={routingTarotResult}
>
<CardFront alt="카드 앞면" src={cardFront} />
<CardBack alt="카드 뒷면" src={cardBack} />
</CardInner>

{isVisible && (
<motion.div
initial={{ opacity: 1, y: 0 }}
animate={{ opacity: 0, y: 200 }}
transition={handTransition}
onAnimationComplete={() => setIsVisible(false)}
>
<CatHand alt="고양이손 이미지" src={catHand} />
</motion.div>
)}
</TaroAnimationWrapper>
</TarotAnimationBackground>
</Center>
</TarotWaitingWrapper>
);
};

export default TarotInteraction;

const CardFront = styled(Image)`
width: 100%;
height: 100%;
position: absolute;
`;

const CardBack = styled(Image)`
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
`;
const CardInner = styled(motion.div)`
position: absolute;
background-color: transparent;
width: 208px;
height: 337px;
perspective: 1000px;
transform-style: preserve-3d;
`;
const Title = styled.h1`
margin-bottom: 43px;
text-align: center;
${({ theme }) => theme.fonts.headline2};
`;

const TarotWaitingWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
overflow: hidden;
`;

const TaroAnimationWrapper = styled(motion.div)`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
height: 100vh;
`;

const CatHand = styled(Image)`
position: relative;
top: 296px;
width: 158px;
height: 278px;
`;

const Center = styled.div`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;

const TarotAnimationBackground = styled.div`
max-width: 425px;
width: 100%;
height: 425px;
border-radius: 425px;
background: radial-gradient(
50% 50% at 50% 50%,
#bc95ff 0%,
rgba(255, 255, 255, 0) 100%
);
display: flex;
flex-direction: column;
justify-content: center;
`;
Loading

0 comments on commit 87f78c6

Please sign in to comment.