From acf6b078113339d991eac8d46aca8ce9c1b83594 Mon Sep 17 00:00:00 2001 From: CHAEYOUNG SONG <77428876+chaeyoung103@users.noreply.github.com> Date: Thu, 8 Feb 2024 20:29:00 +0900 Subject: [PATCH 1/4] =?UTF-8?q?A=EC=82=AC=EC=9D=B4=EB=93=9C=20=ED=86=A0?= =?UTF-8?q?=ED=94=BD=20=EC=83=9D=EC=84=B1=20API=20=EC=97=B0=EB=8F=99=20(#1?= =?UTF-8?q?75)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: lineheight 1.4 기본값 적용 * feat: text, image icon 추가 * fix: padding 값 수정 * fix: 수정된 input theme으로 변경 * feat: 카테고리 input form 추가 * fix: 파일 로직 변경 * feat: 토픽생성 image input 컴포넌트 추가 * fix: textinput props 변경 * feat: 뒤로가기 로직을 위한 코드수정 * feat: B topic step2 추가 * feat: B topic step1 추가 * feat: B topic 페이지 추가 * feat: add delete icon * feat: add maxlength * fix: constant fix * fix: constant fix * fix: form fix * feat: add BTopicCreate Step2 page * feat: separate imageinput component * feat: add imgurl dto * feat: add topic deadline constant * fix: modal close button width, height fix * feat: 토픽생성 api 구축 * feat: 토픽생성 form 유효성 검사 추가 * chore: update gitignore * fix: update value by useWatch * fix: lint error * fix: 로고색상 변경 #169 * feat: 토픽생성 유효성 검사 및 api 연동 * feat: 토픽생성 api dto 수정 * fix: 슬라이더 , 투표완료 컴포넌트 내 로고위치 수정 * fix: topic content 글자수에 따른 size 조정 * fix: 로그인 화면 로고 B 색상 수정 * fix: 슬라이더 topic content text z index 수정 * fix: api 변경에 따라 topic content 받아오도록 수정 * fix: topiccreate dto interface 위치 조정 * feat: Aside topiccreate api 연동 * fix: 절대경로로 수정 --------- Co-authored-by: 전진호 --- src/apis/topic/useTopics.ts | 7 +-- src/interfaces/api/topic.ts | 4 +- .../Topic/Create/ASide/ATopicCreate.tsx | 58 ++++++++++++++----- .../Topic/Create/BSide/BTopicCreate.tsx | 12 +--- src/routes/Topic/Create/TopicCreate.tsx | 11 ++++ 5 files changed, 60 insertions(+), 32 deletions(-) diff --git a/src/apis/topic/useTopics.ts b/src/apis/topic/useTopics.ts index 6de0df0..8596351 100644 --- a/src/apis/topic/useTopics.ts +++ b/src/apis/topic/useTopics.ts @@ -1,11 +1,6 @@ import { useMutation, useQuery } from '@tanstack/react-query'; -import { - CHOICE_OPTIONS, - ChoiceContent, - TopicCreateRequestDTO, - TopicResponse, -} from '@interfaces/api/topic'; +import { TopicCreateRequestDTO, TopicResponse } from '@interfaces/api/topic'; import { PagingDataResponse } from '@interfaces/api'; diff --git a/src/interfaces/api/topic.ts b/src/interfaces/api/topic.ts index 78e517d..15fcd7b 100644 --- a/src/interfaces/api/topic.ts +++ b/src/interfaces/api/topic.ts @@ -18,10 +18,10 @@ interface TopicResponse { export interface TopicCreateRequestDTO { side: string; - keywordName: string; + keywordName: string | null; title: string; choices: ChoiceRequest[]; - deadline: number; + deadline: number | null; } interface ChoiceRequest { diff --git a/src/routes/Topic/Create/ASide/ATopicCreate.tsx b/src/routes/Topic/Create/ASide/ATopicCreate.tsx index 4ac5011..7424745 100644 --- a/src/routes/Topic/Create/ASide/ATopicCreate.tsx +++ b/src/routes/Topic/Create/ASide/ATopicCreate.tsx @@ -1,12 +1,15 @@ import React, { useState, useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { useCreateTopics } from '@apis/topic/useTopics'; import DefaultButton from '@components/commons/Button/DefaultButton'; import { Col } from '@components/commons/Flex/Flex'; import Text from '@components/commons/Text/Text'; import TextInput from '@components/commons/TextInput/TextInput'; import { theme3 } from '@components/commons/TextInput/theme'; import TopicCreateTextInput from '@components/TopicCreate/TopicCreateTextInput'; +import { CHOICE_OPTIONS } from '@interfaces/api/topic'; +import { TopicCreateDTO } from '@routes/Topic/Create/TopicCreate'; import { INPUT_TYPE, CONFIG } from '@constants/form'; @@ -14,12 +17,6 @@ import { colors } from '@styles/theme'; import { Container, SubmitButton } from './ATopicCreate.styles'; -interface TopicCreateDTO { - topicTitle: string; - ATopic: string; - BTopic: string; -} - const ATopicCreate = () => { const methods = useForm({ mode: 'onChange' }); @@ -27,21 +24,56 @@ const ATopicCreate = () => { ? `${methods.watch(INPUT_TYPE.TOPIC_TITLE)?.length}/20` : '0/20'; const [isFormFilled, setIsFormFilled] = useState(false); - const handleSubmitButtonClick = () => { - console.log('submit'); + + const createTopicMutation = useCreateTopics(); + + const handleSubmitForm = async () => { + const data = methods.getValues(); + try { + const res = await createTopicMutation.mutateAsync({ + side: 'TOPIC_A', + title: data.topicTitle, + keywordName: null, + deadline: null, + choices: [ + { + choiceContentRequest: { + text: data.ATopic, + type: 'IMAGE_TEXT', + imageUrl: null, + }, + choiceOption: CHOICE_OPTIONS.CHOICE_A, + }, + { + choiceContentRequest: { + text: data.BTopic, + type: 'IMAGE_TEXT', + imageUrl: null, + }, + choiceOption: CHOICE_OPTIONS.CHOICE_B, + }, + ], + }); + console.log('success :', res); + } catch (error) { + console.error(error); + } }; useEffect(() => { + const ATopicCondition = methods.getFieldState(INPUT_TYPE.A_TOPIC, methods.formState); + const BTopicCondition = methods.getFieldState(INPUT_TYPE.B_TOPIC, methods.formState); if ( - methods.getValues(INPUT_TYPE.TOPIC_TITLE) && - methods.getValues(INPUT_TYPE.A_TOPIC) && - methods.getValues(INPUT_TYPE.B_TOPIC) + !ATopicCondition.invalid && + !BTopicCondition.invalid && + ATopicCondition.isDirty && + BTopicCondition.isDirty ) { setIsFormFilled(true); } else { setIsFormFilled(false); } - }, [methods]); + }, [methods.formState, methods]); return ( @@ -69,7 +101,7 @@ const ATopicCreate = () => { diff --git a/src/routes/Topic/Create/BSide/BTopicCreate.tsx b/src/routes/Topic/Create/BSide/BTopicCreate.tsx index e528713..f26018a 100644 --- a/src/routes/Topic/Create/BSide/BTopicCreate.tsx +++ b/src/routes/Topic/Create/BSide/BTopicCreate.tsx @@ -5,6 +5,7 @@ import { useSearchParams } from 'react-router-dom'; import { useCreateTopics } from '@apis/topic/useTopics'; import DefaultButton from '@components/commons/Button/DefaultButton'; import { CHOICE_OPTIONS, TopicCreateRequestDTO } from '@interfaces/api/topic'; +import { TopicCreateDTO } from '@routes/Topic/Create/TopicCreate'; import { INPUT_TYPE } from '@constants/form'; @@ -18,17 +19,6 @@ import { import BTopicCreateStep1 from './BTopicCreateStep1'; import BTopicCreateStep2 from './BTopicCreateStep2'; -interface TopicCreateDTO { - topicTitle: string; - ATopic: string; - BTopic: string; - topicCategory: string; - ATopicImageURL: string; - BTopicImageURL: string; - topicDeadline: number; - topicType: string; -} - const BTopicCreate = () => { const methods = useForm({ mode: 'onChange' }); const contentType = useWatch({ diff --git a/src/routes/Topic/Create/TopicCreate.tsx b/src/routes/Topic/Create/TopicCreate.tsx index 2fcb355..994ada8 100644 --- a/src/routes/Topic/Create/TopicCreate.tsx +++ b/src/routes/Topic/Create/TopicCreate.tsx @@ -18,6 +18,17 @@ import { SideChangeButton, } from './TopicCreate.sytles'; +export interface TopicCreateDTO { + topicTitle: string; + ATopic: string; + BTopic: string; + topicCategory: string; + ATopicImageURL: string; + BTopicImageURL: string; + topicDeadline: number; + topicType: string; +} + const TopicCreate = () => { const navigate = useNavigate(); const [searchParams] = useSearchParams(); From ac72441ff208484c13aa22c2a209c036d8f85006 Mon Sep 17 00:00:00 2001 From: CHAEYOUNG SONG <77428876+chaeyoung103@users.noreply.github.com> Date: Thu, 8 Feb 2024 20:58:17 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=ED=86=A0=ED=94=BD=EC=83=9D=EC=84=B1?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=ED=9B=84=20=EB=A1=9C=EC=A7=81=20(#176)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: lineheight 1.4 기본값 적용 * feat: text, image icon 추가 * fix: padding 값 수정 * fix: 수정된 input theme으로 변경 * feat: 카테고리 input form 추가 * fix: 파일 로직 변경 * feat: 토픽생성 image input 컴포넌트 추가 * fix: textinput props 변경 * feat: 뒤로가기 로직을 위한 코드수정 * feat: B topic step2 추가 * feat: B topic step1 추가 * feat: B topic 페이지 추가 * feat: add delete icon * feat: add maxlength * fix: constant fix * fix: constant fix * fix: form fix * feat: add BTopicCreate Step2 page * feat: separate imageinput component * feat: add imgurl dto * feat: add topic deadline constant * fix: modal close button width, height fix * feat: 토픽생성 api 구축 * feat: 토픽생성 form 유효성 검사 추가 * chore: update gitignore * fix: update value by useWatch * fix: lint error * fix: 로고색상 변경 #169 * feat: 토픽생성 유효성 검사 및 api 연동 * feat: 토픽생성 api dto 수정 * fix: 슬라이더 , 투표완료 컴포넌트 내 로고위치 수정 * fix: topic content 글자수에 따른 size 조정 * fix: 로그인 화면 로고 B 색상 수정 * fix: 슬라이더 topic content text z index 수정 * fix: api 변경에 따라 topic content 받아오도록 수정 * fix: topiccreate dto interface 위치 조정 * feat: Aside topiccreate api 연동 * fix: 절대경로로 수정 * feat: 토픽생성 완료시 각 사이드 화면으로 이동 --------- Co-authored-by: 전진호 --- src/routes/Topic/Create/ASide/ATopicCreate.tsx | 4 +++- src/routes/Topic/Create/BSide/BTopicCreate.tsx | 5 +++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/routes/Topic/Create/ASide/ATopicCreate.tsx b/src/routes/Topic/Create/ASide/ATopicCreate.tsx index 7424745..520904e 100644 --- a/src/routes/Topic/Create/ASide/ATopicCreate.tsx +++ b/src/routes/Topic/Create/ASide/ATopicCreate.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; +import { useNavigate } from 'react-router-dom'; import { useCreateTopics } from '@apis/topic/useTopics'; import DefaultButton from '@components/commons/Button/DefaultButton'; @@ -18,6 +19,7 @@ import { colors } from '@styles/theme'; import { Container, SubmitButton } from './ATopicCreate.styles'; const ATopicCreate = () => { + const navigate = useNavigate(); const methods = useForm({ mode: 'onChange' }); const titleProgress = methods.watch(INPUT_TYPE.TOPIC_TITLE) @@ -54,7 +56,7 @@ const ATopicCreate = () => { }, ], }); - console.log('success :', res); + navigate(`/topics/a`); } catch (error) { console.error(error); } diff --git a/src/routes/Topic/Create/BSide/BTopicCreate.tsx b/src/routes/Topic/Create/BSide/BTopicCreate.tsx index f26018a..4c28e96 100644 --- a/src/routes/Topic/Create/BSide/BTopicCreate.tsx +++ b/src/routes/Topic/Create/BSide/BTopicCreate.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form'; -import { useSearchParams } from 'react-router-dom'; +import { useNavigate, useSearchParams } from 'react-router-dom'; import { useCreateTopics } from '@apis/topic/useTopics'; import DefaultButton from '@components/commons/Button/DefaultButton'; @@ -20,6 +20,7 @@ import BTopicCreateStep1 from './BTopicCreateStep1'; import BTopicCreateStep2 from './BTopicCreateStep2'; const BTopicCreate = () => { + const navigate = useNavigate(); const methods = useForm({ mode: 'onChange' }); const contentType = useWatch({ control: methods.control, @@ -67,7 +68,7 @@ const BTopicCreate = () => { }, ], }); - console.log('success :', res); + navigate(`/topics/b`); } catch (error) { console.error(error); } From 8c74cf2ddcbc11843c14bfcc33abf275e0484030 Mon Sep 17 00:00:00 2001 From: Jeon Jinho Date: Thu, 8 Feb 2024 21:25:26 +0900 Subject: [PATCH 3/4] fix: remove enable option (#177) --- .github/workflows/cd.yml | 59 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 .github/workflows/cd.yml diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml new file mode 100644 index 0000000..ecd06c2 --- /dev/null +++ b/.github/workflows/cd.yml @@ -0,0 +1,59 @@ +name: CD + +on: + push: + branches: + - main + +jobs: + build: + name: build & deploy + runs-on: ubuntu-latest + steps: + - name: checkout Github Action + uses: actions/checkout@v3 + + - name: Get npm cache directory + id: npm-cache-dir + run: | + echo "::set-output name=dir::$(npm config get cache)" + - uses: actions/cache@v3 + id: npm-cache + with: + path: ${{ steps.npm-cache-dir.outputs.dir }} + key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-node- + + - name: install yarn dependencies + run: yarn install + + - name: react build + run: yarn run build + + # aws에 접근하기 위한 권한을 받아옵니다. + - name: Configure AWS credentials + uses: aws-actions/configure-aws-credentials@v1 + with: + aws-access-key-id: ${{ secrets.AWS_S3_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_S3_SECRET_KEY }} + aws-region: ap-northeast-2 + + # S3에 build 파일을 올립니다. + - name: Upload to S3 + env: + BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}} + run: | + aws s3 sync \ + ./build s3://$BUCKET_NAME + + # cloudfront로 배포되는 파일은 기본설정 상 24시간동안 캐시가 유지됩니다. + # 배포 후 S3에는 최신 정적리소스가 올라가있지만 엣지로케이션엔 이전 파일이 올라가있는 상태라는 의미입니다. + # 바로 변화가 반영되길 바란다면 invalidation을 해주면 됩니다. + # 해당 부분은 과금될 수 있으니 확인 후 사용하세요! + - name: CloudFront Invalidation + env: + CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_ID}} + run: | + aws cloudfront create-invalidation \ + --distribution-id $CLOUD_FRONT_ID --paths /* From 2232cb41c9fba6ef7f2493636ebb3def7c53bdc5 Mon Sep 17 00:00:00 2001 From: Jeon Jinho Date: Thu, 8 Feb 2024 21:28:13 +0900 Subject: [PATCH 4/4] fix: api url (#178) --- src/apis/topic/useTopics.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/apis/topic/useTopics.ts b/src/apis/topic/useTopics.ts index 8596351..461c9e3 100644 --- a/src/apis/topic/useTopics.ts +++ b/src/apis/topic/useTopics.ts @@ -9,7 +9,7 @@ import client from '@apis/fetch'; export const TOPIC_KEY = 'topics'; const getTopics = () => { - return client.get>('/topics/info/voting?size=100'); + return client.get>('/topics/info?size=100'); }; const useTopics = () => {