🎨 design : 랜딩 디자인 변경, 레이아웃 변경, 스크롤바 밀림 이슈 해결

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

@@ -4,11 +4,17 @@ 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="min-h-dvh flex flex-col space-y-[60px]">
+      <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 overflow-x-auto">
+          <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

@@ -114,10 +114,10 @@ export default function ArticlesPage() {
   };
 
   const [sortValue, setSortValue] = useState(
-    reverseSortMap[orderBy] || "게시일",
+    reverseSortMap[orderBy] || "게시일"
   );
   const [directionValue, setDirectionValue] = useState(
-    direction === "DESC" ? "내림차순" : "오름차순",
+    direction === "DESC" ? "내림차순" : "오름차순"
   );
 
   const fetchInitialData = useCallback(async () => {
@@ -225,7 +225,7 @@ export default function ArticlesPage() {
       },
       {
         threshold: 0.8,
-      },
+      }
     );
     if (lastElementRef.current) {
       observerRef.current.observe(lastElementRef.current);
@@ -238,13 +238,13 @@ export default function ArticlesPage() {
 
   const interestNames = useMemo(
     () => interests.map((interest) => interest.name),
-    [interests],
+    [interests]
   );
 
   const handleInterestChange = (value: string) => {
     setSelectedInterest(value);
     const selectedInterestData = interests.find(
-      (interest) => interest.name === value,
+      (interest) => interest.name === value
     );
 
     if (selectedInterestData) {
@@ -290,21 +290,21 @@ export default function ArticlesPage() {
 
       newParams.set(
         "direction",
-        directionValue === "오름차순" ? "ASC" : "DESC",
+        directionValue === "오름차순" ? "ASC" : "DESC"
       );
 
       if (fromDate) {
         newParams.set(
           "publishDateFrom",
-          `${fromDate.replace(/\./g, "-")}T00:00:00`,
+          `${fromDate.replace(/\./g, "-")}T00:00:00`
         );
       } else {
         newParams.delete("publishDateFrom");
       }
       if (toDate) {
         newParams.set(
           "publishDateTo",
-          `${toDate.replace(/\./g, "-")}T23:59:59`,
+          `${toDate.replace(/\./g, "-")}T23:59:59`
         );
       } else {
         newParams.delete("publishDateTo");
@@ -383,8 +383,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 +394,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 +441,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 +456,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>