.

AboutClan · Dec 2, 2024 · 38c6476 · 38c6476
1 parent 9e0ffab
commit 38c6476
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -185,6 +185,7 @@ const Login: NextPage<{
               fontWeight="medium"
               opacity={0.8}
               color="white"
+              _hover={{ bg: "none" }}
               onClick={() => router.push("/loginId")}
             >
               다른 방법으로 로그인

diff --git a/pages/register/birthday.tsx b/pages/register/birthday.tsx
@@ -57,34 +57,72 @@ function Birthday() {
 
   const myBirth = dayjs(startDate).format("YYYY년 M월 D일");
 
+  function CustomButton({ value, onClick }: { value: string; onClick?: () => void }) {
+    return (
+      <Button
+        _focus={{ bg: "var(--gray-800)" }}
+        _hover={{ bg: "var(--gray-800)" }}
+        color="white"
+        bg="inherit"
+        w="160px"
+        size="md"
+        onClick={onClick}
+      >
+        {value}
+      </Button>
+    );
+  }
+
   return (
     <>
       <ProgressHeader title={!isProfileEdit ? "회원가입" : "프로필 수정"} value={33} />
-
       <RegisterLayout errorMessage={errorMessage}>
         <RegisterOverview>
           <span>생년월일을 입력해 주세요</span>
           <span>만 19세 ~ 만 26세의 인원만 가입이 가능합니다!</span>
         </RegisterOverview>
         <DateContainer>
           <DateStr>{myBirth}</DateStr>
-          <Button size="md" as="div" bgColor="white" border="var(--border-main)">
+          <Button
+            borderRadius="8px"
+            size="md"
+            as="div"
+            bg="gray.800"
+            border="var(--border-main)"
+            _focus={{ bg: "var(--gray-800)" }}
+            _hover={{ bg: "var(--gray-800)" }}
+          >
             <StyledDatePicker
               locale="ko"
               selected={startDate}
-              onChange={(date) => setStartDate(date as Date)}
+              onChange={(date) => {
+                setStartDate(date as Date);
+              }}
               dateFormat="연도 / 월 선택"
               showMonthYearPicker
-              onFocus={(e) => e.target.blur()}
+              onFocus={(e) => {
+                e.target.blur();
+              }}
+              customInput={<CustomButton value="연도 / 월 선택" />}
             />
           </Button>
-          <Button size="md" mt="10px" as="div" bgColor="white" border="var(--border-main)">
+          <Button
+            size="md"
+            borderRadius="8px"
+            mt={3}
+            as="div"
+            bgColor="gray.800"
+            border="var(--border-main)"
+            _focus={{ bg: "var(--gray-800)" }}
+            _hover={{ bg: "var(--gray-800)" }}
+          >
             <StyledDatePicker
               locale="ko"
               selected={startDate}
               onChange={(date) => setStartDate(date as Date)}
               dateFormat="날짜 선택"
               onFocus={(e) => e.target.blur()}
+              customInput={<CustomButton value="날짜 선택" />}
               renderCustomHeader={({ date }) => (
                 <div
                   style={{
@@ -120,6 +158,7 @@ const StyledDatePicker = styled(DatePicker)`
 const DateStr = styled.div`
   font-size: 24px;
   margin: var(--gap-5) 0;
+  font-weight: bold;
 `;
 
 const DateContainer = styled.div`

diff --git a/pages/register/name.tsx b/pages/register/name.tsx
@@ -34,6 +34,12 @@ function Name() {
   const [errorMessage, setErrorMessage] = useState("");
   const [value, setValue] = useState(info?.name || session?.user.name);
 
+  useEffect(() => {
+    if (!value) {
+      setValue(session?.user.name);
+    }
+  }, [session?.user.name]);
+
   const onClickNext = (e) => {
     if (value.length < 2 || value.length > 4) {
       setErrorMessage("글자수를 확인해주세요.");