[design] 푸터 생성 #2

Author: noeyeyh

package-lock.json

@@ -13,7 +13,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.2.0",
-    "styled-components": "^6.1.13"
+    "styled-components": "^6.1.13",
+    "styled-reset": "^4.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

package.json

@@ -1,19 +1,21 @@
 import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
 import MainPage from "./pages/MainPage";
 import LoginPage from "./pages/LoginPage";
-import GlobalStyle from "./GlobalStyle";
+import GlobalStyle from "./styles/GlobalStyle";
+import theme from "./styles/theme";
 
 function App() {
   return (
-    <>
+    <ThemeProvider theme={theme}>
       <GlobalStyle />
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<MainPage />}></Route>
           <Route path="/login" element={<LoginPage />}></Route>
         </Routes>
       </BrowserRouter>
-    </>
+    </ThemeProvider>
   );
 }
 

public/vite.svg

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export default function Footer() {
+  return (
+    <Container>
+      <Logo>Drinki G</Logo>
+      <TextBox>
+        <Text>
+          드링키지 | 서울시 서대문구 가재울미래로2, 114동 2102호
+          <br />
+          대표 : 위승주 | TEL : 010-6443-0851 | Email : [email protected]
+          <br />
+          사업자 번호 : 342-15-02376
+        </Text>
+        <Text>ⓒDrinkig. 2025 All rights reserved.</Text>
+      </TextBox>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  padding: 3.3rem 72.1rem 2.4rem 7.6rem;
+`;
+
+const Logo = styled.p`
+  ${({ theme }) => theme.fonts.Title_1};
+  color: ${({ theme }) => theme.colors.purple_100};
+`;
+
+const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.7rem;
+`;
+
+const Text = styled.p`
+  ${({ theme }) => theme.fonts.Body_1};
+  color: ${({ theme }) => theme.colors.gray_300};
+`;

src/App.tsx

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+
+function Header() {
+  const navigate = useNavigate();
+  return (
+    <Container>
+      <Content>
+        <Logo onClick={() => navigate("/")}>Drinki G</Logo>
+        <Functions>
+          <Button onClick={() => navigate("/")}>Home</Button>
+          <Button>Projects</Button>
+          <Button>Help Center</Button>
+          <Button onClick={() => navigate("/login")}>Login</Button>
+        </Functions>
+      </Content>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100%;
+  height: 13.8rem;
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 7rem;
+  padding: 4.4rem 7.6rem 0rem 7.6rem;
+`;
+
+const Logo = styled.p`
+  ${({ theme }) => theme.fonts.Title_1};
+  color: ${({ theme }) => theme.colors.purple_100};
+  cursor: pointer;
+`;
+
+const Functions = styled.div`
+  display: flex;
+  gap: 6.2rem;
+  justify-content: flex-end;
+`;
+
+const Button = styled.div`
+  ${({ theme }) => theme.fonts.Title_2};
+  color: ${({ theme }) => theme.colors.white};
+  cursor: pointer;
+`;
+
+export default Header;

src/GlobalStyle.tsx

@@ -1,23 +1,29 @@
 import styled from "styled-components";
-import Header from "../assets/components/common/Header";
+import Header from "../components/common/Header";
+import Footer from "../components/common/Footer";
 
 function MainPage() {
   return (
-    <Container>
-      <Header />
-      <Line />
-      {/* 이미지 예정 */}
-      {/* footer 예정 */}
-    </Container>
+    <>
+      <Container>
+        <Header />
+        <Line />
+        {/* 이미지 예정 */}
+      </Container>
+      <Footer />
+    </>
   );
 }
 
 const Container = styled.div`
   width: 100%;
+  height: 106.2rem;
+  background-color: ${({ theme }) => theme.colors.black};
 `;
+
 const Line = styled.div`
-  background-color: white;
-  width: 1440px;
+  background-color: ${({ theme }) => theme.colors.white};
+  width: 100%;
   height: 1px;
 `;
 

src/assets/components/common/Header.tsx

@@ -0,0 +1,39 @@
+import { createGlobalStyle, css } from "styled-components";
+import reset from "styled-reset";
+
+export const flexCenter = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const GlobalStyle = createGlobalStyle`
+${reset}
+
+  :root {
+    font-family: Avenir;
+  }
+
+  html,body {
+    width: 100%;
+    height: 100vh;
+    margin: 0 auto;
+    font-size: 62.5%;
+    -ms-overflow-style: none; /* 인터넷 익스플로러  스크롤바 숨김 */
+    scrollbar-width: none; /* 파이어폭스 스크롤바 숨김 */
+    scroll-behavior: smooth;
+  }
+
+  #root::-webkit-scrollbar {
+    display: none; /* 크롬, 사파리, 오페라, 엣지 스크롤바 숨김 */
+  }
+
+  button {
+    border: none;
+    background: none;
+    font: inherit;
+    cursor: pointer;
+  }
+`;
+
+export default GlobalStyle;

src/assets/react.svg

@@ -0,0 +1,54 @@
+import { css } from "styled-components";
+
+export const flexCenter = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const colors = {
+  purple_100: "#7E13B1",
+
+  gray_100: "rgba(0, 0, 0, 0.3)",
+  gray_200: "#D9D9D9",
+  gray_300: "#686565",
+
+  white: "#fff",
+  black: "#000",
+};
+
+const fonts = {
+  Title_1: css`
+    font-family: "Avenir Next";
+    font-size: 3.125rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 140%; /* 4.375rem */
+    letter-spacing: -0.07813rem;
+  `,
+
+  Title_2: css`
+    font-family: "Avenir Next";
+    font-size: 1.875rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 2.625rem */
+    letter-spacing: -0.04688rem;
+  `,
+
+  Body_1: css`
+    font-family: "Avenir Next";
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 140%; /* 1.75rem */
+    letter-spacing: -0.03125rem;
+  `,
+};
+
+const theme = {
+  colors,
+  fonts,
+};
+
+export default theme;