diff --git a/package-lock.json b/package-lock.json index e031f7c..b28a005 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "axios": "^1.6.8", "classnames": "^2.5.1", "date-fns": "^3.6.0", + "event-source-polyfill": "^1.0.31", "next": "^14.2.14", "react": "^18", "react-datepicker": "^6.9.0", @@ -31,6 +32,7 @@ "devDependencies": { "@svgr/webpack": "^8.1.0", "@tanstack/eslint-plugin-query": "^5.32.1", + "@types/event-source-polyfill": "^1.0.5", "@types/node": "^20", "@types/react": "^18.3.11", "@types/react-datepicker": "^6.2.0", @@ -2854,6 +2856,12 @@ "node": ">=10.13.0" } }, + "node_modules/@types/event-source-polyfill": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.5.tgz", + "integrity": "sha512-iaiDuDI2aIFft7XkcwMzDWLqo7LVDixd2sR6B4wxJut9xcp/Ev9bO4EFg4rm6S9QxATLBj5OPxdeocgmhjwKaw==", + "dev": true + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -4834,6 +4842,11 @@ "node": ">=0.10.0" } }, + "node_modules/event-source-polyfill": { + "version": "1.0.31", + "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz", + "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", diff --git a/package.json b/package.json index 95ad38a..e4f8b87 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "axios": "^1.6.8", "classnames": "^2.5.1", "date-fns": "^3.6.0", + "event-source-polyfill": "^1.0.31", "next": "^14.2.14", "react": "^18", "react-datepicker": "^6.9.0", @@ -32,6 +33,7 @@ "devDependencies": { "@svgr/webpack": "^8.1.0", "@tanstack/eslint-plugin-query": "^5.32.1", + "@types/event-source-polyfill": "^1.0.5", "@types/node": "^20", "@types/react": "^18.3.11", "@types/react-datepicker": "^6.2.0", diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 82dc9d0..39fca1a 100644 --- a/src/components/common/Header/Header.module.scss +++ b/src/components/common/Header/Header.module.scss @@ -1,6 +1,6 @@ .container { @include flexSort(null, center, center, null); - border-bottom: 0.1rem solid $gray; + border-bottom: 0.1rem solid #ece9f0; } .header { diff --git a/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.module.scss b/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.module.scss index 0fd34b6..75774e1 100644 --- a/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.module.scss +++ b/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.module.scss @@ -10,7 +10,7 @@ } .alarmContainer { - background: #f9fafb; + background: #ffffff; position: absolute; width: 35rem; height: 37rem; @@ -19,8 +19,8 @@ right: -7rem; border-radius: 2rem; animation: fadeInDropdown 0.5s ease-out forwards; - padding: 2rem; - @include flexSort(column, null, null, 2rem); + box-shadow: 2px 3px 10px rgb(0, 0, 0, 0.6); + @include flexSort(column, null, null, null); z-index: 2; &::-webkit-scrollbar { @@ -29,51 +29,79 @@ } .titleBox { + @include flexSort(column, null, null, 1rem); + border-bottom: solid 0.05rem black; + padding: 1.5rem 2rem 1rem 1.7rem; +} + +.titleBoxRow { @include flexSort(null, space-between, center, null); } +.isReadedToggle { + @include flexSort(null, space-between, center, 2rem); + @include nsnFont(1.3rem, 500, normal); +} + +.isReadedToggle button.off { + color: #8D8989; +} + .title { - @include gmarketFont(1.7rem, 400, normal); + @include nsnFont(1.7rem, 500, normal); } .readAllBtn { - @include gmarketFont(1.3rem, 400, normal); + @include nsnFont(1.3rem, 600, normal); + color: #4885FE; &:hover { text-decoration: underline; text-underline-position: under; - text-decoration-thickness: 0.2rem; - } -} - -.totalReadBtn { - @include gmarketFont(1.3rem, 400, normal); - - &:hover { - text-decoration: solid underline black 0.2rem; + text-decoration-thickness: 0.1rem; } } .alarmBox { - @include flexSort(column, null, null, 1rem); + @include flexSort(column, null, null, null); } .alarm { - background: #e0e4ff; padding: 1rem; color: black; - @include gmarketFont(1.3rem, 400, normal); + @include font(1.5rem, 400, normal); @include line-clamp(2); &.isRead { - background-color: white; + background-color: #EDEDED; + color: #afafaf; + } +} + +.alarmTag{ + display: inline-block; + padding: 0.3rem 1.2rem; + margin-right: 1rem; + border-radius: 0.4rem; + @include font(1.3rem, 500, normal); + &.comment { + background-color: #EBFAE8; + color: #45B555; } + &.chat { + background-color: #FFF7DE; + color: #FF8E1E; + } + } .fetchButton { text-align: center; padding: 1rem 2rem; - border: 0.1rem solid $gray; - border-radius: 3rem; - @include font(1.6rem, 500, normal); + @include font(1.6rem, 400, normal); + &:hover { + text-decoration: underline; + text-underline-position: under; + text-decoration-thickness: 0.1rem; + } } diff --git a/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.tsx b/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.tsx index 88bc5a9..1f20320 100644 --- a/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.tsx +++ b/src/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.tsx @@ -1,8 +1,12 @@ +import { useState } from "react"; + import classNames from "classnames/bind"; import Link from "next/link"; +import { useRouter } from "next/router"; import styles from "@/components/common/Header/User/Login/AlarmDropDown/AlarmDropDown.module.scss"; +import AlarmFilter from "@/components/common/Header/User/Login/AlarmDropDown/AlarmFilter"; import Loader from "@/components/common/Loader/Loader"; import { useNotification } from "../../../hooks/useNotification"; @@ -16,21 +20,76 @@ export interface AlarmDropDownProps { content: string; id: string; isRead: boolean; + type: string; }; } +interface DropdownOption { + label: string; + value: string; +} + export default function AlarmDropDown({ sseNotifications }: AlarmDropDownProps) { - const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useNotification(sseNotifications); + const router = useRouter(); + const params = new URLSearchParams(router.query as any); + + const isRead = params.get("is-read") ?? ""; + const type = params.get("type") ?? ""; + + const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useNotification(sseNotifications, type, isRead); const { readNotification } = useReadNotification(); const { readAllNotifications } = useReadAllNotifications(); + const updateQueryParam = (key: string, value: string) => { + const newParams = new URLSearchParams(router.query as any); + if (value === "") { + newParams.delete(key); + } else { + newParams.set(key, value); + } + router.replace({ query: newParams.toString() }, undefined, { shallow: true }); + }; + + const handleShowAll = () => { + updateQueryParam("is-read", ""); + }; + + const handleShowUnread = () => { + updateQueryParam("is-read", "false"); + }; + + const [selectedOption, setSelectedOption] = useState({label: "전체", value: ""}); + + const handleSelectOption = (option: DropdownOption) => { + setSelectedOption(option); + updateQueryParam("type", option.value); + }; + return (
-
알림
- +
+
알림
+ +
+
+
+ + +
+ +
{data?.map((notification, index) => ( @@ -40,6 +99,11 @@ export default function AlarmDropDown({ sseNotifications }: AlarmDropDownProps) className={cn("alarm", { isRead: notification.isRead === true })} onClick={() => readNotification(notification.id)} > +
+ {notification.type === "COMMENT" ? "댓글" : "채팅"}
{notification?.content} ))} diff --git a/src/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.module.scss b/src/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.module.scss new file mode 100644 index 0000000..618f7e7 --- /dev/null +++ b/src/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.module.scss @@ -0,0 +1,33 @@ +.filterBox { + position: relative; + @include flexSort(column, null, center, null); +} + +.openOptionBtn { + @include nsnFont(1.3rem, 400, normal); + padding: 0.5rem 0.9rem; + border: solid 0.03rem #cccccc; + border-radius: 0.7rem; + +} + +.optionBox { + position: absolute; + @include flexSort(column, null, center, 0.5rem); + width: 100%; + top: 3rem; + background-color: #ffffff; + border: solid 0.03rem #cccccc; + border-radius: 0.7em; +} + +.option { + @include nsnFont(1.3rem, 400, normal); + padding: 0.5rem 0.9rem; + + &:hover { + text-decoration: underline; + text-underline-position: under; + text-decoration-thickness: 0.1rem; + } +} \ No newline at end of file diff --git a/src/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.tsx b/src/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.tsx new file mode 100644 index 0000000..fc0bad0 --- /dev/null +++ b/src/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.tsx @@ -0,0 +1,47 @@ +import { useState } from "react"; + +import classNames from "classnames/bind"; + +import styles from "@/components/common/Header/User/Login/AlarmDropDown/AlarmFilter.module.scss"; + +import { Categories } from "./constants"; + +const cn = classNames.bind(styles); + +interface DropdownOption { + label: string; + value: string; +}; + +interface AlarmFilterProps { + selectedOption: DropdownOption | null; + onSelectOption: (option: DropdownOption) => void; +} + +export default function AlarmFilter({ selectedOption, onSelectOption }: AlarmFilterProps) { + const [isOpen, setIsOpen] = useState(false); + + const handleToggleDropdown = () => { + setIsOpen((prev) => !prev); + }; + return ( +
+ + {isOpen && ( +
+ {Categories.map((option) => ( + + ))} +
+ )} +
+ ); +} diff --git a/src/components/common/Header/User/Login/AlarmDropDown/constants/index.ts b/src/components/common/Header/User/Login/AlarmDropDown/constants/index.ts new file mode 100644 index 0000000..6415b74 --- /dev/null +++ b/src/components/common/Header/User/Login/AlarmDropDown/constants/index.ts @@ -0,0 +1,5 @@ +export const Categories = [ + { label: "전체", value: "" }, + { label: "댓글", value: "COMMENT" }, + { label: "채팅", value: "CHAT" }, + ]; diff --git a/src/components/common/Header/User/Login/Login.module.scss b/src/components/common/Header/User/Login/Login.module.scss index 42598ca..79c4a3a 100644 --- a/src/components/common/Header/User/Login/Login.module.scss +++ b/src/components/common/Header/User/Login/Login.module.scss @@ -1,5 +1,5 @@ .container { - @include flexSort(null, null, center, 3rem); + @include flexSort(null, null, center, 5rem); .nameBox { @include flexSort(null, null, center, 1rem); @@ -11,7 +11,7 @@ } .iconBox { - @include flexSort(null, null, center, 1rem); + @include flexSort(null, null, center, 3rem); } } @@ -34,3 +34,17 @@ @include font(1rem, 400, normal); padding: 0.2rem 0.5rem; } + +.alarmBox{ + @include flexSort(null, null, center, null); +} + +.unreadCount{ + z-index: 3; + @include nsnFont(0.8rem, 700, normal); + margin-top: 1rem; + padding: 0.6rem 0.7rem; + color: white; + background-color: rgb(226, 2, 2); + border-radius: 1.5rem; +} diff --git a/src/components/common/Header/User/Login/Login.tsx b/src/components/common/Header/User/Login/Login.tsx index a2f7795..3c8af5a 100644 --- a/src/components/common/Header/User/Login/Login.tsx +++ b/src/components/common/Header/User/Login/Login.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef, useState } from "react"; import classNames from "classnames/bind"; +import { EventSourcePolyfill } from "event-source-polyfill"; import { useRouter } from "next/router"; @@ -12,6 +13,7 @@ import ArrowDown from "@/icons/arrow_down.svg"; import Chat from "@/icons/chattig.svg"; import AlarmDropDown from "./AlarmDropDown/AlarmDropDown"; +import { useNotification } from "../../hooks/useNotification"; import DropDown from "../DropDown/DropDown"; const cn = classNames.bind(styles); @@ -25,9 +27,11 @@ interface alarmType { content: string; id: string; isRead: boolean; + type: string; } export default function Login({ name }: LoginProps) { + const accessToken = localStorage.getItem("accessToken"); const profileDropdownRef = useRef(null); const alarmDropdownRef = useRef(null); const [isProfileOpen, setIsProfileOpen] = useDetectClose(profileDropdownRef, false); @@ -50,57 +54,75 @@ export default function Login({ name }: LoginProps) { router.push(ROUTE.CHAT); }; - // useEffect(() => { - // let eventSource: EventSource; - - // const connectSSE = () => { - // if (retryCount >= 3) { - // setError("연결 시도 횟수를 초과했습니다."); - // return; - // } - - // eventSource = new EventSource(`${process.env.NEXT_PUBLIC_BASE_URL}api/sse/connect`, { - // withCredentials: true, - // }); - - // eventSource.addEventListener("notification", (event) => { - // const newNotification = event.data; - // let parsedData; - - // try { - // parsedData = JSON.parse(newNotification); - // } catch (error) { - // return; - // } - - // setNotifications(parsedData); - // }); - - // eventSource.onerror = (error) => { - // console.error("SSE error:", error); - // setError("연결에 실패했습니다. 재연결 중..."); - // setIsConnected(false); - // eventSource.close(); - // setRetryCount((prevCount) => prevCount + 1); - // setTimeout(connectSSE, 5000); - // }; - - // eventSource.onopen = () => { - // setError(null); - // setIsConnected(true); - // setRetryCount(0); - // console.log("SSE 연결 성공"); - // }; - // }; - - // connectSSE(); - - // return () => { - // if (eventSource) { - // eventSource.close(); - // } - // }; - // }, [userInfo, retryCount]); + useEffect(() => { + if (isConnected||!accessToken) return; + + let eventSource: EventSourcePolyfill; + + const connectSSE = () => { + if (retryCount >= 3) { + setError("연결 시도 횟수를 초과했습니다."); + return; + } + + eventSource = new EventSourcePolyfill(`${process.env.NEXT_PUBLIC_BASE_URL}api/sse/connect`, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + + eventSource.addEventListener("notification", (event) => { + const newNotification = (event as any).data; + + let parsedData; + + try { + parsedData = JSON.parse(newNotification); + } catch (error) { + return; + } + + setNotifications(parsedData); + }); + + eventSource.onopen = () => { + setError(null); + setIsConnected(true); + setRetryCount(0); + console.log("SSE 연결 성공"); + }; + + eventSource.onerror = (error) => { + console.error("SSE error:", error); + setError("연결에 실패했습니다. 재연결 중..."); + setIsConnected(false); + eventSource.close(); + + setRetryCount((prevCount) => { + const newCount = prevCount + 1; + if (newCount < 3) { + setTimeout(connectSSE, 5000); + } else { + console.log("newCount :", newCount) + setError("연결 시도 횟수를 초과했습니다."); + } + return newCount; + }); + }; + + }; + + connectSSE(); + + return; + + }, [isConnected, accessToken, retryCount]); + + const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useNotification(notifications as alarmType, "", ""); + + const unreadCount = data?.filter((notification) => !notification.isRead).length || 0; + + console.log(data); return (
@@ -111,8 +133,11 @@ export default function Login({ name }: LoginProps) {
- - {isAlarmOpen && } +
+ + {unreadCount} + {isAlarmOpen && } +
diff --git a/src/components/common/Header/apis/getNotifications.ts b/src/components/common/Header/apis/getNotifications.ts index e6d901d..3ff5440 100644 --- a/src/components/common/Header/apis/getNotifications.ts +++ b/src/components/common/Header/apis/getNotifications.ts @@ -1,11 +1,11 @@ import { axiosInstance } from "@/apis/axiosInstance"; -export default async function getNotifications(limit: number, cursor: number) { +export default async function getNotifications(limit: number, cursor: number, type: string, isRead: string) { if (cursor !== 0) { - const { data } = await axiosInstance.get(`notifications?limit=${limit}&cursor=${cursor}`); + const { data } = await axiosInstance.get(`notifications?limit=${limit}&cursor=${cursor}&type=${type}&is-read=${isRead}`); return data.data; } else { - const { data } = await axiosInstance.get(`notifications?limit=${limit}`); + const { data } = await axiosInstance.get(`notifications?limit=${limit}&type=${type}&is-read=${isRead}`); return data.data; } } diff --git a/src/components/common/Header/hooks/useNotification.ts b/src/components/common/Header/hooks/useNotification.ts index 054fce4..aabe88d 100644 --- a/src/components/common/Header/hooks/useNotification.ts +++ b/src/components/common/Header/hooks/useNotification.ts @@ -8,9 +8,11 @@ interface NotificationsResponse { content: AlarmDropDownProps["sseNotifications"][]; cursor: number; nextPage: boolean; + type: string; + isRead: boolean; } -export const useNotification = (sseNotifications: AlarmDropDownProps["sseNotifications"]) => { +export const useNotification = (sseNotifications: AlarmDropDownProps["sseNotifications"],type:string, isRead:string) => { const { data: prevNotifications, fetchNextPage, @@ -19,8 +21,8 @@ export const useNotification = (sseNotifications: AlarmDropDownProps["sseNotific status, refetch, } = useInfiniteQuery({ - queryKey: ["notifications"], - queryFn: ({ pageParam }) => getNotifications(6, pageParam as number), + queryKey: ["notifications",type, isRead], + queryFn: ({ pageParam }) => getNotifications(6, pageParam as number, type , isRead), initialPageParam: 0, getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => lastPage.nextPage ? lastPage.cursor : undefined, diff --git a/src/components/common/Post/Post.module.scss b/src/components/common/Post/Post.module.scss index 8979f0c..8fd0e83 100644 --- a/src/components/common/Post/Post.module.scss +++ b/src/components/common/Post/Post.module.scss @@ -71,8 +71,8 @@ @include font(2rem, 500, normal); @include line-clamp(2); border-bottom: 0.1rem solid #ccc; - height: 6.36rem; - + //height: 6.36rem; + padding-bottom: 2rem; @include smallDesktop { @include font(1.8rem, 500, normal); } diff --git a/src/components/common/Post/Post.tsx b/src/components/common/Post/Post.tsx index aae3371..2f246b0 100644 --- a/src/components/common/Post/Post.tsx +++ b/src/components/common/Post/Post.tsx @@ -29,21 +29,27 @@ export default function Post({ data }: PostProps) { const { postType, title, - startDate, - endDate, - matchingDoneCount, - headcount, - assistanceType, district, - assistanceStartTime, - assistanceEndTime, - scheduleType, id, postStatus, disabilityType, isLiked, + schedule, + assistance, } = data; + const { + startDate, + endDate, + scheduleType, + } = schedule; + + const { + assistanceStartTime, + assistanceEndTime, + assistanceType, + } = assistance; + const { mutate } = useMutation({ mutationFn: () => postLikes(id), }); @@ -100,10 +106,6 @@ export default function Post({ data }: PostProps) {

{`${scheduleType}, ${assistanceStartTime} ~ ${assistanceEndTime}`}

-
- -

{`${matchingDoneCount}명 / ${headcount}명`}

-
diff --git a/src/components/common/RootLayout/RootLayout.tsx b/src/components/common/RootLayout/RootLayout.tsx index d6ae142..e2c7f4d 100644 --- a/src/components/common/RootLayout/RootLayout.tsx +++ b/src/components/common/RootLayout/RootLayout.tsx @@ -19,7 +19,7 @@ export default function RootLayout({ children, isMainPage }: RootLayoutProps) {
{children}
-
); } diff --git a/src/components/page-layout/HomeLayout/apis/getGiverPost.ts b/src/components/page-layout/HomeLayout/apis/getGiverPost.ts index d2002fe..f9519f7 100644 --- a/src/components/page-layout/HomeLayout/apis/getGiverPost.ts +++ b/src/components/page-layout/HomeLayout/apis/getGiverPost.ts @@ -1,8 +1,24 @@ +import { AxiosRequestConfig } from "axios"; + import { axiosInstance } from "@/apis/axiosInstance"; export default async function getGiverPost() { + const accessToken = localStorage.getItem("accessToken"); + + const config: AxiosRequestConfig = { + headers: {}, + }; + + if (accessToken) { + config.headers = { + ...config.headers, + Authorization: `Bearer ${accessToken}`, + }; + } + const { data } = await axiosInstance.get( "posts?post-type=GIVER&page=1&size=4&sorted=modifiedAt,DESC&post-status=RECRUITING", + config, ); return data.data.content; } diff --git a/src/components/page-layout/HomeLayout/apis/getTakerPost.ts b/src/components/page-layout/HomeLayout/apis/getTakerPost.ts index 228c16a..76c29fa 100644 --- a/src/components/page-layout/HomeLayout/apis/getTakerPost.ts +++ b/src/components/page-layout/HomeLayout/apis/getTakerPost.ts @@ -1,8 +1,24 @@ +import { AxiosRequestConfig } from "axios"; + import { axiosInstance } from "@/apis/axiosInstance"; export default async function getTakerPost() { + const accessToken = localStorage.getItem("accessToken"); + + const config: AxiosRequestConfig = { + headers: {}, + }; + + if (accessToken) { + config.headers = { + ...config.headers, + Authorization: `Bearer ${accessToken}`, + }; + } + const { data } = await axiosInstance.get( "posts?post-type=TAKER&page=1&size=4&sorted=modifiedAt,DESC&post-status=RECRUITING", + config, ); return data.data.content; } diff --git a/src/components/page-layout/HomeLayout/types/index.ts b/src/components/page-layout/HomeLayout/types/index.ts index 2035beb..40ec235 100644 --- a/src/components/page-layout/HomeLayout/types/index.ts +++ b/src/components/page-layout/HomeLayout/types/index.ts @@ -1,21 +1,24 @@ export default interface PostData { - assistanceType: string; + assistance: { + assistanceType: string; + assistanceStartTime: string; + assistanceEndTime: string; + } + + schedule: { + scheduleType: string; + startDate: string; + endDate: string; + } content: string; createdAt: Date; district: string; - assistanceEndTime: string; id: number; modifiedAt: Date; postStatus: string; postType: string; scheduleDetails: string; - scheduleType: string; - assistanceStartTime: string; title: string; - startDate: string; - endDate: string; - matchingDoneCount: number; - headcount: number; disabilityType: string; isLiked: boolean; author: { diff --git a/src/components/page-layout/helpMeLayout/components/helpMeLayout.module.scss b/src/components/page-layout/helpMeLayout/components/helpMeLayout.module.scss index 259edaa..530ae93 100644 --- a/src/components/page-layout/helpMeLayout/components/helpMeLayout.module.scss +++ b/src/components/page-layout/helpMeLayout/components/helpMeLayout.module.scss @@ -43,10 +43,10 @@ } .button:hover { - color: #6562e2; - border-color: #6562e2; + color: $taker; + border-color: $taker; } .button:hover .arrow { - fill: #6562e2; + fill: $taker; } diff --git a/src/components/page-layout/helpYouLayout/components/helpYouLayout.module.scss b/src/components/page-layout/helpYouLayout/components/helpYouLayout.module.scss index 7454418..b25798b 100644 --- a/src/components/page-layout/helpYouLayout/components/helpYouLayout.module.scss +++ b/src/components/page-layout/helpYouLayout/components/helpYouLayout.module.scss @@ -44,10 +44,10 @@ } .button:hover { - color: #6db3cb; - border-color: #6db3cb; + color: $giver; + border-color: $giver; } .button:hover .arrow { - fill: #6db3cb; + fill: $giver; } diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 34fa223..2ae3916 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -13,6 +13,6 @@ $white: #fff; $kakao: #fee500; $taker: #6562e2; -$giver: #6db3cb; +$giver: #4885FE; $skeleton: #dddbdd;