feat: base color 추가 및 메타데이터 추가 작업 및 Project 목업 이미지 Mobile 일때 짤리는 이슈

Ocean-Portfolio · Mar 31, 2024 · 946bd77 · 946bd77
1 parent 51da677
commit 946bd77
Show file tree

Hide file tree

Showing 14 changed files with 216 additions and 21 deletions.
diff --git a/src/app/api/user-agent/route.ts b/src/app/api/user-agent/route.ts
@@ -1,7 +1,6 @@
 import { userAgent, type NextRequest } from 'next/server';
 
 export async function GET(req: NextRequest) {
-  console.log('userAgent', req.headers);
   return new Response(JSON.stringify(req), {
     status: 200,
   });

diff --git a/src/app/jaeyoon/page.css.ts b/src/app/jaeyoon/page.css.ts
@@ -1,7 +1,10 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const wrapStyle = style({
   background:
     'linear-gradient(180deg, #9DC9FF 1.09%, #B6D7FF 1.1%, #4064BE 28.22%, #002EA4 100%)',
 });
-// background:
+
+globalStyle('html, body', {
+  backgroundColor: '#E6F1FF',
+});
diff --git a/src/app/jaeyoon/page.tsx b/src/app/jaeyoon/page.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import React from 'react';
 import { UAParser } from 'ua-parser-js';
@@ -13,6 +14,14 @@ import { jaeyoonColorTheme } from '@/styles/theme/jaeyoon.css';
 import { StaticContextPageInfo } from '../context';
 import { wrapStyle } from './page.css';
 
+export const metadata: Metadata = {
+  applicationName: 'Ahn Jae Yoon Portfolio',
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#E6F1FF' },
+    { media: '(prefers-color-scheme: light)', color: '#E6F1FF' },
+  ],
+};
+
 const Jaeyoon = async () => {
   const ua = new UAParser(headers().get('user-agent') || '').getResult();
   const apolloClient = getClient();
@@ -45,10 +54,11 @@ const Jaeyoon = async () => {
           jaeyoonColorTheme,
           backgroundColorVariants['secondary-variant'],
         )}
+        userToken="jaeyoon"
       >
-        UX/UI Designer
+        Product Designer
         <br />
