[RAC-471] chore: 폴더 구조 재정리

package.json

@@ -15,8 +15,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.9.0",
-    "@mui/material": "^5.14.18",
-    "@mui/styled-engine-sc": "^6.0.0-alpha.6",
+    "@mui/material": "^6.1.9",
     "@reactour/mask": "^1.1.0",
     "@reactour/tour": "^3.7.0",
     "@sentry/nextjs": "^8.41.0",

src/api/api.ts

@@ -1,7 +1,8 @@
 import useAuth from '@/hooks/useAuth';
 import findExCode from '@/utils/findExCode';
 import axios, { InternalAxiosRequestConfig } from 'axios';
-import { sendServerErrorMsgToSlack } from './slack/sendSeverError';
+import { captureException } from '@sentry/nextjs';
+import { useToast } from '@/hooks/useToast';
 
 const withAuthInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
@@ -31,10 +32,21 @@ withAuthInstance.interceptors.request.use(
 withAuthInstance.interceptors.response.use(
   (res) => {
     const { removeTokens } = useAuth();
+    const { addToast } = useToast();
     if (findExCode(res.data.code)) {
+      captureException(res.data.code, {
+        level: 'error',
+        extra: {
+          header: res.config.headers,
+          request: res.request,
+          type: 'Network Error!',
+        },
+      });
       removeTokens();
-      alert(res.data.message);
-      sendServerErrorMsgToSlack(res);
+      addToast({
+        status: 'error',
+        message: res.data.message,
+      });
 
       if (typeof window !== 'undefined') {
         window.location.reload();
@@ -52,10 +64,6 @@ withAuthInstance.interceptors.response.use(
 
 withOutAuthInstance.interceptors.response.use(
   (res) => {
-    if (findExCode(res.data.code)) {
-      sendServerErrorMsgToSlack(res);
-    }
-
     return res;
   },
   (error) => {

src/api/auth/signup/signupUser.ts

@@ -0,0 +1,43 @@
+import { ResponseModel } from '@/api/model';
+import { withAuthInstance } from '@/api/api';
+import findExCode from '@/utils/findExCode';
+
+interface SignUpUserRequest {
+  socialId: number;
+  phoneNumber: string;
+  nickName: string;
+  marketingReceive: boolean;
+}
+
+interface SignUpUserResponse extends ResponseModel {
+  data: {
+    accessToken: string;
+    accessExpiration: number;
+    refreshToken: string;
+    refreshExpiration: number;
+    role: 'ADMIN' | 'USER' | 'SENIOR';
+    isTutorial: boolean;
+  };
+}
+
+export const signupUser = async ({
+  socialId,
+  phoneNumber,
+  nickName,
+  marketingReceive,
+}: SignUpUserRequest) => {
+  const response = (
+    await withAuthInstance.post<SignUpUserResponse>('/auth/user/signup', {
+      socialId,
+      phoneNumber,
+      nickName,
+      marketingReceive,
+    })
+  ).data;
+
+  if (findExCode(response.code)) {
+    throw new Error(response.message);
+  }
+
+  return response.data;
+};

src/app/add-chat-link/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import ProgressBar from '@/components/Bar/ProgressBar';
-import BackHeader from '@/components/Header/BackHeader';
-import SingleValidator from '@/components/Validator/SingleValidator';
+import BackHeader from '@/components/common/Header/BackHeader';
+import SingleValidator from '@/components/common/SingleValidator';
 import {
   PROFILE_DIRECTION,
   PROFILE_PLACEHOLDER,

src/app/add-profile/page.tsx

@@ -3,12 +3,12 @@
 import ProgressBar from '@/components/Bar/ProgressBar';
 
 import { addProfileSchema } from '@/app/add-profile/schema';
-import BackHeader from '@/components/Header/BackHeader';
+import BackHeader from '@/components/common/Header/BackHeader';
 
 import { FieldError, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import ProfileForm from '@/components/SingleForm/ProfileForm';
-import SingleValidator from '@/components/Validator/SingleValidator';
+import ProfileForm from '@/components/Form/ProfileForm';
+import SingleValidator from '@/components/common/SingleValidator';
 
 import {
   PROFILE_DIRECTION,

src/app/add-time/page.tsx

@@ -1,8 +1,8 @@
 'use client';
 import ProgressBar from '@/components/Bar/ProgressBar';
-import BackHeader from '@/components/Header/BackHeader';
-import Scheduler from '@/components/Scheduler';
-import SingleValidator from '@/components/Validator/SingleValidator';
+import BackHeader from '@/components/common/Header/BackHeader';
+import Scheduler from '@/components/domain/mentoring/Scheduler';
+import SingleValidator from '@/components/common/SingleValidator';
 import {
   PROFILE_DIRECTION,
   PROFILE_SUB_DIRECTION,

src/app/apply-wanted-senior/(components)/(modal)/WishSeniorApplyAgreeModal.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import Image from 'next/image';
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 import { useOutSideClick } from '@/hooks/useOutsideClick';
 import { styled } from 'styled-components';
 

src/app/apply-wanted-senior/(components)/(steps)/Field.tsx

@@ -6,7 +6,7 @@ import {
 } from '../../constant';
 import { WishSeniorSubTitle, WishSeniorTitle, NextBtnBox } from '../(template)';
 import { parseAsJson, useQueryState } from 'nuqs';
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 import * as y from 'yup';
 
 const schema = y.object({
@@ -38,27 +38,27 @@ export function WishSeniorField({
 
       <WishSeniorFieldList>
         {WISH_SENIOR_PROVIDER_FIELD_LIST.map((option) => (
-          <WishSeniorFieldRadioWrapper key={option}>
+          <WishSeniorFieldRadioWrapper
+            key={option}
+            onClick={() => handleFieldChange(option, '')}
+          >
             <WishSeniorFieldRadioInput
               type="radio"
               value={option}
               name="field"
               id={option}
               checked={field?.type === option}
               onChange={() => handleFieldChange(option, '')}
-              onClick={() => handleFieldChange(option, '')}
-            />
-            <WishSeniorFieldRadioIcon
-              onClick={() => handleFieldChange(option, '')}
-              $isChecked={field?.type === option}
             />
+            <WishSeniorFieldRadioIcon $isChecked={field?.type === option} />
             <label htmlFor={option}>{option}</label>
           </WishSeniorFieldRadioWrapper>
         ))}
         <WishSeniorFieldRadioWrapper
           style={{
             border: field?.type === WISH_SENIOR_FIELD_ETC ? 'none' : '',
           }}
+          onClick={() => handleFieldChange(WISH_SENIOR_FIELD_ETC, '')}
         >
           <WishSeniorFieldRadioInput
             type="radio"
@@ -72,6 +72,7 @@ export function WishSeniorField({
           {field?.type === WISH_SENIOR_FIELD_ETC ? (
             <EtcInput
               type="text"
+              autoFocus
               value={field?.value}
               onChange={(e) =>
                 handleFieldChange(WISH_SENIOR_FIELD_ETC, e.target.value)
@@ -81,7 +82,6 @@ export function WishSeniorField({
           ) : (
             <>
               <WishSeniorFieldRadioIcon
-                onClick={() => handleFieldChange(WISH_SENIOR_FIELD_ETC, '')}
                 $isChecked={field?.type === WISH_SENIOR_FIELD_ETC}
               />
               <label htmlFor="ETC">{WISH_SENIOR_FIELD_ETC}</label>
@@ -171,4 +171,3 @@ const EtcInput = styled.input`
   padding-left: 4px;
   height: 45px;
 `;
-

src/app/apply-wanted-senior/(components)/(steps)/Info.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import styled from 'styled-components';
 import { WISH_SENIOR_MENTOR_MSG } from '../../constant';
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 import { WishSeniorTitle, WishSeniorSubTitle, NextBtnBox } from '../(template)';
 
 export function WishSeniorInfo({ onClick }: { onClick: () => void }) {

src/app/apply-wanted-senior/(components)/(steps)/Lab.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { WISH_SENIOR_MENTOR_MSG } from '../../constant';
 import { NextBtnBox, WishSeniorSubTitle, WishSeniorTitle } from '../(template)';
-import TextForm from '@/components/SingleForm/TextForm';
+import TextForm from '@/components/Form/TextForm';
 import { useForm } from 'react-hook-form';
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 
 export function WishSeniorLab({ onClick }: { onClick: (lab: string) => void }) {
   const { register, getValues } = useForm({

src/app/apply-wanted-senior/(components)/(steps)/Phone.tsx

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { WISH_SENIOR_MENTOR_MSG } from '../../constant';
 import { NextBtnBox, WishSeniorSubTitle, WishSeniorTitle } from '../(template)';
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { phoneNumSchema } from '@/components/SingleForm/PhoneNumForm/phoneNumSchema';
-import TextForm from '@/components/SingleForm/TextForm';
-import SingleValidator from '@/components/Validator/SingleValidator';
+import { phoneNumSchema } from '@/components/Form/PhoneNumForm/phoneNumSchema';
+import TextForm from '@/components/Form/TextForm';
+import SingleValidator from '@/components/common/SingleValidator';
 import { useEffect } from 'react';
 
 export function WishSeniorPhoneNum({
@@ -18,7 +18,6 @@ export function WishSeniorPhoneNum({
     register,
     getValues,
     formState: { errors },
-    trigger,
   } = useForm({
     defaultValues: {
       phoneNum: '',
@@ -27,9 +26,6 @@ export function WishSeniorPhoneNum({
     resolver: yupResolver(phoneNumSchema),
   });
 
-  useEffect(() => {
-    trigger();
-  }, []);
   return (
     <div style={{ margin: '1.6rem 1rem' }}>
       <WishSeniorTitle>{WISH_SENIOR_MENTOR_MSG.PHONE.TITLE}</WishSeniorTitle>
@@ -40,8 +36,8 @@ export function WishSeniorPhoneNum({
 
       <LabWrapper>
         <TextForm
-          targetAtom={''}
-          placeholder={'01012345678'}
+          targetAtom={'phone'}
+          placeholder="전화번호를 입력해 주세요 (예: 01012345678)"
           register={register('phoneNum')}
           aria-label="전화번호 입력"
           aria-invalid={!!errors.phoneNum}

src/app/apply-wanted-senior/(components)/(steps)/Postgradu.tsx

@@ -1,21 +1,19 @@
 import styled from 'styled-components';
 import { WISH_SENIOR_MENTOR_MSG } from '../../constant';
 import { NextBtnBox, WishSeniorSubTitle, WishSeniorTitle } from '../(template)';
-import TextForm from '@/components/SingleForm/TextForm';
-import { useForm } from 'react-hook-form';
-import NextBtn from '@/components/Button/NextBtn';
+import { useAtomValue } from 'jotai';
+import { overlay } from 'overlay-kit';
+import NextBtn from '@/components/common/Button/NextBtn';
+import { sPostGraduAtom } from '@/stores/senior';
+import RiseUpModal from '@/components/Modal/RiseUpModal';
+import { TextFormEl } from '@/components/Form/TextForm/TextForm.styled';
 
 export function WishSeniorPostGradu({
   onClick,
 }: {
   onClick: (postgradu: string) => void;
 }) {
-  const { register, getValues } = useForm({
-    defaultValues: {
-      postgradu: '',
-    },
-    mode: 'onChange',
-  });
+  const postgradu = useAtomValue(sPostGraduAtom);
 
   return (
     <div style={{ margin: '1.6rem 1rem' }}>
@@ -28,18 +26,22 @@ export function WishSeniorPostGradu({
       </WishSeniorSubTitle>
 
       <PostGraduWrapper>
-        <TextForm
-          targetAtom={''}
+        <TextFormEl
+          value={postgradu}
           placeholder={'ex.연세대학교'}
-          register={register('postgradu')}
+          onClick={() =>
+            overlay.open(({ unmount }) => (
+              <RiseUpModal modalType="postgradu" modalHandler={unmount} />
+            ))
+          }
         />
       </PostGraduWrapper>
 
       <NextBtnBox>
         <NextBtn
           btnText="다음"
           kind="route"
-          onClick={() => onClick(getValues('postgradu'))}
+          onClick={() => onClick(postgradu)}
         />
       </NextBtnBox>
     </div>

src/app/apply-wanted-senior/(components)/(steps)/Professor.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import { WISH_SENIOR_MENTOR_MSG } from '../../constant';
 import { NextBtnBox, WishSeniorSubTitle, WishSeniorTitle } from '../(template)';
-import TextForm from '@/components/SingleForm/TextForm';
+import TextForm from '@/components/Form/TextForm';
 import { useForm } from 'react-hook-form';
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 
 export function WishSeniorProfessor({
   onClick,

src/app/apply-wanted-senior/(components)/(steps)/Submit.tsx

@@ -1,6 +1,6 @@
-import NextBtn from '@/components/Button/NextBtn';
+import NextBtn from '@/components/common/Button/NextBtn';
 import { WishSeniorSubTitle, WishSeniorTitle } from '../(template)';
-import { BtnStyleNonM } from '@/components/Button/NextBtn/NextBtn.styled';
+import { BtnStyleNonM } from '@/components/common/Button/NextBtn/NextBtn.styled';
 import Image from 'next/image';
 
 interface ApplyWantedSeniorSubmitProp {
@@ -61,4 +61,3 @@ export function ApplyWantedSeniorSubmit({
     </div>
   );
 }
-

src/app/apply-wanted-senior/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import BackHeader from '@/components/Header/BackHeader';
+import BackHeader from '@/components/common/Header/BackHeader';
 import useFunnel from '@/hooks/useFunnel';
 import {
   WishSeniorInfo,
@@ -13,7 +13,6 @@ import {
 } from './(components)/(steps)';
 import { useWishSeniorApply } from '@/hooks/mutations/useWishSeniorApply';
 import { useRouter } from 'next/navigation';
-import styled from 'styled-components';
 import { overlay } from 'overlay-kit';
 import { useState } from 'react';
 import type { WishSeniorApplyRequest } from '@/api/senior/wishSeniorApply';
@@ -146,4 +145,3 @@ export default function ApplyWantedSeniorPage() {
     </main>
   );
 }
-

src/app/junior/mentoring/page.tsx

@@ -10,7 +10,7 @@ const TabBar = dynamic(
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import MenuBar from '@/components/Bar/MenuBar';
-import LogoLayer from '@/components/LogoLayer/LogoLayer';
+import LogoLayer from '@/components/common/LogoLayer/LogoLayer';
 import SearchModal from '@/components/Modal/SearchModal';
 import { overlay } from 'overlay-kit';
 import useAuth from '@/hooks/useAuth';