From 9a9f88bbd88a64e3f2bdc8d0dffd375a6da4aea2 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Sun, 16 Feb 2025 21:51:17 +0900 Subject: [PATCH 01/20] =?UTF-8?q?design:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20outlineHighLight=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EA=B0=92=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/atoms/Button/Button.style.ts | 30 ++++++++++++++++++- src/components/mobile/atoms/Button/Button.tsx | 7 ++++- src/stories/mobile/atoms/Button.stories.tsx | 16 +++++++++- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/components/mobile/atoms/Button/Button.style.ts b/src/components/mobile/atoms/Button/Button.style.ts index 64841939..6569a846 100644 --- a/src/components/mobile/atoms/Button/Button.style.ts +++ b/src/components/mobile/atoms/Button/Button.style.ts @@ -24,6 +24,18 @@ export const getVariantStyling = ( backgroundColor: color.GY[5], color: color.GY[1], }), + outlineHighlightR: css({ + border: `2px solid ${color.PINK}`, + borderRadius: '10px', + backgroundColor: 'transparent', + color: color.RED, + }), + outlineHighlightB: css({ + border: `2px solid ${color.SKYBLUE}`, + borderRadius: '10px', + backgroundColor: 'transparent', + color: color.BLUE, + }), }; return style[variant]; @@ -58,6 +70,22 @@ export const getSizeByVariantStyling = ( height: '34px', }), }, + outlineHighlightR: { + large: css({}), + medium: css(typo.Comment.SemiBold, { + width: '134px', + height: '72px', + padding: '0 21px', + }), + }, + outlineHighlightB: { + large: css({}), + medium: css(typo.Comment.SemiBold, { + width: '134px', + height: '72px', + padding: '0 21px', + }), + }, }; return style[variant][size]; @@ -68,6 +96,6 @@ export const buttonStyling = css({ justifyContent: 'center', alignItems: 'center', border: 'none', - whiteSpace: 'nowrap', + whiteSpace: 'normal', cursor: 'pointer', }); diff --git a/src/components/mobile/atoms/Button/Button.tsx b/src/components/mobile/atoms/Button/Button.tsx index fe2b09a2..44804307 100644 --- a/src/components/mobile/atoms/Button/Button.tsx +++ b/src/components/mobile/atoms/Button/Button.tsx @@ -4,7 +4,12 @@ import * as S from './Button.style'; export interface ButtonProps extends ComponentPropsWithRef<'button'> { size?: 'large' | 'medium'; - variant?: 'primary' | 'roundPrimary' | 'outlineShadow'; + variant?: + | 'primary' + | 'roundPrimary' + | 'outlineShadow' + | 'outlineHighlightR' + | 'outlineHighlightB'; active?: boolean; } diff --git a/src/stories/mobile/atoms/Button.stories.tsx b/src/stories/mobile/atoms/Button.stories.tsx index a8d5fd30..4e18c5cf 100644 --- a/src/stories/mobile/atoms/Button.stories.tsx +++ b/src/stories/mobile/atoms/Button.stories.tsx @@ -15,7 +15,13 @@ const meta = { control: { type: 'radio' }, }, variant: { - options: ['primary', 'roundPrimary', 'outlineShadow'], + options: [ + 'primary', + 'roundPrimary', + 'outlineShadow', + 'outlineHighlightR', + 'outlineHighlightB', + ], control: { type: 'radio' }, }, active: { control: 'boolean' }, @@ -57,6 +63,14 @@ export const All: Story = { +

outlineHighlightR

+ +

outlineHighlightB

+

  • disabled

    From f13b0f21b549b41c21a6c4d160c323c6b44bd422 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Sun, 16 Feb 2025 21:52:07 +0900 Subject: [PATCH 02/20] =?UTF-8?q?feat:=20Button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/mobile/atoms/Button.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/mobile/atoms/Button.stories.tsx b/src/stories/mobile/atoms/Button.stories.tsx index 4e18c5cf..32dd97d1 100644 --- a/src/stories/mobile/atoms/Button.stories.tsx +++ b/src/stories/mobile/atoms/Button.stories.tsx @@ -65,7 +65,7 @@ export const All: Story = {

    outlineHighlightR

    outlineHighlightB

    +
    VS
    + + + + ); +}; + +export default VoteToggle; diff --git a/src/stories/mobile/molecules/VoteToggle.stories.tsx b/src/stories/mobile/molecules/VoteToggle.stories.tsx new file mode 100644 index 00000000..c867b562 --- /dev/null +++ b/src/stories/mobile/molecules/VoteToggle.stories.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import VoteToggle from '@/components/mobile/molecules/VoteToggle/VoteToggle'; +import store from '@/store'; +import { Provider } from 'react-redux'; +import ReactQueryProvider from '@/providers/ReactQueryProvider'; +import { BrowserRouter as Router } from 'react-router-dom'; +import type { Meta, StoryObj } from '@storybook/react'; +import { setToken } from '@/store/auth'; +import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; + +const meta = { + title: 'mobile/molecules/VoteToggle', + component: VoteToggle, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + talkPickId: { control: 'number' }, + leftButtonText: { control: 'text' }, + rightButtonText: { control: 'text' }, + }, + args: { + talkPickId: 1, + leftButtonText: '상관없다다다다다다', + rightButtonText: '상관 있다', + selectedVote: null, + }, + decorators: [ + (Story) => ( + + + + + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + play: () => { + store.dispatch(setToken('accessToken')); + }, +}; + +export const All: Story = { + play: () => { + store.dispatch(setToken('accessToken')); + }, + render: (args) => ( +
      +
    • +

      Defult

      + +
      • +
    • +

      A Selected

      + +
      • +
    • +

      B Selected

      + +
      • +
    + ), +}; From a2330c16c361b3d54f6005c425234c679651320b Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Mon, 17 Feb 2025 20:10:38 +0900 Subject: [PATCH 06/20] =?UTF-8?q?refactor:=20TalkPickSection=20=EC=9B=B9?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/organisms/TalkPickSection.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/organisms/TalkPickSection.stories.tsx b/src/stories/organisms/TalkPickSection.stories.tsx index 1f6001a3..0d9a4ff8 100644 --- a/src/stories/organisms/TalkPickSection.stories.tsx +++ b/src/stories/organisms/TalkPickSection.stories.tsx @@ -23,6 +23,7 @@ const defaultTodayTalkPick: TalkPickDetail = { summarySecondLine: '남친이 친구 새우 껍질을 어쩌고 저쩌고 뭐라뭐라', summaryThirdLine: '나 너무 속상한데 이걸 찬성해 말어', }, + summaryStatus: 'SUCCESS', imgUrls: [], fileIds: [], votesCountOfOptionA: 1963, From 6ad78aa1cd62e823257eaf4d1eff23f0f2c67e87 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Mon, 17 Feb 2025 22:09:14 +0900 Subject: [PATCH 07/20] =?UTF-8?q?feat:=20TalkPickSection=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/angle-small-down.svg | 2 +- src/assets/svg/angle-small-up.svg | 2 +- .../TalkPickSection/TalkPickSection.style.ts | 109 ++++++++++ .../TalkPickSection/TalkPickSection.tsx | 201 ++++++++++++++++++ .../organisms/TalkPickSection.stories.tsx | 73 +++++++ 5 files changed, 385 insertions(+), 2 deletions(-) create mode 100644 src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts create mode 100644 src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx create mode 100644 src/stories/mobile/organisms/TalkPickSection.stories.tsx diff --git a/src/assets/svg/angle-small-down.svg b/src/assets/svg/angle-small-down.svg index 2b064507..d5231249 100644 --- a/src/assets/svg/angle-small-down.svg +++ b/src/assets/svg/angle-small-down.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/angle-small-up.svg b/src/assets/svg/angle-small-up.svg index 9adf7499..82979ba4 100644 --- a/src/assets/svg/angle-small-up.svg +++ b/src/assets/svg/angle-small-up.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts new file mode 100644 index 00000000..4327a588 --- /dev/null +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts @@ -0,0 +1,109 @@ +import { css } from '@emotion/react'; +import color from '@/styles/color'; +import typo from '@/styles/typo'; + +export const talkPickStyling = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '7px', +}); + +export const talkPickTitle = css(typo.Main.SemiBold, { + width: '100%', + wordWrap: 'break-word', + overflowWrap: 'break-word', + color: color.BK, +}); + +export const buttonWrapper = css({ + display: 'flex', + gap: '10px', +}); + +export const talkPickTopWrapper = css({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', +}); + +export const talkPickWrapper = css({ + display: 'flex', + flexDirection: 'column', + width: '335px', + padding: '20px 14px', + backgroundColor: color.WT, + outline: `1px solid ${color.GY[5]}`, + borderRadius: '10px', + boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.07)', +}); + +export const talkPickTopStyling = css({ + display: 'flex', + flexDirection: 'column', + paddingBottom: '17px', + gap: '7px', +}); + +export const talkPickContentWrapper = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '24px 0', + gap: '17px', + borderTop: `1px solid ${color.GY[4]}`, + borderBottom: `1px solid${color.GY[4]}`, +}); + +export const talkPickContent = css({ + width: '100%', + padding: '20px 8px 0', +}); + +export const talkPickContentTextStyling = css(typo.Mobile.Main.Regular_12, { + width: '100%', + whiteSpace: 'pre-wrap', + color: color.BK, +}); + +export const talkPickImageWrapper = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + paddingTop: '20px', + gap: '8px', + + '& > img': { + maxWidth: '100%', + width: 'auto', + height: 'auto', + borderRadius: '5px', + }, +}); + +export const voteToggleWrapper = css({ + display: 'flex', + justifyContent: 'center', + paddingTop: '14px', +}); + +export const contentBtnStyling = css({ + width: 'fit-content', +}); + +export const toastModalStyling = css({ + position: 'fixed', + top: '110px', + left: '50%', + transform: 'translate(-50%)', + zIndex: '1000', +}); + +export const centerStyling = css({ + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + zIndex: '1000', +}); diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx new file mode 100644 index 00000000..6d3063b2 --- /dev/null +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -0,0 +1,201 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ +/* eslint-disable jsx-a11y/img-redundant-alt */ +import React, { useState } from 'react'; +import { + AngleSmallUp, + AngleSmallDown, + MobileBookmarkDF, + MobileBookmarkPR, + MobileShare, +} from '@/assets'; +import { useNavigate } from 'react-router-dom'; +import { TalkPickDetail } from '@/types/talk-pick'; +import { PATH } from '@/constants/path'; +import { ERROR } from '@/constants/message'; +import { formatDate, formatNumber } from '@/utils/formatData'; +import Button from '@/components/atoms/Button/Button'; +import SummaryBox from '@/components/mobile/molecules/SummaryBox/SummaryBox'; +import ToastModal from '@/components/atoms/ToastModal/ToastModal'; +import VoteToggle from '@/components/mobile/molecules/VoteToggle/VoteToggle'; +import MenuTap, { MenuItem } from '@/components/atoms/MenuTap/MenuTap'; +import TextModal from '@/components/mobile/molecules/TextModal/TextModal'; +import ShareModal from '@/components/mobile/molecules/ShareModal/ShareModal'; +import { useCreateTalkPickBookmarkMutation } from '@/hooks/api/bookmark/useCreateTalkPickBookmarkMutation'; +import { useDeleteTalkPickBookmarkMutation } from '@/hooks/api/bookmark/useDeleteTalkPickBookmarkMutation'; +import { useDeleteTalkPickMutation } from '@/hooks/api/talk-pick/useDeleteTalkPickMutation'; +import useToastModal from '@/hooks/modal/useToastModal'; +import * as S from './TalkPickSection.style'; +import IconButton from '../../atoms/IconButton/IconButton'; + +export interface TalkPickProps { + talkPick: TalkPickDetail; + myTalkPick: boolean; + isTodayTalkPick: boolean; +} + +const TalkPickSection = ({ + talkPick, + myTalkPick, + isTodayTalkPick, +}: TalkPickProps) => { + const navigate = useNavigate(); + + const [isExpanded, setIsExpanded] = useState(false); + const { isVisible, modalText, showToastModal } = useToastModal(); + + const [activeModal, setActiveModal] = useState< + 'reportTalkPick' | 'reportText' | 'deleteText' | 'share' | 'none' + >('none'); + + const onCloseModal = () => { + setActiveModal('none'); + }; + + const { mutate: createBookmark } = useCreateTalkPickBookmarkMutation( + talkPick?.id ?? 0, + ); + + const { mutate: deleteBookmark } = useDeleteTalkPickBookmarkMutation( + talkPick?.id ?? 0, + ); + + const handleBookmarkClick = () => { + if (!talkPick) return; + + if (myTalkPick) { + showToastModal(ERROR.BOOKMARK.MY_TALKPICK); + return; + } + + if (talkPick.myBookmark) { + deleteBookmark(); + } else { + createBookmark(); + } + }; + + const handleContentToggle = () => { + setIsExpanded((prev) => !prev); + }; + + const myTalkPickItem: MenuItem[] = [ + { + label: '수정', + onClick: () => { + navigate(`/${PATH.CREATE.TALK_PICK}`, { state: { talkPick } }); + }, + }, + { + label: '삭제', + onClick: () => { + setActiveModal('deleteText'); + }, + }, + ]; + + const otherTalkPickItem: MenuItem[] = [ + { + label: '신고', + onClick: () => { + setActiveModal('reportText'); + }, + }, + ]; + + const { mutate: deleteTalkPick } = useDeleteTalkPickMutation( + talkPick?.id ?? 0, + ); + + const handleDeleteButton = () => { + deleteTalkPick(); + onCloseModal(); + }; + + return ( +
    + {isVisible && ( +
    + {modalText} +
    + )} +
    + {}} + onClose={onCloseModal} + /> + + { + setActiveModal('reportTalkPick'); + }} + onClose={onCloseModal} + /> +
    +
    +
    {isTodayTalkPick && '오늘의 톡픽'}
    +
    + } + onClick={() => setActiveModal('share')} + /> + : + } + onClick={handleBookmarkClick} + /> +
    +
    +
    +
    TalkPickTopContent
    +
    + + {isExpanded && ( +
    +
    + {talkPick?.baseFields.content} +
    + {talkPick?.imgUrls.length !== 0 && ( +
    + {talkPick?.imgUrls.map((url, idx) => ( + {`image + ))} +
    + )} +
    + )} + +
    +
    + +
    +
    +
    + ); +}; + +export default TalkPickSection; diff --git a/src/stories/mobile/organisms/TalkPickSection.stories.tsx b/src/stories/mobile/organisms/TalkPickSection.stories.tsx new file mode 100644 index 00000000..9884491c --- /dev/null +++ b/src/stories/mobile/organisms/TalkPickSection.stories.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { TalkPickDetail } from '@/types/talk-pick'; +import store from '@/store'; +import { Provider } from 'react-redux'; +import { BrowserRouter as Router } from 'react-router-dom'; +import ReactQueryProvider from '@/providers/ReactQueryProvider'; +import type { Meta, StoryObj } from '@storybook/react'; +import { setToken } from '@/store/auth'; +import { OctopusProfile, RabbitProfile } from '@/assets'; +import TalkPickSection from '@/components/mobile/organisms/TalkPickSection/TalkPickSection'; + +const defaultTodayTalkPick: TalkPickDetail = { + id: 0, + baseFields: { + title: '새우 껍질 논쟁, 당신의 선택은?', + optionA: '상관없다다다다다다다', + optionB: '상관 있다', + sourceUrl: '출처', + content: + '(더미글이에욤) 건강과 지속 가능성을 추구하는 이들을 위해, 맛과 영양이 가득한 채식 요리 레시피를 소개합니다. 이 글에서는 간단하지만 맛있는 채식 요리 10가지를 선보입니다. 첫 번째 레시피는 아보카도 토스트, 아침 식사로 완벽하며 영양소가 풍부합니다. 두 번째는 콩과 야채를 사용한 푸짐한 채식 칠리, 포만감을 주는 동시에 영양소를 공급합니다. 세 번째는 색다른 맛의 채식 패드타이, 고소한 땅콩 소스로 풍미를 더합니다. 네 번째는 간단하고 건강한 콥 샐러드, 신선한 야채와 단백질이 가득합니다. 다섯 번째로는 향긋한 허브와 함께하는 채식 리조또, 크리미한 맛이 일품입니다. 여섯 번째는 에너지를 주는 채식 스무디 볼, 과일과 견과류의 완벽한 조합입니다. 여덟 번째는 채식 파스타 프리마베라, 신선한 야채와 토마토 소스의 조화가 뛰어납니다. 아홉 번째는 채식 볶음밥, 풍부한 맛과 영양으로 가득 차 있습니다. 마지막으로, 식사 후 달콤한 마무리를 위한 채식 초콜릿 케이크, 건강한 재료로 만들어 죄책감 없는 달콤함을 선사합니다. 이 레시피들은 채식을 선호하는 이들에게 새로운 요리 아이디어를 제공하며, 채식이 얼마나 다채롭고 맛있을 수 있는지 보여줍니다. 건강한 라이프스타일을 추구하는 모든 이들에게 이 레시피들이 영감을 줄 것입니다.', + }, + summary: { + summaryFirstLine: '남친이 어쩌고 저쩌고 잘못했네 안했네 대충 더미글', + summarySecondLine: '남친이 친구 새우 껍질을 어쩌고 저쩌고 뭐라뭐라', + summaryThirdLine: '나 너무 속상한데 이걸 찬성해 말어', + }, + summaryStatus: 'SUCCESS', + imgUrls: [OctopusProfile, RabbitProfile], + fileIds: [], + votesCountOfOptionA: 1963, + votesCountOfOptionB: 2635, + views: 35254, + bookmarks: 234, + myBookmark: false, + votedOption: 'A', + writer: '닉네임593', + createdAt: '2024-08-04', + isEdited: false, +}; + +const meta = { + title: 'mobile/organisms/TalkPickSection', + component: TalkPickSection, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + args: { + talkPick: defaultTodayTalkPick, + myTalkPick: false, + isTodayTalkPick: true, + }, + decorators: [ + (Story) => ( + + + + + + + + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + play: () => { + store.dispatch(setToken('accessToken')); + }, +}; From 38b2c52c1ff0654bf3e13340ead3278cc3b355c8 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Wed, 19 Feb 2025 00:11:41 +0900 Subject: [PATCH 08/20] =?UTF-8?q?refactor:=20ProfileIcon=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EC=A6=88=20=EA=B0=92=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20TalkPi?= =?UTF-8?q?ckSection=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/ProfileIcon/ProfileIcon.style.ts | 44 +++++++++----- .../atoms/ProfileIcon/ProfileIcon.tsx | 24 ++++++-- .../TalkPickSection/TalkPickSection.style.ts | 60 +++++++++++++++---- .../TalkPickSection/TalkPickSection.tsx | 26 +++++++- src/styles/typo.ts | 7 +++ 5 files changed, 130 insertions(+), 31 deletions(-) diff --git a/src/components/atoms/ProfileIcon/ProfileIcon.style.ts b/src/components/atoms/ProfileIcon/ProfileIcon.style.ts index ee8ff2f3..01938419 100644 --- a/src/components/atoms/ProfileIcon/ProfileIcon.style.ts +++ b/src/components/atoms/ProfileIcon/ProfileIcon.style.ts @@ -1,19 +1,35 @@ import { css } from '@emotion/react'; -export const profileWrapper = (size: 'small' | 'large') => - css({ - all: 'unset', - width: size === 'small' ? '40px' : '142px', - height: size === 'small' ? '40px' : '142px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - borderRadius: '50%', - overflow: 'hidden', - backgroundSize: 'cover', - backgroundPosition: 'center', - cursor: 'pointer', - }); +export const profileWrapper = css({ + all: 'unset', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + borderRadius: '50%', + overflow: 'hidden', + backgroundSize: 'cover', + backgroundPosition: 'center', + cursor: 'pointer', +}); + +export const getProfileSize = (size: 'extraSmall' | 'small' | 'large') => { + const style = { + large: css({ + width: '142px', + height: '142px', + }), + small: css({ + width: '40px', + height: '40px', + }), + extraSmall: css({ + width: '30px', + height: '30px', + }), + }; + + return style[size]; +}; export const profileImage = css({ width: '100%', diff --git a/src/components/atoms/ProfileIcon/ProfileIcon.tsx b/src/components/atoms/ProfileIcon/ProfileIcon.tsx index 54d0ae37..7ce63ce4 100644 --- a/src/components/atoms/ProfileIcon/ProfileIcon.tsx +++ b/src/components/atoms/ProfileIcon/ProfileIcon.tsx @@ -1,17 +1,21 @@ import React, { ComponentPropsWithRef, ForwardedRef, forwardRef } from 'react'; import { NormalProfile } from '@/assets'; -import { profileWrapper, profileImage } from './ProfileIcon.style'; +import { + profileWrapper, + profileImage, + getProfileSize, +} from './ProfileIcon.style'; export interface ProfileProps extends ComponentPropsWithRef<'button'> { interaction: 'default' | 'custom'; imgUrl?: string; - size?: 'small' | 'large'; + size?: 'large' | 'small' | 'extraSmall'; } interface ProfilePropsWithImage extends ComponentPropsWithRef<'button'> { interaction: 'custom'; imgUrl: string; - size?: 'small' | 'large'; + size?: 'large' | 'small' | 'extraSmall'; } const ProfileIcon = ( @@ -25,12 +29,22 @@ const ProfileIcon = ( ) => { const profileComponents = { normal: ( - ), settings: ( - ), diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts index 4327a588..59f0c637 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts @@ -6,13 +6,11 @@ export const talkPickStyling = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', - gap: '7px', + gap: '10px', }); export const talkPickTitle = css(typo.Main.SemiBold, { width: '100%', - wordWrap: 'break-word', - overflowWrap: 'break-word', color: color.BK, }); @@ -31,28 +29,68 @@ export const talkPickTopWrapper = css({ export const talkPickWrapper = css({ display: 'flex', flexDirection: 'column', - width: '335px', - padding: '20px 14px', - backgroundColor: color.WT, - outline: `1px solid ${color.GY[5]}`, - borderRadius: '10px', - boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.07)', + width: '330px', }); export const talkPickTopStyling = css({ + display: 'flex', + gap: '10px', +}); + +export const talkPickInfoWrapper = css({ display: 'flex', flexDirection: 'column', - paddingBottom: '17px', + width: '100%', + paddingTop: '6px', gap: '7px', }); +export const talkPickInfoTopWrapper = css({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', +}); + +export const talkPickInfoBottomWrapper = css({ + display: 'flex', + justifyContent: 'space-between', +}); + +export const talkPickWriterWrapper = css({ + display: 'flex', + gap: '10px', +}); + +export const talkPickWriterStyling = css(typo.Mobile.Text.Medium_12, { + color: color.GY[1], +}); + +export const talkPickDateStyling = css(typo.Mobile.Text.Regular_10, { + color: color.GY[2], +}); + +export const talkPickTitleStyling = css(typo.Main.SemiBold, { + width: '230px', + wordBreak: 'break-all', + whiteSpace: 'normal', + color: color.BK, +}); + +export const talkPickViewStyling = css(typo.Mobile.Text.Regular_10, { + color: color.GY[1], + marginTop: '6px', + + '& > span': { + color: color.MAIN, + }, +}); + export const talkPickContentWrapper = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '24px 0', gap: '17px', - borderTop: `1px solid ${color.GY[4]}`, borderBottom: `1px solid${color.GY[4]}`, }); diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx index 6d3063b2..1e1e70e9 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -15,6 +15,7 @@ import { ERROR } from '@/constants/message'; import { formatDate, formatNumber } from '@/utils/formatData'; import Button from '@/components/atoms/Button/Button'; import SummaryBox from '@/components/mobile/molecules/SummaryBox/SummaryBox'; +import ProfileIcon from '@/components/atoms/ProfileIcon/ProfileIcon'; import ToastModal from '@/components/atoms/ToastModal/ToastModal'; import VoteToggle from '@/components/mobile/molecules/VoteToggle/VoteToggle'; import MenuTap, { MenuItem } from '@/components/atoms/MenuTap/MenuTap'; @@ -155,7 +156,30 @@ const TalkPickSection = ({
    -
    TalkPickTopContent
    +
    + +
    +
    +
    +
    {talkPick?.writer}
    +
    + {formatDate(talkPick?.createdAt)} +
    +
    + +
    +
    +
    + {talkPick?.baseFields.title} +
    +
    + 조회 {formatNumber(talkPick?.views)} +
    +
    +
    +
    Date: Wed, 19 Feb 2025 01:03:23 +0900 Subject: [PATCH 09/20] =?UTF-8?q?feat:=20ReportModal=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EB=B0=8F=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/index.ts | 1 + src/assets/svg/mobile-report.svg | 9 +++ .../ReportModal/ReportModal.style.ts | 75 +++++++++++++++++++ .../molecules/ReportModal/ReportModal.tsx | 72 ++++++++++++++++++ .../mobile/molecules/ReportModal.stories.tsx | 26 +++++++ src/styles/color.ts | 1 + src/styles/typo.ts | 7 ++ 7 files changed, 191 insertions(+) create mode 100644 src/assets/svg/mobile-report.svg create mode 100644 src/components/mobile/molecules/ReportModal/ReportModal.style.ts create mode 100644 src/components/mobile/molecules/ReportModal/ReportModal.tsx create mode 100644 src/stories/mobile/molecules/ReportModal.stories.tsx diff --git a/src/assets/index.ts b/src/assets/index.ts index 4ca00b96..0f3b2d07 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -151,6 +151,7 @@ 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 MobileReport } from './svg/mobile-report.svg'; // TODO: 이전 SVG export { default as Email } from './svg/email.svg'; diff --git a/src/assets/svg/mobile-report.svg b/src/assets/svg/mobile-report.svg new file mode 100644 index 00000000..95dbf862 --- /dev/null +++ b/src/assets/svg/mobile-report.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/mobile/molecules/ReportModal/ReportModal.style.ts b/src/components/mobile/molecules/ReportModal/ReportModal.style.ts new file mode 100644 index 00000000..4880b8f6 --- /dev/null +++ b/src/components/mobile/molecules/ReportModal/ReportModal.style.ts @@ -0,0 +1,75 @@ +import { css } from '@emotion/react'; +import color from '@/styles/color'; +import typo from '@/styles/typo'; + +export const reportModalStyling = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '20px', +}); + +export const reportTextWrapper = css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '6px', +}); + +export const reportTextStyling = css(typo.Main.SemiBold, { + color: color.BK, +}); + +export const buttonWrapperStyling = css({ + display: 'grid', + gridTemplateColumns: 'repeat(2, 1fr)', + gridGap: '7px', +}); + +export const reportBtnWrapperStyling = css({ + display: 'flex', + justifyContent: 'space-between', + width: '100%', +}); + +export const buttonStyling = css(typo.Mobile.Text.Medium_14, { + display: 'flex', + width: '143px', + height: '50px', + alignItems: 'center', + padding: '0 16px', + borderRadius: '8px', + backgroundColor: color.GY[5], + color: color.GY[6], +}); + +export const selectedButtonStyling = css({ + backgroundColor: color.WT_VIOLET, + color: color.MAIN, + outline: `2px solid ${color.MAIN}`, +}); + +export const getButtonStyling = (selected: boolean) => + css({ + width: '293px', + height: '44px', + borderRadius: '12px', + backgroundColor: selected ? color.MAIN : color.GY[2], + }); + +export const reportInputStyling = css(typo.Mobile.Text.SemiBold_14, { + width: '100%', + padding: '6px 0', + outline: '0', + border: 'none', + borderBottom: `1px solid ${color.GY[3]}`, + color: color.BK, + + ':-webkit-autofill': { + boxShadow: '0 0 0px 1000px white inset', + }, + + '&::placeholder': { + color: color.GY[1], + }, +}); diff --git a/src/components/mobile/molecules/ReportModal/ReportModal.tsx b/src/components/mobile/molecules/ReportModal/ReportModal.tsx new file mode 100644 index 00000000..847e8f69 --- /dev/null +++ b/src/components/mobile/molecules/ReportModal/ReportModal.tsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; +import { MobileReport } from '@/assets'; +import Modal from '@/components/mobile/atoms/Modal/Modal'; +import Button from '@/components/mobile/atoms/Button/Button'; +import { reportOptions } from '@/constants/reportOption'; +import * as S from './ReportModal.style'; + +export interface ReportModalProps { + isOpen?: boolean; + onConfirm?: (reason: string) => void; + onClose?: () => void; +} + +const ReportModal = ({ isOpen, onConfirm, onClose }: ReportModalProps) => { + const [reportReason, setReportReason] = useState(''); + const [otherReason, setOtherReason] = useState(''); + const finalReportReason: string = + reportReason === '기타' ? otherReason : reportReason; + + const handleOtherReportReason = (e: React.ChangeEvent) => { + setOtherReason(e.target.value); + }; + + const handleConfirm = () => { + if (!finalReportReason.trim()) return; + onConfirm?.(finalReportReason); + }; + + return ( + +
    +
    + +
    신고사유 선택
    +
    +
    + {reportOptions.map((option) => ( + + ))} +
    + {reportReason === '기타' && ( + + )} + +
    +     + ); +}; + +export default ReportModal; diff --git a/src/stories/mobile/molecules/ReportModal.stories.tsx b/src/stories/mobile/molecules/ReportModal.stories.tsx new file mode 100644 index 00000000..1137b113 --- /dev/null +++ b/src/stories/mobile/molecules/ReportModal.stories.tsx @@ -0,0 +1,26 @@ +import ReportModal from '@/components/mobile/molecules/ReportModal/ReportModal'; +import type { Meta, StoryObj } from '@storybook/react'; + +const meta = { + title: 'mobile/molecules/ReportModal', + component: ReportModal, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + isOpen: { control: { type: 'boolean' } }, + }, + args: { + isOpen: true, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + }, +}; diff --git a/src/styles/color.ts b/src/styles/color.ts index 13800520..2553aa05 100644 --- a/src/styles/color.ts +++ b/src/styles/color.ts @@ -7,6 +7,7 @@ const color = { 3: '#F1F1F1', 4: '#E6E9EF', 5: '#F6F7F9', + 6: '#949DAE', }, WT: '#FFFFFF', WT_VIOLET: '#F2F3FF', diff --git a/src/styles/typo.ts b/src/styles/typo.ts index 08e0d656..8e0e36e3 100644 --- a/src/styles/typo.ts +++ b/src/styles/typo.ts @@ -235,6 +235,13 @@ const typo = { lineHeight: '1.6', letterSpacing: `${16 * -0.05}px`, }, + Medium_14: { + fontFamily: 'Pretendard', + fontSize: '14px', + fontWeight: 500, + lineHeight: '1.6', + letterSpacing: `${14 * -0.05}px`, + }, Medium_12: { fontFamily: 'Pretendard', fontSize: '12px', From 071ce13ccddc59dcc3611dfedbb5e6d054f0bcff Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Wed, 19 Feb 2025 01:07:35 +0900 Subject: [PATCH 10/20] =?UTF-8?q?refactor:=20ReportModal=20=EB=AA=A8?= =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=A4=EC=84=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=82=AC=EC=9C=A0=20=EC=84=A0=ED=83=9D?= =?UTF-8?q?=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/molecules/ReportModal/ReportModal.style.ts | 1 + src/components/mobile/molecules/ReportModal/ReportModal.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/mobile/molecules/ReportModal/ReportModal.style.ts b/src/components/mobile/molecules/ReportModal/ReportModal.style.ts index 4880b8f6..9cca1ebc 100644 --- a/src/components/mobile/molecules/ReportModal/ReportModal.style.ts +++ b/src/components/mobile/molecules/ReportModal/ReportModal.style.ts @@ -41,6 +41,7 @@ export const buttonStyling = css(typo.Mobile.Text.Medium_14, { borderRadius: '8px', backgroundColor: color.GY[5], color: color.GY[6], + cursor: 'pointer', }); export const selectedButtonStyling = css({ diff --git a/src/components/mobile/molecules/ReportModal/ReportModal.tsx b/src/components/mobile/molecules/ReportModal/ReportModal.tsx index 847e8f69..8190b6f0 100644 --- a/src/components/mobile/molecules/ReportModal/ReportModal.tsx +++ b/src/components/mobile/molecules/ReportModal/ReportModal.tsx @@ -38,7 +38,10 @@ const ReportModal = ({ isOpen, onConfirm, onClose }: ReportModalProps) => {
    -
    {isTodayTalkPick && '오늘의 톡픽'}
    +
    + {isTodayTalkPick ? '오늘의 톡픽' : '톡픽'} + +
    } @@ -211,7 +220,7 @@ const TalkPickSection = ({
    Date: Sat, 22 Feb 2025 01:11:26 +0900 Subject: [PATCH 12/20] =?UTF-8?q?feat:=20=ED=86=A1=ED=94=BD=EC=97=90=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=EC=9E=90=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B0=80=20=EB=B3=B4=EC=97=AC?= =?UTF-8?q?=EC=A7=80=EB=8F=84=EB=A1=9D=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/ProfileIcon/ProfileIcon.style.ts | 1 + .../organisms/TalkPickSection/TalkPickSection.tsx | 6 +++++- src/stories/atoms/ProfileIcon.stories.tsx | 10 +++++++++- .../mobile/organisms/TalkPickSection.stories.tsx | 1 + src/types/talk-pick.ts | 1 + 5 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/ProfileIcon/ProfileIcon.style.ts b/src/components/atoms/ProfileIcon/ProfileIcon.style.ts index 01938419..8b6f9555 100644 --- a/src/components/atoms/ProfileIcon/ProfileIcon.style.ts +++ b/src/components/atoms/ProfileIcon/ProfileIcon.style.ts @@ -3,6 +3,7 @@ import { css } from '@emotion/react'; export const profileWrapper = css({ all: 'unset', display: 'flex', + flexShrink: 0, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx index 48cbc19d..ef4f485a 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -166,7 +166,11 @@ const TalkPickSection = ({
    - +
    diff --git a/src/stories/atoms/ProfileIcon.stories.tsx b/src/stories/atoms/ProfileIcon.stories.tsx index 56dee08d..8b6a2e55 100644 --- a/src/stories/atoms/ProfileIcon.stories.tsx +++ b/src/stories/atoms/ProfileIcon.stories.tsx @@ -18,7 +18,7 @@ const meta = { }, imgUrl: { control: { type: 'text' } }, size: { - options: ['small', 'large'], + options: ['extraSmall', 'small', 'large'], control: { type: 'radio' }, }, }, @@ -37,11 +37,19 @@ export const All: Story = { render: (args) => (
    • +

      기본 extraSmall

      +

      기본 Small

      기본 Large

      +

      별도 img 있을때 extraSmall

      +

      별도 img 있을때 Small

      Date: Tue, 25 Feb 2025 01:22:49 +0900 Subject: [PATCH 13/20] =?UTF-8?q?refactor:=20ProfileIcon=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=ED=81=AC=EA=B8=B0=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=ED=86=A1=ED=94=BD=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/ProfileIcon/ProfileIcon.style.ts | 4 +- .../TalkPickSection/TalkPickSection.style.ts | 18 ++++++--- .../TalkPickSection/TalkPickSection.tsx | 37 ++++++++++--------- .../organisms/TalkPickSection.stories.tsx | 2 +- src/styles/typo.ts | 7 ++++ 5 files changed, 41 insertions(+), 27 deletions(-) diff --git a/src/components/atoms/ProfileIcon/ProfileIcon.style.ts b/src/components/atoms/ProfileIcon/ProfileIcon.style.ts index 8b6f9555..26280777 100644 --- a/src/components/atoms/ProfileIcon/ProfileIcon.style.ts +++ b/src/components/atoms/ProfileIcon/ProfileIcon.style.ts @@ -24,8 +24,8 @@ export const getProfileSize = (size: 'extraSmall' | 'small' | 'large') => { height: '40px', }), extraSmall: css({ - width: '30px', - height: '30px', + width: '24px', + height: '24px', }), }; diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts index 5b3096cd..f79226e5 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts @@ -53,29 +53,36 @@ export const talkPickInfoWrapper = css({ export const talkPickInfoTopWrapper = css({ display: 'flex', justifyContent: 'space-between', - alignItems: 'center', }); export const talkPickInfoBottomWrapper = css({ display: 'flex', justifyContent: 'space-between', + alignItems: 'center', +}); + +export const talkPickWriterInfoWrapper = css({ + display: 'flex', + alignItems: 'center', + gap: '8px', }); export const talkPickWriterWrapper = css({ display: 'flex', - gap: '10px', + alignItems: 'center', + gap: '4px', }); -export const talkPickWriterStyling = css(typo.Mobile.Text.Medium_12, { +export const talkPickWriterStyling = css(typo.Mobile.Text.SemiBold_12, { color: color.GY[1], }); -export const talkPickDateStyling = css(typo.Mobile.Text.Regular_10, { +export const talkPickDateStyling = css(typo.Mobile.Text.Regular_12, { color: color.GY[2], }); export const talkPickTitleStyling = css(typo.Main.SemiBold, { - width: '230px', + width: '300px', wordBreak: 'break-all', whiteSpace: 'normal', color: color.BK, @@ -83,7 +90,6 @@ export const talkPickTitleStyling = css(typo.Main.SemiBold, { export const talkPickViewStyling = css(typo.Mobile.Text.Regular_10, { color: color.GY[1], - marginTop: '6px', '& > span': { color: color.MAIN, diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx index ef4f485a..1de66a2b 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -165,31 +165,32 @@ const TalkPickSection = ({
    -
    - -
    -
    +
    +
    +
    {talkPick?.baseFields.title}
    + +
    +
    +
    +
    {talkPick?.writer}
    +
    •
    {formatDate(talkPick?.createdAt)}
    -
    -
    -
    - {talkPick?.baseFields.title} -
    -
    - 조회 {formatNumber(talkPick?.views)} -
    +
    + 조회 {formatNumber(talkPick?.views)}
    diff --git a/src/stories/mobile/organisms/TalkPickSection.stories.tsx b/src/stories/mobile/organisms/TalkPickSection.stories.tsx index b9a42775..93dc9d17 100644 --- a/src/stories/mobile/organisms/TalkPickSection.stories.tsx +++ b/src/stories/mobile/organisms/TalkPickSection.stories.tsx @@ -49,7 +49,7 @@ const meta = { args: { talkPick: defaultTodayTalkPick, myTalkPick: false, - isTodayTalkPick: true, + isTodayTalkPick: false, }, decorators: [ (Story) => ( diff --git a/src/styles/typo.ts b/src/styles/typo.ts index 8e0e36e3..6e07008b 100644 --- a/src/styles/typo.ts +++ b/src/styles/typo.ts @@ -263,6 +263,13 @@ const typo = { lineHeight: '1.3', letterSpacing: `${8 * -0.05}px`, }, + Regular_12: { + fontFamily: 'Pretendard', + fontSize: '12px', + fontWeight: 400, + lineHeight: '1.6', + letterSpacing: `${12 * -0.05}px`, + }, Regular_10: { fontFamily: 'Pretendard', fontSize: '10px', From 300456e3ef7d4a6b4215903076b7ea231a4d9de4 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Tue, 25 Feb 2025 01:45:09 +0900 Subject: [PATCH 14/20] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=9C=ED=95=84?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=97=90=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=EC=98=B5=EC=85=94=EB=84=90=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=84=EB=8B=AC=20=EB=B0=8F=20format=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EC=97=90=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=97=B0=EA=B2=B0=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/organisms/TalkPickSection/TalkPickSection.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx index 1de66a2b..18005fca 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -176,21 +176,21 @@ const TalkPickSection = ({
    {talkPick?.writer}
    •
    - {formatDate(talkPick?.createdAt)} + {formatDate(talkPick?.createdAt ?? '')}
    - 조회 {formatNumber(talkPick?.views)} + 조회 {formatNumber(talkPick?.views ?? '')}
    From 00705ac14f56026194aa45a72699c8662465a5e4 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Tue, 25 Feb 2025 01:57:45 +0900 Subject: [PATCH 15/20] =?UTF-8?q?refactor:=20=ED=86=A0=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/organisms/TalkPickSection/TalkPickSection.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts index f79226e5..079602aa 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.style.ts @@ -143,7 +143,7 @@ export const contentBtnStyling = css({ export const toastModalStyling = css({ position: 'fixed', - top: '110px', + top: '65px', left: '50%', transform: 'translate(-50%)', zIndex: '1000', From b64bfb2bc829111965ab2d231f2ea6ff672e8328 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Tue, 25 Feb 2025 02:32:20 +0900 Subject: [PATCH 16/20] =?UTF-8?q?refactor:=20ReportModal,=20TalkPickSectio?= =?UTF-8?q?n=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20key=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mobile/molecules/ReportModal/ReportModal.tsx | 1 + .../mobile/organisms/TalkPickSection/TalkPickSection.tsx | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/mobile/molecules/ReportModal/ReportModal.tsx b/src/components/mobile/molecules/ReportModal/ReportModal.tsx index 8190b6f0..84b01956 100644 --- a/src/components/mobile/molecules/ReportModal/ReportModal.tsx +++ b/src/components/mobile/molecules/ReportModal/ReportModal.tsx @@ -38,6 +38,7 @@ const ReportModal = ({ isOpen, onConfirm, onClose }: ReportModalProps) => { @@ -113,7 +113,7 @@ const VoteToggle: React.FC = ({ onClick={() => { handleVoteButtonClick('B'); }} - css={S.getButtonStyle('B', currnetOption)} + css={S.getButtonStyle('B', currentOption)} > {rightButtonText} diff --git a/src/components/molecules/VotePrototype/VotePrototype.tsx b/src/components/molecules/VotePrototype/VotePrototype.tsx index fd7757ab..d740ab83 100644 --- a/src/components/molecules/VotePrototype/VotePrototype.tsx +++ b/src/components/molecules/VotePrototype/VotePrototype.tsx @@ -39,7 +39,7 @@ const VotePrototype: React.FC = ({ const totalVotes: number = leftVotes + rightVotes; const leftPercentage: string = ((leftVotes / totalVotes) * 100).toFixed(1); const rightPercentage: string = ((rightVotes / totalVotes) * 100).toFixed(1); - const currnetOption: MyVoteOption = accessToken + const currentOption: MyVoteOption = accessToken ? selectedVote : loggedOutVoteOption; @@ -112,7 +112,7 @@ const VotePrototype: React.FC = ({ onClick={() => { handleVoteButtonClick('A'); }} - css={S.getButtonStyle('A', currnetOption)} + css={S.getButtonStyle('A', currentOption)} > {leftButtonText} @@ -123,7 +123,7 @@ const VotePrototype: React.FC = ({ onClick={() => { handleVoteButtonClick('B'); }} - css={S.getButtonStyle('B', currnetOption)} + css={S.getButtonStyle('B', currentOption)} > {rightButtonText} From 6cddd7b6b612b72b5f049c506c97faca5dfa8604 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Tue, 4 Mar 2025 22:03:59 +0900 Subject: [PATCH 18/20] =?UTF-8?q?refactor:=20=ED=86=A1=ED=94=BD=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EB=AA=A8=EB=8B=AC=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=83=81=EC=88=98=EB=A1=9C=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/TalkPickSection/TalkPickSection.tsx | 6 +++--- .../organisms/TalkPickSection/TalkPickSection.tsx | 6 +++--- src/constants/message.ts | 11 +++++++++++ 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx index c933404b..0715bc6a 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -11,7 +11,7 @@ import { import { useNavigate } from 'react-router-dom'; import { TalkPickDetail } from '@/types/talk-pick'; import { PATH } from '@/constants/path'; -import { ERROR } from '@/constants/message'; +import { ERROR, PROMPT } from '@/constants/message'; import { formatDate, formatNumber } from '@/utils/formatData'; import Button from '@/components/atoms/Button/Button'; import IconButton from '@/components/mobile/atoms/IconButton/IconButton'; @@ -127,13 +127,13 @@ const TalkPickSection = ({ onClose={onCloseModal} /> { setActiveModal('reportTalkPick'); diff --git a/src/components/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/organisms/TalkPickSection/TalkPickSection.tsx index 9709cd7c..55ee6011 100644 --- a/src/components/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/organisms/TalkPickSection/TalkPickSection.tsx @@ -11,7 +11,7 @@ import { import { useNavigate } from 'react-router-dom'; import { TalkPickDetail } from '@/types/talk-pick'; import { PATH } from '@/constants/path'; -import { ERROR, SUCCESS } from '@/constants/message'; +import { ERROR, PROMPT, SUCCESS } from '@/constants/message'; import { formatDate, formatNumber } from '@/utils/formatData'; import Button from '@/components/atoms/Button/Button'; import SummaryBox from '@/components/molecules/SummaryBox/SummaryBox'; @@ -143,13 +143,13 @@ const TalkPickSection = ({ onClose={onCloseModal} /> { setActiveModal('reportTalkPick'); diff --git a/src/constants/message.ts b/src/constants/message.ts index c6b9ae53..b4adcd03 100644 --- a/src/constants/message.ts +++ b/src/constants/message.ts @@ -217,3 +217,14 @@ export const PROFILE = { SIZE_LIMIT: '3MB 이하의 사진만 가능합니다.', }, }; + +export const PROMPT = { + POST: { + DELETE: '해당 게시글을 삭제하시겠습니까?', + REPORT: '해당 게시글을 신고하시겠습니까?', + }, + GAME: { + DELETE: '해당 게임을 삭제하시겠습니까?', + REPORT: '해당 게임을 신고하시겠습니까?', + }, +}; From 5227975f8859ee1584fabc1683b58c8abc1309fd Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Tue, 4 Mar 2025 22:16:08 +0900 Subject: [PATCH 19/20] =?UTF-8?q?refactor:=20React.ReactNode=EB=A5=BC=20Re?= =?UTF-8?q?actNode=EB=A1=9C=20=EC=B6=95=EC=95=BD=ED=95=98=EC=97=AC=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mobile/molecules/SummaryBox/SummaryBox.tsx | 4 ++-- src/components/molecules/SummaryBox/SummaryBox.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/mobile/molecules/SummaryBox/SummaryBox.tsx b/src/components/mobile/molecules/SummaryBox/SummaryBox.tsx index 908129ca..2286d800 100644 --- a/src/components/mobile/molecules/SummaryBox/SummaryBox.tsx +++ b/src/components/mobile/molecules/SummaryBox/SummaryBox.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { TalkPickSummary } from '@/types/talk-pick'; import { SadEmoji, Spinner, StatusFail, StatusNotRequired } from '@/assets'; import SummaryItem from '@/components/mobile/atoms/SummaryItem/SummaryItem'; @@ -16,7 +16,7 @@ const SummaryBox = ({ }: SummaryBoxProps) => { const contentMap: Record< 'PENDING' | 'SUCCESS' | 'FAIL' | 'NOT_REQUIRED', - React.ReactNode + ReactNode > = { PENDING: (
    diff --git a/src/components/molecules/SummaryBox/SummaryBox.tsx b/src/components/molecules/SummaryBox/SummaryBox.tsx index d5fd86aa..5ec5d779 100644 --- a/src/components/molecules/SummaryBox/SummaryBox.tsx +++ b/src/components/molecules/SummaryBox/SummaryBox.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ReactNode } from 'react'; import { TalkPickSummary } from '@/types/talk-pick'; import { SadEmoji, Spinner, StatusFail, StatusNotRequired } from '@/assets'; import SummaryItem from '@/components/atoms/SummaryItem/SummaryItem'; @@ -16,7 +16,7 @@ const SummaryBox = ({ }: SummaryBoxProps) => { const contentMap: Record< 'PENDING' | 'SUCCESS' | 'FAIL' | 'NOT_REQUIRED', - React.ReactNode + ReactNode > = { PENDING: (
    From da4b270be125ad6fba64a56fc9b34ce4ca731cc4 Mon Sep 17 00:00:00 2001 From: areumH <94692566+areumH@users.noreply.github.com> Date: Tue, 4 Mar 2025 22:26:16 +0900 Subject: [PATCH 20/20] =?UTF-8?q?refactor:=20=ED=86=A1=ED=94=BD=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20alt=EC=97=90=20image=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=8C=80=EC=8B=A0=20url=20=EA=B0=92=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mobile/organisms/TalkPickSection/TalkPickSection.tsx | 5 ++--- src/components/organisms/TalkPickSection/TalkPickSection.tsx | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx index 0715bc6a..fcf97700 100644 --- a/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/mobile/organisms/TalkPickSection/TalkPickSection.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/img-redundant-alt */ import React, { useState } from 'react'; import { AngleSmallUp, @@ -206,8 +205,8 @@ const TalkPickSection = ({
    {talkPick?.imgUrls.length !== 0 && (
    - {talkPick?.imgUrls.map((url, idx) => ( - {`image + {talkPick?.imgUrls.map((url) => ( + {url} ))}
    )} diff --git a/src/components/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/organisms/TalkPickSection/TalkPickSection.tsx index 55ee6011..2e7cf729 100644 --- a/src/components/organisms/TalkPickSection/TalkPickSection.tsx +++ b/src/components/organisms/TalkPickSection/TalkPickSection.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/img-redundant-alt */ /* eslint-disable no-console */ import React, { useState } from 'react'; import { @@ -201,8 +200,8 @@ const TalkPickSection = ({
    {talkPick?.imgUrls.length !== 0 && (
    - {talkPick?.imgUrls.map((url, idx) => ( - {`image + {talkPick?.imgUrls.map((url) => ( + {url} ))}
    )}