diff --git a/src/components/common/inputs/inputwithtitle/styled.js b/src/components/common/inputs/inputwithtitle/styled.js index ad1f7f4..076c9a3 100644 --- a/src/components/common/inputs/inputwithtitle/styled.js +++ b/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); + } `; diff --git a/src/components/layout/header/Header.jsx b/src/components/layout/header/Header.jsx index 8b5a818..833443a 100644 --- a/src/components/layout/header/Header.jsx +++ b/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 ( {!isMagPage && } - goToPage("/main")}/> + goToPage("/main") : undefined} + $disabled={isLogoDisabled} + /> ) } \ No newline at end of file diff --git a/src/pages/selectpage/SelectPage.jsx b/src/pages/selectpage/SelectPage.jsx index 12c18e9..fa4d490 100644 --- a/src/pages/selectpage/SelectPage.jsx +++ b/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 /> + SelectHandlers.setEndDate(e.target.value)} + $isRight="true" /> diff --git a/src/pages/selectpage/styled.js b/src/pages/selectpage/styled.js index 3753fd4..7abad19 100644 --- a/src/pages/selectpage/styled.js +++ b/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}; diff --git a/src/routes/router.jsx b/src/routes/router.jsx index 6a9d6bc..b052fa9 100644 --- a/src/routes/router.jsx +++ b/src/routes/router.jsx @@ -31,7 +31,7 @@ export const router = createBrowserRouter([ children: [ { path: ROUTE_PATHS.HOME, - element: , + element: , }, { path: ROUTE_PATHS.MAIN, diff --git a/src/styles/Theme.js b/src/styles/Theme.js index b139e23..c895636 100644 --- a/src/styles/Theme.js +++ b/src/styles/Theme.js @@ -18,6 +18,7 @@ export const theme = { red: "#FF3B30", graytext: "#818181", graytext2: "#8F8F8F", + bluetext: "#007AFF", lightbluegray: "#EBEDF0", grayback: "#D9D9D9", }, diff --git a/src/utils/FormatDate.js b/src/utils/FormatDate.js index d32073a..482c00a 100644 --- a/src/utils/FormatDate.js +++ b/src/utils/FormatDate.js @@ -1 +1,8 @@ -// 날짜 형식 유틸리티 \ No newline at end of file +// 날짜 형식 유틸리티 + +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)); +}; \ No newline at end of file