Merge pull request #242 from boostcampwm-2022/refactor/frontend-refac…

…toring

Refactor/frontend refactoring

client/index.html

@@ -5,15 +5,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" type="text/css" charset="UTF-8"
-        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
-    <link rel="stylesheet" type="text/css"
-        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
-
+    <meta name="description" content="나만의 코스로 함께 달리는 러닝 커뮤니티, RunWithMe를 시작해보세요!" />
     <title>runwithme</title>
 </head>
 

client/package.json

@@ -26,6 +26,7 @@
     "react-slick": "^0.29.0",
     "react-spinners": "^0.13.7",
     "recoil": "^0.7.6",
+    "slick-carousel": "^1.8.1",
     "socket.io-client": "^4.5.4",
     "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4"

client/src/assets/icons/index.ts

@@ -19,6 +19,7 @@ import MY_POSITION_ICON from "./my_position_icon.svg";
 import SEND_ICON from "./send_icon.svg";
 import STRAIGHT_ICON from "./straight_icon.svg";
 import CURVE_ICON from "./curve_icon.svg";
+import HOME_ICON from "./home_icon.svg";
 
 export {
     USER_CIRCLE_ICON,
@@ -42,4 +43,5 @@ export {
     SEND_ICON,
     STRAIGHT_ICON,
     CURVE_ICON,
+    HOME_ICON,
 };

client/src/components/Button/Button.styles.ts

@@ -15,4 +15,5 @@ export const Button = styled.button<ButtonProps>`
     width: ${({ width }) => width};
     ${({ color }) => fontLarge(color, 500)}
     background-color: ${({ backgroundColor }) => backgroundColor};
+    position: relative;
 `;

client/src/components/Carousel/Carousel.tsx

@@ -2,6 +2,8 @@ import { ReactNode } from "react";
 import Slider, { Settings } from "react-slick";
 import styled from "styled-components";
 import { COLOR } from "styles/color";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
 
 interface CarouselProps {
     children: ReactNode;
@@ -16,7 +18,7 @@ export const Container = styled.div`
         .slick-active {
             button {
                 ::before {
-                    color: ${COLOR.ORANGE} !important;
+                    color: ${COLOR.DOT} !important;
                 }
             }
         }

client/src/components/Header/Header.tsx

@@ -1,13 +1,14 @@
 import styled from "styled-components";
-import { flexRowSpaceBetween } from "styles/flex";
-import { ARROW_LEFT_ICON, USER_CIRCLE_ICON } from "#assets/icons";
+import { flexRow } from "styles/flex";
+import { ARROW_LEFT_ICON, HOME_ICON, USER_CIRCLE_ICON } from "#assets/icons";
 import { useNavigate } from "react-router-dom";
 import { COLOR } from "styles/color";
 import { fontLarge } from "styles/font";
 import { useRecoilValue } from "recoil";
 import { userState } from "#atoms/userState";
+import { ALIGN_ITEMS, JUSTIFY_CONTENT } from "#types/flexOptions";
 const HeaderWrapper = styled.div`
-    ${flexRowSpaceBetween};
+    ${flexRow({ justifyContent: JUSTIFY_CONTENT.SPACE_BETWEEN })};
     padding: 16px 8px;
     border-bottom: ${`1px solid ${COLOR.BABY_BLUE}`};
     p {
@@ -18,11 +19,19 @@ const HeaderWrapper = styled.div`
         height: 24px;
     }
     div {
-        width: 24px;
-        height: 24px;
+        width: 56px;
+        ${flexRow({ alignItems: ALIGN_ITEMS.CENTER, justifyContent: JUSTIFY_CONTENT.FLEX_END })};
+        > * {
+            margin: 0 2px;
+        }
     }
 `;
 
+const Dummy = styled.div`
+    width: 24px;
+    height: 24px;
+`;
+
 interface HeaderProps {
     text: string;
     isMain?: boolean;
@@ -34,19 +43,35 @@ const Header = ({ text, isMain = false }: HeaderProps) => {
     return (
         <HeaderWrapper>
             {isMain ? (
-                <div />
+                <div>
+                    <Dummy />
+                </div>
             ) : (
-                <img width="14" height="14" alt="ARROW_LEFT_ICON" src={ARROW_LEFT_ICON} onClick={() => navigate(-1)} />
+                <div>
+                    <img
+                        width="14"
+                        height="14"
+                        alt="ARROW_LEFT_ICON"
+                        src={ARROW_LEFT_ICON}
+                        onClick={() => navigate(-1)}
+                    />
+                    <Dummy />
+                </div>
             )}
 
             <p>{text}</p>
-            <img
-                width="14"
-                height="14"
-                alt="USER_CIRCLE_ICON"
-                src={USER_CIRCLE_ICON}
-                onClick={() => navigate(userInfo.accessToken ? "/me" : "/login")}
-            />
+            <div>
+                {!isMain && (
+                    <img width="14" height="14" alt="HOME_ICON" src={HOME_ICON} onClick={() => navigate("/")} />
+                )}
+                <img
+                    width="14"
+                    height="14"
+                    alt="USER_CIRCLE_ICON"
+                    src={USER_CIRCLE_ICON}
+                    onClick={() => navigate(userInfo.accessToken ? "/me" : "/login")}
+                />
+            </div>
         </HeaderWrapper>
     );
 };

client/src/components/RecruitContent/RecruitContent.tsx

@@ -50,7 +50,7 @@ const RecruitContent = ({ onClick, data }: RecruitContentProps) => {
                 </div>
                 <ButtonWrapper>
                     <Button onClick={onClick}>{getButtonText(data)}</Button>
-                    {data.isParticipating && <ChatButton />}
+                    {data.isParticipating && <ChatButton waiting={data.waiting} />}
                 </ButtonWrapper>
             </Content>
         </>

client/src/components/commons/ChatButton/ChatButton.tsx

@@ -1,13 +1,36 @@
 import Button from "#components/Button/Button";
+import { ALIGN_ITEMS, JUSTIFY_CONTENT } from "#types/flexOptions";
 import { useNavigate, useParams } from "react-router-dom";
+import styled from "styled-components";
 import { COLOR } from "styles/color";
+import { flexRow } from "styles/flex";
 
-const ChatButton = () => {
+interface ChatButtonProps {
+    waiting?: number;
+}
+
+const Badge = styled.span`
+    ${flexRow({ alignItems: ALIGN_ITEMS.CENTER, justifyContent: JUSTIFY_CONTENT.CENTER })};
+    border-radius: 50%;
+    position: absolute;
+    right: -0.6rem;
+    top: -0.6rem;
+    width: 2rem;
+    height: 2rem;
+    background-color: red;
+    color: white !important;
+    font-weight: 900;
+    font-size: 1.2rem;
+`;
+
+const ChatButton = ({ waiting }: ChatButtonProps) => {
     const { id } = useParams();
     const navigate = useNavigate();
+
     return (
         <Button backgroundColor={COLOR.CHAT_BUTTON} onClick={() => navigate(`/recruit/${id}/chat`)}>
             채팅
+            {!!waiting && <Badge>{waiting > 9 ? "9+" : waiting}</Badge>}
         </Button>
     );
 };

client/src/styles/color.ts

@@ -8,4 +8,5 @@ export enum COLOR {
     ORANGE = "#FFB800",
     F1F4F7 = "#F1F4F7",
     CHAT_BUTTON = "#4A668B",
+    DOT = "#007aff",
 }

client/src/types/RecruitDetail.ts

@@ -13,4 +13,5 @@ export interface RecruitDetail {
     userId: string;
     isParticipating: boolean;
     isAuthor: boolean;
+    waiting?: number;
 }