feat: 업로드 페이지 도움말 기능 추가, 헤더 추가

components/Upload/HelpInfo/HelpInfo.style.ts

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled'
+
+export const Container = styled.div`
+  width: 100%;
+  height: calc(100% - 69px);
+  position: absolute;
+  top: 69px;
+  left: 0;
+  z-index: 100;
+  background-color: rgba(0, 122, 255, 0.2);
+  cursor: pointer;
+
+  & > p {
+    position: absolute;
+    color: ${({ theme }) => theme.colors.primary.normal};
+    font-size: ${({ theme }) => theme.typography.size.text15};
+    background-color: ${({ theme }) => theme.colors.background.white};
+    border-radius: 0 12px 12px 12px;
+    padding: 10px;
+    line-height: 1;
+
+    &.first-text {
+      top: 79px;
+      left: 69px;
+    }
+
+    &.second-text {
+      top: 221px;
+      left: 23px;
+    }
+
+    &.third-text {
+      top: 442px;
+      left: 41px;
+    }
+
+    &.four-text {
+      top: 624px;
+      left: 69px;
+    }
+
+    &.five-text {
+      top: 729px;
+      left: 40px;
+    }
+  }
+`

components/Upload/HelpInfo/HelpInfo.tsx

@@ -0,0 +1,32 @@
+import { Dispatch, SetStateAction } from 'react'
+import { Container } from './HelpInfo.style'
+
+interface HelpInfoProps {
+  step: number
+  setHelpInfoStep: Dispatch<SetStateAction<number>>
+  setShowHelpInfo: Dispatch<SetStateAction<boolean>>
+}
+
+const HelpInfo = ({ step, setHelpInfoStep, setShowHelpInfo }: HelpInfoProps) => {
+  const onClickInfoHandler = () => {
+    if (step === 5) {
+      setShowHelpInfo(false)
+      setHelpInfoStep(1)
+      return
+    }
+
+    setHelpInfoStep((prev) => prev + 1)
+  }
+
+  return (
+    <Container onClick={onClickInfoHandler}>
+      {step === 1 && <p className="first-text">키워드를 입력하면 관련이미지를 서칭합니다.</p>}
+      {step === 2 && <p className="second-text">서칭한 랜덤이미지가 생성됩니다. 생성된 이미지를 사용할 수 있습니다.</p>}
+      {step === 3 && <p className="third-text">내 갤러리에 있는 사진을 업로드해서 사용할 수 있습니다.</p>}
+      {step === 4 && <p className="four-text">사진과 함께 업로드할 텍스트를 작성합니다.</p>}
+      {step === 5 && <p className="five-text">그날의 소리를 링크로 업로드 한 후 재생해 볼 수 있습니다.</p>}
+    </Container>
+  )
+}
+
+export default HelpInfo

pages/upload/index.tsx

@@ -12,8 +12,13 @@ import useCreateSuggestionImage from '@/hooks/useCreateSuggestionImage'
 import makeYouTubeVideoId from '@/lib/utils/makeYouTubeVideoId'
 import LargeButton from '@/components/common/Button/Button'
 import UploadYouTubePlayer from '@/components/Upload/UploadYouTubePlayer/UploadYouTubePlayer'
+import Header from '@/components/common/Header/Header'
+import { QuestionIcon } from '@/components/Icons'
+import HelpInfo from '@/components/Upload/HelpInfo/HelpInfo'
 
 export default function Upload() {
+  const [showHelpInfo, setShowHelpInfo] = useState(false)
+  const [helpInfoStep, setHelpInfoStep] = useState(1)
   const [textAreaValue, setTextareaValue] = useState('')
   const [youtubeUrl, , onChangeYoutubeUrl] = useInput('')
   const { previewImageUrl, setPreviewImageUrl, onChangePreviewImage, onClickSuggestionImage, setImgFile, imgFile } =
@@ -43,6 +48,10 @@ export default function Upload() {
     setTextareaValue(e.target.value)
   }
 
+  const onClickHeaderRightButtonHandler = () => {
+    setShowHelpInfo(true)
+  }
+
   useEffect(() => {
     if (images[0] && !previewImageUrl) {
       setImgFile(images[0][0])
@@ -52,6 +61,14 @@ export default function Upload() {
 
   return (
     <Container>
+      {showHelpInfo && (
+        <HelpInfo step={helpInfoStep} setHelpInfoStep={setHelpInfoStep} setShowHelpInfo={setShowHelpInfo} />
+      )}
+      <Header
+        title="My Palace"
+        hasRightButton={<QuestionIcon />}
+        onClickRightButton={onClickHeaderRightButtonHandler}
+      />
       <FormWrapper onSubmit={onSubmitUploadHandler}>
         <KeywordInput
           value={convertedKeyword}
@@ -71,8 +88,9 @@ export default function Upload() {
 }
 
 const Container = styled.div`
+  position: relative;
   width: 100%;
-  padding: 25px 16px 0;
+  padding: 16px 16px 0;
   display: flex;
   flex-direction: column;
   align-items: center;