feat: landing 페이지 삭제

Hooking-CEOS · Feb 14, 2024 · ab760db · ab760db
1 parent 8854919
commit ab760db
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 34 deletions.
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -9,11 +9,7 @@
 
 <url>
   <loc>https://hooking.me/</loc>
-  <lastmod>2023-08-14T05:05:16+00:00</lastmod>
-</url>
-<url>
-  <loc>https://hooking.me/home</loc>
-  <lastmod>2023-08-14T05:05:16+00:00</lastmod>
+  <lastmod>2024-02-14T05:05:16+00:00</lastmod>
 </url>
 <url>
   <loc>https://hooking.me/writing</loc>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -29,20 +29,21 @@ const Header = () => {
   const handleLogin = () => setLoginModal(true);
 
   const MENU = {
-    landing: { name: "landing", path: "/", idx: -1 },
-    home: { name: "home", path: "/home", idx: 0 },
+    // landing: { name: "landing", path: "/", idx: -1 },
+    home: { name: "home", path: "/", idx: 0 },
   };
 
   return (
     <HeaderWrapper>
+      {/* want to add divider to determine if the width is bigger than 1024px or not */}
       <div className="header__wrap">
         <div className="header__content--left">
           <Button
             icon="icon-logo"
             text=""
             onClick={() => {
               setActiveChildMenuIdx(-1);
-              let curMenu = !isLogin ? MENU.landing : MENU.home;
+              let curMenu = MENU.home;
               setActiveMenuIdx(curMenu.idx);
               navigate(curMenu.path);
             }}
@@ -90,7 +91,7 @@ export default Header;
 const HeaderWrapper = styled.header`
   position: fixed;
   top: 0;
-  width: 100%;
+  width: 100vw;
   height: ${HEADER_HEIGHT_MO};
   z-index: ${Z_INDEX_HEADER};
   background-color: ${(props) => props.theme.colors.white};

diff --git a/src/components/Search/SearchBar.tsx b/src/components/Search/SearchBar.tsx
@@ -62,7 +62,7 @@ const SearchBar = () => {
   };
 
   useEffect(() => {
-    if (location.pathname === "/" || location.pathname === "/home") {
+    if (location.pathname === "/") {
       setSearchState({ ...searchState, searchKeyword: "" });
       setKeyword("");
     }
@@ -75,7 +75,10 @@ const SearchBar = () => {
         onClick={handleFocusOn}
         active={searchState.searchFocus}
       >
-        <form onSubmit={onSearchSubmit} className="searchbar__wrap">
+        <form
+          onSubmit={onSearchSubmit}
+          className="searchbar__wrap"
+        >
           <span
             onClick={handleFocusOn}
             className={`icon icon-${

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
@@ -70,7 +70,7 @@ const SearchBar = () => {
   };
 
   useEffect(() => {
-    if (location.pathname === "/" || location.pathname === "/home") {
+    if (location.pathname === "/") {
       setSearchState({ ...searchState, searchKeyword: "" });
       setKeyword("");
     }
@@ -115,7 +115,10 @@ const SearchBar = () => {
 
   return (
     <>
-      <SearchBarWrapper ref={searchWrap} onClick={handleFocusOn}>
+      <SearchBarWrapper
+        ref={searchWrap}
+        onClick={handleFocusOn}
+      >
         <form
           onSubmit={onSearchSubmit}
           className={`${

diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
@@ -59,37 +59,57 @@ const Landing = () => {
           </div>
           <div className="cardArea">
             {/* <div className="card2"></div> */}
-            <img src={card2} alt="imgcard" className="card2" />
-            <img src={card1} alt="imgcard" className="card1" />
+            <img
+              src={card2}
+              alt="imgcard"
+              className="card2"
+            />
+            <img
+              src={card1}
+              alt="imgcard"
+              className="card1"
+            />
           </div>
         </div>
         <div className="bottomArea">
           <div className="filterArea">
             <div className="filterBtn">
               <div className="filtertop">
                 무드 키워드
-                <img src={iconfold} alt="foldIcon" />
+                <img
+                  src={iconfold}
+                  alt="foldIcon"
+                />
               </div>
               <div className="filterBtm">브랜드를 설명하는 키워드</div>
             </div>
             <div className="filterBtn">
               <div className="filtertop">
                 산업군
-                <img src={iconfold} alt="foldIcon" />
+                <img
+                  src={iconfold}
+                  alt="foldIcon"
+                />
               </div>
               <div className="filterBtm">브랜드가 속한 산업군</div>
             </div>
             <div className="filterBtn">
               <div className="filtertop">
                 타겟 나이대
-                <img src={iconfold} alt="foldIcon" />
+                <img
+                  src={iconfold}
+                  alt="foldIcon"
+                />
               </div>
               <div className="filterBtm">중점적으로 목표한 나이대</div>
             </div>
             <div className="filterBtn">
               <div className="filtertop">
                 가격대
-                <img src={iconfold} alt="foldIcon" />
+                <img
+                  src={iconfold}
+                  alt="foldIcon"
+                />
               </div>
               <div className="filterBtm">형성되어 있는 가격</div>
             </div>
@@ -99,7 +119,7 @@ const Landing = () => {
             text="바로 살펴보기"
             className="button-landing-orange text-landing "
             onClick={() => {
-              navigate("/home");
+              navigate("/");
               setActiveMenuIdx(0);
             }}
           />
@@ -124,11 +144,19 @@ const Landing = () => {
             내가 원하는 브랜드 카피를 바로 볼 수 있어요.
           </span>
         </div>
-        <img src={landing2} alt="landingpage" className="page2Img" />
+        <img
+          src={landing2}
+          alt="landingpage"
+          className="page2Img"
+        />
       </LandingPage2>
       <div ref={ref}>
         <LandingPage3>
-          <img src={landing3} alt="landingpage" className="page3Img" />
+          <img
+            src={landing3}
+            alt="landingpage"
+            className="page3Img"
+          />
           <div className="textDiv">
             <span className="mainText">
               다양한 브랜드의
@@ -143,7 +171,11 @@ const Landing = () => {
           </div>
         </LandingPage3>
         <LandingPage4 ref={newRef}>
-          <img src={landing4} alt="landingpage" className="page4Img" />
+          <img
+            src={landing4}
+            alt="landingpage"
+            className="page4Img"
+          />
         </LandingPage4>
       </div>
       {(inView || newInView) && (

diff --git a/src/pages/OathProcessor.tsx b/src/pages/OathProcessor.tsx
@@ -3,6 +3,7 @@ import { useSetRecoilState } from "recoil";
 import { activeMenu, isLogined } from "@/utils/atom";
 import { useNavigate } from "react-router-dom";
 import { setCookie } from "@/hooks/cookies";
+import HomeSkeleton from "./Skeleton/HomeSkeleton";
 
 const OathProcessor = () => {
   const Navigate = useNavigate();
@@ -25,14 +26,14 @@ const OathProcessor = () => {
       setActiveMenuIdx(0);
       setCookie("userToken", token);
       setIsLogin(true);
-      Navigate("/home");
+      Navigate("/");
     } else {
       alert("로그인에 실패했습니다.");
       Navigate("/");
     }
   };
 
-  return <>Loading...</>;
+  return <HomeSkeleton />;
 };
 
 export default OathProcessor;
diff --git a/src/router/index.tsx b/src/router/index.tsx
@@ -41,13 +41,13 @@ const HookingRouter = () => {
   const handleCopyClose = () => setBrandModal(false);
 
   const routes = [
+    // {
+    //   path: "/",
+    //   name: "Landing",
+    //   component: <Landing />,
+    // },
     {
       path: "/",
-      name: "Landing",
-      component: <Landing />,
-    },
-    {
-      path: "/home",
       name: "Home",
       component: (
         <Suspense fallback={<HomeSkeleton />}>
@@ -67,7 +67,7 @@ const HookingRouter = () => {
     {
       path: "/bookmark",
       name: "BookMark",
-      component: isLogin ? <BookMark /> : <Navigate to="/home" />,
+      component: isLogin ? <BookMark /> : <Navigate to="/" />,
     },
     {
       path: "/qna",

diff --git a/src/utils/atom.ts b/src/utils/atom.ts
@@ -165,7 +165,7 @@ export const activeMenu = atom({
 
 export const activeChildMenu = atom({
   key: "activeChildMenu",
-  default: -1,
+  default: 0,
   effects_UNSTABLE: [persistAtom],
 });
 

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -94,7 +94,7 @@ export const FILTER_DATA = [
 export const HEADER_LEFT_MENU = [
   {
     idx: 0,
-    path: "/home",
+    path: "/",
     name: "홈",
   },
 
@@ -120,7 +120,7 @@ export const PROFILE_DATA = [
   {
     idx: 2,
     text: "문의",
-    link: "/home",
+    link: "/",
   },
   {
     idx: 3,