Merge pull request #157 from Step3-kakao-tech-campus/weekly

weekly > master
Step3-kakao-tech-campus · Nov 9, 2023 · a3caf03 · a3caf03
2 parents 7c13d02 + 4312d6e
commit a3caf03
Show file tree

Hide file tree

Showing 92 changed files with 1,880 additions and 390 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -4,11 +4,10 @@ COPY package*.json ./
 COPY . .
 
 ENV REACT_APP_KAKAO_API_KEY=d573e4a7b2fcae0f0289d5807605d726
-ENV REACT_APP_API_URL=http://localhost:8080
 
 RUN npm ci
 RUN npm run build
 RUN npm install -g serve
 EXPOSE 3000
-CMD ["serve", "build"]
+CMD ["serve", "-s", "build"]
 
diff --git a/k8s/confingMap.yaml b/k8s/confingMap.yaml
@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: frontconfig
+data:
+  nginx.conf: |-
+    server {
+      root /build;
+      error_page  404 index.html;
+      location / {
+        try_files $uri $uri/ /index.html;
+      }
+    }
diff --git a/k8s/deployment.yaml b/k8s/deployment.yaml
@@ -10,8 +10,15 @@ spec:
     metadata:
       labels:
         app: frontend
-    spec: 
+    spec:
       containers:
         - name: frontend
           # 여러분의 image 주소를 입력해주세요.
-          image: krmp-d2hub-idock.9rum.cc/dev-test/repo_0b6943ee814a
+          image: krmp-d2hub-idock.9rum.cc/dev-test/repo_9d9678dcd735
+          volumeMounts:
+          - name: config
+            mountPath: /etc/nginx/nginx.conf
+      volumes:
+        - name: config
+          configMap:
+            name: frontconfig
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -2,8 +2,9 @@ import { defineConfig, devices } from '@playwright/test';
 import path from 'path';
 require('dotenv').config();
 
