Merge pull request #454 from boostcamp-2020/dev_web

[Web] Refactor and fix bugs
boostcamp-2020 · Dec 18, 2020 · be6ef60 · be6ef60
2 parents c734b5d + d45fda8
commit be6ef60
Show file tree

Hide file tree

Showing 119 changed files with 641 additions and 593 deletions.
diff --git a/client/src/@types/timer.ts b/client/src/@types/timer.ts
@@ -0,0 +1,6 @@
+enum Timer {
+  TRANSCRIPT_EXISTS = 2000,
+  NO_TRANSCRIPT = 5000,
+}
+
+export default Timer;
diff --git a/client/src/@types/types.ts b/client/src/@types/types.ts
@@ -83,6 +83,16 @@ enum SideBarStatus {
   CHAT_ROOMS,
 }
 
+enum LangCodeFormattedForServer {
+  KOREAN = 'Korean',
+  ENGLISH = 'English',
+}
+
+enum TranslationCycle {
+  PROCESS,
+  DONE,
+}
+
 export {
   RoomListType,
   ParticipantsType,
@@ -97,4 +107,6 @@ export {
   SideBarStatus,
   JoiningRoomType,
   CreatingRoomType,
+  LangCodeFormattedForServer,
+  TranslationCycle,
 };
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { lazy, Suspense, useEffect } from 'react';
 import { createGlobalStyle } from 'styled-components';
 import reset from 'styled-reset';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 
-import ChatRoomPage from './pages/ChatRoomPage';
-import MainPage from './pages/MainPage';
+const ChatRoomPage = lazy(() => import('./pages/ChatRoomPage'));
+const MainPage = lazy(() => import('./pages/MainPage'));
 import SwitchRoomLoadingPage from './pages/SwitchRoomLoadingPage';
 import Background from './components/atoms/resources/Background';
 import ko from './assets/locale/ko';
@@ -14,7 +14,7 @@ import useUser from './hooks/useUser';
 import LangCode from './@types/langCode';
 
 export const GlobalStyle = createGlobalStyle`
-  ${reset}
+  ${reset} 
 
   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
 
@@ -44,12 +44,14 @@ function App() {
       <GlobalStyle />
       <Background>
         <IntlProvider locale={languageData} messages={languageData === LangCode.KOREAN ? ko : en}>
-          <Switch>
-            <Route path="/" component={MainPage} exact />
-            <Route path="/chat" component={ChatRoomPage} exact />
-            <Route path="/loading" component={SwitchRoomLoadingPage} exact />
-            <Redirect from="*" to="/" />
-          </Switch>
+          <Suspense fallback={<Background />}>
+            <Switch>
+              <Route path="/" component={MainPage} exact />
+              <Route path="/chat" component={ChatRoomPage} exact />
+              <Route path="/loading" component={SwitchRoomLoadingPage} exact />
+              <Redirect from="*" to="/" />
+            </Switch>
+          </Suspense>
         </IntlProvider>
       </Background>
     </>

diff --git a/client/src/assets/api.ts b/client/src/assets/api.ts
@@ -20,7 +20,7 @@ const joinRoom = async (roomCode: string, isPrivate: 'true' | 'false') => {
 };
 
 const getRoomList = async () => {
-  return backend.get<{ roomList: RoomListType[] }>('/api/room');
+  return backend.get<{ rooms: RoomListType[] }>('/api/room');
 };
 
 const detectLanguage = async ({ query }: { query: string }) => {

diff --git a/client/src/components/atoms/boxes/ChatBox.tsx b/client/src/components/atoms/boxes/ChatBox.tsx
@@ -34,7 +34,7 @@ export type ChatBoxPropsType = {
   isMe: boolean;
 };
 
-export function ChatBox({ leftMessage = '', rightMessage = '', isMe }: ChatBoxPropsType) {
+function ChatBox({ leftMessage = '', rightMessage = '', isMe }: ChatBoxPropsType) {
   return (
     <StyledChatBoxWrapper>
       <LeftBox isMe={isMe}>{leftMessage}</LeftBox>

diff --git a/client/src/components/atoms/boxes/ChatLogsBox.tsx b/client/src/components/atoms/boxes/ChatLogsBox.tsx
@@ -17,7 +17,7 @@ const StyledChatLogsBox = styled.div<ChatLogsBoxPropsType>`
   }
 `;
 
-export function ChatLogsBox({ children }: ChatLogsBoxPropsType) {
+function ChatLogsBox({ children }: ChatLogsBoxPropsType) {
   return <StyledChatLogsBox>{children}</StyledChatLogsBox>;
 }
 

diff --git a/client/src/components/atoms/boxes/ChatModalBackground.tsx b/client/src/components/atoms/boxes/ChatModalBackground.tsx
@@ -12,8 +12,8 @@ const StyledChatModalBackground = styled.div`
   background-color: rgba(0, 0, 0, 0.4);
 `;
 
-export const ChatModalBackground = ({ ...props }: ChatModalBackgroundPropsType) => {
+function ChatModalBackground({ ...props }: ChatModalBackgroundPropsType) {
   return <StyledChatModalBackground {...props} />;
-};
+}
 
 export default ChatModalBackground;
diff --git a/client/src/components/atoms/boxes/ChatModalBox.tsx b/client/src/components/atoms/boxes/ChatModalBox.tsx
@@ -24,13 +24,13 @@ const AbsoluteIcon = styled(IconButton)`
   top: 16px;
 `;
 
-export const ChatModalBox = ({ onClickClose, children }: ChatModalPropsType) => {
+function ChatModalBox({ onClickClose, children }: ChatModalPropsType) {
   return (
     <StyledChatModalBox>
       <AbsoluteIcon onClick={onClickClose} iconType="Close" color={Palette.DARK_GREY} />
       {children}
     </StyledChatModalBox>
   );
-};
+}
 
 export default ChatModalBox;
diff --git a/client/src/components/atoms/boxes/CheckBox.tsx b/client/src/components/atoms/boxes/CheckBox.tsx
@@ -36,7 +36,7 @@ const CheckBoxWrapper = styled.div`
   align-items: center;
 `;
 
-export function CheckBox({ isChecked = false, children, isPrivateOnClick, isPrivate }: CheckBoxTypes) {
+function CheckBox({ isChecked = false, children, isPrivateOnClick, isPrivate }: CheckBoxTypes) {
   return (
     <CheckBoxWrapper>
       <StyledCheckBox

diff --git a/client/src/components/atoms/boxes/CodeBox.tsx b/client/src/components/atoms/boxes/CodeBox.tsx
@@ -27,7 +27,7 @@ const StyledCodeText = styled.p`
   font-size: 48px;
 `;
 
-export function CodeBox({ isEntered, children }: CodeBoxPropsType) {
+function CodeBox({ isEntered, children }: CodeBoxPropsType) {
   return (
     <StyledCodeBox isEntered={isEntered}>
       <StyledCodeText>{children}</StyledCodeText>

diff --git a/client/src/components/atoms/boxes/MainPageBox.tsx b/client/src/components/atoms/boxes/MainPageBox.tsx
@@ -14,7 +14,7 @@ const StyledMainpageBox = styled.div<MainPageBoxPropsType>`
   background-color: rgba(255, 255, 255, 0.6);
 `;
 
-export function MainPageBox({ children }: MainPageBoxPropsType) {
+function MainPageBox({ children }: MainPageBoxPropsType) {
   return <StyledMainpageBox>{children}</StyledMainpageBox>;
 }
 

diff --git a/client/src/components/atoms/boxes/RoomItemBox.tsx b/client/src/components/atoms/boxes/RoomItemBox.tsx
@@ -35,7 +35,7 @@ const StyledRoomItemBox = styled.div<StyledRoomItemBoxPropsType>`
   ${(props) => (props.disabled ? '' : 'cursor: pointer;')}
 `;
 
-export function RoomItemBox({ size = 'big', children, onClickButton, disabled }: RoomItemBoxTypes) {
+function RoomItemBox({ size = 'big', children, onClickButton, disabled }: RoomItemBoxTypes) {
   return (
     <StyledRoomItemBox
       size={size}

diff --git a/client/src/components/atoms/buttons/IconButton.tsx b/client/src/components/atoms/buttons/IconButton.tsx
@@ -19,7 +19,7 @@ const IconWrapper = styled.div`
   cursor: pointer;
 `;
 
-export function IconButton({ iconType = 'Edit', color = 'black', onClick, className }: IconButtonPropsType) {
+function IconButton({ iconType = 'Edit', color = 'black', onClick, className }: IconButtonPropsType) {
   let icon;
   const defaultIconProps = { fontSize: 24, color: color };
 

diff --git a/client/src/components/atoms/buttons/LanguageSelectButton.tsx b/client/src/components/atoms/buttons/LanguageSelectButton.tsx
@@ -22,7 +22,7 @@ const StyledButton = styled.button<LanguageSelectButtonPropsType>`
   cursor: pointer;
 `;
 
-export function LanguageSelectButton({
+function LanguageSelectButton({
   selected = true,
   language = LangCode.KOREAN,
   ...props

diff --git a/client/src/components/atoms/buttons/MainButton.tsx b/client/src/components/atoms/buttons/MainButton.tsx
@@ -40,7 +40,7 @@ const Button = styled.button<StyledButtonPropsType>`
   ${(props) => (props.disabled ? '' : 'cursor: pointer;')}
 `;
 
-export function MainButton({ disabled, children, onClickButton }: ButtonPropsType) {
+function MainButton({ disabled, children, onClickButton }: ButtonPropsType) {
   return (
     <Button
       type="button"

diff --git a/client/src/components/atoms/buttons/ProfileChangeButton.tsx b/client/src/components/atoms/buttons/ProfileChangeButton.tsx
@@ -21,7 +21,7 @@ const StyledRefreshIcon = styled(RefreshIcon)`
   color: white;
 `;
 
-export function ProfileChangeButton() {
+function ProfileChangeButton() {
   return (
     <StyledProfileChangeButton>
       <StyledRefreshIcon />

diff --git a/client/src/components/atoms/buttons/RefreshButton.tsx b/client/src/components/atoms/buttons/RefreshButton.tsx
@@ -35,7 +35,7 @@ const RefrshButtonWrapper = styled.div<RefreshButtonStyleType>`
   }
 `;
 
-export function RefreshButton({ onClickRefresh, size }: RefreshButtonTypes) {
+function RefreshButton({ onClickRefresh, size }: RefreshButtonTypes) {
   return (
     <RefrshButtonWrapper onClick={onClickRefresh} size={size}>
       <IconWrapper size={size}>

diff --git a/client/src/components/atoms/logos/HomeLogo.tsx b/client/src/components/atoms/logos/HomeLogo.tsx
@@ -14,7 +14,7 @@ const StyledLogo = styled.img`
   cursor: pointer;
 `;
 
-export function HomeLogo({ onClick }: HomeLogoType) {
+function HomeLogo({ onClick }: HomeLogoType) {
   return <StyledLogo onClick={onClick} src={Images.HOME_LOGO} alt="pupago home logo" />;
 }
 

diff --git a/client/src/components/atoms/logos/LogoWithText.tsx b/client/src/components/atoms/logos/LogoWithText.tsx
@@ -9,7 +9,7 @@ const StyledLogo = styled.img`
   height: 72px;
 `;
 
-export function LogoWithText() {
+function LogoWithText() {
   return <StyledLogo src={Images.LOGO_WITH_THEXT} alt="pupago logo with text" />;
 }
 

diff --git a/client/src/components/atoms/logos/MiniLogo.tsx b/client/src/components/atoms/logos/MiniLogo.tsx
@@ -9,7 +9,7 @@ const StyledLogo = styled.img`
   height: 16px;
 `;
 
-export function MiniLogo() {
+function MiniLogo() {
   return <StyledLogo src={Images.MINI_LOGO} alt="pupago mini logo" />;
 }
 

diff --git a/client/src/components/atoms/resources/CryingPapago.tsx b/client/src/components/atoms/resources/CryingPapago.tsx
@@ -9,7 +9,7 @@ const Logo = styled.img`
   height: 144px;
 `;
 
-export function CryingPapago() {
+function CryingPapago() {
   return <Logo src={Images.CRYING_PAPAGO} alt="crying papago" />;
 }
 

diff --git a/client/src/components/atoms/resources/LanguageTag.tsx b/client/src/components/atoms/resources/LanguageTag.tsx
@@ -22,7 +22,7 @@ const StyledLanguageTag = styled.div<LanguageTagPropsType>`
   color: white;
 `;
 
-export function LanguageTag({ language, isMe }: LanguageTagPropsType) {
+function LanguageTag({ language, isMe }: LanguageTagPropsType) {
   return (
     <StyledLanguageTag language={language} isMe={isMe}>
       {language === LangCode.KOREAN ? '가' : 'A'}

diff --git a/client/src/components/atoms/resources/ProfileImage.tsx b/client/src/components/atoms/resources/ProfileImage.tsx
@@ -51,7 +51,7 @@ const StyledProfileImage = styled.div<ProfileImagePropsType>`
   background-color: WHITE;
 `;
 
-export function ProfileImage({ size, isMe, image }: ProfileImagePropsType) {
+function ProfileImage({ size, isMe, image }: ProfileImagePropsType) {
   return (
     <StyledProfileImage size={size} isMe={isMe} image={image}>
       {image && <StyledProfileImageSrc alt="profile image" src={image} imageSize={size}></StyledProfileImageSrc>}

diff --git a/client/src/components/atoms/texts/RoomCode.tsx b/client/src/components/atoms/texts/RoomCode.tsx
@@ -30,7 +30,7 @@ const StyledRoomCodeText = styled.p`
   letter-spacing: 1.4px;
 `;
 
-export function RoomCode({ code, onClick }: RoomCodeTextPropsType) {
+function RoomCode({ code, onClick }: RoomCodeTextPropsType) {
   return (
     <StyledRoomCode onClick={onClick}>
       <StyledRoomCodeText>{code}</StyledRoomCodeText>

diff --git a/client/src/components/molecules/chatRoomPage/ParticipantCount.tsx b/client/src/components/molecules/chatRoomPage/ParticipantCount.tsx
@@ -22,7 +22,7 @@ const MarginedText = styled(Text)`
   margin-top: 2px;
 `;
 
-export const ParticipantCount = ({ maxCapacity, participatingCount }: ParticipantCountPropsType) => {
+function ParticipantCount({ maxCapacity, participatingCount }: ParticipantCountPropsType) {
   return (
     <ParticipantCountWrapper>
       <MiniLogo />
@@ -31,6 +31,6 @@ export const ParticipantCount = ({ maxCapacity, participatingCount }: Participan
       </MarginedText>
     </ParticipantCountWrapper>
   );
-};
+}
 
 export default ParticipantCount;
diff --git a/client/src/components/molecules/chatRoomPage/ParticipantItem.tsx b/client/src/components/molecules/chatRoomPage/ParticipantItem.tsx
@@ -25,7 +25,7 @@ const TextWrapper = styled.div`
   width: 152px;
 `;
 
-export const ParticipantItem = ({ imageLink, language, isMe, nickname }: ParticipantItemPropsType) => {
+function ParticipantItem({ imageLink, language, isMe, nickname }: ParticipantItemPropsType) {
   return (
     <ParticipantItemWrapper>
       <ProfileImage size="size-40" image={imageLink} isMe={isMe} />
@@ -37,6 +37,6 @@ export const ParticipantItem = ({ imageLink, language, isMe, nickname }: Partici
       <LanguageTag language={language} isMe={isMe} />
     </ParticipantItemWrapper>
   );
-};
+}
 
 export default ParticipantItem;
diff --git a/client/src/components/molecules/chatRoomPage/RoomSwitchModal.tsx b/client/src/components/molecules/chatRoomPage/RoomSwitchModal.tsx
@@ -40,12 +40,7 @@ const ModalContentWrapper = styled.div`
   height: inherit;
 `;
 
-export const RoomSwitchModal = ({
-  onClickConfirm,
-  onClickCancel,
-  onClickBackground,
-  onClickClose,
-}: RoomSwitchModalPropsType) => {
+function RoomSwitchModal({ onClickConfirm, onClickCancel, onClickBackground, onClickClose }: RoomSwitchModalPropsType) {
   const { formatMessage } = useIntl();
   return (
     <div>
@@ -65,6 +60,6 @@ export const RoomSwitchModal = ({
       </ChatModalBoxWrapper>
     </div>
   );
-};
+}
 
 export default RoomSwitchModal;
diff --git a/client/src/components/molecules/chatRoomPage/VoiceRecognitionModal.tsx b/client/src/components/molecules/chatRoomPage/VoiceRecognitionModal.tsx
@@ -8,21 +8,28 @@ export type VoiceRecognitionModalPropsType = {
   onClickBackground?: () => void;
 };
 
+const VoiceRecognitionModalWrapper = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const VoiceRecognitionWrapper = styled.div`
   position: absolute;
   left: 520px;
   top: 240px;
 `;
 
-export const VoiceRecognitionModal = ({ onClickBackground }: VoiceRecognitionModalPropsType) => {
+function VoiceRecognitionModal({ onClickBackground }: VoiceRecognitionModalPropsType) {
   return (
-    <div>
+    <VoiceRecognitionModalWrapper>
       <ChatModalBackground onClick={onClickBackground} />
       <VoiceRecognitionWrapper>
         <VoiceRecognition />
       </VoiceRecognitionWrapper>
-    </div>
+    </VoiceRecognitionModalWrapper>
   );
-};
+}
 
 export default VoiceRecognitionModal;
diff --git a/client/src/components/molecules/roomCreationPage/RoomCreation.tsx b/client/src/components/molecules/roomCreationPage/RoomCreation.tsx
@@ -45,14 +45,14 @@ const RightAlignedText = styled(Text)`
   margin-top: 4px;
 `;
 
-export const RoomCreation = ({
+function RoomCreation({
   TypedWordCount,
   MaxWordCount,
   privateSelected,
   InputOnChange,
   value,
   isPrivateOnClick,
-}: RoomCreationPropsType) => {
+}: RoomCreationPropsType) {
   const { formatMessage } = useIntl();
   return (
     <>
@@ -79,6 +79,6 @@ export const RoomCreation = ({
       </RoomCreationWrapper>
     </>
   );
-};
+}
 
 export default RoomCreation;
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ const StyledChatLogsBox = styled.div<ChatLogsBoxPropsType>` @@
       }
     `;
-    export function ChatLogsBox({ children }: ChatLogsBoxPropsType) {
+    function ChatLogsBox({ children }: ChatLogsBoxPropsType) {
       return <StyledChatLogsBox>{children}</StyledChatLogsBox>;
     }
@@ Expand Down @@