-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
237 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import { Box, Tooltip, Typography } from '@mui/material'; | ||
import lottie from 'lottie-web'; | ||
import { useEffect, useRef } from 'react'; | ||
import { useRecoilValue } from 'recoil'; | ||
|
||
import weatherSky from '../../../assets/data/weatherSky'; | ||
import { weatherDataState } from '../../../utils/Recoil'; | ||
import { WeatherType } from '../../../utils/types'; | ||
|
||
type WeatherProps = { | ||
weatherData: WeatherType | undefined; | ||
}; | ||
|
||
const WeatherSkyLottie = ({ weatherData }: WeatherProps) => { | ||
// weatherData에 따라 다른 애니메이션 데이터를 선택 | ||
const getAnimationData = () => { | ||
if (weatherData?.sky === 1) { | ||
return require('../../../assets/lotties/weather/sunny.json'); | ||
} else if (weatherData?.sky === 3) { | ||
return require('../../../assets/lotties/weather/cloudy.json'); | ||
} else if (weatherData?.sky === 4) { | ||
return require('../../../assets/lotties/weather/rainy.json'); | ||
} else if (weatherData?.sky === 5) { | ||
return require('../../../assets/lotties/weather/snow.json'); | ||
} | ||
// 기본값으로 사용할 애니메이션 데이터 | ||
return require('../../../assets/lotties/weather/sunny.json'); | ||
}; | ||
|
||
const animationData = getAnimationData(); | ||
// const animationData = require('../../assets/lotties/allRain.json'); | ||
|
||
//lottie | ||
const element = useRef<HTMLDivElement>(null); | ||
useEffect(() => { | ||
const animation = lottie.loadAnimation({ | ||
container: element.current as HTMLDivElement, | ||
renderer: 'svg', | ||
loop: true, | ||
autoplay: true, | ||
animationData: animationData, | ||
}); | ||
|
||
return () => { | ||
animation.destroy(); // lottie-web 인스턴스 제거 | ||
}; | ||
}, [weatherData]); | ||
return ( | ||
<Tooltip title={weatherSky(weatherData?.sky)} arrow> | ||
<Box ref={element} style={{ height: 350 }}></Box> | ||
</Tooltip> | ||
); | ||
}; | ||
|
||
export default function TemperatureBox() { | ||
const weatherData = useRecoilValue(weatherDataState); | ||
|
||
return ( | ||
<Box sx={{ marginLeft: 11, marginBottom: 10, marginRight: 16 }}> | ||
<WeatherSkyLottie weatherData={weatherData} /> | ||
<Typography | ||
display="flex" | ||
justifyContent="center" | ||
fontSize="25pt" | ||
sx={{ mt: 1 }} | ||
> | ||
{weatherData?.windChill} °C | ||
</Typography> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { InputBase, Paper } from '@mui/material'; | ||
|
||
export default function InputBox({ type }: { type: string }) { | ||
return ( | ||
<Paper | ||
elevation={0} | ||
sx={{ | ||
border: '1px solid #ccc', | ||
borderRadius: '0.4rem', | ||
width: '73%', | ||
height: '2.5rem', | ||
display: 'flex', | ||
alignItems: 'center', | ||
padding: '1rem', // 내부 여백 | ||
marginBottom: '0.3rem', | ||
}} | ||
> | ||
<InputBase | ||
fullWidth | ||
type={type} | ||
sx={{ fontSize: '1rem', fontWeight: 'bold' }} // 텍스트 필드의 스타일 | ||
/> | ||
</Paper> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { Typography } from '@mui/material'; | ||
|
||
export default function QuestionLink({ | ||
sign, | ||
way, | ||
}: { | ||
sign: string; | ||
way: string; | ||
}) { | ||
return ( | ||
<Typography sx={{ marginTop: 2, fontSize: '14px' }}> | ||
이미 계정이 있다면?{' '} | ||
<a href={way} style={{ textDecoration: 'none', color: '#5e8ac9' }}> | ||
{sign} | ||
</a> | ||
</Typography> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { Avatar, Card } from '@mui/material'; | ||
import userImage from 'src/assets/images/user.png'; | ||
|
||
import InputBox from './InputBox'; | ||
import QuestionLink from './QuestionLink'; | ||
import SubmitButton from './SubmitButton'; | ||
import UserLabel from './UserLabel'; | ||
|
||
export default function RegisterBox() { | ||
return ( | ||
<Card | ||
sx={{ | ||
height: '38rem', | ||
width: '24.9rem', | ||
borderRadius: '2.5rem', | ||
justifyContent: 'center', | ||
alignItems: 'center', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
}} | ||
> | ||
<div | ||
style={{ | ||
fontSize: '2rem', | ||
fontFamily: 'Dongle-Bold', | ||
}} | ||
> | ||
Fashion Cloud | ||
</div> | ||
<div style={{ position: 'relative' }}> | ||
<Avatar | ||
alt="사용자 프로필 사진" | ||
src={userImage} | ||
sx={{ | ||
width: 120, | ||
height: 120, | ||
}} | ||
/> | ||
<button | ||
style={{ | ||
position: 'absolute', | ||
borderRadius: '50%', | ||
cursor: 'pointer', | ||
width: '28px', | ||
height: '28px', | ||
bottom: '18px', | ||
right: '18px', | ||
border: 'none', | ||
color: 'white', | ||
fontSize: '24px', | ||
backgroundColor: '#9a9a9b', | ||
}} | ||
> | ||
+ | ||
</button> | ||
</div> | ||
|
||
<UserLabel label="이름*" /> | ||
<InputBox type="text" /> | ||
<UserLabel label="이메일*" /> | ||
<InputBox type="text" /> | ||
<UserLabel label="비밀번호*" /> | ||
<InputBox type="password" /> | ||
<SubmitButton sign="Sign Up" /> | ||
<QuestionLink sign="로그인" way="/login" /> | ||
</Card> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { Button } from '@mui/material'; | ||
|
||
export default function SubmitButton({ sign }: { sign: string }) { | ||
return ( | ||
<Button | ||
variant="contained" | ||
color="info" | ||
sx={{ | ||
borderRadius: '0.4rem', | ||
width: '73%', | ||
height: '2.5rem', | ||
fontSize: '1.3rem', | ||
fontFamily: 'Dongle-Bold', | ||
marginTop: '1.2rem', | ||
marginBottom: '0.4rem', | ||
}} | ||
> | ||
{sign} | ||
</Button> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
export default function UserLabel({ label }: { label: string }) { | ||
return ( | ||
<div | ||
style={{ | ||
fontSize: '0.9rem', | ||
textAlign: 'left', | ||
width: '73%', | ||
marginBottom: '0.6rem', | ||
marginTop: '0.3rem', | ||
}} | ||
> | ||
{label} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { Box } from '@mui/material'; | ||
import TemperatureBox from 'src/components/MainLayout/InfoBox/Temperature'; | ||
import RegisterBox from 'src/components/User/RegisterBox'; | ||
|
||
export default function RegisterPage() { | ||
return ( | ||
<Box | ||
display="flex" | ||
justifyContent="center" | ||
alignItems="center" | ||
sx={{ width: '100%', height: '100vh', backgroundColor: '#F5F8FC' }} | ||
> | ||
<TemperatureBox /> | ||
<RegisterBox /> | ||
</Box> | ||
); | ||
} |