From 5d5a63554c1bb9f5d0f18b1f06b0d9dff4c9c654 Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Thu, 9 May 2024 00:21:48 +0900 Subject: [PATCH 1/6] chore: updated assets --- public/svg/feeling_L_blank.svg | 18 +++++++++++++++++ src/assets/svg/FeelingLBlank.tsx | 34 ++++++++++++++++++++++++++++++++ src/assets/svg/index.ts | 1 + src/style/reset.ts | 2 +- src/style/theme.ts | 5 +++-- 5 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 public/svg/feeling_L_blank.svg create mode 100644 src/assets/svg/FeelingLBlank.tsx diff --git a/public/svg/feeling_L_blank.svg b/public/svg/feeling_L_blank.svg new file mode 100644 index 0000000..97c3c24 --- /dev/null +++ b/public/svg/feeling_L_blank.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/FeelingLBlank.tsx b/src/assets/svg/FeelingLBlank.tsx new file mode 100644 index 0000000..71fe462 --- /dev/null +++ b/src/assets/svg/FeelingLBlank.tsx @@ -0,0 +1,34 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgFeelingLBlank = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + +); +export default SvgFeelingLBlank; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index 0ba1209..c2b737b 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,4 +1,5 @@ export { default as Favicon } from "./Favicon"; +export { default as IcFeelingLBlank } from "./FeelingLBlank"; export { default as IcPcKakaotalk } from "./PcKakaotalk"; export { default as IcPcBackgrHalfstars } from "./PcBackgrHalfstars"; export { default as IcPcBackgrStars } from "./PcBackgrStars"; diff --git a/src/style/reset.ts b/src/style/reset.ts index a187040..d91393b 100644 --- a/src/style/reset.ts +++ b/src/style/reset.ts @@ -27,7 +27,7 @@ export const reset = css` overflow-wrap: break-word; tab-size: 4; - background-color: ${({ theme }) => theme.colors.grey_200}; + background-color: #000000; -webkit-tap-highlight-color: transparent; } diff --git a/src/style/theme.ts b/src/style/theme.ts index 2a48089..6edfe09 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -13,11 +13,12 @@ const colors = { dark: "#02040F", purple: "#7F75EE", red: "#FF5F5F", + black: "#000000", }; const fonts = { Title: css` - font-family: pretendard; + font-family: "pretendard"; font-size: 2.4rem; font-weight: 600; font-style: normal; @@ -166,6 +167,6 @@ const fonts = { `, }; -const theme = { mixin, colors, fonts }; +const theme = { colors, fonts, mixin }; export default theme; From c9aa3309429a6c0cb37061cbe7622eed4a0b0c42 Mon Sep 17 00:00:00 2001 From: urjimyu <92876819+urjimyu@users.noreply.github.com> Date: Thu, 9 May 2024 00:23:16 +0900 Subject: [PATCH 2/6] feat: created page layouts and common components --- src/App.tsx | 13 +++++++---- src/components/Button.tsx | 21 +++++++++++++++++ src/pages/DeletePage.tsx | 5 ++++ src/pages/LoginPage.tsx | 42 +++++++++++++++++++++++++++++++++- src/pages/RecordreamLayout.tsx | 34 +++++++++++++++++++++++++++ src/router/Router.tsx | 4 ---- 6 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 src/components/Button.tsx create mode 100644 src/pages/DeletePage.tsx create mode 100644 src/pages/RecordreamLayout.tsx diff --git a/src/App.tsx b/src/App.tsx index 4f14940..0db6579 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,24 @@ import { RouterProvider } from "react-router-dom"; -import styled from "styled-components"; +import styled, { ThemeProvider } from "styled-components"; import router from "./router/Router"; import GlobalStyle from "./style/GlobalStyle"; -import { IcPcBackgrStars } from "./assets/svg/index"; +// import { IcPcBackgrStars } from "./assets/svg"; +import theme from "./style/theme"; function App() { return ( - - + + + + ); } export default App; -const AppWrapper = styled(IcPcBackgrStars)` +const AppWrapper = styled.div` border: none; object-fit: cover; `; diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..1faa64b --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; + +interface ButtonInterface { + color: string; + message: string; +} + +const Button = ({ color, message }: ButtonInterface) => { + return {message}; +}; + +export default Button; + +const ButtonWrapper = styled.div<{ $color: string }>` + width: 38rem; + height: 7.8rem; + font-size: 2.2rem; + border-radius: 1.8rem; + border-color: ${({ theme, $color }) => theme.colors[$color]}; + color: ${({ theme, $color }) => theme.colors[$color]}; +`; diff --git a/src/pages/DeletePage.tsx b/src/pages/DeletePage.tsx new file mode 100644 index 0000000..f9be49d --- /dev/null +++ b/src/pages/DeletePage.tsx @@ -0,0 +1,5 @@ +const DeletePage = () => { + return
; +}; + +export default DeletePage; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 3aff564..b64a474 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -1,5 +1,45 @@ +import styled from "styled-components"; +import { IcPcLogo } from "../assets/svg"; + const LoginPage = () => { - return
LOGINPAGE
; + const onClickLoginBtn = () => {}; + // console.log("LOGINPAGE!"); + return ( + + + + + {/* */} + 카카오로 시작하기 + 로그인 후 이용이 가능합니다. + + ); }; export default LoginPage; + +const LoginPageWrapper = styled.div` + margin: 0 auto; +`; + +const LogoSection = styled.section` + width: 62.3rem; + height: 62.2rem; + margin-top: 10.3rem; + margin-right: 2.8rem; +`; + +const LoginBtn = styled.button` + width: 46rem; + height: 3.6rem; + border-radius: 1.8rem; + color: ${({ theme }) => theme.colors.white}; + font-size: 2.2rem; + border-color: ${({ theme }) => theme.colors.white}; + margin-bottom: 1.5rem; +`; + +const LoginMessage = styled.span` + color: ${({ theme }) => theme.colors.grey02}; + font-size: 1.8rem; +`; diff --git a/src/pages/RecordreamLayout.tsx b/src/pages/RecordreamLayout.tsx new file mode 100644 index 0000000..da42662 --- /dev/null +++ b/src/pages/RecordreamLayout.tsx @@ -0,0 +1,34 @@ +import styled from "styled-components"; +import { IcFeelingLBlank, IcPcBlank, IcPcRecordream } from "../assets/svg"; +import Button from "../components/Button"; + +interface RecordreamLayoutInterface { + iconOn: boolean; + btnColor: string; + btnMessage: string; + children: React.ReactNode; +} + +const RecordreamLayout = ({ + iconOn, + btnColor, + btnMessage, + children, +}: RecordreamLayoutInterface) => { + return ( + + + {iconOn ? : } + {children} +