// mypage.style.js
import styled from "styled-components";
import { IcHoneyBear } from "../../assets/svg";

export const MyPageWrapper=styled.div`
    ${({ theme: { mixin } }) => mixin.flexCenter({})};
    background: ${({ theme }) => theme.colors.gradient.gradient_pink};
    width: 100%;
    height: 100vh;
    justify-content: space-between;
`
export const TopWrapper = styled.div`
    width: 100%;
    height: 20rem;
`
export const HoneyBearWrapper = styled.div`
    ${({ theme: { mixin } }) => mixin.flexCenter({})};
    // width: 37.5rem;
    // height: 30rem;
    // position: absolute;
    // top: 7rem;
`
export const HoneyBear = styled(IcHoneyBear)`
    display: flex;
`
export const BackButtonWrapper = styled.div`
    padding-left: 2.8rem;
    padding-top: 3.2rem;
    z-index: 1;
`
export const PopUpWrapper = styled.div`
    ${({ theme: { mixin } }) => mixin.flexCenter({})};
    padding-bottom: 36rem;
`

// mypage.jsx

import * as S from './MyPage.style'
import { useNavigate } from 'react-router-dom'
import PopUp from '../../components/PopUp/PopUp'
import BtnBack from '../../components/common/buttons/Back/BtnBack'
import MyPagePopUp from './MyPagePopUp/MyPagePopUp'

export default function MyPage(){
  const navigate = useNavigate();
  const handleBackButton = () => {
    navigate('/main');
  }

  return(
    <S.MyPageWrapper>
      <S.TopWrapper>
        <S.BackButtonWrapper>
          <BtnBack 
            handleClick={handleBackButton}
          />
        </S.BackButtonWrapper>
        
        <S.HoneyBearWrapper>
          <S.HoneyBear 
            height='30rem'
          />
        </S.HoneyBearWrapper>
      </S.TopWrapper>
      
      <S.PopUpWrapper>
        <PopUp 
          name='마이페이지'
        >
          <MyPagePopUp />
        </PopUp>
      </S.PopUpWrapper>
    </S.MyPageWrapper>
  )
}

import * as S from './SearchByEmotion.style';
import { useNavigate } from 'react-router-dom';
import PopUp from '../../components/PopUp/PopUp';
import BtnBack from '../../components/common/buttons/Back/BtnBack';
import SearchByEmotionPopUp from './SearchByEmotionPopUp/SearchByEmotionPopUp';

export default function SearchByEmotion(){
    const navigate = useNavigate();

    const handleBackButton = () => {
        
        navigate('/main');
    }

    return(
        <S.MyPageWrapper>
            <S.TopWrapper>
                <S.BackButtonWrapper>
                    <BtnBack handleClick={handleBackButton}/>
                </S.BackButtonWrapper>
                
                <S.HoneyBearWrapper>
                    <S.HoneyBear height='30rem'/>
                </S.HoneyBearWrapper>
            </S.TopWrapper>
            
            <S.PopUpWrapper>
                <PopUp name='감정별 일기조회'>
                    <SearchByEmotionPopUp/>
                </PopUp>
            </S.PopUpWrapper>
            
        </S.MyPageWrapper>
    )
}

import styled from "styled-components";
import { IcHoneyBear } from "../../assets/svg";

export const MyPageWrapper=styled.div`
    ${({ theme: { mixin } }) => mixin.flexCenter({})};
    background: ${({ theme }) => theme.colors.gradient.gradient_pink};
    width: 100%;
    height: 100vh;
    justify-content: space-between;
`
export const TopWrapper = styled.div`
    width: 100%;
    height: 20rem;
`
export const HoneyBearWrapper = styled.div`
    ${({ theme: { mixin } }) => mixin.flexCenter({})};
    // width: 37.5rem;
    // height: 30rem;
    // position: absolute;
    // top: 7rem;
`
export const HoneyBear = styled(IcHoneyBear)`
    display: flex;
`
export const BackButtonWrapper = styled.div`
    padding-left: 2.8rem;
    padding-top: 3.2rem;
    z-index: 1;
`
export const PopUpWrapper = styled.div`
    ${({ theme: { mixin } }) => mixin.flexCenter({})};
    padding-bottom: 36rem;
`