diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx index 99b312b..6056f9f 100644 --- a/src/pages/Main.jsx +++ b/src/pages/Main.jsx @@ -124,8 +124,8 @@ export function Main() { }; return ( - - + <> + Mood Friend - - - - - - - 누가 {name} 기분을 안 좋게 했어! - - - - - - - - - + + + + + + + + + {name} 안하고싶어... + + + + + {/* + + */} + + + + + + + - + ); } // 스타일 정의 const Container = styled.div` - position: relative; - flex-direction: column; - align-items: center; max-width: 430px; min-width: 360px; - min-height: 100vh; - margin: auto; + height: calc(100vh - 16vh); + background-color: ${(props) => props.theme.color.pinkColor}; `; const Background = styled.div` display: flex; flex-direction: column; align-items: center; - justify-content: center; - background-color: ${(props) => props.theme.color.pinkColor}; + height: 100%; `; const Floor = styled.div` width: 100%; + height: 100%; + position: relative; display: flex; flex-direction: column; align-items: center; background-color: ${(props) => props.theme.color.lightPinkColor}; - - @media (max-height: 932px) { - height: calc(100vh - 632px); - max-height: 932px; - } - - @media (max-height: 780px) { - height: calc(100vh - 660px); - overflow: hidden; - } `; const Interior = styled.div` + margin-top: 2rem; display: flex; align-items: center; - margin-top: -200px; + justify-content: space-between; `; const FloorInterior = styled.div` @@ -208,9 +204,12 @@ const FloorInterior = styled.div` const LeftObj = styled.img` width: 80px; height: 80px; - margin-top: -100px; margin-right: 150px; `; +const RightObj = styled.img` + width: 80px; + height: 80px; +`; const RightFloorObj = styled.img` width: 50px; @@ -219,12 +218,6 @@ const RightFloorObj = styled.img` position: absolute; `; -const RightObj = styled.img` - width: 80px; - height: 80px; - margin-top: -100px; -`; - const Icon = styled.img` width: 25px; height: 25px; @@ -235,30 +228,27 @@ const Icon = styled.img` const Icons = styled.div` display: flex; align-items: center; - margin-top: 70px; - margin-bottom: 350px; + justify-content: center; + height: 8vh; `; const Chat = styled.div` display: flex; + flex-direction: column; align-items: center; - margin-top: 30px; + margin-top: 1rem; margin-bottom: 30px; position: relative; `; -const Dialog = styled.img` - width: 150%; - height: 100%; -`; +const Dialog = styled.img``; -const DialogText = styled.div` +const DialogText = styled.h2` + font-family: "Pretendard"; position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + top: 40%; color: #000000; - font-size: 12px; + font-size: 18px; text-align: center; font-weight: bold; padding: 10px; @@ -283,12 +273,14 @@ const Number = styled.h1` `; const Character = styled.img` + position: absolute; + top: -35%; width: 140px; height: 150px; display: flex; `; -const Circular = styled.button` +const Circular = styled.div` width: 180px; height: 60px; border-radius: 50%; @@ -301,3 +293,15 @@ const Circular = styled.button` font-size: 16pt; cursor: pointer; `; + +const TopSection = styled.div` + display: flex; + flex-direction: column; + align-items: center; + height: 60%; +`; + +const BottomSection = styled.div` + width: 100%; + height: 40%; +`;