🚀 deploy

src/components/common/inputs/inputwithtitle/styled.js

@@ -84,26 +84,28 @@ export const closeIcon = styled(TfiClose)`
   cursor: pointer;
 
   position: absolute;
-  top: 13px;
-  right: 40px;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 10%;
 
   @media (max-width: 360px) {
     width: 16px;
     height: 16px;
-
-    top: 11px;
-    right: 38px;
   }
 `;
 
 export const ToggleButton = styled.div`
   position: absolute;
-  top: 13px;
-  right: 70px;
+  top: 50%;
+  transform: translateY(-50%);
+  right: calc(10% + 30px);
 
   @media (max-width: 360px) {
-    top: 11px;
-    right: 60px;
+    width: 16px;
+    height: 16px;
+
+    right: calc(10% + 20px);
+
   }
 `;
 

src/components/layout/header/Header.jsx

@@ -7,10 +7,18 @@ export const Header = () => {
   const { goToPage, goBack, goFoward } = useCustomNavigate();
   const location = useLocation();
   const isMagPage = location.pathname === "/main";
+
+  const disabledLogoPaths = ["/", "/signup", "/login"];
+  const isLogoDisabled = disabledLogoPaths.includes(location.pathname);
+
   return (
     <S.Wrapper>
       {!isMagPage && <S.ArrowBack onClick={goBack}></S.ArrowBack> }
-      <S.LogoImage src={Logo} alt="Cardo" onClick={() => goToPage("/main")}/>
+      <S.LogoImage 
+        src={Logo} alt="Cardo" 
+        onClick={!isLogoDisabled ? () => goToPage("/main") : undefined} 
+        $disabled={isLogoDisabled} 
+        />
     </S.Wrapper>
   )
 }

src/pages/selectpage/SelectPage.jsx

@@ -10,6 +10,8 @@ import { ChoiceModal } from "@components/common/choicemodal/ChoiceModal";
 import { UserExplain } from "@components/common/userexplain/UserExplain";
 import { InputAndTitle } from "@components/common/inputs/inputandtitle/InputAndTitle";
 
+import { formatDate } from "@utils/FormatDate";
+
 import { useSelect } from "@hooks/useSelect";
 import hint from "/images/apply/hint.svg";
 import plus from "/images/apply/plus.svg";
@@ -169,12 +171,15 @@ export const SelectPage = () => {
                 type="date" 
                 value={SelectData.startDate} 
                 onChange={(e) => SelectHandlers.setStartDate(e.target.value)} 
+                readOnly
               />
+
               <S.Dash>—</S.Dash>
               <S.StyledInput 
                 type="date" 
                 value={SelectData.endDate} 
                 onChange={(e) => SelectHandlers.setEndDate(e.target.value)} 
+                $isRight="true"
               />
             </S.DatePickerWrapper>
 

src/pages/selectpage/styled.js

@@ -312,6 +312,7 @@ export const inputWrap = styled.div`
 
 export const DatePickerWrapper = styled.div`
   display: flex;
+  justify-content: space-evenly;
   align-items: center;
   gap: 8px;
 `;
@@ -321,10 +322,12 @@ export const StyledInput = styled.input`
   padding: 8px;
   border-radius: 8px;
   background: ${({ theme }) => theme.colors.lightbluegray};
-  color: ${({ theme }) => theme.colors.graytext};
+  color: ${({ theme, $isRight }) => $isRight ? theme.colors.bluetext : theme.colors.graytext};
   cursor: pointer;
 `;
 
+
+
 export const Dash = styled.span`
   font-size: 16px;
   color: ${({ theme }) => theme.colors.grayback};

src/routes/router.jsx

@@ -31,7 +31,7 @@ export const router = createBrowserRouter([
     children: [
       {
         path: ROUTE_PATHS.HOME,
-        element: <HomePage />,
+        element: <Onboarding />,
       },
       {
         path: ROUTE_PATHS.MAIN,

src/styles/Theme.js

@@ -18,6 +18,7 @@ export const theme = {
     red: "#FF3B30",
     graytext: "#818181",
     graytext2: "#8F8F8F",
+    bluetext: "#007AFF",
     lightbluegray: "#EBEDF0",
     grayback: "#D9D9D9",
   },

src/utils/FormatDate.js

@@ -1 +1,8 @@
-// 날짜 형식 유틸리티
+// 날짜 형식 유틸리티
+
+export const formatDate = (dateString) => {
+  if (!dateString) return "";
+
+  const options = { year: "numeric", month: "short", day: "numeric" };
+  return new Intl.DateTimeFormat("en-US", options).format(new Date(dateString));
+};