Merge branch 'dev' into feat/#315

dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:16
+FROM node:18
 WORKDIR /usr/src/app
 COPY package.json ./
 RUN yarn

src/@types/building-info.ts

@@ -0,0 +1,16 @@
+export interface Room {
+  roomNumber: string;
+  roomName: string;
+}
+
+export type Floor = 'basement' | 'ground' | 'rooftop';
+
+export type TotalFloorInfo = {
+  [key in Floor]: {
+    [key: string]: Room[];
+  };
+};
+
+export type FloorInfo = {
+  [key: string]: Room[];
+};

src/@types/map.ts

@@ -1,6 +1,7 @@
 export type BuildingType = 'A' | 'B' | 'C' | 'D' | 'E';
 
 export interface PKNUBuilding {
+  readonly buildingCode: string;
   readonly buildingNumber: string;
   readonly buildingName: string;
   readonly latlng: [number, number];

src/@types/styles/icon.ts

@@ -24,10 +24,11 @@ export type IconKind =
   | 'light'
   | 'checkedRadio'
   | 'uncheckedRadio'
-  | 'location'
   | 'warning'
   | 'account'
   | 'language'
   | 'keyboard'
   | 'exclamation'
-  | 'bell';
+  | 'bell'
+  | 'myLocation'
+  | 'location';

src/@types/styles/size.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-export type SizeOption = 'large' | 'medium' | 'small' | 'tiny';
+export type SizeOption = 'large' | 'medium' | 'small' | 'tiny' | 'building';
 
 export interface Size {
   height: CSSProperties['height'];

src/apis/building-info/fetch-building-info.ts

@@ -0,0 +1,16 @@
+import http from '@apis/http';
+import { SERVER_URL } from '@config/index';
+
+const fetchBuildingInfo = async (buildingCode: string) => {
+  try {
+    const buildingInfo = await http.get(
+      `${SERVER_URL}/api/buildingInfo?code=${buildingCode}`,
+    );
+
+    return buildingInfo;
+  } catch (error) {
+    return error;
+  }
+};
+
+export default fetchBuildingInfo;

src/components/Common/Icon/index.tsx

@@ -33,6 +33,7 @@ import {
   MdKeyboard,
   MdError,
   MdDoorbell,
+  MdOutlineLocationOn,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -61,13 +62,14 @@ const ICON: { [key in IconKind]: IconType } = {
   light: MdOutlineLightbulb,
   uncheckedRadio: MdRadioButtonUnchecked,
   checkedRadio: MdRadioButtonChecked,
-  location: MdOutlineMyLocation,
   warning: MdOutlineError,
   account: MdAssignmentInd,
   language: MdLanguage,
   keyboard: MdKeyboard,
   exclamation: MdError,
   bell: MdDoorbell,
+  myLocation: MdOutlineMyLocation,
+  location: MdOutlineLocationOn,
 };
 
 interface IconProps {

src/components/Common/Image/index.tsx

@@ -8,6 +8,7 @@ const imageSize: ImageSize = {
   medium: setSize(150),
   small: setSize(100),
   tiny: setSize(80),
+  building: setSize(100, 180),
 };
 
 const Image = ({

src/components/Common/ToggleInfo/index.tsx

@@ -0,0 +1,53 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import React, { useState } from 'react';
+
+import Icon from '../Icon';
+
+interface ToggleInfoProps {
+  infoTitle: () => JSX.Element;
+  infoDesc: () => JSX.Element;
+}
+
+const ToggleInfo = ({ infoTitle, infoDesc }: ToggleInfoProps) => {
+  const [showInfo, setShowInfo] = useState<boolean>(false);
+  const toggleInfo = () => setShowInfo((prevState) => !prevState);
+
+  return (
+    <>
+      <ToggleContainer showInfo={showInfo} onClick={toggleInfo}>
+        {infoTitle()}
+        <IconContainer>
+          <Icon kind="arrowDown" size="24" />
+        </IconContainer>
+      </ToggleContainer>
+      {showInfo && infoDesc()}
+    </>
+  );
+};
+
+export default ToggleInfo;
+
+const ToggleContainer = styled.section<{ showInfo: boolean }>`
+  position: relative;
+  padding: 10px 0px 10px 0px;
+  display: flex;
+  align-items: center;
+
+  ${({ showInfo }) => css`
+    & > span {
+      color: ${showInfo && THEME.PRIMARY};
+    }
+    & > div > svg {
+      transform: ${showInfo ? 'rotate(-180deg)' : 'rotate(0deg)'};
+      transition: all ease 0.3s;
+    }
+  `}
+`;
+
+const IconContainer = styled.div`
+  position: absolute;
+  right: 0;
+  display: flex;
+`;

src/components/FAQBox/index.tsx

@@ -1,10 +1,10 @@
-import Icon from '@components/Common/Icon';
+import ToggleInfo from '@components/Common/ToggleInfo';
 import { FAQ_CONSTANTS } from '@constants/FAQ';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { THEME } from '@styles/ThemeProvider/theme';
 import openLink from '@utils/router/openLink';
-import React, { useState } from 'react';
+import React from 'react';
 
 interface FAQBoxProps {
   readonly question: string;
@@ -15,80 +15,57 @@ interface FAQBoxProps {
 }
 
 const FAQBox = ({ question, answer }: FAQBoxProps) => {
-  const [showAnswer, setShowAnswer] = useState<boolean>(false);
-  const toggleAnswer = () => setShowAnswer((prevState) => !prevState);
-
-  const seperatedAnswerText = answer.text.split(FAQ_CONSTANTS.LINE_SEPERATOR);
   const moveToLink = () => {
     if (!answer.link) return;
+
     openLink(answer.link);
   };
-  const hasAnswerLink = () => !!answer.link;
+
+  const hasLink = !!answer.link;
 
   return (
     <>
-      <QuestionContainer onClick={toggleAnswer} showAnswer={showAnswer}>
-        <QuestionMark>{FAQ_CONSTANTS.QUESTION_MARK}</QuestionMark>
-        <QuestionText>{question}</QuestionText>
-        <IconContainer>
-          <Icon kind="arrowDown" size="24" />
-        </IconContainer>
-      </QuestionContainer>
-      {showAnswer && (
-        <AnswerContainer>
-          {seperatedAnswerText.map((line, index) => (
-            <p key={index}>{line}</p>
-          ))}
-          {hasAnswerLink() && (
-            <StyledLink onClick={moveToLink}>{FAQ_CONSTANTS.LINK}</StyledLink>
-          )}
-        </AnswerContainer>
-      )}
+      <ToggleInfo
+        infoTitle={() => (
+          <>
+            <span
+              css={css`
+                font-weight: bold;
+              `}
+            >
+              {FAQ_CONSTANTS.QUESTION_MARK}
+            </span>
+            <QuestionText>{question}</QuestionText>
+          </>
+        )}
+        infoDesc={() => (
+          <AnswerContainer>
+            {answer.text}
+            {hasLink && (
+              <StyledLink onClick={moveToLink}>{FAQ_CONSTANTS.LINK}</StyledLink>
+            )}
+          </AnswerContainer>
+        )}
+      />
       <BoundaryLine />
     </>
   );
 };
 
 export default FAQBox;
 
-const QuestionContainer = styled.div<{ showAnswer: boolean }>`
-  position: relative;
-  padding: 10px 0px 10px 0px;
-  display: flex;
-  align-items: center;
-
-  ${({ showAnswer }) => css`
-    & > span {
-      color: ${showAnswer && THEME.PRIMARY};
-    }
-    & > div > svg {
-      transform: ${showAnswer ? 'rotate(-180deg)' : 'rotate(0deg)'};
-      transition: all ease 0.3s;
-    }
-  `}
-`;
-
-const QuestionMark = styled.span`
-  font-weight: bold;
-`;
-
 const QuestionText = styled.span`
   text-indent: 1rem;
 `;
 
-const IconContainer = styled.div`
-  position: absolute;
-  right: 0;
-  display: flex;
-`;
-
 const AnswerContainer = styled.div`
   background-color: #7a9dd31a;
   color: ${THEME.TEXT.BLACK};
   line-height: 1.8;
   padding: 10px 20px 10px 20px;
   border-radius: 10px;
   margin-bottom: 10px;
+  white-space: pre-line;
 `;
 
 const StyledLink = styled.span`

src/components/FooterTab/index.tsx

@@ -32,19 +32,17 @@ const FooterTab = () => {
 };
 
 const Footer = styled.div`
+  position: fixed;
+  bottom: 0;
   display: flex;
   justify-content: space-around;
   align-items: center;
-
   max-width: 480px;
   width: 100%;
   height: 60px;
   padding: 15px 0px 15px 0px;
   background-color: ${THEME.TEXT.WHITE};
-  position: fixed;
-  bottom: 0;
-  z-index: 2;
-
+  z-index: 999;
   box-shadow: 0px -2px 6px rgba(99, 99, 99, 0.2);
 `;
 

src/components/Providers/MapProvider/index.tsx

@@ -7,6 +7,7 @@ import {
   PknuMap,
   RefreshButtons,
 } from '@pages/Map/components';
+import BuildingInfoToggle from '@pages/Map/components/BuildingInfo/BuildingInfoToggle';
 import { Location } from '@type/map';
 import React, { useState } from 'react';
 
@@ -37,8 +38,12 @@ Map.PknuMap = PknuMap;
 Map.MapHeader = MapHeader;
 Map.FilterButtons = FilterButtons;
 Map.RefreshButtons = RefreshButtons;
+Map.BuildingInfoToggle = BuildingInfoToggle;
 
 const MapContainer = styled.div`
+  overflow: hidden;
+  max-width: 480px;
+  min-height: 100vh;
   height: calc(100vh - 8vh);
   display: flex;
   flex-direction: column;

src/components/Providers/OverlayProvider/index.tsx

@@ -11,25 +11,7 @@ interface OverlayProviderProps {
 }
 
 const OverlayProvider = ({ children }: OverlayProviderProps) => {
-  const userLocation = useUserLocation();
-  const { openModal } = useModals();
-
-  const handleOpenModal = (
-    title: string,
-    btn1Text: string,
-    onClick?: () => void,
-    btn2Text?: string,
-  ) => {
-    openModal(
-      <Modal>
-        <Modal.ModalTitle title={title} />
-        <Modal.ModalButton text={btn1Text} />
-        {btn2Text && <Modal.ModalButton text={btn2Text} onClick={onClick} />}
-      </Modal>,
-    );
-  };
-
-  const customOverlay = new CustomOverlay(handleOpenModal, userLocation);
+  const customOverlay = new CustomOverlay();
 
   return (
     <OverlayContext.Provider value={customOverlay}>