Feature: 치킨 이벤트 카드 추가 및 인스타 링크 연결 (#221)

* fix: 사파리에서 input창 클릭시 확대되는 현상 해결

* feat: event-card 컴포넌트 추가

* style: border 스타일, 폰트스타일 추가

* feat: 인스타 링크 연결

* refactor: 셀프 클로징으로 수정

* refactor: 코드리뷰 반영

Author: seueooo

app/(main)/explore/_components/card-container/index.tsx

@@ -1,6 +1,6 @@
-import Card from "@/shared/ui/card";
 import EmptySection from "@/app/(main)/explore/_components/empty-section";
-
+import EventCard from "@/app/(main)/explore/_components/event-card";
+import Card from "@/shared/ui/card";
 import * as styles from "./card-container.css";
 
 import { CARD_GRADIENTS } from "@/shared/constants/card";
@@ -24,6 +24,7 @@ const CardContainer = ({ capsules, isLoading }: CardContainerProps) => {
 
   return (
     <div className={styles.cardContainer}>
+      <EventCard />
       {capsules.map((capsule, index) => (
         <Card
           key={capsule.id}

app/(main)/explore/_components/event-card/event-card.css.ts

@@ -0,0 +1,116 @@
+import { themeVars } from "@/shared/styles/base/theme.css";
+import { colorTheme } from "@/shared/styles/tokens/color";
+import { screen } from "@/shared/styles/tokens/screen";
+import { style } from "@vanilla-extract/css";
+
+export const cardBase = style({
+  position: "relative",
+  border: "1.5px solid #4d4d4d",
+  zIndex: 2,
+  width: "100%",
+  height: "24.5rem",
+  borderRadius: "16px",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  cursor: "pointer",
+  backgroundColor: themeVars.color.white[5],
+  background: "linear-gradient(180deg, #202025 50%, #5B5D8E 100%)",
+  ...screen.md({
+    height: "30rem",
+  }),
+});
+
+export const chipClass = style({
+  ...themeVars.text.F12,
+  height: "1.9rem",
+  ...screen.md({
+    ...themeVars.text.F14,
+    height: "2.25rem",
+  }),
+});
+
+export const cardGradientOverlay = style({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+  zIndex: 1,
+});
+
+export const cardContentWrapper = style({
+  height: "50%",
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  padding: "1.4rem",
+  gap: "0.7rem",
+
+  ...screen.md({
+    padding: "2rem",
+    gap: "0.8rem",
+  }),
+});
+
+export const cardTopWrapper = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: "1.4rem",
+  alignItems: "center",
+  background: "linear-gradient(90deg, #8CA8FA 0%, #886DF4 100%)",
+  backgroundClip: "text",
+  WebkitBackgroundClip: "text",
+  color: "transparent",
+  fontFamily: "Pretendard",
+  fontSize: "1.4rem",
+  fontStyle: "normal",
+  fontWeight: "800",
+  lineHeight: "140%",
+  ...screen.md({
+    fontSize: "1.6rem",
+  }),
+});
+
+export const cardIcon = style({
+  width: "12.6rem",
+  height: "9.7rem",
+});
+
+export const cardIconWrapper = style({
+  position: "relative",
+  zIndex: 2,
+  width: "100%",
+  height: "50%",
+  padding: "2rem",
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "flex-end",
+});
+
+export const cardTitle = style({
+  whiteSpace: "pre-wrap",
+  wordWrap: "break-word",
+  wordBreak: "break-word",
+  ...themeVars.text.F17,
+  color: colorTheme.white[85],
+
+  ...screen.md({
+    ...themeVars.text.F22,
+  }),
+});
+
+export const cardDescription = style({
+  whiteSpace: "pre-wrap",
+  ...themeVars.text.F14,
+  color: colorTheme.white[60],
+  gap: "0.4rem",
+  display: "flex",
+  flexDirection: "row",
+
+  ...screen.md({
+    ...themeVars.text.F15,
+    color: colorTheme.white[50],
+  }),
+});

app/(main)/explore/_components/event-card/index.tsx

@@ -0,0 +1,38 @@
+import HoverMotion from "@/shared/ui/motion/hover-motion";
+import { cn } from "@/shared/utils/cn";
+import * as styles from "./event-card.css";
+
+const eventLink = "https://www.instagram.com/p/DNpm2HGp8Ow/?img_index=1";
+
+const EventCard = () => {
+  return (
+    <HoverMotion>
+      <a
+        className={styles.cardBase}
+        href={eventLink}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <div className={cn(styles.cardGradientOverlay)} />
+        <div className={styles.cardContentWrapper}>
+          <div className={styles.cardTopWrapper}>OPEN EVENT</div>
+          <span className={styles.cardTitle}>
+            타임캡슐 만들고
+            <br />
+            치킨 받아가요!
+          </span>
+          <div className={styles.cardDescription}>
+            <span>9/30까지</span>
+          </div>
+        </div>
+        <div className={styles.cardIconWrapper}>
+          <div className={styles.cardIcon}>
+            <img src="/event-chicken.png" alt="이벤트 치킨" />
+          </div>
+        </div>
+      </a>
+    </HoverMotion>
+  );
+};
+
+export default EventCard;

app/(sub)/search/_components/search-bar-section/search-bar-section.css.ts

@@ -23,6 +23,8 @@ export const searchBar = style({
   backgroundColor: themeVars.color.white[5],
   padding: "1.2rem 1.8rem 1.2rem 4.8rem",
   borderRadius: "12px",
+  zoom: 1,
+  fontSize: "16px",
   selectors: {
     "&::placeholder": {
       color: themeVars.color.white[40],