전체적인 구조 변경 (#63)

전체적인 구조 변경

src/app/routes/index.tsx

@@ -3,7 +3,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { RouterPath } from './path';
 import MainPage from '@/pages/common/main/MainPage';
 import { RedirectPage } from '@/pages/common/redirect';
-import RegisterPage from '@/pages/common/register';
+import RegisterPage from '@/pages/common/register/RegisterPage';
 import GuideLinePage from '@/pages/guard/guide-line';
 import GuardMyPage from '@/pages/guard/mypage';
 import SeniorRegisterPage from '@/pages/guard/register';
@@ -16,7 +16,7 @@ import HelloCallListPage from '@/pages/sinitto/hello-call/hello-call-list';
 import HelloCallReportPage from '@/pages/sinitto/hello-call/hello-call-report';
 import HelloCallServicePage from '@/pages/sinitto/hello-call/hello-call-service';
 import SinittoMypage from '@/pages/sinitto/mypage';
-import Layout from '@/shared/components/common/layout';
+import { Layout } from '@/shared/components';
 
 const router = createBrowserRouter([
   {
@@ -27,7 +27,7 @@ const router = createBrowserRouter([
     path: RouterPath.ROOT,
     element: <Layout />,
     children: [
-      { path: RouterPath.REGISTER, element: <RegisterPage /> },
+      { path: RouterPath.SIGNUP, element: <RegisterPage /> },
       { path: RouterPath.REDIRECT, element: <RedirectPage /> },
       { path: RouterPath.SINITTO_MYPAGE, element: <SinittoMypage /> },
       { path: RouterPath.GUARD_MYPAGE, element: <GuardMyPage /> },

src/app/routes/path.ts

@@ -1,8 +1,9 @@
 export const RouterPath = {
   ROOT: '/',
   LOGIN: '/login',
-  REDIRECT: '/redirection',
+  SIGNUP: '/signup',
   REGISTER: '/register',
+  REDIRECT: '/redirection',
   GUARD_MYPAGE: `/guard/mypage`,
   GUARD_GUIDELINE: `/guard/guideline`,
   SINITTO_MYPAGE: `/sinitto/mypage`,

src/pages/common/main/components/login-button/index.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router-dom';
 
 import Logo from '../../assets/kakao.svg';
-import { KAKAO_AUTH_URL } from '@/shared/constants/URI';
+import { KAKAO_AUTH_URL } from '@/shared/constants';
 import { Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/common/redirect/ui/RedirectPage.tsx → src/pages/common/redirect/RedirectPage.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 
-import RedirectSection from '../components/redirect-section/RedirectSection';
+import { RedirectSection } from './components';
 
 const RedirectPage = () => {
   const location = useLocation();

src/pages/common/redirect/components/index.ts

@@ -0,0 +1 @@
+export * from './redirect-section';

src/pages/common/redirect/components/redirect-section/RedirectSection.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useGetKakaoCallback } from '../../store/hooks/useGetKakaoCallback';
+import { useGetKakaoCallback } from '../../store/hooks';
 import { Flex, Spinner, Text } from '@chakra-ui/react';
 
 type Props = {

src/pages/common/redirect/components/redirect-section/index.ts

@@ -0,0 +1 @@
+export { default as RedirectSection } from './RedirectSection';

src/pages/common/redirect/index.ts

@@ -1 +1 @@
-export { default as RedirectPage } from './ui/RedirectPage';
+export { default as RedirectPage } from './RedirectPage';

src/pages/common/redirect/store/api/index.ts

@@ -0,0 +1 @@
+export { getKakaoCallback } from './kakao-callback.api';

src/pages/common/redirect/store/hooks/index.ts

@@ -0,0 +1 @@
+export { useGetKakaoCallback } from './useGetKakaoCallback';

src/pages/common/register/index.tsx → src/pages/common/register/RegisterPage.tsx

@@ -2,11 +2,9 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 import useRegister from './api/hooks/useRegister';
-import { RegisterFields } from './components/register-fields';
-import { RegisterType } from './components/register-type';
-import { Tos } from './components/tos';
+import { RegisterFields, RegisterType, Tos } from './components';
 import { FormValues } from './types';
-import { BasicButton } from '@/shared/components/common/button';
+import { BasicButton } from '@/shared/components';
 import { Divider } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/common/register/api/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useRegister } from './useRegister';

src/pages/common/register/api/index.ts

@@ -0,0 +1 @@
+export * from './hooks';

src/pages/common/register/components/index.ts

@@ -0,0 +1,6 @@
+export * from './register-fields';
+export * from './register-fields/form-fields';
+export * from './register-type';
+export * from './register-type/type-button';
+export * from './tos';
+export * from './tos/content';

src/pages/common/register/components/register-fields/index.tsx → src/pages/common/register/components/register-fields/RegisterFields.tsx

@@ -1,7 +1,7 @@
 import { FieldErrors, UseFormRegister } from 'react-hook-form';
 
 import type { FormValues } from '../../types';
-import { FormField } from './form-fileds';
+import { FormField } from './form-fields';
 import styled from '@emotion/styled';
 
 type Props = {

src/pages/common/register/components/register-fields/form-fields/index.ts

@@ -0,0 +1 @@
+export { FormField } from './FormField';

src/pages/common/register/components/register-fields/index.ts

@@ -0,0 +1 @@
+export { RegisterFields } from './RegisterFields';

src/pages/common/register/components/register-type/index.tsx → src/pages/common/register/components/register-type/RegisterType.tsx

@@ -1,4 +1,4 @@
-import { TypeButton } from './type-button.tsx';
+import { TypeButton } from './type-button';
 import styled from '@emotion/styled';
 
 type Props = {

src/pages/common/register/components/register-type/index.ts

@@ -0,0 +1 @@
+export { RegisterType } from './RegisterType';

src/pages/common/register/components/register-type/type-button/index.ts

@@ -0,0 +1 @@
+export { TypeButton } from './TypeButton';

src/pages/common/register/components/tos/content/index.ts

@@ -0,0 +1 @@
+export { TosContent } from './TosContent';

src/pages/common/register/components/tos/index.ts

@@ -0,0 +1 @@
+export { Tos } from './Tos';

src/pages/guard/mypage/index.tsx

@@ -1,6 +1,5 @@
 import ProfileBox from './components/profile-box';
-import PointBox from '@/shared/components/features/mypage/point-box';
-import UseDetailBox from '@/shared/components/features/mypage/use-detail';
+import { PointBox, UseDetailBox } from '@/shared/components';
 import { Box } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/guard/review/index.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 
 import starIcon from './asset/star-icon.svg';
-import { BasicButton } from '@/shared/components/common/button';
-import Notice from '@/shared/components/features/notice';
+import { BasicButton, Notice } from '@/shared/components';
 import { Text, Flex, Box, Textarea, Image, Button } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/sinitto/call-back/detail/components/menu/post-accept/index.tsx

@@ -1,4 +1,4 @@
-import { BasicButton } from '@/shared/components/common/button';
+import { BasicButton } from '@/shared/components';
 import styled from '@emotion/styled';
 
 type Props = {

src/pages/sinitto/call-back/detail/components/menu/pre-accept/index.tsx

@@ -1,4 +1,4 @@
-import { BasicButton } from '@/shared/components/common/button';
+import { BasicButton } from '@/shared/components';
 import styled from '@emotion/styled';
 
 type Props = {

src/pages/sinitto/call-back/detail/index.tsx

@@ -4,7 +4,7 @@ import { useParams, Outlet } from 'react-router-dom';
 import { GuideLineList } from './components/guide-line-list';
 import { PostAcceptMenu } from './components/menu/post-accept';
 import { PreAcceptMenu } from './components/menu/pre-accept';
-import Notice from '@/shared/components/features/notice';
+import { Notice } from '@/shared/components';
 import { Divider } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/sinitto/hello-call/hello-call-service/index.tsx

@@ -5,7 +5,7 @@ import TitleImg from './asserts/title-icon.png';
 import ServiceDetail from './components/service-detail';
 import { SERVICE_NOTICE } from './data/notice';
 import { RouterPath } from '@/app/routes/path';
-import Notice from '@/shared/components/features/notice';
+import { Notice } from '@/shared/components';
 import { Box, Button, Divider, Image, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/pages/sinitto/mypage/index.tsx

@@ -1,8 +1,6 @@
 import AccountInfoBox from './components/account-info-box';
 import ProfileBox from './components/profile-box';
-import { BasicButton } from '@/shared/components/common/button';
-import PointBox from '@/shared/components/features/mypage/point-box';
-import UseDetailBox from '@/shared/components/features/mypage/use-detail';
+import { BasicButton, PointBox, UseDetailBox } from '@/shared/components';
 import { Box } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 

src/shared/api/instance/index.ts

@@ -5,7 +5,7 @@ import type {
 } from 'axios';
 import axios from 'axios';
 
-import { BASE_URI } from '@/shared/constants/URI';
+import { BASE_URI } from '@/shared/constants';
 import { QueryClient } from '@tanstack/react-query';
 
 const initInstance = (config: AxiosRequestConfig): AxiosInstance => {

src/shared/components/common/button/index.ts

@@ -0,0 +1 @@
+export { BasicButton } from './BasicButton';

src/shared/components/common/index.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './layout';

src/shared/components/common/layout/index.tsx → src/shared/components/common/layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { Outlet, useLocation } from 'react-router-dom';
 
-import Header from '../../features/header';
 import { RouterPath } from '@/app/routes/path';
+import { Header } from '@/shared/components';
 
 const Layout = () => {
   const location = useLocation();
@@ -33,7 +33,7 @@ const Layout = () => {
     case RouterPath.CALL_BACK_LIST:
       title = '콜백 요청';
       break;
-    case RouterPath.SINIDDO_REVIEW:
+    case RouterPath.SINITTO_REVIEW:
       title = '시니또 평가';
       break;
     default:

src/shared/components/common/layout/index.ts

@@ -0,0 +1 @@
+export { default as Layout } from './Layout';

src/shared/components/features/header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header';

src/shared/components/features/index.ts

@@ -0,0 +1,3 @@
+export * from './header';
+export * from './mypage';
+export * from './notice';

src/shared/components/features/mypage/hooks/index.ts

@@ -0,0 +1 @@
+export { useToggleDetailBox } from './useToggleDetailBox';

src/shared/components/features/mypage/hooks/useToggleDetailBox.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import { DUMMY_DATA } from '@/pages/sinitto/mypage/data/detail';
+
+export const useToggleDetailBox = () => {
+  // 처음에 5개 보여주고, 더보기를 눌렀을 때 나머지 전부를 보여주기
+  const [visibleCount, setVisibleCount] = useState(5); // 기본적으로 5개 보여줌
+  const [enabled, setEnabled] = useState(false); // 더보기, 숨기기 상태
+
+  // 더보기, 숨기기 버튼을 눌렀을 때 동작
+  const toggle = () => {
+    if (enabled) {
+      // 숨기기 동작
+      setVisibleCount(5);
+    } else {
+      // 더보기 동작
+      setVisibleCount(DUMMY_DATA.length);
+    }
+    setEnabled(!enabled);
+  };
+
+  const data = DUMMY_DATA.slice(0, visibleCount);
+
+  return { data, enabled, toggle };
+};

src/shared/components/features/mypage/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './point-box';
+export * from './use-detail';

src/shared/components/features/mypage/point-box/index.ts

@@ -0,0 +1 @@
+export { default as PointBox } from './PointBox';

src/shared/components/features/mypage/use-detail/index.tsx → src/shared/components/features/mypage/use-detail/UseDetailBox.tsx

@@ -1,39 +1,7 @@
-import { useState } from 'react';
-
-import { DUMMY_DATA } from '@/pages/sinitto/mypage/data/detail';
+import { useToggleDetailBox } from '../hooks/useToggleDetailBox';
 import { Box, Text } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 
-// 컴포넌트는 data를 어떻게 처리하는지에 대한 관심이 없다.
-// output만 있으면 되는..
-// output을 만들어내는 과정을 분리하면 어떨까?
-
-// 관심사를 분리하기
-const useToggleDetailBox = () => {
-  // 처음에 5개 보여주고, 더보기를 눌렀을 때 나머지 전부를 보여주기
-  const [visibleCount, setVisibleCount] = useState(5); // 기본적으로 5개 보여줌
-  const [enabled, setEnabled] = useState(false); // 더보기, 숨기기 상태
-
-  // 더보기, 숨기기 버튼을 눌렀을 때 동작
-  // toggleView 라는 이벤트가 발생했을 때 처리하는 이벤트 핸들러가 handleToggleView 인데
-  // 이건 toggleView라는 이벤트가 발생했을 때 처리하는게 아니라, toggleView라는 행위를 하는 함수임.
-  const toggle = () => {
-    if (enabled) {
-      // 숨기기 동작
-      setVisibleCount(5);
-    } else {
-      // 더보기 동작
-      setVisibleCount(DUMMY_DATA.length);
-    }
-    setEnabled(!enabled);
-  };
-
-  const data = DUMMY_DATA.slice(0, visibleCount);
-
-  return { data, enabled, toggle };
-};
-
-// 컴포넌트는 데이터 처리에 대해 관심있는게 아니라, "어떤 데이터"를 가지고 그리는지에 관심 있음
 const UseDetailBox = () => {
   const { data, enabled, toggle } = useToggleDetailBox();
 
@@ -95,7 +63,8 @@ const DetailBox = styled(Box)`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  height : 
+  // TODO: 높이 지정해주세요.
+  /* height :  */
   max-width: 338px;
 `;
 

src/shared/components/features/mypage/use-detail/index.ts

@@ -0,0 +1 @@
+export { default as UseDetailBox } from './UseDetailBox';

src/shared/components/features/notice/index.ts

@@ -0,0 +1 @@
+export { default as Notice } from './Notice';

src/shared/components/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './features';

src/shared/constants/index.ts

@@ -0,0 +1 @@
+export * from './URI';