feat: signup works initially, perhaps additional exception handlings …

…are required

index.html

@@ -16,6 +16,9 @@
       rel="preconnect"
       href="https://fonts.gstatic.com"
       crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0" />
 
     <title>TEMP</title>
   </head>

package.json

@@ -14,6 +14,7 @@
     "@fullcalendar/interaction": "^6.1.8",
     "@fullcalendar/react": "^6.1.8",
     "axios": "^1.4.0",
+    "date-fns": "^2.30.0",
     "fullcalendar": "^6.1.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -32,6 +33,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "react-datepicker": "^4.16.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

src/api/account.ts

@@ -1,8 +1,13 @@
 import { baseInstance, authInstance } from 'api/index'
 
 //회원가입 -- base
-export const signUp = async newAccount => {
-  const res = await baseInstance.post('/signup', newAccount)
+export const signUp = async ({ password, email, hireDate, username }) => {
+  const res = await baseInstance.post('/signup', {
+    password: password,
+    email: email,
+    hireDate: hireDate,
+    username: username
+  })
   return res.data
 }
 
@@ -15,26 +20,23 @@ export const signIn = async (email: string, password: string) => {
   return res
 }
 
-//로그아웃 -- auth -- API X => **remove token**
-// export const signOut = async () => {
-//   const res = await authInstance.post('/signin')
-//   return res.data
-// }
-
 //이메일 중복체크 -- base
 export const checkEmailAvailable = async (email: string) => {
-  const res = await baseInstance.post('/update', email)
+  const res = await baseInstance.get(`/emailCheck?email=${email}`)
   return res.data
 }
 
 //정보 수정(update) -- auth
-export const updateProfile = async account => {
-  const res = await authInstance.post('/findPassword', account)
+export const updateProfile = async (profile: string, password: string) => {
+  const res = await authInstance.post('/update', {
+    profile: profile,
+    password: password
+  })
   return res.data
 }
 
-//비밀번호 재설정(이메일 전송) -- auth
+//비밀번호 재설정(이메일 전송) -- base
 export const resetPassword = async (email: string) => {
-  const res = await authInstance.post('/findPassword', email)
+  const res = await baseInstance.post('/findPassword', { email: email })
   return res.data
 }

src/components/form/DatePickerForm.tsx

@@ -0,0 +1,58 @@
+import { styled } from 'styled-components'
+import DatePicker from 'react-datepicker'
+import 'react-datepicker/dist/react-datepicker.css'
+import { TitleText } from 'components/index'
+import { signupTexts } from 'constants/index'
+import { ko } from 'date-fns/esm/locale'
+
+export const DatePickerForm = ({ date, setDate }) => {
+  //코드 더러움 수정 필요
+  return (
+    <>
+      <DatePickerWrapper>
+        <TitleText>{signupTexts.hireDate}</TitleText>
+        <label>
+          <i>
+            <img src="/src/assets/calendarIcon.png" />
+          </i>
+          <DatePicker
+            locale={ko}
+            selected={date}
+            onChange={date => {
+              setDate(date)
+            }}
+            dateFormat="yyyy-MM-dd"></DatePicker>
+        </label>
+      </DatePickerWrapper>
+    </>
+  )
+}
+
+const DatePickerWrapper = styled.div`
+  position: relative;
+  img {
+    width: 25px;
+    height: 24px;
+    position: absolute;
+    z-index: 1;
+    top: 53px;
+    right: 40px;
+    cursor: pointer;
+  }
+  input {
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    border-radius: 10px;
+    padding-left: 10px;
+    width: 434px;
+    height: 60px;
+    margin-bottom: 6px;
+    &::placeholder {
+      font-size: 12px;
+      opacity: 0.75;
+    }
+    &:focus {
+      outline: 1px solid ${props => props.theme.colors.primaryBlue};
+    }
+  }
+`