diff --git a/src/App.tsx b/src/App.tsx index 41d7ebe..4ba1815 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,13 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import Landing from '@/pages/landing'; +import Signup from '@/pages/signup'; import '@/styles/styles.css'; -const routes = [{ path: '/', element: }]; +const routes = [ + { path: '/', element: }, + { path: '/signup', element: }, +]; const router = createBrowserRouter(routes); function App() { diff --git a/src/assets/images/backward-button.svg b/src/assets/images/backward-button.svg new file mode 100644 index 0000000..4473fdd --- /dev/null +++ b/src/assets/images/backward-button.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/signup.svg b/src/assets/images/signup.svg new file mode 100644 index 0000000..5934d96 --- /dev/null +++ b/src/assets/images/signup.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/images/wemade-logo-gray-small.svg b/src/assets/images/wemade-logo-gray-small.svg new file mode 100644 index 0000000..48ce33e --- /dev/null +++ b/src/assets/images/wemade-logo-gray-small.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/BigButton.tsx b/src/components/BigButton.tsx new file mode 100644 index 0000000..1126420 --- /dev/null +++ b/src/components/BigButton.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; + +const BigButton = ({ text }: { text: string }) => { + const [isHovered, setIsHovered] = useState(false); + + return ( +
+ +
+ ); +}; + +export default BigButton; diff --git a/src/constants/images.tsx b/src/constants/images.tsx index b6fbfdd..abf06a1 100644 --- a/src/constants/images.tsx +++ b/src/constants/images.tsx @@ -1,3 +1,6 @@ +import BACK_BUTTON from '@/assets/images/backward-button.svg'; +import SIGNUP_LOGO from '@/assets/images/signup.svg'; import BLACK_LOGO from '@/assets/images/wemade-logo-black.png'; +import GRAY_SMALL_LOGO from '@/assets/images/wemade-logo-gray-small.svg'; -export { BLACK_LOGO }; +export { BLACK_LOGO, GRAY_SMALL_LOGO, BACK_BUTTON, SIGNUP_LOGO }; diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index c210832..e41e302 100644 --- a/src/pages/landing.tsx +++ b/src/pages/landing.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { Layout } from '@/components/Layout'; import LoginButton from '@/components/LoginButton'; @@ -25,12 +26,12 @@ const Landing = () => {
처음이시라면? - 회원가입하기 - +
diff --git a/src/pages/signup.tsx b/src/pages/signup.tsx new file mode 100644 index 0000000..014fe07 --- /dev/null +++ b/src/pages/signup.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import BigButton from '@/components/BigButton'; +import { Layout } from '@/components/Layout'; +import { GRAY_SMALL_LOGO, BACK_BUTTON, SIGNUP_LOGO } from '@/constants/images'; + +const Signup = () => { + return ( + +
+
+ + back + + logo + signup +
+ +
+
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+
+ + +
+ + ); +}; + +export default Signup;