feat: 회원가입페이지 퍼블리싱

src/App.tsx

@@ -6,6 +6,7 @@ import MainDrawer from './components/common/MainDrawer';
 import LookbookDetailpage from './pages/LookbookDetailpage';
 import Mainpage from './pages/MainPage';
 import MyPage from './pages/MyPage';
+import RegisterPage from './pages/RegisterPage';
 
 export default function App() {
   const queryClient = new QueryClient();
@@ -18,6 +19,7 @@ export default function App() {
           <Routes>
             <Route path="/" element={<Mainpage />} />
             <Route path="/mypage" element={<MyPage />} />
+            <Route path="/register" element={<RegisterPage />} />
             <Route
               path="/lookbookdetail/:id"
               element={<LookbookDetailpage />}

src/components/MainLayout/InfoBox/Temperature.tsx

@@ -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>
+  );
+}

src/components/User/InputBox.tsx

@@ -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>
+  );
+}

src/components/User/QuestionLink.tsx

@@ -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>
+  );
+}

src/components/User/RegisterBox.tsx

@@ -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>
+  );
+}

src/components/User/SubmitButton.tsx

@@ -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>
+  );
+}

src/components/User/UserLabel.tsx

@@ -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>
+  );
+}

src/pages/RegisterPage.tsx

@@ -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>
+  );
+}