Feat:Object 이미지 추가

README.md

@@ -4,7 +4,7 @@
 
 ## 기존의 문제점
 
-- 리크루팅 기간을 제외하면 단순한 정보 전달을 위한 웹사이트이지만, 리쿠르팅 기간이 아닐 때도 리소스 보관에 있어서 만만치 않은 서버 비용이 들어감. 
+- 리크루팅 기간을 제외하면 단순한 정보 전달을 위한 웹사이트이지만, 리쿠르팅 기간이 아닐 때도 리소스 보관에 있어서 만만치 않은 서버 비용이 들어감.
 - 웹사이트에 초기에 들어왔을 때의 로딩 속도가 느림
 - 컴포넌트 설계가 엉망으로 되어있음
 - CSR로 구현이 되으므로 SEO를 적용하기가 불편함
@@ -14,6 +14,3 @@
 NextJs(App router) + typescript project
 
 tailwindCSS, react-query, axios
-
-
-

src/app/common/Header.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 //
 function Header() {
   return (
-    <header className="w-full bg-black flex fixed top-0 p-[2.5rem]">
+    <header className="text-white mix-blend-difference w-full flex fixed top-0 p-[2.5rem]">
       <div className="font-pp cursor-pointer text-HeaderPC">
         Like<span className="italic">lion</span> So
         <span className="italic">gang</span>

src/app/contact/container/Links.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
+import Image from 'next/image'
 
 export default function Links() {
-    return <div>page</div>
-  }
+  return (
+    <div className="bg-blue-500">
+      <h1>안녕안녕!!</h1>
+    </div>
+  )
+}

src/app/contact/container/Object.tsx

@@ -1,5 +1,32 @@
 import React from 'react'
 
 export default function Object() {
-    return <div>page</div>
-}
+  return (
+    <div>
+      <div
+        className="relative w-full h-full px-64"
+        style={{ marginTop: '-150px' }}>
+        <img
+          className="w-[30vw] h-[30vw] md:w-[500px] md:h-[500px]"
+          src="/images/contact/obj1.png"
+        />
+      </div>
+      <div
+        className="flex justify-end relative w-full h-full"
+        style={{ marginTop: '-150px' }}>
+        <img
+          className="w-[35vw] h-[35vw] md:w-[500px] md:h-[500px] origin-top-left"
+          src="/images/contact/obj2.png"
+          style={{ marginRight: '-120px' }}
+        />
+      </div>
+      <div
+        className="text-center"
+        style={{ marginTop: '-230px' }}>
+        <div className="text-black text-[64px] font-pp font-thin">
+          Connect With Us!
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/contact/page.tsx

@@ -3,5 +3,9 @@ import Object from './container/Object'
 import Links from './container/Links'
 
 export default function ContactPage() {
-  return <div>page</div>
+  return (
+    <div>
+      <Object />
+    </div>
+  )
 }

tailwind.config.ts

@@ -13,9 +13,9 @@ const config: Config = {
       Desktop: '1280px'
     },
     colors: {
-      white: '#fffff',
-      grey: 'f4f4f4',
-      black: '#00000'
+      white: '#ffffff',
+      grey: '#f4f4f4',
+      black: '#000000'
     },
     fontFamily: {
       pp: ['var(--font-pp)'],