Merge pull request #59 from TEAM-Hearus/develop

Feat: 마이페이지 및 유저정보 입력

src/apis/user.ts

@@ -1,6 +1,9 @@
 import { API_URL, getToken, IApiResponse } from '.';
 
 interface IGetUserInfoResponse extends IApiResponse<IUserInfo> {}
+interface IUpdateUserInfoResponse extends IApiResponse<IUserUpdateInfo> {}
+interface ISupplementaryUpdateInfoResponse
+  extends IApiResponse<IUserSupplementaryUpdateInfo> {}
 
 export interface IUserInfo {
   userId: string;
@@ -18,6 +21,20 @@ export interface IUserInfo {
   userUsePurpose: any; // 임시 타입
 }
 
+export interface IUserUpdateInfo {
+  userName: string;
+  userPassword?: string;
+  userSchool: string;
+  userMajor: string;
+  userGrade: string;
+}
+
+export interface IUserSupplementaryUpdateInfo {
+  userSchool: string;
+  userMajor: string;
+  userGrade: string;
+}
+
 export const getUserInfo = async () => {
   const token = getToken();
   try {
@@ -32,3 +49,59 @@ export const getUserInfo = async () => {
     throw error;
   }
 };
+
+export const updateInfo = async ({
+  userName,
+  userPassword,
+  userSchool,
+  userMajor,
+  userGrade,
+}: IUserUpdateInfo) => {
+  const token = getToken();
+  try {
+    const res = await fetch(`${API_URL}/api/v1/user/updateUser`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        userName,
+        userPassword,
+        userSchool,
+        userMajor,
+        userGrade,
+      }),
+    });
+    const data: IUpdateUserInfoResponse = await res.json();
+    return data.object;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const SupplementaryUpdateInfo = async ({
+  userSchool,
+  userMajor,
+  userGrade,
+}: IUserSupplementaryUpdateInfo) => {
+  const token = getToken();
+  try {
+    const res = await fetch(`${API_URL}/api/v1/user/updateUser`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify({
+        userSchool,
+        userMajor,
+        userGrade,
+      }),
+    });
+    const data: ISupplementaryUpdateInfoResponse = await res.json();
+    return data.object;
+  } catch (error) {
+    throw error;
+  }
+};

src/components/molecules/RecordTagDropDown/RecordTagDropDown.tsx