-        Jaeyoon Portfolio
+        JaeYoon Portfolio
       </Welcome>
       <Container as="main" className={classNames(jaeyoonColorTheme, wrapStyle)}>
         <Contents />

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,19 +9,40 @@ import suit from '@/suit';
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
+  viewport: {
+    width: 'device-width',
+    height: 'device-height',
+    initialScale: 1,
+    minimumScale: 1,
+    userScalable: true,
+  },
+  robots: {
+    index: false,
+    follow: false,
+    nocache: true,
+    googleBot: {
+      index: false,
+      follow: false,
+      noimageindex: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
 };
 
 interface RootLayoutProps {
   head?: React.ReactNode;
   children: React.ReactNode;
 }
 
-export default function RootLayout({ children }: RootLayoutProps) {
+export default function RootLayout({ head, children }: RootLayoutProps) {
   return (
     <html lang="ko">
       <ApolloWrapper>
-        <head></head>
+        <head>{head}</head>
         <body className={`${suit.className}`}>
+          <noscript>이 페이지를 보시려면 자바스크립트가 필요합니다.</noscript>
           {children}
           <Footer />
         </body>

diff --git a/src/app/sungyeon/page.css.ts b/src/app/sungyeon/page.css.ts
@@ -1,6 +1,10 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const wrapStyle = style({
   background:
     'linear-gradient(180deg, #A8E7EA 1.09%, #48ABB2 24.58%, #004584 77.68%)',
 });
+
+globalStyle('html, body', {
+  backgroundColor: '#D9F6FF',
+});
diff --git a/src/app/sungyeon/page.tsx b/src/app/sungyeon/page.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import React from 'react';
 import { UAParser } from 'ua-parser-js';
@@ -13,6 +14,127 @@ import { sungyeonColorTheme } from '@/styles/theme/sungyeon.css';
 import { StaticContextPageInfo } from '../context';
 import { wrapStyle } from './page.css';
 
+export const metadata: Metadata = {
+  // title: `사용하고 싶은 웹을 만드는 개발자 윤성연 입니다`,
+  // description: `안녕하세요 ! 더 좋은 제품을 만들기 위해 고민하는 개발자, 윤성연 입니다
+  // 좋은 사용자 경험의 기본은 좋은 성능 이라고 생각하여, 어떻게 개선해 나갈지 생각하며 작업합니다
+  // 같이 일 하고 싶은 개발자가 되고자 하는 마음으로 동료 들과 협업 합니다.`,
+  // metadataBase: new URL('https://acme.com'),
+  // alternates: {
+  //   canonical: 'https://nextjs.org',
+  //   languages: {
+  //     'en-US': 'https://nextjs.org/en-US',
+  //     'de-DE': 'https://nextjs.org/de-DE',
+  //   },
+  //   media: {
+  //     'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
+  //   },
+  //   types: {
+  //     'application/rss+xml': 'https://nextjs.org/rss',
+  //   },
+  // },
+  // openGraph: {
+  //   title: 'Next.js',
+  //   description: 'The React Framework for the Web',
+  //   url: 'https://nextjs.org',
+  //   siteName: 'Next.js',
+  //   images: [
+  //     {
+  //       url: 'https://nextjs.org/og.png', // Must be an absolute URL
+  //       width: 800,
+  //       height: 600,
+  //     },
+  //     {
+  //       url: 'https://nextjs.org/og-alt.png', // Must be an absolute URL
+  //       width: 1800,
+  //       height: 1600,
+  //       alt: 'My custom alt',
+  //     },
+  //   ],
+  //   locale: 'en_US',
+  //   type: 'website',
+  // },
+  // openGraph: {
+  //   title: 'Next.js',
+  //   description: 'The React Framework for the Web',
+  //   type: 'article',
+  //   publishedTime: '2023-01-01T00:00:00.000Z',
+  //   authors: ['Seb', 'Josh'],
+  // },
+  // twitter: {
+  //   card: 'summary_large_image',
+  //   title: 'Next.js',
+  //   description: 'The React Framework for the Web',
+  //   siteId: '1467726470533754880',
+  //   creator: '@nextjs',
+  //   creatorId: '1467726470533754880',
+  //   images: ['https://nextjs.org/og.png'], // Must be an absolute URL
+  // },
+  // twitter: {
+  //   card: 'app',
+  //   title: 'Next.js',
+  //   description: 'The React Framework for the Web',
+  //   siteId: '1467726470533754880',
+  //   creator: '@nextjs',
+  //   creatorId: '1467726470533754880',
+  //   images: {
+  //     url: 'https://nextjs.org/og.png',
+  //     alt: 'Next.js Logo',
+  //   },
+  //   app: {
+  //     name: 'twitter_app',
+  //     id: {
+  //       iphone: 'twitter_app://iphone',
+  //       ipad: 'twitter_app://ipad',
+  //       googleplay: 'twitter_app://googleplay',
+  //     },
+  //     url: {
+  //       iphone: 'https://iphone_url',
+  //       ipad: 'https://ipad_url',
+  //     },
+  //   },
+  // },
+  // itunes: {
+  //   appId: 'myAppStoreID',
+  //   appArgument: 'myAppArgument',
+  // },
+  // appleWebApp: {
+  //   title: 'Apple Web App',
+  //   statusBarStyle: 'black-translucent',
+  //   startupImage: [
+  //     '/assets/startup/apple-touch-startup-image-768x1004.png',
+  //     {
+  //       url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
+  //       media: '(device-width: 768px) and (device-height: 1024px)',
+  //     },
+  //   ],
+  // },
+  // appLinks: {
+  //   ios: {
+  //     url: 'https://nextjs.org/ios',
+  //     app_store_id: 'app_store_id',
+  //   },
+  //   android: {
+  //     package: 'com.example.android/package',
+  //     app_name: 'app_name_android',
+  //   },
+  //   web: {
+  //     url: 'https://nextjs.org/web',
+  //     should_fallback: true,
+  //   },
+  // },
+  // archives: ['https://nextjs.org/13'],
+  // assets: ['https://nextjs.org/assets'],
+  // bookmarks: ['https://nextjs.org/13'],
+  // category: 'technology',
+
+  applicationName: 'Yoon Sung Yeon Portfolio',
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#D9F6FF' },
+    { media: '(prefers-color-scheme: light)', color: '#D9F6FF' },
+  ],
+};
+
 const Sungyeon = async () => {
   const ua = new UAParser(headers().get('user-agent') || '').getResult();
   const apolloClient = getClient();
@@ -45,6 +167,7 @@ const Sungyeon = async () => {
           sungyeonColorTheme,
           backgroundColorVariants['secondary-variant'],
         )}
+        userToken="sungyeon"
       >
         Software Engineer
         <br />

diff --git a/src/app/yeji/page.css.ts b/src/app/yeji/page.css.ts
@@ -1,6 +1,10 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const wrapStyle = style({
   background:
     'linear-gradient(180deg, #CCF0FF 1.09%, #048DDC 24.58%, #032751 77.68%)',
 });
+
+globalStyle('html, body', {
+  backgroundColor: '#D9E8FF',
+});
diff --git a/src/app/yeji/page.tsx b/src/app/yeji/page.tsx
@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { Metadata } from 'next';
 import { headers } from 'next/headers';
 import React from 'react';
 import { UAParser } from 'ua-parser-js';
@@ -13,6 +14,14 @@ import { yejiColorTheme } from '@/styles/theme/yeji.css';
 import { StaticContextPageInfo } from '../context';
 import { wrapStyle } from './page.css';
 
+export const metadata: Metadata = {
+  applicationName: 'Choi Ye Ji Portfolio',
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#D9E8FF' },
+    { media: '(prefers-color-scheme: light)', color: '#D9E8FF' },
+  ],
+};
+
 const Yeji = async () => {
   const ua = new UAParser(headers().get('user-agent') || '').getResult();
   const apolloClient = getClient();
@@ -45,6 +54,7 @@ const Yeji = async () => {
           yejiColorTheme,
           backgroundColorVariants['secondary-variant'],
         )}
+        userToken="yeji"
       >
         Business Development
         <br />

diff --git a/src/components/MainProject/MainProject.css.ts b/src/components/MainProject/MainProject.css.ts
@@ -23,7 +23,6 @@ export const wrapStyle = style([
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
         position: 'initial',
         display: 'grid',
-        gridTemplateRows: '20rem auto',
         rowGap: '4rem',
         padding: '0',
         paddingTop: '1.38rem',
@@ -61,7 +60,7 @@ export const wrapVariants = styleVariants({
       },
       [ODSBreakpointTokenVariables['breakpoint-s']]: {
         gap: '1.25rem',
-        height: 'auto',
+        height: '100%',
         paddingTop: '1.25rem',
       },
     },
@@ -92,22 +91,24 @@ export const mockWrapVariants = styleVariants({
           gap: '0',
           minWidth: '20rem',
           minHeight: '20rem',
-          // height: '20rem',
         },
       },
     },
   ],
   MOBILE: [
     mockWrapStyle,
     {
+      height: '33.5625rem',
       overflow: 'hidden',
       minWidth: '19.375rem',
       '@media': {
         [ODSBreakpointTokenVariables['breakpoint-l']]: {
           width: '11.25rem',
+          height: '19.5rem',
         },
         [ODSBreakpointTokenVariables['breakpoint-s']]: {
           width: '15rem',
+          height: '26rem',
           justifyContent: 'center',
         },
       },

diff --git a/src/components/Welcome/Welcome.css.ts b/src/components/Welcome/Welcome.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { ODSBreakpointTokenVariables } from '@/const/breakpoints';
 import { flexCenter } from '@/styles/common/flex.css';
 
@@ -20,3 +20,15 @@ export const wrapStyle = style([
     },
   },
 ]);
+
+export const wrapStyleVariants = styleVariants({
+  sungyeon: {
+    background: 'linear-gradient(180deg, #D9F6FF 1.09%, #ECF1FF 86.75%)',
+  },
+  yeji: {
+    background: 'linear-gradient(180deg, #D9E8FF 1.09%, #ECF1FF 86.75%)',
+  },
+  jaeyoon: {
+    background: 'linear-gradient(180deg, #E6F1FF 12.12%, #D9EFFF 86.75%)',
+  },
+});
diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx
@@ -1,15 +1,27 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import { textPreStyle } from '@/styles/common/text.css';
-import { wrapStyle } from './Welcome.css';
+import { wrapStyle, wrapStyleVariants } from './Welcome.css';
 
 interface Props {
   className?: string;
+  userToken: UserNameToken;
 }
 
-const Welcome = ({ children, className }: PropsWithChildren<Props>) => {
+const Welcome = ({
+  children,
+  className,
+  userToken,
+}: PropsWithChildren<Props>) => {
   return (
-    <header className={classNames(className, wrapStyle, textPreStyle)}>
+    <header
+      className={classNames(
+        className,
+        textPreStyle,
+        wrapStyle,
+        wrapStyleVariants[userToken],
+      )}
+    >
       {children}
     </header>
   );

diff --git a/src/containers/HistoryCarousel.tsx b/src/containers/HistoryCarousel.tsx
@@ -46,8 +46,7 @@ const HistoryCarouselContainer = () => {
     },
   );
 
-  // TODO: Remove this after implementing the actual data fetching logic
-  return <HistoryCarousel data={[...data, ...data, ...data, ...data]} />;
+  return <HistoryCarousel data={data} />;
 };
 
 export default HistoryCarouselContainer;