feat: 디테일 수정 (#53)

sopt-makers · Jul 28, 2023 · 13772c4 · 13772c4
1 parent a272776
commit 13772c4
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 14 deletions.
diff --git a/apps/web/src/app/admin/page.tsx b/apps/web/src/app/admin/page.tsx
@@ -10,13 +10,19 @@ interface AdminPageProps {}
 const AdminPage: FC<AdminPageProps> = ({}) => {
  const gateway = useGateway();
 
- const { mutate, status, data } = useMutation({ mutationFn: () => gateway.recruit.refresh.mutate() });
+ const { mutate, status, error } = useMutation({ mutationFn: () => gateway.recruit.refresh.mutate() });
 
  return (
- <div className='text-18-regular'>
- <button onClick={() => mutate()}>리크루트 페이지 새로고침</button>
+ <div className='text-18-regular px-[1rem] py-[1rem]'>
+ <button
+ className='bg-gray1 rounded-[1rem] px-[2rem] py-[1rem]'
+ onClick={() => mutate()}
+ disabled={status === 'pending'}
+ >
+ 리크루트 페이지 새로고침
+ </button>
  <p>Result: {status}</p>
- <p>{JSON.stringify(data)}</p>
+ <p>{error && error.message}</p>
  </div>
  );
 };

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -2,6 +2,7 @@ import './global.css';
 
 import clsx from 'clsx';
 import localFont from 'next/font/local';
+import Script from 'next/script';
 import { ReactNode } from 'react';
 
 import AnimationProviders from '@/components/core/animation/AnimationProviders';
@@ -55,7 +56,20 @@ export const metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
  return (
  <html lang='ko' className={clsx(suitFont.variable, 'bg-black100 text-[62.5%] text-white')}>
+ <Script id='init-gtm'>{`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-P7FTW7RG');`}</Script>
  <body className='min-h-screen'>
+ <noscript>
+ <iframe
+ src='https://www.googletagmanager.com/ns.html?id=GTM-P7FTW7RG'
+ height='0'
+ width='0'
+ style={{ display: 'none', visibility: 'hidden' }}
+ ></iframe>
+ </noscript>
  <GatewayProvider>
  <AnimationProviders>{children}</AnimationProviders>
  </GatewayProvider>

diff --git a/apps/web/src/components/mainpage/recruit/RecruitSection.tsx b/apps/web/src/components/mainpage/recruit/RecruitSection.tsx
@@ -10,7 +10,7 @@ export default function RecruitSection() {
  const isInView = useInView(ref, { once: false });
 
  return (
- <m.article className='overflow-clip-x relative mb-[14.4rem] mt-[24rem] flex flex-row items-center justify-between '>
+ <m.article className='overflow-clip-x relative mb-[10rem] mt-[24rem] flex flex-row items-center justify-between '>
  <div className='absolute inset-0 flex transform-gpu items-center'>
  <div className='flex w-full justify-between'>
  <m.div initial={{ x: '-100%' }} animate={{ x: isInView ? '0%' : '-100%' }} transition={{ bounce: 0 }}>
@@ -21,7 +21,7 @@ export default function RecruitSection() {
  </m.div>
  </div>
  </div>
- <div className='relative flex w-full items-center justify-center py-[20rem]'>
+ <div className='relative flex w-full items-center justify-center pt-[20rem]'>
  <div ref={ref} className='flex flex-col items-center justify-center px-[1rem]'>
  <h1 className='text-40-semibold md:text-80-bold text-center font-bold'>
  SOPT에 <br className='md:hidden' />

diff --git a/apps/web/src/components/recruit/customBlocks/EnterRecruitBlock.tsx b/apps/web/src/components/recruit/customBlocks/EnterRecruitBlock.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { m, SVGMotionProps } from 'framer-motion';
+import { FC } from 'react';
+interface EnterRecruitBlockProps {
+ data: string;
+}
+
+const EnterRecruitBlock: FC<EnterRecruitBlockProps> = ({ data }) => {
+ const content = getProperty(data, 'content');
+ const link = getProperty(data, 'link');
+
+ if (!link) {
+ return <div>Custom Block: No link provided. {data}</div>;
+ }
+
+ return (
+ <div className='flex'>
+ <m.a
+ href={link}
+ target='_blank'
+ className='flex items-center gap-[1rem] rounded-[6.5rem] bg-white/5 p-[2rem_3rem_2rem_2rem] text-[2rem] font-bold transition-colors hover:bg-white/10'
+ initial='init'
+ whileHover='hover'
+ variants={{
+ init: {
+ color: '#ffffff',
+ },
+ hover: {
+ color: ['#5DDBFF', '#5a62b5', '#FDBBF9', '#FFCA00', '#FF6E1D', '#5DDBFF'],
+ transition: {
+ repeat: Infinity,
+ duration: 4,
+ },
+ },
+ }}
+ >
+ <EnterIcon variants={{ init: { rotate: '0deg' }, hover: { rotate: '45deg' } }} />
+ <span>{content}</span>
+ </m.a>
+ </div>
+ );
+};
+
+export default EnterRecruitBlock;
+
+function getProperty(data: string, name: string) {
+ const reg = new RegExp(`${name}:.?(.*)`);
+ const match = data.match(reg);
+
+ if (!match) {
+ return null;
+ }
+ return match[1];
+}
+
+function EnterIcon(props: SVGMotionProps<SVGSVGElement>) {
+ return (
+ <m.svg width={40} height={40} viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+ <path
+ fillRule='evenodd'
+ clipRule='evenodd'
+ d='M23.466 15.544c-1.207 1.207-3.407 1.207-4.615 0l-.495-.495-.99.99.495.495c.878.878 2.087 1.317 3.297 1.318l-6.11 6.109.99.99 6.11-6.11c0 1.21.44 2.42 1.318 3.298l.495.495.99-.99-.495-.495c-1.208-1.208-1.207-3.408 0-4.615l.495-.495-.99-.99-.495.495z'
+ fill='currentColor'
+ />
+ <circle cx={20} cy={20} r={13.421} transform='rotate(-45 20 20)' stroke='currentColor' strokeWidth={1.167} />
+ </m.svg>
+ );
+}
diff --git a/apps/web/src/components/recruit/recruitBlockUnofficial.tsx b/apps/web/src/components/recruit/recruitBlockUnofficial.tsx
@@ -8,12 +8,13 @@ import SyntaxHighlighter from '../notion/official/SyntaxHighlighter';
 import { colorStyles } from '../notion/unofficial/colors';
 import TextRenderer from '../notion/unofficial/TextRenderer';
 import ContentBlock from './ContentBlock';
+import EnterRecruitBlock from './customBlocks/EnterRecruitBlock';
 import TableBlock from './table/TableBlock';
 import TableRowBlock from './table/TableRowBlock';
 import ToggleBlock from './ToggleBlock';
 
 export const renderRecruitBlockContainer = (children: ReactNode) => (
- <div className='flex flex-col text-[1.6rem] md:text-[1.8rem]'>{children}</div>
+ <div className='flex flex-col text-[1.6rem] text-[#f4f4f4] md:text-[1.8rem]'>{children}</div>
 );
 
 export const recruitBlockComponents = {
@@ -39,9 +40,9 @@ export const recruitBlockComponents = {
  ),
  bulleted_list: ({ block, ctx: { renderBlocks } }) => (
  <div className='flex'>
- <div className='pr-[8px]'>•</div>
+ <div className='pr-[8px] leading-[150%] text-white/80'>•</div>
  <div className='flex flex-grow flex-col'>
- <div className=''>
+ <div className='leading-[150%] text-white/80'>
  <TextRenderer text={block.properties?.title} />
  </div>
  {renderBlocks(block.content ?? [])}
@@ -50,18 +51,26 @@ export const recruitBlockComponents = {
  ),
  numbered_list: ({ block, streak, ctx: { renderBlocks } }) => (
  <div className='flex'>
- <div className='pr-[8px]'>{streak + 1}.</div>
+ <div className='pr-[8px] leading-[150%] text-white/80'>{streak + 1}.</div>
  <div className='flex flex-grow flex-col'>
- <div className=''>
+ <div className='leading-[150%] text-white/80'>
  <TextRenderer text={block.properties?.title} />
  </div>
  {renderBlocks(block.content ?? [])}
  </div>
  </div>
  ),
- code: ({ block }) => (
- <SyntaxHighlighter language={plainText(block.properties?.language)} code={plainText(block.properties?.title)} />
- ),
+ code: ({ block }) => {
+ const customType = plainText(block.properties.caption).trim().toUpperCase();
+
+ if (customType === 'CUSTOM:RECRUIT_BUTTON') {
+ return <EnterRecruitBlock data={plainText(block.properties.title)} />;
+ }
+
+ return (
+ <SyntaxHighlighter language={plainText(block.properties?.language)} code={plainText(block.properties?.title)} />
+ );
+ },
  divider: () => (
  <div className='flex h-[1.3rem] w-full items-center'>
  <div className='h-[1px] w-full border-b border-white/30' />