-export const ADMINSTATE = path.join(__dirname, './playwright/.auth/admin.json');
-export const ALBASTATE = path.join(__dirname, './playwright/.auth/alba.json');
+const ADMINSTATE = path.join(__dirname, './tests/state/admin.json');
+const ALBASTATE = path.join(__dirname, './tests/state/alba.json');
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -25,7 +26,6 @@ export default defineConfig({
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: `${process.env.REACT_APP_BASE_URL}`,
-
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,14 +4,14 @@ import ViewPortContainer from 'components/@commons/ViewPortContainer';
 import ErrorFallback from 'error/ErrorFallback';
 import { Provider } from 'jotai';
 import HomeIndex from 'pages/HomeIndex';
-import KakaoAuthPage from 'pages/KakaoAuthPage';
 import SelectWeekPage from 'pages/SelectWeekPage';
 import SignupPage from 'pages/SignupPage';
 import AddGroupPage from 'pages/admin/AddGroupPage';
 import ApplicationClosePage from 'pages/admin/ApplicationClosePage';
 import ApplicationOpenPage from 'pages/admin/ApplicationOpenPage';
 import ApplyPage from 'pages/alba/ApplyPage';
 import InvitedPage from 'pages/alba/InvitedPage';
+import KakaoAuthPage from 'pages/auth/KakaoAuthPage';
 import LogoutOnlyPrivate from 'privateRoutes/LogoutOnlyPrivate';
 import UserTypePrivate from 'privateRoutes/UserTypePrivate';
 import { ErrorBoundary } from 'react-error-boundary';

diff --git a/src/apis/convertURI.ts b/src/apis/convertURI.ts
@@ -1,8 +1,8 @@
 const staticServerUrl_: string = process.env.REACT_APP_PATH || '';
-export const apiURL: string = process.env.REACT_APP_API_URL;
 
 export const convertPath = (path: string): string => {
   return staticServerUrl_ + path;
 };
 
-export const baseURL = new URL(window.location.href).origin;
+export const baseURL = process.env.REACT_APP_BASE_URL || new URL(window.location.href).origin;
+export const apiURL: string = process.env.REACT_APP_API_URL || baseURL + '/api';
diff --git a/src/apis/instance.ts b/src/apis/instance.ts
@@ -1,6 +1,6 @@
-import axios from 'axios';
 import { apiURL } from 'apis/convertURI';
-import { getLoginData } from 'utils/loginDatahandlers';
+import axios from 'axios';
+import { loginDatahandlers } from 'utils/loginDatahandlers';
 
 const instance = axios.create({
   baseURL: apiURL,
@@ -12,7 +12,7 @@ const instance = axios.create({
 export const requestDefault = instance.interceptors.request.use(
   (config) => {
     // 로그인 상태일 때 토큰 싣기
-    const loginState = getLoginData();
+    const loginState = loginDatahandlers.getLoginData();
     if (loginState.isLogin) {
       config.headers.Authorization = loginState.token;
     }

diff --git a/src/apis/types.ts b/src/apis/types.ts
@@ -50,7 +50,7 @@ export interface ErrorData {
   response?: {
     status: number;
     data?: {
-      code: number;
+      errorCode: number;
     };
   };
 }

diff --git a/src/components/@commons/BorderBox.tsx b/src/components/@commons/BorderBox.tsx
@@ -7,11 +7,12 @@ interface Props {
   border?: boolean;
   borderColor?: string;
   children: React.ReactNode;
+  as?: string;
 }
 
-const BorderBox = ({ width, gradation, border, borderColor, children }: Props): JSX.Element => {
+const BorderBox = ({ width, gradation, border, borderColor, children, as }: Props): JSX.Element => {
   return (
-    <StyledBorderBox $width={width} $gradation={gradation} $border={border} $borderColor={borderColor}>
+    <StyledBorderBox $width={width} $gradation={gradation} $border={border} $borderColor={borderColor} as={as}>
       {children}
     </StyledBorderBox>
   );

diff --git a/src/components/@commons/PageContainer.tsx b/src/components/@commons/PageContainer.tsx
@@ -1,8 +1,8 @@
+import { AdminBottomNB, AlbaBottomNB } from 'components/BottomNB/BottomNB';
+import HeaderNB from 'components/HeaderNB/HeaderNB';
 import React from 'react';
 import styled from 'styled-components';
-import HeaderNB from 'components/HeaderNB/HeaderNB';
-import { AlbaBottomNB, AdminBottomNB } from 'components/BottomNB/BottomNB';
-import { getLoginData } from 'utils/loginDatahandlers';
+import { loginDatahandlers } from 'utils/loginDatahandlers';
 
 interface Props {
   children: React.ReactNode;
@@ -23,7 +23,7 @@ const PageContainer = ({
   justify,
   maxWidth,
 }: Props): JSX.Element => {
-  const isAdmin = getLoginData().isAdmin;
+  const isAdmin = loginDatahandlers.getLoginData().isAdmin;
 
   return (
     <>

diff --git a/src/components/Calendar/CalendarStyle.tsx b/src/components/Calendar/CalendarStyle.tsx
@@ -20,7 +20,7 @@ export const BadgeText = styled.span`
   }
 `;
 
-export const Badge = styled.ol<{ $color?: string }>`
+export const Badge = styled.li<{ $color?: string }>`
   background-color: ${(props) => props.$color};
 
   display: flex;
@@ -30,7 +30,7 @@ export const Badge = styled.ol<{ $color?: string }>`
   border-radius: 8px;
 `;
 
-export const BadgeCont = styled.div`
+export const BadgeCont = styled.ol`
   width: 100%;
   display: flex;
   flex-direction: column;

diff --git a/src/components/DailyWorkersTable/index.tsx b/src/components/DailyWorkersTable/index.tsx
@@ -7,7 +7,7 @@ import { NameBox, TitleBox } from './styles';
 
 export const DailyWorkersTable = ({ dailyData }: { dailyData: TimeWorkerListData[] | undefined }): JSX.Element => {
   return (
-    <FlexContainer $direction="row" $wFull $gap="3%" data-testId="일간근무표">
+    <FlexContainer $direction="row" $wFull $gap="3%" data-testid="일간근무표">
       {dailyData?.map((timeData: TimeWorkerListData, timeindex) => (
         <FlexContainer key={`${timeData.title}${timeindex}`} $wFull $gap="10px">
           <TitleBox $timeIndex={timeindex}>
@@ -18,9 +18,9 @@ export const DailyWorkersTable = ({ dailyData }: { dailyData: TimeWorkerListData
               {strTimeProcessor(timeData.startTime)} ~ {strTimeProcessor(timeData.endTime)}
             </Text>
           </TitleBox>
-          <FlexContainer $gap="8px">
+          <FlexContainer as="ol" $gap="8px">
             {timeData.workerList.map((w: UserData, i) => (
-              <NameBox key={`${w.name}${i}`}>
+              <NameBox as="li" key={`${w.name}${i}`}>
                 <Text>{w.name}</Text>
               </NameBox>
             ))}
@@ -33,7 +33,7 @@ export const DailyWorkersTable = ({ dailyData }: { dailyData: TimeWorkerListData
 
 export const NotFixedDateBox = (): JSX.Element => {
   return (
-    <GrayBox data-testId="미확정일간근무표">
+    <GrayBox data-testid="미확정일간근무표">
       <Text size="lg" weight="medium">
         아직 확정된 스케줄이 없습니다
       </Text>

diff --git a/src/components/HeaderNB/HeaderNB.tsx b/src/components/HeaderNB/HeaderNB.tsx
@@ -10,9 +10,9 @@ import {
 import Sidebar from 'components/Sidebar';
 import { useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { getLoginData } from 'utils/loginDatahandlers';
+import { loginDatahandlers } from 'utils/loginDatahandlers';
 
-const isAdmin = getLoginData().isAdmin;
+const isAdmin = loginDatahandlers.getLoginData().isAdmin;
 
 const HeaderNB = (): JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
@@ -29,7 +29,7 @@ const HeaderNB = (): JSX.Element => {
             </HeaderButton>
           </HeaderLeftMenuGroup>
           <HeaderTitleCont>
-            <Text size="lg" key={isAdmin + nowPath} data-testId="페이지제목">
+            <Text size="lg" key={isAdmin + nowPath} data-testid="페이지제목">
               {isAdmin ? adminTitle[nowPath] : albaTitle[nowPath]}
             </Text>
           </HeaderTitleCont>

diff --git a/src/components/LoginSignUpButton/LoginOrSignup.tsx b/src/components/LoginSignUpButton/LoginOrSignup.tsx
@@ -1,7 +1,6 @@
 import FlexContainer from 'components/@commons/FlexContainer';
 import SubmitButton from 'components/@commons/SubmitButton';
-import useLogin from 'hooks/auth/useLogin';
-import React from 'react';
+import useLogin from 'pages/auth/hooks/useLogin';
 
 interface Props {
   redirectPage?: string;

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -1,11 +1,11 @@
 import { UserData } from 'apis/types';
 import Loader from 'components/Suspenses/Loader';
 import GetInviteKeyModal from 'components/modals/GetInviteKeyModal';
-import useLogin from 'hooks/auth/useLogin';
 import useGetMyInfo from 'hooks/useGetMyInfo';
 import useModal from 'hooks/useModal';
+import useLogin from 'pages/auth/hooks/useLogin';
 import { Suspense } from 'react';
-import { getLoginData } from 'utils/loginDatahandlers';
+import { loginDatahandlers } from 'utils/loginDatahandlers';
 import FlexContainer from '../@commons/FlexContainer';
 import Text from '../@commons/Text';
 import { HorizontalLine, SidebarBackground, SidebarBox } from './styles';
@@ -25,7 +25,7 @@ const Sidebar = ({ closeHandler }: { closeHandler: () => void }): JSX.Element =>
 export default Sidebar;
 
 const SideBarContent = () => {
-  const isAdmin = getLoginData().isAdmin;
+  const isAdmin = loginDatahandlers.getLoginData().isAdmin;
   const { userName, userType, groupName, members } = useGetMyInfo();
 
   return (
@@ -92,11 +92,11 @@ const SideBarMemberList = ({ memberList }: { memberList?: UserData[] }) => {
       </Text>
       <HorizontalLine />
 
-      <FlexContainer $wFull $align="flex-start" $gap="16px">
+      <FlexContainer as="ol" $wFull $align="flex-start" $gap="16px">
         {memberList?.map((member: UserData) => (
-          <ol key={`${member.name}${member.userId}`}>
+          <li key={`${member.name}${member.userId}`}>
             <Text>{member.name}</Text>
-          </ol>
+          </li>
         ))}
       </FlexContainer>
     </FlexContainer>

diff --git a/src/components/WeekBar/index.tsx b/src/components/WeekBar/index.tsx
@@ -0,0 +1,32 @@
+import FlexContainer from 'components/@commons/FlexContainer';
+import Text from 'components/@commons/Text';
+import styled from 'styled-components';
+import weekdayArray from 'utils/weekdayArray';
+
+const WeekBar = ({ day, selectDayHandler }: { day: number; selectDayHandler: (i: number) => void }): JSX.Element => {
+  return (
+    <FlexContainer $direction="row" $wFull $justify="space-between" $padding="0 8px" data-testid="요일선택바">
+      {weekdayArray.map((e, i) => (
+        <Button key={e.kor} onClick={() => selectDayHandler(i)} $isSelected={day === i}>
+          <Text>{e.kor}</Text>
+        </Button>
+      ))}
+    </FlexContainer>
+  );
+};
+
+export default WeekBar;
+
+const Button = styled.button<{ $isSelected: boolean }>`
+  width: 10%;
+  aspect-ratio: 1;
+
+  background: ${(props) => (props.$isSelected ? props.theme.color.yellow : props.theme.color.lightGray)};
+  border: 1px solid;
+  border-color: ${({ theme }) => theme.color.textColor};
+  border-radius: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/components/modals/GetInviteKeyModal/index.tsx b/src/components/modals/GetInviteKeyModal/index.tsx
@@ -19,7 +19,7 @@ const GetInviteKeyModal = (): JSX.Element => {
   const link = `${baseURL}/invited/${inviteKeyData?.data.invitationKey}`;
 
   return (
-    <FlexContainer $wFull $padding="20px" $gap="30px" data-testId="초대링크모달">
+    <FlexContainer $wFull $padding="20px" $gap="30px" data-testid="초대링크모달">
       <FlexContainer $gap="10px">
         <Text size="xl" weight="bold">
           초대 링크

diff --git a/src/error/ErrorFallback.tsx b/src/error/ErrorFallback.tsx
@@ -1,18 +1,17 @@
-import React from 'react';
 import { convertPath } from 'apis/convertURI';
-import { useNavigate } from 'react-router-dom';
-import ErrorPage from './ErrorPage';
 import { ErrorFallbackProps } from 'apis/types';
 import { AdminNoGroupPage, AdminNoMemberPage } from 'pages/admin/ETCMainPage';
 import { AlbaNoGroupPage } from 'pages/alba/AlbaMainIndex';
-import { getLoginData } from 'utils/loginDatahandlers';
+import { useNavigate } from 'react-router-dom';
+import { loginDatahandlers } from 'utils/loginDatahandlers';
+import ErrorPage from './ErrorPage';
 
 const ErrorFallback = ({ error, resetErrorBoundary }: ErrorFallbackProps) => {
   console.log(error);
 
   const navigate = useNavigate();
-  const isAdmin = getLoginData().isAdmin;
-  const code = error.response?.data?.code || 0;
+  const isAdmin = loginDatahandlers.getLoginData().isAdmin;
+  const code = error.response?.data?.errorCode || 0;
 
   switch (code) {
     case -10000:

diff --git a/src/error/defaultErrorHandler.ts b/src/error/defaultErrorHandler.ts
@@ -1,6 +1,6 @@
 import { convertPath } from 'apis/convertURI';
 import { ErrorData } from 'apis/types';
-import { removeLoginData } from 'utils/loginDatahandlers';
+import { loginDatahandlers } from 'utils/loginDatahandlers';
 
 export const defaultErrorHandler = (error: ErrorData) => {
   console.log('defaultErrorHandler', error);
@@ -11,13 +11,13 @@ export const defaultErrorHandler = (error: ErrorData) => {
 
   if (error.response === undefined) {
     alert('서버 오류');
-    removeLoginData();
+    loginDatahandlers.removeLoginData();
     return;
   }
 
   // 서버 에러 응답
-  console.log('defaultErrorHandler', error.response?.data);
-  const code = error.response.data?.code;
+  console.log('defaultErrorHandler', error.response);
+  const code = error.response.data?.errorCode;
   switch (code) {
     case -10000:
       // 타임 아웃
@@ -66,13 +66,13 @@ export const defaultErrorHandler = (error: ErrorData) => {
     case -21000:
       // 토큰 유효하지 않음
       alert('로그인이 만료되었습니다.');
-      removeLoginData();
+      loginDatahandlers.removeLoginData();
       redirect(convertPath('/'));
       return;
 
     default:
       alert(`잘못된 접근입니다`);
-      removeLoginData();
+      loginDatahandlers.removeLoginData();
       redirect(convertPath('/'));
       return;
   }