[YS-243] 홈화면 & 로그인 & 회원가입 스타일링 vanilla-extract로 마이그레이션

src/app/home/components/Banner/Banner.css.ts

@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+
+export const bannerLayout = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '1.2rem',
+});
+
+export const bannerWrapper = style({
+  position: 'relative',
+  height: '15vh',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const navigationLeft = style({
+  position: 'absolute',
+  left: '1.6rem',
+});
+
+export const bannerCarousel = style({
+  position: 'relative',
+  overflow: 'hidden',
+});
+
+export const carouselContainer = style({
+  display: 'flex',
+  transition: 'all 1s',
+});
+
+export const navigationRight = style({
+  position: 'absolute',
+  right: '1.6rem',
+});
+
+export const bannerImage = style({
+  width: '100%',
+  height: 'auto',
+});
+
+export const slideCircleContainer = style({
+  display: 'flex',
+  gap: '0.6rem',
+});
+
+export const slideCircle = style({
+  borderRadius: '50%',
+  width: '0.6rem',
+  height: '0.6rem',
+});

src/app/home/components/Banner/Banner.tsx

@@ -11,7 +11,7 @@ import {
   carouselContainer,
   navigationLeft,
   navigationRight,
-} from './Banner.styles';
+} from './Banner.css';
 
 import BannerImage from '@/assets/images/banner.svg';
 import Icon from '@/components/Icon';
@@ -31,26 +31,26 @@ const Banner = () => {
   };
 
   return (
-    <div css={bannerLayout}>
-      <div css={bannerWrapper}>
-        <div css={bannerCarousel} ref={carouselRef}>
+    <div className={bannerLayout}>
+      <div className={bannerWrapper}>
+        <div className={bannerCarousel} ref={carouselRef}>
           <div
-            css={carouselContainer}
+            className={carouselContainer}
             style={{
               transform: carouselRef.current
                 ? `translateX(-${(bannerIdx - 1) * carouselRef.current.clientWidth}px)`
                 : 'none',
             }}
           >
-            <Image src={BannerImage} alt="배너1" css={bannerImage} priority />
-            <Image src={BannerImage} alt="배너2" css={bannerImage} priority />
-            <Image src={BannerImage} alt="배너3" css={bannerImage} priority />
+            <Image src={BannerImage} alt="배너1" className={bannerImage} priority />
+            <Image src={BannerImage} alt="배너2" className={bannerImage} priority />
+            <Image src={BannerImage} alt="배너3" className={bannerImage} priority />
           </div>
         </div>
-        <button css={navigationLeft} onClick={handleClickPrev}>
+        <button className={navigationLeft} onClick={handleClickPrev}>
           <Icon icon="ChevronSquare" rotate={-90} cursor="pointer" />
         </button>
-        <button css={navigationRight} onClick={handleClickNext}>
+        <button className={navigationRight} onClick={handleClickNext}>
           <Icon icon="ChevronSquare" rotate={90} cursor="pointer" />
         </button>
       </div>

src/app/home/components/PostCard/PostCard.css.ts

@@ -0,0 +1,88 @@
+import { style } from '@vanilla-extract/css';
+
+import { colors } from '@/styles/colors';
+import { fonts } from '@/styles/fonts.css';
+
+export const postCardLayout = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  gap: '1.6rem',
+
+  border: 'none',
+  borderRadius: '1.2rem',
+
+  height: '20rem',
+  padding: '1.6rem 2rem',
+  backgroundColor: colors.field01,
+
+  selectors: {
+    '&:hover': {
+      boxShadow: '0px 4px 16px rgba(53, 59, 61, 0.08)',
+    },
+  },
+});
+
+export const postHeader = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+});
+
+export const postCardHeader = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: '1.6rem',
+});
+
+export const postLocation = style({
+  ...fonts.label.medium.R13,
+  color: colors.text03,
+});
+
+export const postCardRightHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.4rem',
+});
+
+export const postViews = style({
+  ...fonts.label.medium.R13,
+  color: colors.text03,
+});
+
+export const postTitle = style({
+  ...fonts.title.small.SB18,
+  color: colors.text06,
+});
+
+export const contactedPostTag = style({
+  width: 'fit-content',
+  padding: '0.6rem 0.85rem',
+  ...fonts.label.small.SB12,
+  color: colors.text05,
+  backgroundColor: colors.field03,
+  borderRadius: '3rem',
+});
+
+export const postRewardContainer = style({
+  display: 'flex',
+  gap: '0.8rem',
+  alignItems: 'center',
+});
+
+export const announceText = style({
+  ...fonts.label.medium.M13,
+  color: colors.text03,
+});
+
+export const postReward = style({
+  ...fonts.label.medium.SB13,
+  color: colors.primaryMint,
+});
+
+export const postDate = style({
+  ...fonts.label.medium.M13,
+  color: colors.text04,
+});

src/app/home/components/PostCard/PostCard.tsx

@@ -13,7 +13,7 @@ import {
   postRewardContainer,
   postTitle,
   postViews,
-} from './PostCard.styles';
+} from './PostCard.css';
 import { formatPostDate } from '../../home.utils';
 
 import Icon from '@/components/Icon';
@@ -31,27 +31,27 @@ const PostCard = ({ post }: PostCardProps) => {
 
   return (
     <li>
-      <Link href={`/post/${experimentPostId}`} key={experimentPostId} css={postCardLayout}>
-        <div css={postHeader}>
-          <div css={postCardHeader}>
-            <span css={postLocation}>{univName}</span>
-            <div css={postCardRightHeader}>
+      <Link href={`/post/${experimentPostId}`} key={experimentPostId} className={postCardLayout}>
+        <div className={postHeader}>
+          <div className={postCardHeader}>
+            <span className={postLocation}>{univName}</span>
+            <div className={postCardRightHeader}>
               <Icon icon="Eye" width={18} />
-              <span css={postViews}>{views}</span>
+              <span className={postViews}>{views}</span>
             </div>
           </div>
-          <h3 css={postTitle}>{title}</h3>
+          <h3 className={postTitle}>{title}</h3>
         </div>
         <div>
           {recruitStatus ? (
             <>
-              <div css={postRewardContainer}>
-                <span css={announceText}>보상</span>
-                <span css={postReward}>{reward}</span>
+              <div className={postRewardContainer}>
+                <span className={announceText}>보상</span>
+                <span className={postReward}>{reward}</span>
               </div>
-              <div css={postRewardContainer}>
-                <span css={announceText}>일시</span>
-                <span css={postDate}>
+              <div className={postRewardContainer}>
+                <span className={announceText}>일시</span>
+                <span className={postDate}>
                   {formatPostDate({
                     startDate: durationInfo.startDate,
                     endDate: durationInfo.endDate,
@@ -60,7 +60,7 @@ const PostCard = ({ post }: PostCardProps) => {
               </div>
             </>
           ) : (
-            <div css={contactedPostTag}>
+            <div className={contactedPostTag}>
               <span>모집 완료</span>
             </div>
           )}