@@ -6,7 +6,7 @@ import useRecordModalStore, {
 import { IScheduleElement } from '../../../constants/schedule';
 import { getSchedule } from '../../../apis/schedule';
 import styles from './RecordTagDropDown.module.scss';
-import { useUserInfoStore } from '../../../store/userUserInfoStore';
+import { useUserInfoStore } from '../../../store/useUserInfoStore';
 
 const RecordTagDropDown = () => {
   const { userInfo } = useUserInfoStore();

src/components/molecules/ScriptToolTip/ScriptToolTip.tsx

@@ -8,7 +8,7 @@ import {
 import ScriptIcon from '../../../assets/images/nav/my-script-inactive.svg?react';
 import TrashCan from '../../../assets/images/orange-trash-can.svg?react';
 import styles from './ScriptToolTip.module.scss';
-import { useUserInfoStore } from '../../../store/userUserInfoStore';
+import { useUserInfoStore } from '../../../store/useUserInfoStore';
 
 interface IProps {
   id: number;

src/components/organisms/AddScheduleForm/AddScheduleForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useUserInfoStore } from '../../../store/userUserInfoStore';
+import { useUserInfoStore } from '../../../store/useUserInfoStore';
 import Warning from '../../../assets/images/warning.svg?react';
 import {
   COLORS,

src/components/organisms/navigators/MainNav/MainNav.module.scss

@@ -19,10 +19,15 @@
   padding: 10px 5px 0px 5px;
 }
 .profileImage {
+  @include SemiBold_Sub_14;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background-color: #e7e7e7;
+  color: $light-gray_81;
 }
 .userName {
   @include Medium_Body_16;

src/components/organisms/navigators/MainNav/MainNav.tsx

@@ -6,19 +6,20 @@ import TimeTableActive from '../../../../assets/images/nav/time-table-active.svg
 import TimeTableInactive from '../../../../assets/images/nav/time-table-inactive.svg?react';
 import TestMakeActive from '../../../../assets/images/nav/test-make-active.svg?react';
 import TestMakeInactive from '../../../../assets/images/nav/test-make-inactive.svg?react';
-import TrashCanActive from '../../../../assets/images/nav/trash-can-active.svg?react';
-import TrashCanInactive from '../../../../assets/images/nav/trash-can-inactive.svg?react';
+import MyPageActive from '../../../../assets/images/nav/my-page-active.svg?react';
+import MyPageInactive from '../../../../assets/images/nav/my-page-inactive.svg?react';
 import styles from './MainNav.module.scss';
-import { useUserInfoStore } from '../../../../store/userUserInfoStore';
+import { useUserInfoStore } from '../../../../store/useUserInfoStore';
 
 const MainNav = () => {
   const { userInfo } = useUserInfoStore();
   const USERNAME = userInfo.userName;
+  const firstLetter = USERNAME.charAt(0);
 
   return (
     <nav className={styles.container}>
       <div className={styles.userProfile}>
-        <div className={styles.profileImage}></div>
+        <div className={styles.profileImage}>{firstLetter}</div>
         <p className={styles.userName}>{USERNAME}</p>
       </div>
       <span className={styles.searchIcon}>
@@ -49,11 +50,11 @@ const MainNav = () => {
           테스트 생성
         </TabLink>
         <TabLink
-          to="/home/trash-can"
-          activeIcon={<TrashCanActive />}
-          inactiveIcon={<TrashCanInactive />}
+          to="/home/my-page"
+          activeIcon={<MyPageActive />}
+          inactiveIcon={<MyPageInactive />}
         >
-          휴지통
+          마이페이지
         </TabLink>
       </section>
     </nav>

src/components/templates/modals/RecordModal/RecordModal.tsx

@@ -8,7 +8,7 @@ import Down from '../../../../assets/images/arrow/down-arrow.svg?react';
 import { IScheduleElement } from '../../../../constants/schedule';
 import { getSchedule } from '../../../../apis/schedule';
 import styles from './RecordModal.module.scss';
-import { useUserInfoStore } from '../../../../store/userUserInfoStore';
+import { useUserInfoStore } from '../../../../store/useUserInfoStore';
 
 interface IProps {
   handleQuit: () => void; // 타이머, 녹음, 소켓 연결 종료

src/components/templates/modals/SupplementaryInfoModal/SupplementaryInfoModal.module.scss

@@ -0,0 +1,114 @@
+@import '../../../../styles/variables/colors.scss';
+@import '../../../../styles/variables/fonts.scss';
+input::placeholder {
+  color: $light-blue_B3;
+}
+.modalWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+
+.modalContainer {
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  height: 580px;
+  padding: 25px;
+  background-color: white;
+  border: none;
+  border-radius: 20px;
+}
+.authForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  gap: 30px;
+}
+.title {
+  padding: 25px 80px;
+  word-break: keep-all;
+  @include SemiBold_Title_28;
+  color: $dark-font_33;
+  line-height: 1.3;
+}
+.inputBox {
+  padding: 0px 15px;
+  gap: 10px;
+  display: flex;
+}
+.inputLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  @include SemiBold_Body_16;
+  color: $dark-font_33;
+}
+.schoolInput {
+  width: 270px;
+  height: 48px;
+  border: 1px solid $light-bg_E5;
+  border-radius: 8px;
+  padding: 15px;
+}
+.gradeInput {
+  width: 100px;
+  height: 48px;
+  border: 1px solid $light-bg_E5;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3px;
+}
+.arrowBtn {
+  border: 0;
+  background-color: $white_FF;
+  width: 24px;
+  height: 24px;
+}
+.gradeNum {
+  color: $dark-font_33;
+}
+.majorInput {
+  width: 380px;
+  height: 48px;
+  border: 1px solid $light-bg_E5;
+  border-radius: 8px;
+  padding: 15px;
+}
+.btnBox {
+  padding: 40px 10px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+.saveBtn {
+  padding: 10px;
+  width: 380px;
+  height: 48px;
+  @include SemiBold_Body_16;
+  color: $white_FF;
+  background-color: $brand-point;
+  border: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.nextBtn {
+  @include Medium_Sub_14;
+  color: $light-font_9E;
+  text-decoration: underline;
+  border: none;
+  background-color: $white_FF;
+  cursor: pointer;
+}