🚀 deploy : dev -> main 병합

README.md

@@ -173,7 +173,7 @@ MONEW/
 
 <br/>
 
-<h2 id="팀원소개">🧑 팀원 소개</h2>
+<h2 id="팀원소개">👥 팀원 소개</h2>
 
 <a href="https://www.notion.so/26f2c744f86a8000bdb0d71497422216?source=copy_link">📑 프로젝트 협업 문서(노션) 바로가기</a>
 

src/app/layouts/PrivateLayout.tsx

@@ -5,10 +5,16 @@ import Footer from "@/shared/components/Footer";
 export default function PrivateLayout() {
   return (
     <div className="min-h-dvh flex flex-col gap-[60px]">
-      <PrivateHeader />
-      <main className="flex-1">
-        <Outlet />
-      </main>
+      <div className="sticky top-0 z-30">
+        <PrivateHeader />
+      </div>
+
+      <div className="flex-1 overflow-x-auto">
+        <main className="flex-1 min-w-[1280px] px-4">
+          <Outlet />
+        </main>
+      </div>
+
       <Footer />
     </div>
   );

src/app/routes/private/ActivitiesPage.tsx

@@ -26,7 +26,7 @@ export default function ActivitiesPage() {
   }, [isValid, setSp]);
 
   return (
-    <div className="flex justify-center gap-10 w-full px-4 overflow-x-auto">
+    <div className="flex justify-center gap-10 w-full">
       <div className="flex flex-col gap-4">
         <ProfileCard />
         <SubscriptionPanel />

src/app/routes/private/ArticlesPage.tsx

@@ -326,6 +326,19 @@ export default function ArticlesPage() {
     fetchInterestData();
   }, [fetchInterestData]);
 
