feat: (#20) 훅 테스트 코드 작성 시작

frontend/__test__/hooks/useWritingOpiton.test.tsx

@@ -0,0 +1,15 @@
+import { renderHook, act } from '@testing-library/react';
+
+/**
+ * @jest-environment jsdom
+ */
+
+test('useCount hook을 테스트한다.', () => {
+ const { result } = renderHook(() => useCount());
+
+ act(() => {
+ result.current.increase();
+ });
+
+ expect(result.current.count).toBe(1);
+});

frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx

@@ -1,101 +1,46 @@
-import React from 'react';
-
-import { styled } from 'styled-components';
-
 import OptionCancelButton from './OptionCancelButton';
 import OptionUploadImageButton from './OptionUploadImageButton';
+import * as S from './style';
 
 interface WritingVoteOptionProps {
  text: string;
  isDeletable: boolean;
+ handleDeleteOptionClick: () => void;
  imageUrl?: string;
 }
 
-const Container = styled.li`
- display: flex;
- gap: 10px;
-`;
-
-const OptionContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
-
- width: 100%;
- padding: 20px;
- border-radius: 4px;
-
- background-color: #e6e6e6;
-`;
-
-const ContentContainer = styled.div`
- display: flex;
- justify-content: space-between;
-
- width: 100%;
-`;
-
-const ContentTextArea = styled.textarea`
- width: 100%;
- margin-right: 10px;
- padding: 8px;
-
- font-size: 1.3rem;
- line-height: 2.4rem;
-
- background-color: #e6e6e6;
-
- resize: none;
-`;
-
-const ImageContainer = styled.div`
- width: 80%;
- margin-top: 20px;
-
- position: relative;
-`;
-
-const Image = styled.img`
- width: 100%;
- border-radius: 4px;
-
- aspect-ratio: 1/1;
- object-fit: cover;
-`;
-
-const ImageCancelWrapper = styled.div`
- position: absolute;
- top: 10px;
- right: 10px;
-`;
-
-export default function WritingVoteOption({ text, isDeletable, imageUrl }: WritingVoteOptionProps) {
+export default function WritingVoteOption({
+ text,
+ isDeletable,
+ handleDeleteOptionClick,
+ imageUrl,
+}: WritingVoteOptionProps) {
  return (
- <Container>
+ <S.Container>
  {isDeletable && (
- <div title="선택지 삭제하기">
+ <div title="선택지 삭제하기" onClick={handleDeleteOptionClick}>
  <OptionCancelButton />
  </div>
  )}
- <OptionContainer>
- <ContentContainer>
- <ContentTextArea
+ <S.OptionContainer>
+ <S.ContentContainer>
+ <S.ContentTextArea
  value={text}
  placeholder="내용을 입력해주세요."
  rows={2}
  maxLength={50}
  />
  {!imageUrl && <OptionUploadImageButton />}
- </ContentContainer>
+ </S.ContentContainer>
  {imageUrl && (
- <ImageContainer>
- <Image src={imageUrl} alt={text} />
- <ImageCancelWrapper>
+ <S.ImageContainer>
+ <S.Image src={imageUrl} alt={text} />
+ <S.ImageCancelWrapper>
  <OptionCancelButton />
- </ImageCancelWrapper>
- </ImageContainer>
+ </S.ImageCancelWrapper>
+ </S.ImageContainer>
  )}
- </OptionContainer>
- </Container>
+ </S.OptionContainer>
+ </S.Container>
  );
 }

frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/style.ts

@@ -0,0 +1,59 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.li`
+ display: flex;
+ gap: 10px;
+`;
+
+export const OptionContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 100%;
+ padding: 20px;
+ border-radius: 4px;
+
+ background-color: #e6e6e6;
+`;
+
+export const ContentContainer = styled.div`
+ display: flex;
+ justify-content: space-between;
+ gap: 10px;
+
+ width: 100%;
+`;
+
+export const ContentTextArea = styled.textarea`
+ width: 100%;
+ padding: 8px;
+
+ font-size: 1.3rem;
+ line-height: 2.4rem;
+
+ background-color: #e6e6e6;
+
+ resize: none;
+`;
+
+export const ImageContainer = styled.div`
+ width: 80%;
+ margin-top: 20px;
+
+ position: relative;
+`;
+
+export const Image = styled.img`
+ width: 100%;
+ border-radius: 4px;
+
+ aspect-ratio: 1/1;
+ object-fit: cover;
+`;
+
+export const ImageCancelWrapper = styled.div`
+ position: absolute;
+ top: 10px;
+ right: 10px;
+`;

frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOptionList.stories.tsx

@@ -44,15 +44,27 @@ const MOCK_MIN_VOTE_OPTION = [
 export const MaxCountOptionList: Story = {
  render: () => (
  <ListWrapper>
- <WritingVoteOptionList optionList={MOCK_MAX_VOTE_OPTION} />
+ <WritingVoteOptionList
+ handleAddOptionClick={() => {}}
+ handleDeleteOptionClick={() => {}}
+ handleRemoveImageClick={() => {}}
+ handleUploadImageChange={() => {}}
+ optionList={MOCK_MAX_VOTE_OPTION}
+ />
  </ListWrapper>
  ),
 };
 
 export const MinCountOptionList: Story = {
  render: () => (
  <ListWrapper>
- <WritingVoteOptionList optionList={MOCK_MIN_VOTE_OPTION} />
+ <WritingVoteOptionList
+ handleAddOptionClick={() => {}}
+ handleDeleteOptionClick={() => {}}
+ handleRemoveImageClick={() => {}}
+ handleUploadImageChange={() => {}}
+ optionList={MOCK_MIN_VOTE_OPTION}
+ />
  </ListWrapper>
  ),
 };

frontend/src/components/optionList/WritingVoteOptionList/index.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-
-import { styled } from 'styled-components';
+import React, { ChangeEvent, useState } from 'react';
 
+import * as S from './style';
 import WritingVoteOption from './WritingVoteOption';
 
 interface WritingVoteOptionType {
@@ -12,27 +11,31 @@ interface WritingVoteOptionType {
 
 interface WritingVoteOptionListProps {
  optionList: WritingVoteOptionType[];
+ handleAddOptionClick: () => void;
+ handleDeleteOptionClick: (optionId: number) => void;
+ handleRemoveImageClick: (optionId: number) => void;
+ handleUploadImageChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
-const Container = styled.ul`
- display: flex;
- flex-direction: column;
- gap: 20px;
-`;
+const MINIMUM_COUNT = 2;
+const MAXIMUM_COUNT = 5;
+
+export default function WritingVoteOptionList() {
+ const [optionList, setOpitonList] = useState<WritingVoteOptionType[]>([]);
+ const isDeletable = optionList.length > MINIMUM_COUNT;
 
-export default function WritingVoteOptionList({ optionList }: WritingVoteOptionListProps) {
- const isDeletable = optionList.length > 2;
  return (
- <Container>
+ <S.Container>
  {optionList.map(optionItem => (
  <WritingVoteOption
  key={optionItem.id}
  isDeletable={isDeletable}
  text={optionItem.text}
+ handleDeleteOptionClick={() => {}}
  imageUrl={optionItem.imageUrl}
  />
  ))}
- {optionList.length < 5 && <button>더하기</button>}
- </Container>
+ {optionList.length < MAXIMUM_COUNT && <button>더하기</button>}
+ </S.Container>
  );
 }

frontend/src/components/optionList/WritingVoteOptionList/style.ts

@@ -0,0 +1,7 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.ul`
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+`;