diff --git a/client/index.html b/client/index.html index 3f22598..6c8e957 100644 --- a/client/index.html +++ b/client/index.html @@ -5,15 +5,7 @@ - - - - - - - + runwithme diff --git a/client/package-lock.json b/client/package-lock.json index f8bb76a..ad47d15 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -31,6 +31,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" @@ -24911,6 +24912,12 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jquery": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz", + "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==", + "peer": true + }, "node_modules/js-sdsl": { "version": "4.1.5", "dev": true, @@ -31046,6 +31053,14 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/snapdragon": { "version": "0.8.2", "dev": true, @@ -52071,6 +52086,12 @@ } } }, + "jquery": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz", + "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==", + "peer": true + }, "js-sdsl": { "version": "4.1.5", "dev": true @@ -56029,6 +56050,12 @@ "version": "3.0.0", "dev": true }, + "slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "requires": {} + }, "snapdragon": { "version": "0.8.2", "dev": true, diff --git a/client/package.json b/client/package.json index 4612c32..f44c507 100644 --- a/client/package.json +++ b/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" diff --git a/client/public/favicon.ico b/client/public/favicon.ico index a11777c..082741f 100644 Binary files a/client/public/favicon.ico and b/client/public/favicon.ico differ diff --git a/client/public/logo192.png b/client/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/client/public/logo192.png and /dev/null differ diff --git a/client/public/logo512.png b/client/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/client/public/logo512.png and /dev/null differ diff --git a/client/src/App.css b/client/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/client/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/client/src/assets/icons/home_icon.svg b/client/src/assets/icons/home_icon.svg new file mode 100644 index 0000000..9300cbf --- /dev/null +++ b/client/src/assets/icons/home_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/icons/index.ts b/client/src/assets/icons/index.ts index 27c606e..94b49f7 100644 --- a/client/src/assets/icons/index.ts +++ b/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, }; diff --git a/client/src/components/Button/Button.styles.ts b/client/src/components/Button/Button.styles.ts index c09e070..9474f8f 100644 --- a/client/src/components/Button/Button.styles.ts +++ b/client/src/components/Button/Button.styles.ts @@ -15,4 +15,5 @@ export const Button = styled.button` width: ${({ width }) => width}; ${({ color }) => fontLarge(color, 500)} background-color: ${({ backgroundColor }) => backgroundColor}; + position: relative; `; diff --git a/client/src/components/Carousel/Carousel.tsx b/client/src/components/Carousel/Carousel.tsx index 2808350..ad25173 100644 --- a/client/src/components/Carousel/Carousel.tsx +++ b/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; } } } diff --git a/client/src/components/Header/Header.tsx b/client/src/components/Header/Header.tsx index 13e34ba..c8bd595 100644 --- a/client/src/components/Header/Header.tsx +++ b/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 ( {isMain ? ( -
+
+ +
) : ( - ARROW_LEFT_ICON navigate(-1)} /> +
+ ARROW_LEFT_ICON navigate(-1)} + /> + +
)}

{text}

- USER_CIRCLE_ICON navigate(userInfo.accessToken ? "/me" : "/login")} - /> +
+ {!isMain && ( + HOME_ICON navigate("/")} /> + )} + USER_CIRCLE_ICON navigate(userInfo.accessToken ? "/me" : "/login")} + /> +
); }; diff --git a/client/src/components/RecruitContent/RecruitContent.tsx b/client/src/components/RecruitContent/RecruitContent.tsx index ee08dc0..cebfc8a 100644 --- a/client/src/components/RecruitContent/RecruitContent.tsx +++ b/client/src/components/RecruitContent/RecruitContent.tsx @@ -50,7 +50,7 @@ const RecruitContent = ({ onClick, data }: RecruitContentProps) => {
- {data.isParticipating && } + {data.isParticipating && } diff --git a/client/src/components/commons/ChatButton/ChatButton.tsx b/client/src/components/commons/ChatButton/ChatButton.tsx index 80f9f4c..2aaf339 100644 --- a/client/src/components/commons/ChatButton/ChatButton.tsx +++ b/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 ( ); }; diff --git a/client/src/react-app-env.d.ts b/client/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5..0000000 --- a/client/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/client/src/styles/color.ts b/client/src/styles/color.ts index 1db6edd..64d2a1e 100644 --- a/client/src/styles/color.ts +++ b/client/src/styles/color.ts @@ -8,4 +8,5 @@ export enum COLOR { ORANGE = "#FFB800", F1F4F7 = "#F1F4F7", CHAT_BUTTON = "#4A668B", + DOT = "#007aff", } diff --git a/client/src/types/RecruitDetail.ts b/client/src/types/RecruitDetail.ts index 932412c..d8510b9 100644 --- a/client/src/types/RecruitDetail.ts +++ b/client/src/types/RecruitDetail.ts @@ -13,4 +13,5 @@ export interface RecruitDetail { userId: string; isParticipating: boolean; isAuthor: boolean; + waiting?: number; }