Merge branch 'dev' into feature/FE-061

YAPP-Github · Jul 11, 2023 · 61dca9a · 61dca9a
2 parents f6ce232 + 463b3d3
commit 61dca9a
Show file tree

Hide file tree

Showing 50 changed files with 646 additions and 384 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/eslint-plugin-react-hooks-npm-4.6.0-b429fac07f-23001801f1.zip b/.yarn/cache/eslint-plugin-react-hooks-npm-4.6.0-b429fac07f-23001801f1.zip
diff --git a/package.json b/package.json
@@ -80,7 +80,6 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-testing-library": "^5.11.0",
     "husky": "^8.0.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/ogImg/chatlink_facebook.png b/public/ogImg/chatlink_facebook.png
diff --git a/public/ogImg/chatlink_instagram.png b/public/ogImg/chatlink_instagram.png
diff --git a/public/ogImg/chatlink_kakaotalk.png b/public/ogImg/chatlink_kakaotalk.png
diff --git a/public/ogImg/chatlink_twitter.png b/public/ogImg/chatlink_twitter.png
diff --git a/src/app/home/components/BoardCard/BoardCard.css.ts b/src/app/home/components/BoardCard/BoardCard.css.ts
@@ -1,25 +1,40 @@
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { themeTokens } from '@/styles/theme.css';
 
 const { space, borderRadius, color } = themeTokens;
 
