diff --git a/frontend/src/assets/images/icons/kakaotalk_sharing_btn_small.png b/frontend/src/assets/images/icons/kakaotalk_sharing_btn_small.png deleted file mode 100644 index 09211bfea..000000000 Binary files a/frontend/src/assets/images/icons/kakaotalk_sharing_btn_small.png and /dev/null differ diff --git a/frontend/src/assets/images/icons/share_filled_icon.svg b/frontend/src/assets/images/icons/share_filled_icon.svg deleted file mode 100644 index 8dfa0ff3f..000000000 --- a/frontend/src/assets/images/icons/share_filled_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/src/assets/images/icons/share_icon.svg b/frontend/src/assets/images/icons/share_icon.svg index 6f4cbf46b..2a41b66ca 100644 --- a/frontend/src/assets/images/icons/share_icon.svg +++ b/frontend/src/assets/images/icons/share_icon.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts b/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts index f324728b1..477a4c8fd 100644 --- a/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts +++ b/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.styles.ts @@ -17,22 +17,17 @@ export const ApplyButton = styled.button` border-radius: 10px; cursor: pointer; transition: transform 0.2s ease-in-out; - background-color: #3a3a3a; + background-color: #ff7543; padding: 10px 40px; width: 517px; - height: 44px; - font-size: 16px; + height: 50px; + font-size: 20px; font-style: normal; - font-weight: 500; + font-weight: 700; color: #fff; text-align: center; - &:hover { - background-color: #555; - transform: scale(1.03); - } - img { font-size: 12px; font-weight: 600; @@ -42,3 +37,10 @@ export const ApplyButton = styled.button` width: 280px; } `; + +export const Separator = styled.span` + margin: 0 8px; + border-left: 1px solid #787878; + height: 12px; + display: inline-block; +`; diff --git a/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx b/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx index 4916b7024..4e7bd1b2c 100644 --- a/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx +++ b/frontend/src/pages/ClubDetailPage/components/ClubApplyButton/ClubApplyButton.tsx @@ -56,7 +56,7 @@ const ClubApplyButton = ({ deadlineText }: ClubApplyButtonProps) => { 지원하기 {deadlineText && deadlineText !== RECRUITMENT_STATUS.ALWAYS && ( <> - | + {deadlineText} )} diff --git a/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts b/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts index 018560f2a..5d836d576 100644 --- a/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts +++ b/frontend/src/pages/ClubDetailPage/components/ClubDetailFooter/ClubDetailFooter.styles.ts @@ -4,7 +4,6 @@ export const ClubDetailFooterContainer = styled.div` position: sticky; bottom: 0; width: 100%; - height: 65px; z-index: 100; padding: 10px 40px; diff --git a/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts b/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts index 1a734a510..ea18b7e0d 100644 --- a/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts +++ b/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.styles.ts @@ -5,3 +5,8 @@ export const ShareButtonContainer = styled.div` justify-content: flex-end; cursor: pointer; `; + +export const ShareButtonIcon = styled.img` + width: 50px; + height: 50px; +`; \ No newline at end of file diff --git a/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx b/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx index a038e6d7f..0d1c076c0 100644 --- a/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx +++ b/frontend/src/pages/ClubDetailPage/components/ShareButton/ShareButton.tsx @@ -1,7 +1,7 @@ import * as Styled from './ShareButton.styles'; import { useGetClubDetail } from '@/hooks/queries/club/useGetClubDetail'; import useMixpanelTrack from '@/hooks/useMixpanelTrack'; -import ShareIcon from '@/assets/images/icons/share_filled_icon.svg'; +import ShareIcon from '@/assets/images/icons/share_icon.svg'; import { EVENT_NAME } from '@/constants/eventName'; interface ShareButtonProps { @@ -54,7 +54,7 @@ const ShareButton = ({ clubId }: ShareButtonProps) => { role='button' aria-label='카카오톡으로 동아리 정보 공유하기' > - 카카오톡 공유 + ); };