Main

next.config.js

@@ -4,6 +4,18 @@ const nextConfig = {
   compiler: {
     emotion: true,
   },
+  images: {
+    domains: ['https://livable-final.s3.ap-northeast-2.amazonaws.com'],
+
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'livable-final.s3.ap-northeast-2.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
   webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/i,

src/assets/icons/index.ts

@@ -1,4 +1,4 @@
-import Notification from '@/assets/icons/notification.svg';
+import Notification from '@/assets/icons/Notification.svg';
 import User from '@/assets/icons/User.svg';
 import ChevronRight from '@/assets/icons/ChevronRight.svg';
 import Excel from '@/assets/icons/Excel.svg';

src/components/admin/visitor/VisitorList.tsx

@@ -1,7 +1,8 @@
-import { VisitorListProps } from '@/types/visitor/visitor';
+import { GetVisitorsData } from '@/types/visitor/api';
 import { css } from '@emotion/react';
+import dayjs from 'dayjs';
 
-function VisitorList({ content }: VisitorListProps) {
+function VisitorList({ content }: GetVisitorsData) {
   return (
     <div css={container}>
       <ul>
@@ -19,10 +20,16 @@ function VisitorList({ content }: VisitorListProps) {
         {content &&
           content.map((item) => {
             return (
-              <li key={item.invitationId}>
+              <li key={item.visitorId}>
                 <input type="checkbox" />
-                <p>{item.visitTime}</p>
-                <p>{item.visitTime}</p>
+                <p>
+                  {item.startDateTime &&
+                    dayjs(item.startDateTime).format('YYYY-MM-DD hh:mm')}
+                </p>
+                <p>
+                  {item.visitTime &&
+                    dayjs(item.visitTime).format('YYYY-MM-DD h:m')}
+                </p>
                 <p>
                   {item.company}
                   <br />
@@ -31,12 +38,15 @@ function VisitorList({ content }: VisitorListProps) {
                 <p>{item.visitorName}</p>
                 <p>{item.officeName}</p>
                 <p>
-                  {item.inTime}
+                  {item.inTime && dayjs(item.inTime).format('YYYY-MM-DD h:m')}
                   <br />
-                  {item.outTime}
+                  {item.outTime && dayjs(item.outTime).format('YYYY-MM-DD h:m')}
                 </p>
                 <p>{item.carNumber}</p>
-                <p>{item.stayTime}</p>
+                <p>
+                  {item.stayTime &&
+                    dayjs(item.stayTime).format('YYYY-MM-DD h:m')}
+                </p>
               </li>
             );
           })}

src/components/admin/visitor/VisitorSearch.tsx

@@ -1,9 +1,10 @@
 import { getSearchVisitors } from '@/pages/api/visitor/visitorRequests';
 import theme from '@/styles/theme';
+import { VisitorSearchProps } from '@/types/visitor/visitor';
 import { css } from '@emotion/react';
 import { ChangeEvent, useState } from 'react';
 
-function VisitorSearch() {
+function VisitorSearch({ setVisitorList }: VisitorSearchProps) {
   const [select, setSelect] = useState('COMPANY');
   const [searchText, setSearchText] = useState('');
   const [startDate, setStartDate] = useState('');
@@ -27,16 +28,23 @@ function VisitorSearch() {
 
   const onClickHandler = async () => {
     try {
-      const response = await getSearchVisitors(
-        1,
-        5,
-        select,
-        searchText,
-        startDate,
-        endDate,
-      );
+      let queryString = 'size=100';
+      if (select) {
+        queryString += `&queryCondition=${select}`;
+      }
+      if (searchText) {
+        queryString += `&query=${searchText}`;
+      }
+      if (startDate) {
+        queryString += `&startDate=${startDate}`;
+      }
+      if (endDate) {
+        queryString += `&endDate=${endDate}`;
+      }
+
+      const response = await getSearchVisitors(queryString);
       if (response?.data) {
-        console.log('test');
+        setVisitorList(response.data);
       }
     } catch (err) {
       //  검색 오류 예외 처리

src/components/admin/visitor/index.tsx

@@ -4,21 +4,21 @@ import VisitorSearch from '@/components/admin/visitor/VisitorSearch';
 import { getVisitors } from '@/pages/api/visitor/visitorRequests';
 import { css } from '@emotion/react';
 import { useEffect, useState } from 'react';
-import { VisitorListProps } from '@/types/visitor/visitor';
+import { GetVisitorsData } from '@/types/visitor/api';
+import dayjs from 'dayjs';
 import testList from './testList';
 import VisitorListPagenation from './VisitorListPagenation';
 
 function Index() {
-  const [visitorList, setVisitorList] = useState<VisitorListProps>();
-  console.log(visitorList);
+  const [visitorList, setVisitorList] = useState<GetVisitorsData>();
+  const nowYear = dayjs().format('YYYY');
 
   useEffect(() => {
-    setVisitorList(testList);
     const visitorsData = async () => {
       try {
-        const response = await getVisitors(1, 5);
+        const response = await getVisitors(nowYear);
         if (response?.data) {
-          console.log('test');
+          setVisitorList(response.data);
         }
       } catch (err) {
         //  검색 오류 예외 처리
@@ -35,14 +35,14 @@ function Index() {
   const limit = 5; // posts가 보일 최대한의 갯수
   const offset = (page - 1) * limit; // 시작점과 끝점을 구하는 offset
 
-  const ListData = (list: VisitorListProps) => {
+  const ListData = (list: GetVisitorsData) => {
     const result = list.content.slice(offset, offset + limit);
     return result;
   };
 
   return (
     <div css={contentStyles}>
-      <VisitorSearch />
+      <VisitorSearch setVisitorList={setVisitorList} />
 
       {visitorList && (
         <>

src/components/auth/AuthForm.tsx

@@ -1,57 +1,29 @@
 import { css } from '@emotion/react';
 import useSaveStore from '@/stores/useSaveStore';
 import { useRouter } from 'next/router';
+import Button from '../common/Button';
 
 function AuthForm() {
-  const router = useRouter();
   const ADMIN_TOKEN = process.env.ADMIN_TOKEN as string;
   const { setUserToken } = useSaveStore();
+  const router = useRouter();
 
   const onClickCategoryHandler = () => {
     setUserToken(ADMIN_TOKEN);
-    router.push('/');
+    router.reload();
   };
 
   return (
-    <div css={purposeContainerStyles}>
-      <div css={categoryContainerStyles}>
-        <div css={categoryWrapperStyles}>
-          <button type="button" onClick={onClickCategoryHandler}>
-            관리자
-          </button>
-        </div>
-      </div>
+    <div css={categoryWrapperStyles}>
+      <Button
+        content="관리자 로그인"
+        variant="blue"
+        onClick={onClickCategoryHandler}
+      />
     </div>
   );
 }
 
-const purposeContainerStyles = css`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 32px;
-  max-width: 230px;
-`;
-
-const categoryContainerStyles = css`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-`;
-
-const categoryWrapperStyles = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  min-width: 280px;
-  max-width: 360px;
-  padding: 0 4px 0;
-`;
+const categoryWrapperStyles = css``;
 
 export default AuthForm;

src/components/common/Layout.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import notoSansKR from '@/styles/font';
 import Header from '@/components/common/Header';
 import theme from '@/styles/theme';
+import mq from '@/utils/mediaquery';
 import SideMenu from './SideMenu';
 
 function Layout({ children }: React.PropsWithChildren) {
@@ -16,7 +17,17 @@ function Layout({ children }: React.PropsWithChildren) {
   );
 }
 
-const layoutStyles = css``;
+const layoutStyles = css`
+  margin: 0 auto;
+  overflow: auto;
+
+  ${mq.lg} {
+    max-width: 1024px;
+  }
+  ${mq.pc} {
+    max-width: 100%;
+  }
+`;
 
 const bodyStyles = css`
   display: flex;

src/components/common/SideMenu.tsx

@@ -47,6 +47,7 @@ const sideMenuStyles = css`
 
   width: 236px;
   height: calc(100vh - 100px);
+  overflow: auto;
 
   li {
     border-bottom: 1px solid ${theme.palette.greyscale.grey20};

src/pages/_app.tsx

@@ -3,14 +3,33 @@ import Layout from '@/components/common/Layout';
 import GlobalStyle from '@/styles/GlobalStyle';
 import { ThemeProvider } from '@emotion/react';
 import type { AppProps } from 'next/app';
+import { useEffect, useState } from 'react';
 
 function App({ Component, pageProps }: AppProps) {
+  const [isLogin, setIsLogin] = useState(false);
+
+  let url = '';
+  if (typeof window !== 'undefined') {
+    url = window.location.pathname;
+  }
+  useEffect(() => {
+    if (url === '/login') {
+      setIsLogin(true);
+    } else {
+      setIsLogin(false);
+    }
+  }, [url]);
+
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
-      <Layout>
+      {isLogin ? (
         <Component {...pageProps} />
-      </Layout>
+      ) : (
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      )}
     </ThemeProvider>
   );
 }

src/pages/api/visitor/visitorRequests.ts

@@ -1,22 +1,14 @@
 import apiInstance from '@/pages/api/axios';
 
-export const getVisitors = async (page: number, size: number) => {
+export const getVisitors = async (nowYear: string) => {
   const response = await apiInstance.get(
-    `admin/visitation?page=${page}&size=${size}`,
+    // 올해 전체 데이터
+    `admin/visitation?size=100&startDate=${nowYear}-01-01`,
   );
   return response.data;
 };
 
-export const getSearchVisitors = async (
-  page: number,
-  size: number,
-  Condition: string,
-  searchText: string,
-  startDate: string,
-  endDate: string,
-) => {
-  const response = await apiInstance.get(
-    `admin/visitation?page=${page}&size=${size}&queryCondition=${Condition}&query=${searchText}&startDate=${startDate}&endDate=${endDate}`,
-  );
+export const getSearchVisitors = async (queryString: string) => {
+  const response = await apiInstance.get(`admin/visitation?${queryString}`);
   return response.data;
 };

src/pages/login/index.tsx

@@ -23,13 +23,9 @@ function Login() {
 }
 
 const containerStyles = css`
-  position: relative;
+  height: 100vh;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  height: 100vh;
-  gap: 96px;
-  min-width: 280px;
-  max-width: 360px;
 `;
 export default Login;

src/pages/visitor/index.tsx

@@ -20,6 +20,7 @@ function Index() {
 }
 
 const containerStyles = css`
+  min-width: 1024px;
   hr {
     margin-top: 28px;
     height: 1px;

src/stores/useSaveStore.ts

@@ -1,36 +1,17 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 
-type Save = {
-  PhotoMsg: boolean;
-};
-
 type SaveStore = {
-  isSave: Save;
   user: string;
-  setIsSavePhotoMsg: () => void;
-  clearIsSave: () => void;
   setUserToken: (value: string) => void;
 };
 
-const initialSaveState = {
-  PhotoMsg: false,
-};
-
 const initialUserState = '';
 
 const useSaveStore = create<SaveStore>()(
   persist(
     (set) => ({
-      isSave: initialSaveState,
       user: initialUserState,
-      setIsSavePhotoMsg: () =>
-        set((pre) => ({
-          isSave: { ...pre.isSave, PhotoMsg: true },
-        })),
-      clearIsSave: () => {
-        set({ isSave: initialSaveState });
-      },
       setUserToken: (value: string) =>
         set({
           user: value,