-export const wrapper = style({
-  padding: space['3xl'],
-  borderRadius: borderRadius.xl,
-  border: `1px solid ${color.grey100}`,
-  backgroundColor: color.white,
-  width: '364px',
-  height: '324px',
-  position: 'relative',
-  transitionProperty: 'box-shadow, transform',
-  transitionDuration: '0.2s',
-  transitionTimingFunction: 'ease-in-out',
-  selectors: {
-    '&:hover': {
-      boxShadow: `0px 10px 15px -3px rgba(0, 0, 0, 0.05)`,
-      transform: `translateY(-8px)`,
+export const wrapper = recipe({
+  base: {
+    padding: space['3xl'],
+    borderRadius: borderRadius.xl,
+    border: `1px solid ${color.grey200}`,
+    width: '364px',
+    height: '324px',
+    position: 'relative',
+    transitionProperty: 'box-shadow, transform',
+    transitionDuration: '0.2s',
+    transitionTimingFunction: 'ease-in-out',
+    selectors: {
+      '&:hover': {
+        boxShadow: `0px 10px 15px -3px rgba(0, 0, 0, 0.05)`,
+        transform: `translateY(-8px)`,
+      },
     },
   },
+  variants: {
+    isRecruiting: {
+      true: {
+        backgroundColor: color.white,
+      },
+      false: {
+        backgroundColor: color.grey100,
+      },
+    },
+  },
+  defaultVariants: {
+    isRecruiting: true,
+  },
 });
 
 export const header = style({

diff --git a/src/app/home/components/BoardCard/BoardCard.tsx b/src/app/home/components/BoardCard/BoardCard.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Chip, Profile, SvgIcon, Typography } from '@/components';
 import { BoardListItem } from '@/api/types';
+import { RECRUIT_STATUS } from '@/app/home/constants';
 import { getChipColor } from '@/app/home/utils/chipColor';
 
 import {
@@ -34,59 +35,67 @@ const BoardCard = ({ boardListItem }: Props) => {
     participants,
   } = boardListItem;
 
+  const isRecruiting = status === RECRUIT_STATUS.RECRUITING;
+
   return (
-    <Link href={`/board/${boardId}`}>
-      <li className={wrapper}>
-        <div className={header}>
-          <div className={chips}>
-            <Chip color={getChipColor(status)}>{status}</Chip>
-            {todayOrTomorrow && <Chip color={getChipColor(todayOrTomorrow)}>{todayOrTomorrow}</Chip>}
-          </div>
-          <Typography variant="label2" color="sub">
-            {elapsedTime}
-          </Typography>
-        </div>
-        <Typography className={titleStyle} variant="title1" color="primary">
-          {title}
-        </Typography>
-        <div className={body}>
-          <div className={bodyItem}>
-            <SvgIcon id="calendar" color="grey300" width={24} height={24} />
-            <Typography variant="body2" color="primary" className={bodyItemText}>
-              {meetingDateTime}
-            </Typography>
-          </div>
-          <div className={bodyItem}>
-            <SvgIcon id="map" color="grey300" width={24} height={24} />
-            <Typography variant="body2" color="primary" className={bodyItemText}>
-              {meetingPlace}
+    <li>
+      <Link href={`/board/${boardId}`}>
+        <div
+          className={wrapper({
+            isRecruiting,
+          })}
+        >
+          <div className={header}>
+            <div className={chips}>
+              <Chip color={getChipColor(status)}>{status}</Chip>
+              {todayOrTomorrow && <Chip color={getChipColor(todayOrTomorrow)}>{todayOrTomorrow}</Chip>}
+            </div>
+            <Typography variant="label2" color="sub">
+              {elapsedTime}
             </Typography>
           </div>
-        </div>
-        <div className={footer}>
-          <div className={participantsCount}>
-            <Typography color="hint" variant="label3">
-              참여 멤버
-            </Typography>
-            <Typography color="sub" variant="label3">
-              {currentApply}/{maxApply}
-            </Typography>
+          <Typography className={titleStyle} variant="title1" color="primary">
+            {title}
+          </Typography>
+          <div className={body}>
+            <div className={bodyItem}>
+              <SvgIcon id="calendar" color="grey300" width={24} height={24} />
+              <Typography variant="body2" color="primary" className={bodyItemText}>
+                {meetingDateTime}
+              </Typography>
+            </div>
+            <div className={bodyItem}>
+              <SvgIcon id="map" color="grey300" width={24} height={24} />
+              <Typography variant="body2" color="primary" className={bodyItemText}>
+                {meetingPlace}
+              </Typography>
+            </div>
           </div>
-          <div className={participantsList}>
-            {participants.map(({ userId, nickName }, idx) => (
-              <Profile
-                key={idx}
-                uid={userId}
-                nickname={nickName}
-                {...(!userId && {
-                  fontSize: 'small',
-                })}
-              />
-            ))}
+          <div className={footer}>
+            <div className={participantsCount}>
+              <Typography color="hint" variant="label3">
+                참여 멤버
+              </Typography>
+              <Typography color="sub" variant="label3">
+                {currentApply}/{maxApply}
+              </Typography>
+            </div>
+            <div className={participantsList}>
+              {participants.map(({ userId, nickName }, idx) => (
+                <Profile
+                  key={idx}
+                  uid={userId}
+                  nickname={nickName}
+                  {...(!userId && {
+                    fontSize: 'small',
+                  })}
+                />
+              ))}
+            </div>
           </div>
         </div>
-      </li>
-    </Link>
+      </Link>
+    </li>
   );
 };
 

diff --git a/src/app/home/components/BoardCardListLoading/BoardCardListLoading.css.ts b/src/app/home/components/BoardCardListLoading/BoardCardListLoading.css.ts
@@ -9,8 +9,9 @@ import {
 } from '@/app/home/components/BoardCard/BoardCard.css';
 
 export const wrapper = style([
-  cardWrapper,
+  cardWrapper(),
   {
+    border: '1px solid white',
     transition: 'none',
     selectors: {
       '&:hover': {

diff --git a/src/app/home/components/BoardSection/BoardSection.css.ts b/src/app/home/components/BoardSection/BoardSection.css.ts
@@ -1,12 +1,13 @@
 import { style } from '@vanilla-extract/css';
 import { themeTokens } from '@/styles/theme.css';
+import { sizeProp } from '@/utils/sizeProp';
 
 const { color, space } = themeTokens;
 
 export const section = style({
   background: color.grey50,
   width: '100%',
-  padding: `${space['7xl']} 0`, // 80px
+  padding: `${sizeProp('56px')} 0`, // 56px
   flex: 1,
   display: 'flex',
   flexDirection: 'column',

diff --git a/src/app/home/components/HeroSection/HeroSection.css.ts b/src/app/home/components/HeroSection/HeroSection.css.ts
@@ -1,18 +1,37 @@
 import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
 import { themeTokens } from '@/styles/theme.css';
 
-const { space, borderRadius } = themeTokens;
+const { color, space, borderRadius } = themeTokens;
 
-export const section = style({
-  width: '100%',
-  height: '39.25rem', // 628px
-  paddingTop: '11.25rem', // 180px
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  background: 'linear-gradient(180deg, #A3B4FF -99.27%, #FFFFFF 44.33%)',
+export const section = recipe({
+  base: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    background: 'linear-gradient(180deg, #A3B4FF -99.27%, #FFFFFF 44.33%)',
+  },
+  variants: {
+    isLogin: {
+      true: {
+        paddingTop: '5rem',
+        paddingBottom: '0',
+        background: color.grey50,
+      },
+      false: {
+        paddingTop: '9rem', // 144px
+        paddingBottom: '4rem',
+      },
+    },
+  },
+  defaultVariants: {
+    isLogin: false,
+  },
 });
 
+export const contentWrapper = style({});
+
 export const title = style({
   textAlign: 'center',
   marginBottom: space['2xl'],

diff --git a/src/app/home/components/HeroSection/HeroSection.tsx b/src/app/home/components/HeroSection/HeroSection.tsx
@@ -5,35 +5,42 @@ import { useProfile } from '@/api/user';
 import { Button, Typography } from '@/components';
 import { GradientText } from '@/app/home/components';
 import { section, title, subTitle, button } from './HeroSection.css';
-import { useLoginRedirect } from '@/hooks';
 
 const HeroSection = () => {
   const { data: profile } = useProfile();
-  const { loginPath } = useLoginRedirect();
 
-  return (
-    <section className={section}>
-      <Typography variant="display2" as="h1" className={title}>
-        <GradientText color="pinkBlue" text="매일 똑같은 " />
-        <GradientText color="blue" text="삼성 생활" />
-        <GradientText color="pink" text="을" />
-        <br />
-        <GradientText color="bluePink" text="더 다채롭게 만들어 줄 " />
-        <GradientText color="blue" text="먹팟" />
-      </Typography>
-      <Typography variant="body1" as="h2" className={subTitle}>
-        우리 회사 동료들과 점심시간 이용해
-        <br />
-        가볍게 대화해보세요!
-      </Typography>
+  const isLogin = Boolean(profile);
 
-      <Link href={profile ? '/write' : loginPath}>
-        <Button color="primary" className={button}>
-          <Typography color="white" variant="title2">
-            우리 회사 먹팟 만들기
+  return (
+    <section
+      className={section({
+        isLogin,
+      })}
+    >
+      {isLogin ? null : (
+        <>
+          <Typography variant="display2" as="h1" className={title}>
+            <GradientText color="pinkBlue" text="매일 똑같은 " />
+            <GradientText color="blue" text="삼성 생활" />
+            <GradientText color="pink" text="을" />
+            <br />
+            <GradientText color="bluePink" text="더 다채롭게 만들어 줄 " />
+            <GradientText color="blue" text="먹팟" />
+          </Typography>
+          <Typography variant="body1" as="h2" className={subTitle}>
+            우리 회사 동료들과 점심시간 이용해
+            <br />
+            가볍게 대화해보세요!
           </Typography>
-        </Button>
-      </Link>
+          <Link href={'/write'}>
+            <Button color="primary" className={button}>
+              <Typography color="white" variant="title2">
+                먹팟 만들기
+              </Typography>
+            </Button>
+          </Link>
+        </>
+      )}
     </section>
   );
 };

diff --git a/src/app/home/constants/constants.ts b/src/app/home/constants/constants.ts
@@ -1,2 +1,7 @@
 /** 페이지당 보여줄 Board 개수 */
-export const BOARDS_PER_PAGE = 6;
+export const BOARDS_PER_PAGE = 8;
+
+export const RECRUIT_STATUS = {
+  RECRUITING: '모집중',
+  CLOSED: '모집마감',
+} as const;