[Style/#1] 로그인 UI 구현

package.json

@@ -13,6 +13,7 @@
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0",
     "styled-components": "^6.1.13",
     "url": "^0.11.4"
   },
@@ -21,6 +22,7 @@
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",

src/App.tsx

@@ -2,11 +2,13 @@
 import { ThemeProvider } from "styled-components";
 import theme from "@styles/theme";
 import GlobalStyle from "@styles/global";
+import Router from "./Router";
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
+      <Router />
     </ThemeProvider>
   );
 }

src/Router.tsx

@@ -0,0 +1,15 @@
+// Router.tsx
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Login from "./pages/login/Login";
+
+const Router: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Router;

src/components/button/Button.tsx

@@ -0,0 +1,48 @@
+// Button.tsx
+
+import React from "react";
+import styled from "styled-components";
+
+const Btn = styled.button`
+  width: 350px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #343a40;
+  text-align: center;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  border-radius: 10px;
+  background: #99bc85;
+  cursor: pointer;
+  border: none;
+  margin: 10px auto;
+
+  @media (max-width: 360px) {
+    width: 280px;
+  }
+`;
+
+interface ButtonProps {
+  link: string;
+  name: string;
+  type: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ link, name, type }) => {
+  const handleClick = () => {
+    window.location.href = link;
+  };
+
+  return (
+    <Btn type="button" onClick={handleClick}>
+      {name}
+    </Btn>
+  );
+};
+
+export default Button;

src/components/input/DateInput.tsx

@@ -0,0 +1,28 @@
+// DateInput.tsx
+import React from "react";
+import * as S from "./style";
+
+const DateInput: React.FC = () => {
+  return (
+    <S.InputContainer>
+      <S.InputTitleWrapper>
+        <S.InputTitle>생년월일</S.InputTitle>
+        <S.EssentialIcon>*</S.EssentialIcon>
+      </S.InputTitleWrapper>
+
+      <S.DateInputContainer>
+        <S.DateInputWrap>
+          <S.TextInput type="number" maxLength={4} />
+        </S.DateInputWrap>
+        <S.DateInputWrap>
+          <S.TextInput type="number" maxLength={2} />
+        </S.DateInputWrap>
+        <S.DateInputWrap>
+          <S.TextInput type="number" maxLength={2} />
+        </S.DateInputWrap>
+      </S.DateInputContainer>
+    </S.InputContainer>
+  );
+};
+
+export default DateInput;

src/components/input/Input.tsx

@@ -0,0 +1,32 @@
+// Input.tsx
+import React from "react";
+import * as S from "./style";
+
+interface InputProps {
+  width?: string;
+  label: string;
+  essential: boolean;
+  hint: string;
+}
+
+const Input: React.FC<InputProps> = ({
+  width = "340px",
+  label,
+  essential = true,
+  hint,
+}) => {
+  return (
+    <S.InputContainer>
+      <S.InputTitleWrapper>
+        <S.InputTitle>{label}</S.InputTitle>
+        {essential && <S.EssentialIcon>*</S.EssentialIcon>}
+      </S.InputTitleWrapper>
+      {hint && <S.InputHint>{hint}</S.InputHint>}
+      <S.InputWrap width={width}>
+        <S.TextInput type="text" />
+      </S.InputWrap>
+    </S.InputContainer>
+  );
+};
+
+export default Input;

src/components/input/style.ts

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+
+interface InputWrapProps {
+  width?: string;
+}
+
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const InputTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export const InputTitle = styled.label`
+  color: #343a40;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+export const EssentialIcon = styled.span`
+  color: #f5535e;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
+
+export const InputHint = styled.p`
+  color: #868e96;
+
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
+
+export const InputWrap = styled.div<InputWrapProps>`
+  width: ${({ width }) => width || "340px"};
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+
+  @media (max-width: 360px) {
+    width: 280px;
+  }
+`;
+
+export const DateInputWrap = styled.div`
+  width: 102px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+
+  @media (max-width: 360px) {
+    width: 82px;
+  }
+`;
+
+export const TextInput = styled.input`
+  width: 100%;
+  color: #495057;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  outline: none;
+  padding: 10px 12px;
+  border-radius: 8px;
+`;
+
+// DateInput.tsx
+export const DateInputContainer = styled.div`
+  display: flex;
+  gap: 17px;
+`;