diff --git a/package-lock.json b/package-lock.json index af57148..f2bf485 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "cra-template": "1.2.0", + "date-fns": "^4.1.0", "prop-types": "^15.8.1", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -6318,6 +6319,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz", diff --git a/package.json b/package.json index 8f61c61..c15b1aa 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "cra-template": "1.2.0", + "date-fns": "^4.1.0", "prop-types": "^15.8.1", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/public/index.html b/public/index.html index 46a1220..635ea69 100644 --- a/public/index.html +++ b/public/index.html @@ -19,8 +19,10 @@ +
+ diff --git a/src/assets/images/icons/Messages.svg b/src/assets/images/icons/Messages.svg new file mode 100644 index 0000000..6368f81 --- /dev/null +++ b/src/assets/images/icons/Messages.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/icons/thumbs-down.svg b/src/assets/images/icons/thumbs-down.svg new file mode 100644 index 0000000..09e87a4 --- /dev/null +++ b/src/assets/images/icons/thumbs-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/thumbs-up.svg b/src/assets/images/icons/thumbs-up.svg new file mode 100644 index 0000000..8833fd6 --- /dev/null +++ b/src/assets/images/icons/thumbs-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/img_Header.svg b/src/assets/images/img_Header.svg new file mode 100644 index 0000000..b23cda0 --- /dev/null +++ b/src/assets/images/img_Header.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/img_QuestionBox.svg b/src/assets/images/img_QuestionBox.svg new file mode 100644 index 0000000..23cf698 --- /dev/null +++ b/src/assets/images/img_QuestionBox.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/images/img_QusetionBox.svg b/src/assets/images/img_QusetionBox.svg new file mode 100644 index 0000000..23cf698 --- /dev/null +++ b/src/assets/images/img_QusetionBox.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/AnswerContent/index.jsx b/src/components/AnswerContent/index.jsx new file mode 100644 index 0000000..7eae56c --- /dev/null +++ b/src/components/AnswerContent/index.jsx @@ -0,0 +1,109 @@ +import PropTypes from 'prop-types'; +import { useLocation } from 'react-router-dom'; +import { useState } from 'react'; +import formatCreatedAt from 'utils/dateUtils'; + +const AnswerContent = ({ answer, name, imageSource }) => { + AnswerContent.propTypes = { + answer: PropTypes.shape({ + content: PropTypes.string.isRequired, + isRejected: PropTypes.bool, + createdAt: PropTypes.string.isRequired, + }), + name: PropTypes.string.isRequired, + imageSource: PropTypes.string, + }; + + AnswerContent.defaultProps = { + imageSource: 'https://fastly.picsum.photos/id/772/200/200.jpg?hmac=9euSj4JHTPr7uT5QWVmeNJ8JaqAXY8XmJnYfr_DfBJc', + }; + + const location = useLocation(); + const [textareaValue, setTextareaValue] = useState(''); + + const isFeedPage = location.pathname.startsWith('/post/') && !location.pathname.includes('/answer'); + const isAnswerPage = location.pathname.startsWith('/post/') && location.pathname.includes('/answer'); + + const handleTextareaChange = (event) => { + setTextareaValue(event.target.value); + }; + + const renderProfileImg = () => {`${name}의; + + const renderAnswerHeader = () => ( +
+

{name}

+

{formatCreatedAt(answer.createdAt)}

+
+ ); + + const renderAnswerContent = () =>

{answer.content}

; + + const renderAnswerForm = () => ( +
+