Merge pull request #8 from primus-teoSprint/feat/#3

[#3] step1 페이지 ui 및 페이지간 이동 구현

app/(route)/verification/ibulsin/_components/CancelBtn/index.module.css

@@ -0,0 +1,7 @@
+.cancel_btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+}

app/(route)/verification/ibulsin/_components/CancelBtn/index.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+import { MdChevronLeft } from 'react-icons/md'
+import { useRouter } from 'next/navigation'
+
+function CancelBtn() {
+  const router = useRouter()
+
+  const handleClickCancelBtn = () => {
+    const verify = confirm(
+      '정말로 작성을 그만하시겠습니까? 작성한 문항들이 사라집니다.',
+    )
+
+    if (verify) {
+      router.push('/')
+    }
+  }
+
+  return (
+    <button
+      className={S.cancel_btn}
+      onClick={handleClickCancelBtn}
+      type="button"
+    >
+      <MdChevronLeft size={20} />
+    </button>
+  )
+}
+
+export default CancelBtn

app/(route)/verification/ibulsin/_components/PaginationBtn/index.module.css

@@ -0,0 +1,14 @@
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 999px;
+  background-color: #B9CCFF;
+  color:#939BFF;
+  width:30px;
+  height:30px
+}
+.darken {
+  color: #6C76F4;
+  background-color: #FFFFFF;
+}

app/(route)/verification/ibulsin/_components/PaginationBtn/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import S from './index.module.css'
+import cn from 'classnames'
+import { useSearchParams } from 'next/navigation'
+import Link from 'next/link'
+
+function PaginationBtn({ step }: { step: number }) {
+  const params = useSearchParams()
+
+  const stepParam = params.get('step')
+
+  return (
+    <Link
+      className={cn(S.btn, {
+        [S.darken]: stepParam && parseInt(stepParam) === step,
+      })}
+      href={`/verification/ibulsin?step=${step}`}
+    >
+      {step}
+    </Link>
+  )
+}
+
+export default PaginationBtn

app/(route)/verification/ibulsin/_components/Step/index.module.css

