메인 페이지 구현 close #4

craco.config.js

@@ -0,0 +1,14 @@
+const cracoAlias = require('craco-alias');
+
+module.exports = {
+	plugins: [
+		{
+			plugin: cracoAlias,
+			options: {
+				source: 'tsconfig',
+				baseUrl: './src',
+				tsConfigPath: 'tsconfig.json',
+			},
+		},
+	],
+};

package.json

@@ -3,24 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^7.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.71",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "craco-alias": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject",
     "prepare": "husky install"
   },
   "browserslist": {

src/App.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import Main from '@pages/main';
 
 function App() {
-	return (
-		<div className="App">
-			<header className="App-header"></header>
-		</div>
-	);
+  return (
+    <div className="App">
+      <Main />
+    </div>
+  );
 }
 
 export default App;

src/components/header/index.style.tsx

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+interface WrapperProps {
+  inversion: boolean;
+}
+
+const Container = styled.div<WrapperProps>`
+  width: 100vw;
+  height: 100px;
+  background-color: ${props => {
+    if (props.inversion) {
+      return 'transparent';
+    } else {
+      return '#161A2F';
+    }
+  }};
+  display: flex;
+  align-items: center;
+  padding-left: 120px;
+  font-weight: 600;
+
+  .title {
+    padding: 0 20px;
+    font-size: 25px;
+    color: ${props => {
+      if (props.inversion) {
+        return '#161A2F';
+      } else {
+        return '#FFFFFF';
+      }
+    }};
+  }
+
+  .sep {
+    border-left : thin solid;
+    height : 30px;
+    color: ${props => {
+      if (props.inversion) {
+        return '#161A2F';
+      } else {
+        return '#FFFFFF';
+      }
+    }};
+  }
+`;
+
+export default Container;

src/components/header/index.tsx

@@ -0,0 +1,18 @@
+import Logo from "@components/logo";
+import Container from "./index.style";
+
+
+interface HeaderProps {
+  inversion: boolean;
+}
+
+function Header(props: HeaderProps) {
+  return <Container inversion={props.inversion}>
+    <Logo inversion={!props.inversion} type='small' />
+    <div className="title">Outfit Of Tire</div>
+    <div className="sep" />
+    <div className="title">내 타이어 만들기</div>
+  </Container>
+}
+
+export default Header;

src/components/logo/index.style.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+interface WrapperProps {
+  image: string;
+  type?: 'small' | 'large';
+}
+
+export const Wrapper = styled.div<WrapperProps>`
+  background-image: url(${props => props.image});
+  width: ${props => {
+    switch (props.type) {
+      case 'small':
+        return '60px';
+      default:
+        return '147px';
+    }
+  }};
+  height: ${props => {
+    switch (props.type) {
+      case 'small':
+        return '53px';
+      default:
+        return '130px';
+    }
+  }};
+  background-size: cover;
+`;

src/components/logo/index.tsx

@@ -0,0 +1,15 @@
+import { Wrapper } from "./index.style";
+import defaultLogo from "@assets/icon/logo-default.svg";
+import inversionLogo from "@assets/icon/logo-inversion.svg";
+
+
+interface LogoProps {
+  inversion: boolean;
+  type?: 'small' | 'large';
+}
+
+function Logo(props: LogoProps) {
+  return <Wrapper className="logo" image={props.inversion ? inversionLogo : defaultLogo} type={props.type} />;
+}
+
+export default Logo;

src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  font-family: 'pretendard';
+  color: #161A2F;
+}

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(

src/pages/main/index.style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(#FFFFFF, #9BA4B4);
+  font-weight: 700;
+
+  .content > .logo {
+    float: left;
+    margin-left: 220px;
+    margin-top: 350px;
+  }
+
+  .content > .title {
+    float: left;
+    margin-left: 60px;
+    margin-top: 370px;
+    font-size: 8cqh;
+  }
+
+  .content > .image {
+    float: left;
+    margin-left: 200px;
+    margin-top: 150px;
+    width: 528px;
+    height: 541px;
+  }
+`

src/pages/main/index.tsx

@@ -0,0 +1,17 @@
+import Header from "@components/header";
+import { Container } from "./index.style";
+import Logo from "@components/logo";
+import mainImage from "@assets/image/main-tire.png";
+
+function Main() {
+  return <Container>
+    <Header inversion={true}></Header>
+    <div className="content">
+      <Logo inversion={false} type='large' />
+      <div className="title">Outfit Of Tire</div>
+      <img className="image" src={mainImage} alt="tire_example" />
+    </div>
+  </Container>
+}
+
+export default Main;

tsconfig.json

@@ -18,7 +18,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "./src",
+    "paths": {
+      "@assets/*": ["./assets/*"],
+      "@components/*": ["./components/*"],
+      "@pages/*": ["./pages/*"]
+    }
   },
   "include": [
     "src"