+  useEffect(() => {
+    if (interests.length > 0 && interestId) {
+      const matchedInterest = interests.find(
+        (interest) => interest.id === interestId,
+      );
+      if (matchedInterest) {
+        setSelectedInterest(matchedInterest.name);
+      }
+    } else if (!interestId) {
+      setSelectedInterest("");
+    }
+  }, [interests, interestId]);
+
   useEffect(() => {
     setSortValue(reverseSortMap[orderBy] || "게시일");
     setDirectionValue(direction === "DESC" ? "내림차순" : "오름차순");
@@ -383,8 +396,8 @@ export default function ArticlesPage() {
         <div className="mb-6">
           <SearchBar height="h-11" onSearch={handleSearch} />
         </div>
-        <div className="h-auto mb-6 border border-slate-200 rounded-2xl px-4 pt-4 pb-6 bg-white">
-          <div className="text-14-m text-slate-900 mb-2">정렬</div>
+        <div className="h-auto mb-6 border border-gray-200 rounded-2xl px-4 pt-4 pb-6 bg-white">
+          <div className="text-14-m text-gray-900 mb-2">정렬</div>
           <div className="min-h-10">
             <SelectBox
               items={sortOptions}
@@ -394,17 +407,17 @@ export default function ArticlesPage() {
             />
           </div>
 
-          <div className="text-14-m text-slate-900 mb-2">정렬 방향</div>
+          <div className="text-14-m text-gray-900 mb-2">정렬 방향</div>
           <SelectBox
             items={directionOptions}
             value={directionValue}
             onChange={handleDirectionOption}
             className="mb-6 h-10"
           />
-          <div className="text-14-m text-slate-900 mb-2">출처</div>
+          <div className="text-14-m text-gray-900 mb-2">출처</div>
           <Input value="NAVER" className="mb-6" inputSize="sm" disabled />
 
-          <div className="text-14-m text-slate-900 mb-2">날짜</div>
+          <div className="text-14-m text-gray-900 mb-2">날짜</div>
           <Input
             value={fromDate}
             placeholder="2025.01.01 부터"
@@ -441,7 +454,7 @@ export default function ArticlesPage() {
         {keyword ? (
           <div className="flex gap-4 items-center mb-8">
             <div className="text-24-b text-cyan-600">{keyword}</div>
-            <div className="text-24-b text-slate-900">관련 기사 목록</div>
+            <div className="text-24-b text-gray-900">관련 기사 목록</div>
           </div>
         ) : interests.length > 0 ? (
           <div className="flex gap-4 items-baseline mb-8">
@@ -456,17 +469,17 @@ export default function ArticlesPage() {
                 noBackground={true}
               />
             </div>
-            <div className="text-24-b text-slate-900">관련 기사 목록</div>
+            <div className="text-24-b text-gray-900">관련 기사 목록</div>
           </div>
         ) : (
-          <div className="text-24-b text-slate-900">관련 기사 목록</div>
+          <div className="text-24-b text-gray-900">관련 기사 목록</div>
         )}
         {articles.length === 0 ? (
-          <div className="min-w-[894px] w-full flex flex-col justify-center min-h-72 items-center gap-6 mt-30">
+          <div className="min-w-[894px] w-full flex flex-col justify-center min-h-72 items-center mt-30">
             {interestId ? (
               <EmptyState message="관련된 기사가 없습니다." />
             ) : (
-              <div>
+              <div className="flex flex-col items-center justify-center gap-6">
                 <EmptyState message="관심사를 등록하면 맞춤 기사를 확인하실 수 있어요." />
                 <Button
                   onClick={() => navigate("/interests")}

src/app/routes/private/InterestsPage.tsx

@@ -292,8 +292,8 @@ export default function InterestsPage() {
       <div className="w-[1200px] mx-auto">
         <div className="flex justify-between items-center">
           <div className="text-left">
-            <h1 className="text-24-b text-slate-900">관심사 목록</h1>
-            <p className="text-16-m text-slate-500 mt-3">
+            <h1 className="text-24-b text-gray-900">관심사 목록</h1>
+            <p className="text-16-m text-gray-500 mt-3">
               구독 중인 관심사를 관리하고, 새로운 관심사를 등록해보세요.
             </p>
           </div>
@@ -360,7 +360,7 @@ export default function InterestsPage() {
             </div>
           )}
 
-          {isLoading && <Skeleton className="mx-4" />}
+          {isLoading && <Skeleton className="h-[232px] mx-4" />}
         </div>
       </div>
     </div>

src/app/routes/public/LandingPage.tsx

@@ -3,43 +3,45 @@ import Button from "@/shared/components/button/Button";
 import { useAuthInfo } from "@/features/auth/hooks/useAuthInfo";
 import { Link } from "react-router";
 import { ROUTES } from "@/shared/constants/routes";
-import firstImageUrl from "@/assets/images/landing_interests.png";
-import secondImageUrl from "@/assets/images/landing_notifications.png";
-import thirdImageUrl from "@/assets/images/landing_comments.png";
+import firstImageUrl from "@/assets/images/landing_interests.svg";
+import secondImageUrl from "@/assets/images/landing_notifications.svg";
+import thirdImageUrl from "@/assets/images/landing_comments.svg";
 
 export default function LandingPage() {
   const { user } = useAuthInfo();
   const link = user ? ROUTES.ARTICLES : ROUTES.AUTH_LOGIN;
 
   return (
     <div className="flex flex-col items-center px-4 w-full">
-      <h2 className="lg:mb-10 mb-6 text-center lg:text-[32px] md:text-[26px] text-[20px]">
-        마음대로 골라 보는 모든 뉴스
-        <p className="lg:text-[36px] md:text-[30px] text-[24px] font-bold text-cyan-500">
-          모뉴
+      <div className="lg:mb-10 mb-6 md:gap-1.5 gap-0 flex flex-col text-center">
+        <p className="lg:text-[30px] md:text-[24px] text-[20px]">
+          마음대로 골라 보는 모든 뉴스
         </p>
-      </h2>
+        <h1 className="lg:text-[36px] md:text-[30px] text-[24px] font-bold text-cyan-500">
+          모뉴
+        </h1>
+      </div>
 
       <div className="lg:flex-row flex flex-col justify-center items-center gap-6 w-full">
         <LandingBox
           imageSrc={firstImageUrl}
           imageAlt="관심사 목록"
           description="관심사를 등록해보세요"
-          containerClassName="bg-cyan-100 border-3 border-cyan-400"
+          containerClassName="bg-white border-cyan-400"
           descriptionClassName="text-cyan-500"
         />
         <LandingBox
           imageSrc={secondImageUrl}
           imageAlt="알림 목록"
           description="키워드에 맞는 뉴스가 수집돼요"
-          containerClassName="bg-gray-400 border-3 border-gray-200"
+          containerClassName="bg-gray-400 border-gray-200"
           descriptionClassName="text-white"
         />
         <LandingBox
           imageSrc={thirdImageUrl}
           imageAlt="댓글 목록"
           description="뉴스를 읽고 의견을 남겨보세요"
-          containerClassName="bg-gray-500 border-3 border-gray-300"
+          containerClassName="bg-gray-500 border-gray-300"
           descriptionClassName="text-white"
         />
       </div>