Feat:header 레이아웃 완성

CEOS-Developers · Dec 8, 2023 · c85ff97 · c85ff97
1 parent 8b7f81f
commit c85ff97
Show file tree

Hide file tree

Showing 12 changed files with 92 additions and 32 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/typescript-npm-4.9.5-6427b65ee6-ee000bc268.zip b/.yarn/cache/typescript-npm-4.9.5-6427b65ee6-ee000bc268.zip
diff --git a/.yarn/cache/typescript-npm-5.1.6-b157762de3-b2f2c35096.zip b/.yarn/cache/typescript-npm-5.1.6-b157762de3-b2f2c35096.zip
diff --git a/.yarn/cache/typescript-patch-bd21d74a9d-f53bfe97f7.zip b/.yarn/cache/typescript-patch-bd21d74a9d-f53bfe97f7.zip
diff --git a/.yarn/cache/typescript-patch-f8edcd7439-1f8f3b6aae.zip b/.yarn/cache/typescript-patch-f8edcd7439-1f8f3b6aae.zip
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.1",
     "styled-reset": "^4.5.1",
-    "typescript": "^4.9.5",
+    "typescript": "5.1.6",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/img/headerText.jpg b/public/img/headerText.jpg
diff --git a/src/common/layout/Header.tsx b/src/common/layout/Header.tsx
@@ -1,9 +1,46 @@
 import { styled } from "styled-components";
+import HeaderButton from "../ui/buttons/HeaderButton/HeaderButton";
+import theme from "@/styles/theme";
 
 export default function Header() {
-  return <HeaderLayout>Header</HeaderLayout>;
+  return (
+    <HeaderLayout>
+      <HeaderText />
+      <HeaderBtn>
+        <HeaderButton
+          width="9.6rem"
+          bgColor={theme.colors.white}
+          addClass={`border:1px solid ${theme.colors.mainColor}; margin-right:2rem;`}
+        >
+          로그인
+        </HeaderButton>
+        <HeaderButton
+          width="11.4rem"
+          bgColor={theme.colors.mainColor}
+          addClass={`border:1px solid ${theme.colors.white}; color:${theme.colors.white}`}
+        >
+          회원가입
+        </HeaderButton>
+      </HeaderBtn>
+    </HeaderLayout>
+  );
 }
 
 const HeaderLayout = styled.header`
+  display: flex;
+  justify-content: space-between;
   font-size: 2rem;
+  padding: 4rem;
+`;
+
+const HeaderText = styled.div`
+  width: 17.2rem;
+  height: 7.3rem;
+  background-image: url("/img/headerText.jpg");
+  background-size: cover;
+`;
+
+const HeaderBtn = styled.div`
+  display: flex;
+  align-items: center;
 `;
diff --git a/src/common/ui/button/Button.stories.tsx → ...mmon/ui/buttons/Button/Button.stories.tsx b/src/common/ui/button/Button.stories.tsx → ...mmon/ui/buttons/Button/Button.stories.tsx
diff --git a/src/common/ui/button/Buttons.tsx → src/common/ui/buttons/Button/Buttons.tsx b/src/common/ui/button/Buttons.tsx → src/common/ui/buttons/Button/Buttons.tsx
diff --git a/src/common/ui/buttons/HeaderButton/HeaderButton.tsx b/src/common/ui/buttons/HeaderButton/HeaderButton.tsx
@@ -0,0 +1,23 @@
+import theme from "@/styles/theme";
+import Button, { ButtonProps } from "../Button/Buttons";
+
+export default function HeaderButton({
+  width,
+  bgColor,
+  children,
+  addClass,
+}: Omit<ButtonProps, "height">) {
+  return (
+    <Button
+      width={width}
+      height="4rem"
+      bgColor={bgColor}
+      addClass={
+        `border-radius:2rem; ${theme.fontStyles.body0}; font-weight:400;` +
+        addClass
+      }
+    >
+      {children}
+    </Button>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -15200,7 +15200,7 @@ __metadata:
     storybook: ^7.5.3
     styled-components: ^6.1.1
     styled-reset: ^4.5.1
-    typescript: ^4.9.5
+    typescript: 5.1.6
     vite: ^5.0.4
     vite-plugin-svgr: ^4.2.0
     web-vitals: ^2.1.4
@@ -17328,23 +17328,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.9.5":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
+"typescript@npm:5.1.6":
+  version: 5.1.6
+  resolution: "typescript@npm:5.1.6"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
+  checksum: b2f2c35096035fe1f5facd1e38922ccb8558996331405eb00a5111cc948b2e733163cc22fab5db46992aba7dd520fff637f2c1df4996ff0e134e77d3249a7350
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.9.5#~builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=289587"
+"typescript@patch:typescript@5.1.6#~builtin<compat/typescript>":
+  version: 5.1.6
+  resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin<compat/typescript>::version=5.1.6&hash=5da071"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 1f8f3b6aaea19f0f67cba79057674ba580438a7db55057eb89cc06950483c5d632115c14077f6663ea76fd09fce3c190e6414bb98582ec80aa5a4eaf345d5b68
+  checksum: f53bfe97f7c8b2b6d23cf572750d4e7d1e0c5fff1c36d859d0ec84556a827b8785077bc27676bf7e71fae538e517c3ecc0f37e7f593be913d884805d931bc8be
   languageName: node
   linkType: hard