diff --git a/src/App.tsx b/src/App.tsx index a16d4d71..01713cfb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,6 +19,7 @@ import TalkPickVotes from '@/pages/MyPage/TalkPick/TalkPickVotes'; import TalkPickComments from '@/pages/MyPage/TalkPick/TalkPickComments'; import BalanceGameWritten from '@/pages/MyPage/BalanceGame/BalanceGameWritten'; import BalanceGameEditPage from '@/pages/BalanceGameEditPage/BalanceGameEditPage'; +import TalkPickMobilePage from '@/pages/mobile/TalkPickMobilePage/TalkPickMobilePage'; import ProtectedRoutes from './components/Routes/ProtectedRoutes'; import { PATH } from './constants/path'; import { useTokenRefresh } from './hooks/common/useTokenRefresh'; @@ -92,7 +93,10 @@ const App: React.FC = () => { } /> } /> } /> - } /> + : } + /> : } diff --git a/src/assets/index.ts b/src/assets/index.ts index 89f74f11..e5efb086 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -151,6 +151,12 @@ export { default as LogoMedium } from './svg/logo-medium.svg'; export { default as DefaultPerson } from './svg/default-person.svg'; export { default as MobileDefaultPerson } from './svg/mobile-default-person.svg'; export { default as MobilePlus } from './svg/mobile-plus.svg'; +export { default as MobileComment } from './svg/mobile-comment.svg'; +export { default as CryEmoji } from './svg/cry-emoji.svg'; +export { default as MobileLikeButtonDF } from './svg/mobile-like-button-df.svg'; +export { default as MobileLikeButtonPR } from './svg/mobile-like-button-pr.svg'; +export { default as MobileArrowUp } from './svg/mobile-arrow-up.svg'; +export { default as MobileArrowDown } from './svg/mobile-arrow-down.svg'; export { default as MobileReport } from './svg/mobile-report.svg'; export { default as PickIcon } from './svg/pick-icon.svg'; diff --git a/src/assets/svg/cry-emoji.svg b/src/assets/svg/cry-emoji.svg new file mode 100644 index 00000000..02ce4df4 --- /dev/null +++ b/src/assets/svg/cry-emoji.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/svg/mobile-arrow-down.svg b/src/assets/svg/mobile-arrow-down.svg new file mode 100644 index 00000000..2062a3e9 --- /dev/null +++ b/src/assets/svg/mobile-arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/mobile-arrow-up.svg b/src/assets/svg/mobile-arrow-up.svg new file mode 100644 index 00000000..edb787f7 --- /dev/null +++ b/src/assets/svg/mobile-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/mobile-comment.svg b/src/assets/svg/mobile-comment.svg new file mode 100644 index 00000000..996a2da7 --- /dev/null +++ b/src/assets/svg/mobile-comment.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/svg/mobile-like-button-df.svg b/src/assets/svg/mobile-like-button-df.svg new file mode 100644 index 00000000..e16d0ad0 --- /dev/null +++ b/src/assets/svg/mobile-like-button-df.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/mobile-like-button-pr.svg b/src/assets/svg/mobile-like-button-pr.svg new file mode 100644 index 00000000..12de169b --- /dev/null +++ b/src/assets/svg/mobile-like-button-pr.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/mobile-report.svg b/src/assets/svg/mobile-report.svg index 95dbf862..f8a42ef8 100644 --- a/src/assets/svg/mobile-report.svg +++ b/src/assets/svg/mobile-report.svg @@ -1,9 +1,9 @@ - - - - - - - - - + + + + + + + + + \ No newline at end of file diff --git a/src/components/atoms/CategoryBarChip/CategoryBarChip.style.ts b/src/components/atoms/CategoryBarChip/CategoryBarChip.style.ts index 691a01e7..93395f4e 100644 --- a/src/components/atoms/CategoryBarChip/CategoryBarChip.style.ts +++ b/src/components/atoms/CategoryBarChip/CategoryBarChip.style.ts @@ -15,15 +15,25 @@ export const getStylingBySize = ( borderRadius: '25px', padding: '0 12px', }), + extraSmall: css({ + borderRadius: '3px', + padding: '3px 6px', + }), }; return style[size]; }; -export const categoryBarChipStyling = css(typo.Comment.SemiBold, { +export const categoryBarChipStyling = css({ + ...typo.Comment.SemiBold, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: color.MAIN, color: color.WT, + '@media (max-width: 430px)': { + ...typo.Mobile.Text.SemiBold_10, + backgroundColor: color.WT_VIOLET, + color: color.MAIN, + }, }); diff --git a/src/components/atoms/CategoryBarChip/CategoryBarChip.tsx b/src/components/atoms/CategoryBarChip/CategoryBarChip.tsx index 1bad38c6..5e0b9603 100644 --- a/src/components/atoms/CategoryBarChip/CategoryBarChip.tsx +++ b/src/components/atoms/CategoryBarChip/CategoryBarChip.tsx @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'; import * as S from './CategoryBarChip.style'; export interface CategoryBarChipProps { - size?: 'large' | 'small'; + size?: 'large' | 'small' | 'extraSmall'; children?: ReactNode; } diff --git a/src/components/atoms/CommentProfile/CommentProfile.style.ts b/src/components/atoms/CommentProfile/CommentProfile.style.ts index 46be8172..eb950635 100644 --- a/src/components/atoms/CommentProfile/CommentProfile.style.ts +++ b/src/components/atoms/CommentProfile/CommentProfile.style.ts @@ -1,13 +1,17 @@ import { css } from '@emotion/react'; import color from '@/styles/color'; -export const containerStyle = css` - display: inline-flex; - padding: 5px; - align-items: center; - gap: 10px; - border-radius: 50px 50px 0 50px; -`; +export const containerStyle = css({ + display: 'inline-flex', + padding: '5px', + alignItems: 'center', + gap: '10px', + borderRadius: '50px 50px 0 50px', + '@media (max-width: 430px)': { + padding: '2.7px', + borderRadius: '27.3px 27.3px 0 27.3px', + }, +}); export const getProfileColor = (option: 'A' | 'B' | null) => { const backgroundColors = { @@ -29,6 +33,10 @@ export const profileWrapper = css({ backgroundSize: 'cover', backgroundPosition: 'center', cursor: 'pointer', + '@media (max-width: 430px)': { + width: '24.5px', + height: '24.5px', + }, }); export const profileImage = css({ diff --git a/src/components/atoms/LikeButton/LikeButton.style.ts b/src/components/atoms/LikeButton/LikeButton.style.ts index 070eb29d..d4e7bf05 100644 --- a/src/components/atoms/LikeButton/LikeButton.style.ts +++ b/src/components/atoms/LikeButton/LikeButton.style.ts @@ -2,46 +2,62 @@ import { css } from '@emotion/react'; import color from '@/styles/color'; import typo from '@/styles/typo'; -export const likeButton = css` - display: inline-flex; - align-items: center; - flex-direction: row; - background-color: transparent; - border: none; - cursor: pointer; - transition: - background-color 0.3s, - color 0.3s; -`; +export const likeButton = css({ + display: 'inline-flex', + alignItems: 'center', + flexDirection: 'row', + backgroundColor: 'transparent', + border: 'none', + cursor: 'pointer', + transition: 'background-color 0.3s, color 0.3s', + '@media (max-width: 430px)': { + display: 'flex', + padding: 0, + }, +}); -export const icon = css` - width: 22px; - height: 22px; - object-fit: contain; -`; +export const icon = css({ + width: '22px', + height: '22px', + objectFit: 'contain', + '@media (max-width: 430px)': { + width: '16px', + height: '16px', + }, +}); -export const defaultLabel = css` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 22px; - height: 29px; - ${typo.Number.Medium_18} - color: ${color.GY[1]}; - padding: 0; - margin: 0; -`; +export const defaultLabel = css({ + ...typo.Number.Medium_18, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '22px', + height: '29px', + color: color.GY[1], + padding: 0, + margin: 0, + '@media (max-width: 430px)': { + ...typo.Mobile.Main.Regular_12, + width: '15px', + height: '15px', + }, +}); -export const pressedLabel = css` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 22px; - height: 29px; - ${typo.Number.Medium_18} - color: ${color.MAIN}; - padding: 0; - margin: 0; -`; +export const pressedLabel = css({ + ...typo.Number.Medium_18, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '22px', + height: '29px', + color: color.MAIN, + padding: 0, + margin: 0, + '@media (max-width: 430px)': { + ...typo.Mobile.Main.Regular_12, + width: '15px', + height: '15px', + }, +}); diff --git a/src/components/atoms/LikeButton/LikeButton.tsx b/src/components/atoms/LikeButton/LikeButton.tsx index e7f0d742..f30dd3c3 100644 --- a/src/components/atoms/LikeButton/LikeButton.tsx +++ b/src/components/atoms/LikeButton/LikeButton.tsx @@ -1,26 +1,53 @@ import React, { forwardRef } from 'react'; import type { ComponentPropsWithRef, ForwardedRef } from 'react'; -import { LikeButtonDF, LikeButtonPR } from '@/assets'; +import { + LikeButtonDF, + LikeButtonPR, + MobileLikeButtonDF, + MobileLikeButtonPR, +} from '@/assets'; import * as S from './LikeButton.style'; export interface LikeButtonProps extends ComponentPropsWithRef<'button'> { likeCount: number; likeState?: boolean; + isMobile?: boolean; } const LikeButton = ( - { likeCount, likeState = false, ...attributes }: LikeButtonProps, + { + likeCount, + likeState = false, + isMobile = false, + ...attributes + }: LikeButtonProps, ref: ForwardedRef, ) => { + let Icon; + + switch (true) { + case likeState && isMobile: + Icon = MobileLikeButtonPR; + break; + case likeState && !isMobile: + Icon = LikeButtonPR; + break; + case !likeState && isMobile: + Icon = MobileLikeButtonDF; + break; + case !likeState && !isMobile: + Icon = LikeButtonDF; + break; + default: + Icon = LikeButtonDF; + break; + } + return ( ); diff --git a/src/components/atoms/MenuTap/MenuTap.style.ts b/src/components/atoms/MenuTap/MenuTap.style.ts index 9746b063..b13f7990 100644 --- a/src/components/atoms/MenuTap/MenuTap.style.ts +++ b/src/components/atoms/MenuTap/MenuTap.style.ts @@ -24,9 +24,16 @@ export const menuStlying = css({ borderRadius: '10px', overflow: 'hidden', boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.07)', + '@media (max-width: 430px)': { + width: '58px', + backgroundColor: color.WT, + border: `1px solid ${color.GY[3]}`, + borderRadius: '6px', + }, }); -export const menuItemStyling = css(typo.Comment.SemiBold, { +export const menuItemStyling = css({ + ...typo.Comment.SemiBold, width: '100%', padding: '10px', cursor: 'pointer', @@ -35,4 +42,10 @@ export const menuItemStyling = css(typo.Comment.SemiBold, { ':last-child': { borderBottom: 'none', }, + '@media (max-width: 430px)': { + ...typo.Mobile.Text.Medium_12, + padding: '7px', + color: color.GY[1], + borderBottom: `1px solid ${color.GY[3]}`, + }, }); diff --git a/src/components/atoms/MoreButton/MoreButton.style.ts b/src/components/atoms/MoreButton/MoreButton.style.ts index bfc9b731..a9839745 100644 --- a/src/components/atoms/MoreButton/MoreButton.style.ts +++ b/src/components/atoms/MoreButton/MoreButton.style.ts @@ -11,7 +11,15 @@ export const moreButtonStyling = (icon: Required['icon']) => gap: '7px', color: icon === 'plus' ? color.GY[1] : color.MAIN, cursor: 'pointer', - '@media (max-width: 430px)': { - ...typo.Mobile.Text.SemiBold_14, - }, + '@media (max-width: 430px)': + icon === 'arrow' + ? { + ...typo.Mobile.Text.Medium_12, + color: color.GY[1], + gap: '3px', + } + : { + ...typo.Mobile.Text.SemiBold_14, + color: color.GY[1], + }, }); diff --git a/src/components/atoms/MoreButton/MoreButton.tsx b/src/components/atoms/MoreButton/MoreButton.tsx index 77cef564..83ef7a51 100644 --- a/src/components/atoms/MoreButton/MoreButton.tsx +++ b/src/components/atoms/MoreButton/MoreButton.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, ComponentPropsWithRef, ForwardedRef } from 'react'; -import { More, MoreReply, MoreSmall } from '@/assets'; +import { MobileArrowDown, More, MoreReply, MoreSmall } from '@/assets'; import * as S from './MoreButton.style'; export interface MoreButtonProps extends ComponentPropsWithRef<'button'> { @@ -12,7 +12,14 @@ const MoreButton = ( ref: ForwardedRef, ) => { const getIcon = () => { - if (size === 'small') return ; + if (size === 'small') { + switch (icon) { + case 'arrow': + return ; + default: + return ; + } + } return icon === 'plus' ? : ; }; diff --git a/src/components/atoms/ToastModal/ToastModal.style.ts b/src/components/atoms/ToastModal/ToastModal.style.ts index 9e43eda7..dbc4d15e 100644 --- a/src/components/atoms/ToastModal/ToastModal.style.ts +++ b/src/components/atoms/ToastModal/ToastModal.style.ts @@ -30,7 +30,6 @@ export const toastModalStyling = css({ padding: '20px 30px', borderRadius: '35px', boxShadow: '1px 1px 10px rgba(0, 0, 0, 0.07)', - '@media (max-width: 430px)': { ...typo.Mobile.Text.SemiBold_12, padding: '14px 24px', diff --git a/src/components/mobile/atoms/CommentInput/CommentInput.style.ts b/src/components/mobile/atoms/CommentInput/CommentInput.style.ts new file mode 100644 index 00000000..f5f6dd55 --- /dev/null +++ b/src/components/mobile/atoms/CommentInput/CommentInput.style.ts @@ -0,0 +1,78 @@ +import { css } from '@emotion/react'; +import color from '@/styles/color'; +import typo from '@/styles/typo'; +import { COMMENT } from '@/constants/message'; + +export const inputContainer = css({ + position: 'fixed', + bottom: 0, + left: 0, + width: '100%', + backgroundColor: color.WT, + borderTop: `1px solid ${color.GY[4]}`, + padding: '9px 20px 11px', + display: 'flex', + alignItems: 'center', + gap: '8px', +}); + +export const inputBoxWrapper = (length: number) => + css({ + backgroundColor: color.GY[5], + padding: '3px 4px 3px 18px', + width: '335px', + height: 'auto', + borderRadius: length < 20 ? '30px' : '17px', + display: 'flex', + }); + +export const inputStyling = css(typo.Text.Regular, { + flex: 1, + border: 'none', + outline: 'none', + width: '213px', + resize: 'none', + overflowY: 'auto', + maxHeight: '66px', + height: 'auto', + '&::placeholder': { + color: color.GY[6], + }, +}); + +export const rightContainer = (length: number) => + css({ + display: 'flex', + alignItems: 'end', + visibility: length === 0 ? 'hidden' : 'visible', + }); + +export const rightWrapper = css({ + display: 'flex', + alignItems: 'center', + gap: '8px', +}); + +export const charCountContainer = css({ + display: 'flex', + alignItems: 'center', +}); + +export const charCountStyling = (length: number) => + css(typo.Mobile.Text.Medium_12, { + color: length > COMMENT.MAX_LENGTH ? color.PINK : color.SKYBLUE, + }); + +export const charDefaultStyling = css(typo.Mobile.Text.Medium_12, { + color: color.GY[2], +}); + +export const buttonStyling = css({ + display: 'flex', + alignItems: 'center', + justifyItems: 'center', + padding: '8px 15.5px', + backgroundColor: color.MAIN, + borderRadius: '60px', + cursor: 'pointer', +}); diff --git a/src/components/mobile/atoms/CommentInput/CommentInput.tsx b/src/components/mobile/atoms/CommentInput/CommentInput.tsx new file mode 100644 index 00000000..cba20076 --- /dev/null +++ b/src/components/mobile/atoms/CommentInput/CommentInput.tsx @@ -0,0 +1,72 @@ +import React, { useRef, useEffect } from 'react'; +import { MobileArrowUp } from '@/assets'; +import { COMMENT } from '@/constants/message'; +import * as S from './CommentInput.style'; + +interface CommentInputProps { + comment: string; + isEditing: boolean; + onCommentChange: (value: string) => void; + onCommentSubmit: () => void; +} + +const CommentInput = ({ + comment, + isEditing, + onCommentChange, + onCommentSubmit, + ...attributes +}: CommentInputProps) => { + const textareaRef = useRef(null); + + const handleInput = () => { + if (textareaRef.current) { + textareaRef.current.style.height = 'auto'; + textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`; + } + }; + + useEffect(() => { + handleInput(); + }, [comment]); + + return ( +
+
+