Merge pull request #138 from TEAM-COMFIT/feat/#133/experience-matching-qa

[Feat] 경험매칭AI QA 반영

Author: odukong

src/features/experience-matching/ui/analyzing/analyzing.css.ts

@@ -6,6 +6,7 @@ export const layout = style({
   display: "flex",
   width: "106rem",
   height: "39.2rem",
+  marginTop: "4.3rem",
   padding: "1.6rem 0.4rem",
   flexDirection: "column",
   justifyContent: "center",

src/features/experience-matching/ui/matching-auto-complete/matching-auto-complete.css.ts

@@ -38,7 +38,7 @@ export const inputFocused = style({
 
 export const icon = style({
   position: "absolute",
-  right: "1.8rem",
+  right: "1.2rem",
   top: "50%",
   transform: "translateY(-50%)",
   color: themeVars.color.blue600,
@@ -66,15 +66,18 @@ export const menu = style({
 
   selectors: {
     "&::-webkit-scrollbar": {
-      width: "0.4rem",
+      width: "1.2rem",
     },
     "&::-webkit-scrollbar-thumb": {
       backgroundColor: themeVars.color.gray300,
+      height: "50px",
       borderRadius: "100px",
+      backgroundClip: "padding-box",
+      border: `4px solid transparent`,
     },
     "&::-webkit-scrollbar-track": {
       backgroundColor: "transparent",
-      margin: "0.4rem 0",
+      margin: "0.8rem 1rem",
     },
   },
 });
@@ -87,7 +90,7 @@ export const menuItem = style({
   height: "4.4rem",
   borderRadius: "8px",
   cursor: "pointer",
-  ...themeVars.fontStyles.body_m_14,
+  ...themeVars.fontStyles.body_r_16,
   color: themeVars.color.gray800,
   transition: "background-color 0.2s",
 

src/features/experience-matching/ui/select-experience/select-experience.css.ts

@@ -10,7 +10,7 @@ export const layout = style({
 export const totalCount = style({
   marginBottom: "0.8rem",
   color: themeVars.color.gray800,
-  ...themeVars.fontStyles.body_b_14,
+  ...themeVars.fontStyles.body_b_16,
 });
 
 export const blueCount = style({
@@ -22,11 +22,12 @@ export const box = style({
   gridTemplateColumns: "repeat(3, 1fr)",
   alignContent: "start",
   gridAutoRows: "max-content",
-  gap: "1.6rem",
+  gap: "1.3rem",
   width: "106rem",
   height: "39.2rem",
-  padding: "1.6rem 0.2rem 1.6rem 2rem",
+  padding: "1.6rem 4rem 1.6rem 4rem",
 
+  overflowX: "hidden",
   overflowY: "auto",
   borderRadius: "16px",
   border: `1.5px ${themeVars.color.normal} solid`,

src/features/landing/ui/point-card/point-card.css.ts

@@ -40,7 +40,11 @@ export const container = style({
 export const header = style({
   display: "flex",
   flexDirection: "column",
-  textAlign: "center",
+  textAlign: "left",
+
+  ...screen.mobile({
+    textAlign: "center",
+  }),
 });
 
 export const title = style({

src/pages/fallback/loading-page.css.ts

@@ -1,12 +1,7 @@
-import { style, keyframes } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 
 import { themeVars } from "@/app/styles";
 
-const rotate = keyframes({
-  "0%": { transform: "rotate(0deg)" },
-  "100%": { transform: "rotate(360deg)" },
-});
-
 export const overlay = style({
   position: "fixed",
   top: 0,
@@ -19,7 +14,8 @@ export const overlay = style({
   justifyContent: "center",
   alignItems: "center",
 
-  backgroundColor: "rgba(255, 255, 255, 0.5)",
+  opacity: "0.6",
+  backgroundColor: themeVars.color.gray800,
   backdropFilter: "blur(8px)",
   WebkitBackdropFilter: "blur(8px)",
 });
@@ -32,12 +28,12 @@ export const container = style({
 });
 
 export const spinner = style({
-  width: "10rem",
-  height: "10rem",
-  animation: `${rotate} 1.5s linear infinite`,
+  width: "22rem",
+  height: "10.8rem",
+  aspectRatio: 55 / 27,
 });
 
 export const text = style({
-  color: themeVars.color.black,
-  ...themeVars.fontStyles.hding_b_22,
+  color: themeVars.color.white,
+  ...themeVars.fontStyles.title_m_24,
 });

src/pages/fallback/loading-page.tsx

@@ -1,13 +1,13 @@
-import { LOADING } from "@/shared/assets/images";
+import { KEY_SPINNER } from "@/shared/assets/gifs";
 
 import * as styles from "./loading-page.css";
 
 export const LoadingPage = () => {
   return (
     <div className={styles.overlay}>
       <div className={styles.container}>
-        <img src={LOADING} className={styles.spinner} alt="로딩 중" />
-        <div className={styles.text}>잠시만 기다려주세요</div>
+        <img src={KEY_SPINNER} className={styles.spinner} alt="로딩 중" />
+        <div className={styles.text}>페이지가 로딩중입니다 ...</div>
       </div>
     </div>
   );

src/pages/landing/landing-page.tsx

@@ -1,11 +1,13 @@
 import { useRef } from "react";
+import { useNavigate } from "react-router-dom";
 
+import { ROUTES } from "@/app/routes/paths";
+import { useAuthStore } from "@/app/store";
 import {
   LandingCard,
   WorryCard,
   PointCard,
   CompanySlider,
-  AlertModal,
 } from "@/features/landing";
 import { LANDING_CARD_ITEMS } from "@/features/landing/config/landing-card.constant";
 import { CHARACTER, FLOAT_IMG, KEY } from "@/shared/assets/images";
@@ -16,11 +18,16 @@ import * as styles from "./landing-page.css";
 const LandingPage = () => {
   useScrollToTop();
   const { isMobile } = useDevice();
-  const modalRef = useRef<HTMLDialogElement>(null);
+  const { isLoggedIn } = useAuthStore();
+  const navigate = useNavigate();
   const sectionRef = useRef<HTMLDivElement>(null);
 
-  const handleModal = () => {
-    modalRef.current?.showModal();
+  const handleMovetoPage = () => {
+    if (isLoggedIn) {
+      navigate(ROUTES.EXPERIENCE_MATCHING);
+    } else {
+      navigate(ROUTES.HOME);
+    }
   };
 
   const handleScrollToSection = () => {
@@ -115,12 +122,10 @@ const LandingPage = () => {
             <br /> 하지만 올바른 방향과 전략이 있다면 충분히 해낼 수 있습니다
           </p>
         </div>
-        <button className={styles.footerButton} onClick={handleModal}>
+        <button className={styles.footerButton} onClick={handleMovetoPage}>
           경험 매칭하기
         </button>
       </footer>
-      {/** 모달  */}
-      <AlertModal ref={modalRef} />
     </div>
   );
 };

src/shared/assets/icons/icon_check_on.svg

@@ -1,4 +1,4 @@
 export const height = {
   header: "6.6rem",
-  mobile_header: "10.3rem",
+  mobile_header: "6.1rem",
 } as const;

src/shared/styles/tokens/height.css.ts

@@ -6,7 +6,7 @@ export const wrapper = style({
   display: "flex",
   flexDirection: "column",
 
-  padding: "2.8rem 2rem",
+  padding: "2rem 2rem",
   borderRadius: "16px",
   border: `1px solid ${themeVars.color.normal}`,
 });