-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: 공통 컴포넌트 개발 및 톡픽 수정, 삭제, 신고, 요약, 댓글 api 연결 #180
Changes from all commits
382c845
eb155db
14a216a
d0a7640
9d51eca
b631e8a
1b48f80
5725d55
298f2c5
82cfb92
d708245
d481d20
8353b58
acd49fc
67f6b49
a98a9d0
24b1553
474772c
799b99b
026ad64
dfe87b9
ab6b8ab
4dfa9ea
2be4363
6b6bbbd
00e1637
bb98d9f
c102e7e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { END_POINT } from '@/constants/api'; | ||
import { Id } from '@/types/api'; | ||
import { axiosInstance } from './interceptor'; | ||
|
||
export const postCommentReport = async ( | ||
talkPickId: Id, | ||
commentId: Id, | ||
reportReason: string, | ||
) => { | ||
const response = await axiosInstance.post( | ||
END_POINT.REPORT_COMMENT(talkPickId, commentId), | ||
{ | ||
reportType: 'COMMENT', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. swagger에서도 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 저도 스웨거에서 'COMMENT'로 고정된 것을 보고 저렇게 작성해두었어요!! |
||
reason: reportReason, | ||
}, | ||
); | ||
return response; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { css } from '@emotion/react'; | ||
import color from '@/styles/color'; | ||
import typo from '@/styles/typo'; | ||
|
||
export const choiceInputContainer = css({ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
alignItems: 'center', | ||
width: '578px', | ||
backgroundColor: color.GY[3], | ||
borderRadius: '20px', | ||
border: `1px solid ${color.GY[2]}`, | ||
}); | ||
|
||
export const choiceInputWithText = (withText: boolean, option: 'A' | 'B') => { | ||
if (!withText) { | ||
return css({}); | ||
} | ||
Comment on lines
+16
to
+18
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. withText로 1차 분기 처리를 하고, true 일 경우 option을 통해 스타일을 설정을 하는 방식이 정말 깔끔한거 같습니다! |
||
|
||
const style = { | ||
A: css({ | ||
border: `1px solid ${color.RED}`, | ||
backgroundColor: color.WT, | ||
}), | ||
B: css({ | ||
border: `1px solid ${color.BLUE}`, | ||
backgroundColor: color.WT, | ||
}), | ||
}; | ||
|
||
return style[option]; | ||
}; | ||
|
||
export const choiceInputWrapper = css({ | ||
display: 'flex', | ||
justifyContents: 'space-between', | ||
alignItems: 'center', | ||
width: '100%', | ||
padding: '20px', | ||
gap: '17px', | ||
}); | ||
|
||
export const choiceInputStyling = css(typo.Main.Medium, { | ||
width: '100%', | ||
height: '34px', | ||
paddingLeft: '10px', | ||
color: color.BK, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
/* eslint-disable jsx-a11y/control-has-associated-label */ | ||
import React, { ComponentPropsWithoutRef, useEffect, useState } from 'react'; | ||
import { ChoiceMinus, ChoicePlus } from '@/assets'; | ||
import Divider from '../Divider/Divider'; | ||
import * as S from './ChoiceInputButton.style'; | ||
|
||
export interface ChoiceInputBoxProps { | ||
option: 'A' | 'B'; | ||
choiceInputProps?: ComponentPropsWithoutRef<'input'>; | ||
infoInputProps?: ComponentPropsWithoutRef<'input'>; | ||
} | ||
|
||
const ChoiceInputButton = ({ | ||
option = 'A', | ||
choiceInputProps, | ||
infoInputProps, | ||
}: ChoiceInputBoxProps) => { | ||
const [infoInputClicked, setInfoButtonClicked] = useState<boolean>(false); | ||
const [withText, setWithText] = useState<boolean>(false); | ||
|
||
const [choiceInputValue, setChoiceInputValue] = useState<string>(''); | ||
const [infoInputValue, setInfoInputValue] = useState<string>(''); | ||
|
||
useEffect(() => { | ||
if (choiceInputValue.trim() || infoInputValue.trim()) { | ||
setWithText(true); | ||
} else { | ||
setWithText(false); | ||
} | ||
}, [choiceInputValue, infoInputValue]); | ||
|
||
return ( | ||
<div | ||
css={[ | ||
S.choiceInputContainer, | ||
withText && S.choiceInputWithText(withText, option), | ||
]} | ||
> | ||
<div css={S.choiceInputWrapper}> | ||
<input | ||
type="text" | ||
placeholder={`${option} 선택지를 입력하세요.`} | ||
maxLength={30} | ||
css={S.choiceInputStyling} | ||
onChange={(e) => setChoiceInputValue(e.target.value)} | ||
{...choiceInputProps} | ||
/> | ||
{!infoInputClicked && ( | ||
<button type="button" onClick={() => setInfoButtonClicked(true)}> | ||
<ChoicePlus /> | ||
</button> | ||
)} | ||
</div> | ||
{infoInputClicked && ( | ||
<> | ||
<Divider orientation="width" length={534} /> | ||
<div css={S.choiceInputWrapper}> | ||
<input | ||
type="text" | ||
placeholder="해당 선택지에 대해 추가로 설명을 입력할 수 있어요!" | ||
maxLength={50} | ||
css={S.choiceInputStyling} | ||
onChange={(e) => setInfoInputValue(e.target.value)} | ||
{...infoInputProps} | ||
/> | ||
<button | ||
type="button" | ||
onClick={() => { | ||
setInfoButtonClicked(false); | ||
setInfoInputValue(''); | ||
}} | ||
> | ||
<ChoiceMinus /> | ||
</button> | ||
</div> | ||
</> | ||
)} | ||
</div> | ||
); | ||
}; | ||
|
||
export default ChoiceInputButton; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,12 +6,12 @@ import { | |
} from './CommentProfile.style'; | ||
|
||
export interface CommentProfileProps { | ||
stance: 'pros' | 'cons'; | ||
option: 'A' | 'B'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 이 부분은 제가 반영했어야 했는데 바꿔주셨군요ㅜㅜ 감사합니다아 |
||
imgUrl?: string; | ||
} | ||
|
||
const CommentProfile = ({ stance, imgUrl }: CommentProfileProps) => ( | ||
<div css={[containerStyle(stance)]}> | ||
const CommentProfile = ({ option, imgUrl }: CommentProfileProps) => ( | ||
<div css={[containerStyle(option)]}> | ||
<div css={profileWrapper}> | ||
<img css={profileImage} src={imgUrl} alt="profile" /> | ||
</div> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { css } from '@emotion/react'; | ||
import color from '@/styles/color'; | ||
import typo from '@/styles/typo'; | ||
|
||
export const gameRecommendStyling = css({ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
width: '230px', | ||
gap: '10px', | ||
cursor: 'pointer', | ||
}); | ||
|
||
export const gameImgContainer = css({ | ||
display: 'flex', | ||
width: '100%', | ||
height: '116px', | ||
borderRadius: '5px', | ||
overflow: 'hidden', | ||
}); | ||
|
||
export const gameImgWrapper = css({ | ||
flex: '1', | ||
}); | ||
|
||
export const gameImgStyling = css({ | ||
width: '100%', | ||
height: '100%', | ||
objectFit: 'cover', | ||
}); | ||
|
||
export const gameTitleStyling = css(typo.Comment.Regular, { | ||
width: '100%', | ||
whiteSpace: 'nowrap', | ||
overflow: 'hidden', | ||
textOverflow: 'ellipsis', | ||
color: color.BK, | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React from 'react'; | ||
import * as S from './GameRecommendButton.style'; | ||
|
||
export type GameRecommend = { | ||
title: string; | ||
optionAImg: string; | ||
optionBImg: string; | ||
}; | ||
|
||
export interface GameRecommendButtonProps { | ||
game: GameRecommend; | ||
} | ||
|
||
const GameRecommendButton = ({ game }: GameRecommendButtonProps) => ( | ||
<div css={S.gameRecommendStyling}> | ||
<div css={S.gameImgContainer}> | ||
<div css={S.gameImgWrapper}> | ||
<img src={game.optionAImg} alt="A Img" css={S.gameImgStyling} /> | ||
</div> | ||
<div css={S.gameImgWrapper}> | ||
<img src={game.optionBImg} alt="B Img" css={S.gameImgStyling} /> | ||
</div> | ||
</div> | ||
<div css={S.gameTitleStyling}>{game.title}</div> | ||
</div> | ||
); | ||
|
||
export default GameRecommendButton; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { css } from '@emotion/react'; | ||
import color from '@/styles/color'; | ||
|
||
export const stageBarContainer = css({ | ||
display: 'flex', | ||
gap: '8px', | ||
}); | ||
|
||
export const stageBarStyling = css({ | ||
width: '34px', | ||
height: '7px', | ||
borderRadius: '20px', | ||
}); | ||
|
||
export const getStageBarColor = (currentStage: boolean) => { | ||
if (currentStage) { | ||
return css({ | ||
backgroundColor: color.MAIN, | ||
}); | ||
} | ||
return css({ | ||
backgroundColor: color.GY[3], | ||
}); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
스프레드 대신 명확하게 표현해준 부분 좋네요!