Skip to content

Commit

Permalink
Merge branch 'dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jinho1011
Jinho1011 committed Mar 7, 2024
2 parents 212a5c2 + 28a6682 commit f8ce293
Show file tree
Hide file tree
Showing 13 changed files with 352 additions and 85 deletions.
14 changes: 13 additions & 1 deletion src/apis/topic/useTopics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ const useTopics = (req?: TopicsRequestDTO) => {
});
};

const useTrendingTopics = () => {
return useTopics({ status: 'VOTING', sort: 'voteCount,DESC', page: 0, size: 3, side: 'TOPIC_A' });
};

const createTopics = (req: TopicCreateRequestDTO) => {
return client.post({
path: `/topics`,
Expand All @@ -61,4 +65,12 @@ const useGetPresignedURL = () => {

export default useTopics;

export { useCreateTopics, useGetPresignedURL };
export {
getTopics,
useTopics,
useTrendingTopics,
createTopics,
getPresignedURL,
useCreateTopics,
useGetPresignedURL,
};
20 changes: 20 additions & 0 deletions src/assets/icons/hot.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/assets/icons/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import HideIcon from './hide.svg?react';
import HitIcon from './hit.svg?react';
import HomeStrokeIcon from './home-stroke.svg?react';
import HomeIcon from './home.svg?react';
import HotIcon from './hot.svg?react';
import SelectedImageIcon from './image-icon-selected.svg?react';
import ImageIcon from './image-icon.svg?react';
import KakaoIcon from './kakao.svg?react';
Expand All @@ -47,6 +48,7 @@ import ThumbsIcon from './thumbs.svg?react';
import TopicCreatBackgrounIcon from './topic-create-background.svg?react';
import TrashCanIcon from './trash-can.svg?react';
import TrashIcon from './trash.svg?react';
import TrendingIcon from './trending.svg?react';
import UpDownChevronIcon from './up-down.svg?react';
import WriteBoxIcon from './write-box.svg?react';

Expand All @@ -73,6 +75,7 @@ export {
HideIcon,
HitIcon,
HomeIcon,
HotIcon,
HomeStrokeIcon,
KakaoIcon,
LeftDoubleArrowIcon,
Expand All @@ -98,6 +101,7 @@ export {
SelectedImageIcon,
DeleteIcon,
TrashIcon,
TrendingIcon,
AlbumIcon,
CameraIcon,
DotIcon,
Expand Down
12 changes: 12 additions & 0 deletions src/assets/icons/trending.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 102 additions & 0 deletions src/assets/styles/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,108 @@ export const colors = {
navywhite_40: '#7C7986',
navywhite_60: '#A7A6AF',
navywhite_80: '#D3D2D7',

// color collection 2.0
2: {
A_90: '#F6D9E4',
A_80: '#ECB4C8',
A_70: '#E38EAD',
A_60: '#D96991',
A_50: '#D04376',
A_40: '#A6365E',
A_30: '#7D2847',
A_20: '#531B2F',
A_10: '#2A0D18',
B_90: '#D0EAEE',
B_80: '#A1D6DD',
B_70: '#72C1CC',
B_60: '#43ADBB',
B_50: '#1498AA',
B_40: '#107A88',
B_30: '#0C5B66',
B_20: '#083D44',
B_10: '#041E22',
navy_deep_90: '#D3D2D7',
navy_deep_80: '#A7A6AF',
navy_deep_70: '#7C7986',
navy_deep_60: '#504D5E',
navy_deep_50: '#242036',
navy_deep_40: '#1D1A2B',
navy_deep_30: '#161320',
navy_deep_20: '#0E0D16',
navy_deep_10: '#07060B',
navy_light_90: '#DBD8E5',
navy_light_80: '#B8B1CB',
navy_light_70: '#9489B0',
navy_light_60: '#716296',
navy_light_50: '#4D3B7C',
navy_light_40: '#3E2F63',
navy_light_30: '#2E234A',
navy_light_20: '#1F1832',
navy_light_10: '#0F0C19',
purple_90: '#EDE2FD',
neutral_100: '#FFFFFF',
neutral_90: '#E5E5E5',
neutral_80: '#CCCCCC',
neutral_70: '#B2B2B2',
neutral_60: '#999999',
neutral_50: '#7F7F7F',
neutral_40: '#666666',
neutral_30: '#4C4C4C',
neutral_20: '#333333',
neutral_10: '#191919',
neutral_0: '#000000',
error: '#EC13FF',
textbox_top: '#64519B',
transparent: {
A_20: '#D0437633',
B_20: '#1498AA33',
navy_deep_90: '#242036E6',
navy_deep_80: '#242036CC',
navy_deep_70: '#242036B3',
navy_deep_60: '#24203699',
navy_deep_50: '#24203680',
navy_deep_40: '#24203666',
navy_deep_30: '#2420364D',
navy_deep_20: '#24203633',
navy_deep_10: '#2420361A',
navy_light_70: '#4D3B7CB3',
navy_light_80: '#4D3B7CCC',
navy_light_90: '#4D3B7CE6',
navy_light_60: '#4D3B7C99',
navy_light_50: '#4D3B7C80',
navy_light_40: '#4D3B7C66',
navy_light_30: '#4D3B7C4D',
navy_light_20: '#4D3B7C33',
navy_light_10: '#4D3B7C1A',
purple_80: '#DBC5FA',
purple_70: '#C8A9F8',
purple_60: '#B68CF5',
purple_50: '#A46FF3',
purple_40: '#8359C2',
purple_30: '#624392',
purple_20: '#422C61',
purple_10: '#211631',
white_90: '#FFFFFFE6',
white_80: '#FFFFFFCC',
white_70: '#FFFFFFB3',
white_60: '#FFFFFF99',
white_50: '#FFFFFF80',
white_40: '#FFFFFF66',
white_30: '#FFFFFF4D',
white_20: '#FFFFFF33',
black_90: '#000000E6',
black_80: '#000000CC',
black_70: '#000000B3',
black_60: '#00000099',
black_50: '#00000080',
black_40: '#00000066',
black_30: '#0000004D',
black_20: '#00000033',
black_10: '#0000001A',
white_10: '#FFFFFF1A',
},
},
};

export const zIndex = {
Expand Down
8 changes: 7 additions & 1 deletion src/components/A/ATopicCard.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import { styled } from 'styled-components';

const Container = styled.div``;
const Container = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 20px;
border-bottom: 1px solid ${({ theme }) => theme.colors.white_20};
`;

export { Container };
64 changes: 42 additions & 22 deletions src/components/A/ATopicCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';

import useVoteTopic from '@apis/topic/useVoteTopic';
import Chip from '@components/commons/Chip/Chip';
import CommentChip from '@components/commons/Chip/CommentChip';
import { Col, Row } from '@components/commons/Flex/Flex';
Expand All @@ -12,59 +11,75 @@ import { TopicResponse } from '@interfaces/api/topic';

import { colors } from '@styles/theme';

import { MeatballIcon } from '@icons/index';
import { HotIcon, MeatballIcon, TrendingIcon } from '@icons/index';

import { getDateDiff } from '@utils/date';

import { Container } from './ATopicCard.styles';

interface AlphaTopicCardProps {
topic: TopicResponse;
onVote: (topicId: number, side: 'CHOICE_A' | 'CHOICE_B') => void;
chip?: 'popular' | 'close';
isTrending?: boolean;
isMine: boolean;
}

const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps) => {
const AlphaTopicCard = React.memo(({ topic, onVote, isTrending, isMine }: AlphaTopicCardProps) => {
const { BottomSheet: CommentSheet, toggleSheet } = useBottomSheet({});

const isRevealed = topic.selectedOption !== null || isMine;

const [A, B] = topic.choices;
const roundedPercentageA = Math.round((A.voteCount / topic.voteCount) * 100);
const roundedPercentageB = 100 - roundedPercentageA;

const isHot = 45 < roundedPercentageA && roundedPercentageA < 55;
const hasChip = isTrending || isHot;

const handleCommentChipClick = () => {
toggleSheet();
};

const handleVote = (side: 'CHOICE_A' | 'CHOICE_B') => {
onVote(topic.topicId, side);
if (topic.selectedOption === null) {
onVote(topic.topicId, side);
}
};

const handleOptionClick = () => {};

const TrendingChip = () => (
<Chip icon={<TrendingIcon />} tintColor={'#8CFF8A'} label={'실시간 인기 토픽'} />
);
const HotChip = () => <Chip icon={<HotIcon />} tintColor={'#FF61B7'} label={'치열한 경쟁 중'} />;
const TopicCardChip = () => (isTrending ? <TrendingChip /> : isHot ? <HotChip /> : null);

return (
<>
<Col padding={'20px'}>
{chip && (
<Container>
{hasChip && (
<Row style={{ marginBottom: 12 }}>
<Chip tintColor={'#D3FF9C'} label={'실시간 인기 토픽'} />
<TopicCardChip />
</Row>
)}
<Row justifyContent={'space-between'} style={{ marginBottom: 14 }}>
<Row justifyContent={'space-between'} style={{ marginBottom: 14 }} gap={77}>
<Text size={18} weight={500} color={colors.white}>
{topic.topicTitle}
</Text>
{/* TBD: 1차 스펙 아웃 */}
{/* <button onClick={handleOptionClick}>
<button onClick={handleOptionClick}>
<MeatballIcon fill={colors.white_60} />
</button> */}
</button>
</Row>
<Col gap={5} style={{ marginBottom: 14 }}>
<ProgressBar
revealed={topic.selectedOption !== null}
highlighted={topic.selectedOption === 'CHOICE_A'}
revealed={isRevealed}
highlighted={topic.selectedOption === 'CHOICE_A' || isMine}
title={A.content.text || ''}
percentage={roundedPercentageA}
onClick={() => handleVote('CHOICE_A')}
left={() => (
<Text
color={topic.selectedOption === 'CHOICE_A' ? colors.A_80 : colors.A_40}
color={topic.selectedOption === 'CHOICE_A' || isMine ? colors.A_80 : colors.A_40}
size={24}
weight={900}
>
Expand All @@ -73,14 +88,14 @@ const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps)
)}
/>
<ProgressBar
revealed={topic.selectedOption !== null}
highlighted={topic.selectedOption === 'CHOICE_B'}
revealed={isRevealed}
highlighted={topic.selectedOption === 'CHOICE_B' || isMine}
title={B.content.text || ''}
percentage={roundedPercentageB}
onClick={() => handleVote('CHOICE_B')}
left={() => (
<Text
color={topic.selectedOption === 'CHOICE_B' ? colors.B_80 : colors.B_40}
color={topic.selectedOption === 'CHOICE_B' || isMine ? colors.B_80 : colors.B_40}
size={24}
weight={900}
>
Expand All @@ -90,12 +105,17 @@ const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps)
/>
</Col>
<Row justifyContent={'space-between'} alignItems={'center'}>
<Text size={13} color={colors.white_40}>
{getDateDiff(topic.createdAt)} 전
</Text>
<Row gap={8}>
<Text size={13} color={colors.white_40}>
{getDateDiff(topic.createdAt)} 전
</Text>
<Text size={13} color={colors[2].neutral_80}>
{topic.voteCount}명 참여
</Text>
</Row>
<CommentChip count={topic.commentCount} onClick={handleCommentChipClick} />
</Row>
</Col>
</Container>
<CommentSheet>
<TopicComments topic={topic} />
</CommentSheet>
Expand Down
Loading

0 comments on commit f8ce293

Please sign in to comment.