@@ -0,0 +1,18 @@
+.main_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: var(--purple-700);
+  min-height: 100vh;
+}
+.main_container > .survey_header {
+  display: flex;
+  width: 100%;
+  padding: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+.main_container > .survey_header > .fake {
+  width: 24px;
+  height: 24px;
+}

app/(route)/verification/ibulsin/_components/Step/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+import { useSearchParams } from 'next/navigation'
+import Step1 from '../Step1'
+import Step2 from '../Step2'
+import Step3 from '../Step3'
+import StepPagination from '../StepPagination'
+import CancelBtn from '../CancelBtn'
+
+function Step() {
+  const params = useSearchParams()
+
+  const stepParam = params.get('step')
+
+  return (
+    <div className={S.main_container}>
+      <div className={S.survey_header}>
+        <CancelBtn />
+        <StepPagination />
+        <div className={S.fake}></div>
+      </div>
+      {stepParam === '1' && <Step1 />}
+      {stepParam === '2' && <Step2 />}
+      {stepParam === '3' && <Step3 />}
+    </div>
+  )
+}
+
+export default Step

app/(route)/verification/ibulsin/_components/Step1/index.module.css

@@ -0,0 +1,56 @@
+.main_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.step_info {
+  color: #FFFFFF;
+  margin: 24px;
+  margin-bottom: 32px;
+}
+.step_info > h3 {
+  padding: 12px 0;
+  font-weight: 500;
+  font-size: 24px;
+}
+.step_info > p {
+  font-size: 24px;
+}
+.survey_container {
+  background-color: #FFFFFF;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding: 12px;
+}
+.input_container {
+  margin-bottom: 8px;
+}
+.input_container > .input_title {
+  font-size: 16px;
+  padding:12px 0;
+}
+.input_container > .input_explain {
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.input_container > .input_textarea {
+  font-size: 14px;
+  width: 100%;
+  height: 100px;
+  resize: none;
+  border: 1px solid #9d9d9d;
+  border-radius: 4px;
+}
+.direction_btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.next_btn {
+  background-color: var(--purple-700);
+  color: #FFFFFF;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: bold;
+  border-radius: 8px;
+}

app/(route)/verification/ibulsin/_components/Step1/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import React from 'react'
+import style from './index.module.css'
+import Link from 'next/link'
+import Textarea from '../Textarea'
+
+function Step1() {
+  return (
+    <div className={style.main_container}>
+      <div className={style.step_info}>
+        <h3 className={style.step}>STEP 1</h3>
+        <p className={style.step_explain}>
+          생각한 아이디어를
+          <br />
+          작성해주세요
+        </p>
+      </div>
+      <div className={style.survey_container}>
+        <div className={style.input_container}>
+          <h3 className={style.input_title}>아이디어 개요</h3>
+          <p className={style.input_explain}>
+            생각한 아이디어를 자유롭게 작성해봐요! 이곳에서는 오로지
+            아이디어에만 집중해요.
+          </p>
+          <Textarea fieldKey={'outline'} />
+        </div>
+        <div className={style.input_container}>
+          <h3 className={style.input_title}>생각하게 된 배경</h3>
+          <p className={style.input_explain}>
+            해당 아이디어를 어떻게 생각하게 되었나요?
+          </p>
+          <Textarea fieldKey={'why'} />
+        </div>
+        <div className={style.direction_btns}>
+          <Link
+            className={style.next_btn}
+            href={'/verification/ibulsin?step=2'}
+          >
+            다음 단계
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Step1

app/(route)/verification/ibulsin/_components/Step2/index.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+
+function Step2() {
+  return <div className={S.main}>hello</div>
+}
+
+export default Step2

app/(route)/verification/ibulsin/_components/Step3/index.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+
+function Step3() {
+  return <div className={S.main}>hello</div>
+}
+
+export default Step3

app/(route)/verification/ibulsin/_components/StepPagination/index.module.css

@@ -0,0 +1,6 @@
+.step_pagination_container {
+  display: flex;
+}
+.step_pagination_container > * {
+  margin: 0 12px;
+}

app/(route)/verification/ibulsin/_components/StepPagination/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import S from './index.module.css'
+import PaginationBtn from '../PaginationBtn'
+
+function StepPagination() {
+  return (
+    <div className={S.step_pagination_container}>
+      {Array.from({ length: 3 }, (_, idx) => (
+        <PaginationBtn key={idx} step={idx + 1} />
+      ))}
+    </div>
+  )
+}
+
+export default StepPagination

app/(route)/verification/ibulsin/_components/Textarea/index.module.css

@@ -0,0 +1,26 @@
+.textarea_container {
+  position: relative;
+  padding: 12px;
+  padding-bottom: 28px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+.textarea_container:focus-within {
+  border: 1px solid #000000;
+}
+.textarea_container > textarea {
+  width: 100%;
+  height: 80px;
+  border:none;
+  outline: none;
+  resize: none;
+}
+.letter_count_container {
+  position: absolute;
+  font-size: 12px;
+  bottom: 8px;
+  right: 8px;
+}
+.letter_max {
+  color: rgba(255, 0, 0, 0.8);
+}

app/(route)/verification/ibulsin/_components/Textarea/index.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React from 'react'
+import S from './index.module.css'
+import cn from 'classnames'
+import { useForm } from 'react-hook-form'
+
+interface TextAreaProps {
+  fieldKey: 'outline' | 'why'
+}
+
+function Textarea({ fieldKey }: TextAreaProps) {
+  const { register, watch } = useForm()
+
+  const outlineField = register('outline', {
+    required: '',
+    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
+  })
+  const whyField = register('whyField', {
+    required: '',
+    maxLength: { value: 500, message: '최대 500자까지 작성가능합니다.' },
+  })
+  const fields = {
+    outline: {
+      register: outlineField,
+      MaxLength: 500,
+    },
+    why: {
+      register: whyField,
+      MaxLength: 500,
+    },
+  }
+
+  const countCharacters = () => {
+    const content = watch(fieldKey)
+    if (!content) {
+      return 0
+    }
+    return content.length
+  }
+
+  return (
+    <div className={S.textarea_container}>
+      <textarea
+        {...fields[fieldKey].register}
+        maxLength={fields[fieldKey].MaxLength - 1}
+      />
+      <div className={S.letter_count_container}>
+        <span
+          className={cn({
+            [S.letter_max]: countCharacters() >= fields[fieldKey].MaxLength,
+          })}
+        >
+          {countCharacters()}
+        </span>
+        <span>{`/${fields[fieldKey].MaxLength}`}</span>
+      </div>
+    </div>
+  )
+}
+
+export default Textarea

app/(route)/verification/ibulsin/page.tsx

@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react'
+import Step from './_components/Step'
+
+function page() {
+  return (
+    <div>
+      <Suspense fallback={<div>loading...</div>}>
+        <Step />
+      </Suspense>
+    </div>
+  )
+}
+
+export default page

app/_types/global.d.ts

@@ -1,3 +1,3 @@
 declare module '*.css'
 
-declare module '*.sass'
+declare module '*.sass'