Merge pull request #288 from boostcampwm-2021/dev

Release 1.0.1
boostcampwm-2021 · Dec 2, 2021 · 9ff50b8 · 9ff50b8
2 parents 011e3f1 + 427c087
commit 9ff50b8
Show file tree

Hide file tree

Showing 35 changed files with 323 additions and 103 deletions.
diff --git a/client/src/apis/index.ts b/client/src/apis/index.ts
@@ -39,7 +39,7 @@ interface PatchUpdate {
 }
 
 export const patchUpdate = async (body: PatchUpdate): Promise<HTTPResponse<UserInfoType>> => {
-  const response = await fetchPatch<UserInfoType>(`/api/user/${body.originalName}`, { ...body });
+  const response = await fetchPatch<UserInfoType>(`/api/user`, { ...body });
   return response;
 };
 

diff --git a/client/src/components/ServiceInfo/index.tsx b/client/src/components/ServiceInfo/index.tsx
@@ -1,10 +1,12 @@
 import { useState, useEffect } from 'react';
-import { MainTitleLink, MainInfo } from './style';
+import { MainTitle, MainInfo } from './style';
 import { getVisitCount } from '@src/apis';
-import { PATH } from '@src/utils/constant';
+import { useToast } from '@hooks/useToast';
+import { TOAST_MESSAGE } from '@utils/constant';
 
 function ServiceInfo(): JSX.Element {
   const [visit, setVisit] = useState<number>();
+  const toast = useToast();
 
   const getServiceInfo = async () => {
     const { isOk, data } = await getVisitCount();
@@ -13,14 +15,19 @@ function ServiceInfo(): JSX.Element {
     }
   };
 
+  const onClickTitle = () => toast('easterEgg', TOAST_MESSAGE.introduceEasterEgg);
+  const onClickFire = () => toast('easterEgg', TOAST_MESSAGE.introduceFire);
+
   useEffect(() => {
     getServiceInfo();
   }, []);
 
   return (
     <>
-      <MainTitleLink to={PATH.main}>타닥타닥</MainTitleLink>
-      <MainInfo>🔥어제 모닥불을 피운 사용자는 {visit}명입니다🔥</MainInfo>
+      <MainTitle onClick={onClickTitle}>타닥타닥</MainTitle>
+      <MainInfo>
+        🔥어제 <span onClick={onClickFire}>모닥불</span>을 피운 사용자는 {visit}명입니다🔥
+      </MainInfo>
     </>
   );
 }

diff --git a/client/src/components/ServiceInfo/style.ts b/client/src/components/ServiceInfo/style.ts
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { PAGE_TITLE } from '@utils/styleConstant';
 
-export const MainTitleLink = styled(Link)`
+export const MainTitle = styled.div`
   font-size: ${PAGE_TITLE.mainFontSize};
   color: ${({ theme }) => theme.colors.bgGreen};
+  cursor: pointer;
 `;
 
 export const MainInfo = styled.div`

