From 38c6476c74ea507ab2f6c2ff7cc076a87a888783 Mon Sep 17 00:00:00 2001
From: LSJ <j44s11@naver.com>
Date: Tue, 3 Dec 2024 00:51:09 +0900
Subject: [PATCH] .

---
 pages/login.tsx             |  1 +
 pages/register/birthday.tsx | 49 +++++++++++++++++++++++++++++++++----
 pages/register/name.tsx     |  6 +++++
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/pages/login.tsx b/pages/login.tsx
index e5e81d7b..7601e8a8 100644
--- 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
index f4e8da22..d297a8eb 100644
--- a/pages/register/birthday.tsx
+++ b/pages/register/birthday.tsx
@@ -57,10 +57,25 @@ 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>
@@ -68,23 +83,46 @@ function Birthday() {
         </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
index 9c067f5d..8afc654b 100644
--- 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("글자수를 확인해주세요.");