feat: (#275) 마감완료 여부 색상 동그라미로 보여주기 구현

woowacourse-teams · Aug 9, 2023 · b51f70c · b51f70c
1 parent 16a6983
commit b51f70c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx
@@ -11,6 +11,8 @@ import WrittenVoteOptionList from '@components/optionList/WrittenVoteOptionList'
 import { PATH } from '@constants/path';
 import { POST } from '@constants/vote';
 
+import { checkClosedPost } from '@utils/time';
+
 import * as S from './style';
 
 interface PostProps {
@@ -24,6 +26,8 @@ export default function Post({ postInfo, isPreview }: PostProps) {
  const { mutate: createVote } = useCreateVote({ isPreview, postId });
  const { mutate: editVote } = useEditVote({ isPreview, postId });
 
+ const isActive = !checkClosedPost(deadline);
+
  const handleVoteClick = (newOptionId: number) => {
  if (writer.nickname === loggedInfo.userInfo?.nickname) return;
 
@@ -58,6 +62,7 @@ export default function Post({ postInfo, isPreview }: PostProps) {
  <S.Category aria-label="카테고리">
  {category.map(category => category.name).join(' | ')}
  </S.Category>
+ <S.ActivateState aria-label="마감 상태" $isActive={isActive} />
  <S.Title aria-label="제목" $isPreview={isPreview}>
  {title}
  </S.Title>

diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts
@@ -5,6 +5,8 @@ import { styled } from 'styled-components';
 import { theme } from '@styles/theme';
 
 export const Container = styled.li`
+ position: relative;
+
  font: var(--text-small);
  letter-spacing: 0.5px;
  line-height: 1.5;
@@ -22,6 +24,18 @@ export const Category = styled.span`
  }
 `;
 
+export const ActivateState = styled.div<{ $isActive: boolean }>`
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ background-color: ${({ $isActive }) => ($isActive ? 'var(--active-post)' : 'var(--dark-gray)')};
+`;
+
 export const Title = styled.p<{ $isPreview: boolean }>`
  display: -webkit-box;
 

diff --git a/frontend/src/styles/globalStyle.ts b/frontend/src/styles/globalStyle.ts
@@ -34,6 +34,7 @@ export const GlobalStyle = createGlobalStyle`
  --header: #1f1f1f;
  --graph-color-purple:#853DE1;
  --graph-color-green:#5AEAA5;
+ --active-post: #00DFA2;
  
  /* Fonts *****************************************/
  --text-title: 600 2rem/2.4rem san-serif;