diff --git a/client/src/components/campfire/CamperList/index.tsx b/client/src/components/campfire/CamperList/index.tsx
@@ -20,8 +20,8 @@ const CamperList = ({ users, track }: CamperListProps): JSX.Element => {
           </CamperWrapper>
           {users.length > 0 &&
             users.map((user) => (
-              <CamperWrapper>
-                <CamperAvatar key={user.uid} audioTrack={user.audioTrack} />
+              <CamperWrapper key={user.uid}>
+                <CamperAvatar audioTrack={user.audioTrack} />
                 <CamperInfoDiv>{decodeURI(String(user.uid))}</CamperInfoDiv>
               </CamperWrapper>
             ))}

diff --git a/client/src/components/fireAnimation/Campfire/index.tsx b/client/src/components/fireAnimation/Campfire/index.tsx
@@ -1,6 +1,8 @@
 import './style.css';
 import styled from 'styled-components';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+import { useToast } from '@hooks/useToast';
+import { TOAST_MESSAGE } from '@utils/constant';
 
 const FireContainer = styled.div`
   width: 100vw;
@@ -14,9 +16,36 @@ interface FireAnimationProps {
 
 function FireAnimation({ setFireOn }: FireAnimationProps): JSX.Element {
   const [toggle, setToggle] = useState(true);
+  const clicks = useRef(0);
+  const toast = useToast();
+
+  const onClickFire = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast('easterEggRoom', TOAST_MESSAGE.introFireAnimation);
+  };
+  const onClickMoon = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast('easterEggRoom', TOAST_MESSAGE.introMoon);
+  };
+  const onClickSmoke = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast('easterEggRoom', TOAST_MESSAGE.introEasterEgg2);
+  };
+  const onClickSky = () => toast('easterEggRoom', TOAST_MESSAGE.introSky);
+
   const handleToggle = () => {
+    clicks.current += 1;
     setToggle((ps) => !ps);
     setFireOn(true);
+    if (clicks.current > 19) {
+      clicks.current = 1;
+      toast('easterEggRoom', TOAST_MESSAGE.playingWithFire2);
+      setTimeout(() => toast('easterEggRoom', '4초 뒤 폭파됩니다.'), 1000);
+      setTimeout(() => toast('easterEggRoom', '3초 뒤 폭파됩니다.'), 2000);
+      setTimeout(() => toast('easterEggRoom', '2초 뒤 폭파됩니다.'), 3000);
+      setTimeout(() => toast('easterEggRoom', '1초 뒤 폭파됩니다.'), 4000);
+      setTimeout(() => toast('easterEggRoom', '농담입니다ㅎ'), 6000);
+    } else if (clicks.current > 9) toast('easterEggRoom', TOAST_MESSAGE.playingWithFire);
   };
   return (
     <FireContainer className={toggle ? 'fire-container' : 'fire-container fire-off'}>
@@ -26,8 +55,8 @@ function FireAnimation({ setFireOn }: FireAnimationProps): JSX.Element {
           <div id="circle"></div>
         </div>
       </div>
-      <div className="section-center">
-        <div className="moon">
+      <div className="section-center" onClick={onClickSky}>
+        <div className="moon" onClick={onClickMoon}>
           <div></div>
           <div></div>
           <div></div>
@@ -41,15 +70,15 @@ function FireAnimation({ setFireOn }: FireAnimationProps): JSX.Element {
         <div className="star fith"></div>
         <div className="circle"></div>
         <div className="wood-circle"></div>
-        <div className="wood"></div>
+        <div className="wood" onClick={onClickFire}></div>
         <div className="tree-1"></div>
         <div className="tree-2"></div>
-        <div className="fire">
+        <div className="fire" onClick={onClickFire}>
           <span></span>
           <span></span>
           <span></span>
         </div>
-        <div className="smoke">
+        <div className="smoke" onClick={onClickSmoke}>
           <span className="s-0"></span>
           <span className="s-1"></span>
           <span className="s-2"></span>

diff --git a/client/src/components/fireAnimation/Introduction/index.tsx b/client/src/components/fireAnimation/Introduction/index.tsx
@@ -1,6 +1,8 @@
 import './style.css';
 import styled from 'styled-components';
 import React, { useState } from 'react';
+import { useToast } from '@hooks/useToast';
+import { TOAST_MESSAGE } from '@utils/constant';
 
 const FireContainer = styled.div`
   width: 100vw;
@@ -13,6 +15,14 @@ interface FireAnimationProps {
 
 function FireAnimation({ setFireOn }: FireAnimationProps): JSX.Element {
   const [toggle, setToggle] = useState(false);
+  const toast = useToast();
+
+  const onClickFire = () => toast('easterEgg', TOAST_MESSAGE.introEasterEgg);
+  const onClickWoods = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast('easterEgg', TOAST_MESSAGE.introEasterEgg2);
+  };
+
   const handleToggle = () => {
     setToggle((ps) => !ps);
     setFireOn(true);
@@ -25,7 +35,7 @@ function FireAnimation({ setFireOn }: FireAnimationProps): JSX.Element {
           <div id="circle"></div>
         </div>
       </div>
-      <div className="section-center">
+      <div className="section-center" onClick={onClickFire}>
         <div className="moon">
           <div></div>
           <div></div>
@@ -40,15 +50,15 @@ function FireAnimation({ setFireOn }: FireAnimationProps): JSX.Element {
         <div className="star fith"></div>
         <div className="circle"></div>
         <div className="wood-circle"></div>
-        <div className="wood"></div>
+        <div className="wood" onClick={onClickWoods}></div>
         <div className="tree-1"></div>
         <div className="tree-2"></div>
-        <div className="fire">
+        <div className="fire" onClick={onClickWoods}>
           <span></span>
           <span></span>
           <span></span>
         </div>
-        <div className="smoke">
+        <div className="smoke" onClick={onClickWoods}>
           <span className="s-0"></span>
           <span className="s-1"></span>
           <span className="s-2"></span>

diff --git a/client/src/components/form/Join/index.tsx b/client/src/components/form/Join/index.tsx
@@ -31,8 +31,10 @@ const JoinForm = ({ onClickModalToggle, setIsLogin }: JoinProps): JSX.Element =>
     if (!isPassword(password)) return toast('error', TOAST_MESSAGE.invalidFormatPwd);
     if (!devField) return toast('error', TOAST_MESSAGE.emptyDevField);
     const requestBody = { email, nickname, password, devField: +devField };
-    const { isOk } = await postJoin(requestBody);
-    if (!isOk) return toast('error', TOAST_MESSAGE.alreadyEmail);
+    const { isOk, errorData } = await postJoin(requestBody);
+    if (!isOk && errorData) {
+      return toast('error', errorData.message);
+    }
     setIsLogin(true);
     toast('success', TOAST_MESSAGE.joinSuccess);
   };

diff --git a/client/src/components/form/MakeRoom/index.tsx b/client/src/components/form/MakeRoom/index.tsx
@@ -38,6 +38,7 @@ const CreateForm = (): JSX.Element => {
   const onSubmitForm = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!roomTitle) return toast('error', TOAST_MESSAGE.emptyTitle);
+    if (!description) return toast('error', TOAST_MESSAGE.emptyDescription);
     if (!roomType) return toast('error', TOAST_MESSAGE.emptyRoomType);
     if (!maxHeadcount) return toast('error', TOAST_MESSAGE.emptyHeadcount);
     const requestBody = {

diff --git a/client/src/components/profile/ModifyInfoCard/index.tsx b/client/src/components/profile/ModifyInfoCard/index.tsx
@@ -6,7 +6,7 @@ import { useDevField } from '@contexts/devFieldContext';
 import { useToast } from '@hooks/useToast';
 import useInput from '@hooks/useInput';
 import { patchUpdate } from '@src/apis';
-import { TOAST_MESSAGE } from '@utils/constant';
+import { INPUT, TOAST_MESSAGE } from '@utils/constant';
 
 interface InfoProps {
   onnClickCancelBtn: React.MouseEventHandler<HTMLButtonElement>;
@@ -31,7 +31,8 @@ const ModifyInfoCard = ({ onnClickCancelBtn, setIsModify }: InfoProps): JSX.Elem
     }
     const originalName = user.nickname ?? '';
     const requestBody = { originalName, nickname, devField: devField === 0 ? user.devField?.id : devField };
-    const { data } = await patchUpdate(requestBody);
+    const { isOk, data } = await patchUpdate(requestBody);
+    if (!isOk) return toast('error', TOAST_MESSAGE.alreadyNickname);
     if (data) {
       logUserIn(data);
       setIsModify(false);
@@ -47,7 +48,7 @@ const ModifyInfoCard = ({ onnClickCancelBtn, setIsModify }: InfoProps): JSX.Elem
         </InfoSet>
         <InfoSet>
           <Legend>{`닉네임`}</Legend>
-          <Input type="text" value={nickname} onChange={onChangeNickname}></Input>
+          <Input type="text" value={nickname} onChange={onChangeNickname} maxLength={INPUT.nicknameMaxLen}></Input>
         </InfoSet>
         <InfoSet>
           <Legend>{`관심 분야`}</Legend>

diff --git a/client/src/components/room/RefreshButton/index.tsx b/client/src/components/room/RefreshButton/index.tsx
@@ -0,0 +1,22 @@
+import { IoRefresh } from 'react-icons/io5';
+import { ButtonWrapper } from './style';
+
+interface RefreshButtonProps {
+  page: React.MutableRefObject<number>;
+  search: string;
+  getRoomList: (searchStr: string) => Promise<void>;
+}
+
+function RefreshButton({ page, search, getRoomList }: RefreshButtonProps): JSX.Element {
+  const onClickButton = () => {
+    page.current = 1;
+    getRoomList(search);
+  };
+  return (
+    <ButtonWrapper onClick={onClickButton}>
+      <IoRefresh stroke="white" size="50" cursor="pointer" />
+    </ButtonWrapper>
+  );
+}
+
+export default RefreshButton;
diff --git a/client/src/components/room/RefreshButton/style.ts b/client/src/components/room/RefreshButton/style.ts
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const ButtonWrapper = styled.div`
+  width: ${({ theme }) => theme.buttonSizes.base};
+  cursor: pointer;
+  height: ${({ theme }) => theme.buttonSizes.base};
+  background-color: ${({ theme }) => theme.colors.blue2};
+  border-radius: 50%;
+  position: fixed;
+  ${({ theme }) => theme.flexCenter};
+  bottom: ${({ theme }) => theme.paddings.xl};
+  right: ${({ theme }) => theme.paddings.xl};
+  padding-bottom: ${({ theme }) => theme.paddings.sm};
+  &:hover {
+    background: ${({ theme }) => theme.colors.blue};
+  }
+  ${({ theme }) => theme.active}
+`;
diff --git a/client/src/components/room/RoomList/index.tsx b/client/src/components/room/RoomList/index.tsx
@@ -5,6 +5,7 @@ import Tab from '@components/common/Tab';
 import RoomCard from '@components/room/RoomCard';
 import SearchBar from '@components/SearchBar';
 import TabInfo from '@components/room/TabInfo';
+import RefreshButton from '@components/room/RefreshButton';
 import useDebounce from '@hooks/useDebounce';
 import useInput from '@hooks/useInput';
 import { getRoom } from '@src/apis';
@@ -94,6 +95,7 @@ function RoomList(): JSX.Element {
       </TabWrapper>
       <RoomListGrid ref={target}>{rooms && <ListGenerator list={rooms} renderItem={renderRoomList} />}</RoomListGrid>
       {isLoading && <Loader />}
+      <RefreshButton page={page} search={search} getRoomList={getRoomList} />
     </>
   );
 }

diff --git a/client/src/components/sideBar/Main/style.ts b/client/src/components/sideBar/Main/style.ts
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { DevFieldType } from '@src/types';
-import { USER_AVATAR } from '@utils/styleConstant';
+import { USER_AVATAR, SIDEBAR } from '@utils/styleConstant';
 
 export const MakeRoomBtn = styled.button`
   ${({ theme }) => css`
@@ -86,7 +86,9 @@ export const UserAvatar = styled.img`
   overflow: hidden;
 `;
 
-export const UserNickname = styled.span``;
+export const UserNickname = styled.div`
+  max-width: ${SIDEBAR.userNicknameMaxWidth};
+`;
 
 export const UserDevField = styled.div<{ bgColor: DevFieldType }>`
   ${({ theme, bgColor }) => css`

diff --git a/client/src/components/sideBar/ParticipantList/index.tsx b/client/src/components/sideBar/ParticipantList/index.tsx
@@ -5,6 +5,8 @@ import { Container, List, Participant, Avatar, Nickname, DevField, Position, Get
 import { useUser } from '@src/contexts/userContext';
 import { useTheme } from '@contexts/themeContext';
 import { ParticipantType } from '@src/types';
+import { useToast } from '@hooks/useToast';
+import { TOAST_MESSAGE } from '@utils/constant';
 
 interface ParticipantListProps<T> {
   participants: Record<string, T>;
@@ -15,6 +17,7 @@ interface ParticipantListProps<T> {
 const ParticipantList = ({ participants, hostNickname, uuid }: ParticipantListProps<ParticipantType>): JSX.Element => {
   const theme = useTheme();
   const user = useUser();
+  const toast = useToast();
 
   const onClickGetOutBtn = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -24,16 +27,20 @@ const ParticipantList = ({ participants, hostNickname, uuid }: ParticipantListPr
     },
     [uuid],
   );
+  const onClickHost = () => toast('easterEggRoom', TOAST_MESSAGE.introduceHost);
+  const onClickMe = (name: string) => {
+    if (name === user.nickname) toast('easterEggRoom', TOAST_MESSAGE.narcissism);
+  };
 
   return (
     <Container>
       <List>
         {Object.values(participants).map(({ nickname, field, img }) => (
           <Participant key={nickname}>
             <Avatar src={img} />
-            <Nickname>{nickname}</Nickname>
+            <Nickname onClick={() => onClickMe(nickname)}>{nickname}</Nickname>
             {field && <DevField bgColor={theme.tagColors[field.name]}>{field.name}</DevField>}
-            {hostNickname === nickname && <Position>호스트</Position>}
+            {hostNickname === nickname && <Position onClick={onClickHost}>호스트</Position>}
             {user.nickname === hostNickname && user.nickname !== nickname && (
               <GetOutBtn onClick={onClickGetOutBtn} data-nickname={nickname}>
                 추방