dnd-side-project · raymondanythings · Mar 19, 2024 · Mar 19, 2024
diff --git a/components/compositions/answers/answer-detail/index.tsx b/components/compositions/answers/answer-detail/index.tsx
@@ -1,3 +1,5 @@
+import Reason from '@/components/compositions/answers/reason'
+
 interface AnswerDetailProps {
   questionTitle: string
   questionName: string
@@ -85,11 +87,7 @@ const AnswerDetail = ({
             {answer}
           </div>
         )}
-        {reason && (
-          <div className="text-body3-medium bg-bg-gray1 text-text-sub-gray76 px-2 py-4 rounded-md">
-            {reason}
-          </div>
-        )}
+        {reason && <Reason reason={reason} />}
       </div>
     </>
   )

diff --git a/components/compositions/answers/reason/index.tsx b/components/compositions/answers/reason/index.tsx
@@ -0,0 +1,28 @@
+import { cn } from '@/lib/client/utils'
+import React, { ComponentPropsWithoutRef } from 'react'
+
+interface ReasonProps extends ComponentPropsWithoutRef<'div'> {
+  reason: string
+}
+const Reason = ({ reason, ...rest }: ReasonProps) => {
+  return (
+    <div
+      {...rest}
+      className={cn(
+        'text-body3-medium bg-bg-gray1 text-text-sub-gray76 px-2 py-4 rounded-md whitespace-pre-wrap',
+        rest.className,
+      )}
+    >
+      {reason.split('\n').map((line) => {
+        return (
+          <>
+            {line}
+            <br />
+          </>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Reason
diff --git a/components/meta-head/index.tsx b/components/meta-head/index.tsx
@@ -20,7 +20,10 @@ const MetaHead = ({
       />
       <title>{title || 'namuiwiki | 남의위키'}</title>
       <meta name="description" content={description || ''} />
-      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      <meta
+        name="viewport"
+        content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"
+      />
       <meta
         name="keywords"
         content="남의위키, 편지, namuiwiki, 소개서, 첫인상, 새학기"
@@ -63,10 +66,6 @@ const MetaHead = ({
         crossOrigin="anonymous"
         defer
       ></script>
-      <meta
-        name="viewport"
-        content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"
-      />
 
       <meta name="HandheldFriendly" content="true" />
       <meta name="msapplication-TileColor" content="#da532c" />

diff --git a/components/share-image/index.tsx b/components/share-image/index.tsx
@@ -3,7 +3,6 @@ import React, {
   PropsWithChildren,
   createContext,
   useContext,
-  useEffect,
   useRef,
   useState,
 } from 'react'
@@ -13,6 +12,7 @@ import { parseShareCardItems } from './constants'
 import { Period, Relation, TreeType, treeCardAsset } from '@/model/tree.entity'
 import { cn } from '@/lib/client/utils'
 import Drawer from '../ui/drawer'
+import Reason from '@/components/compositions/answers/reason'
 
 type TWO_CHOICE =
   | 'FRIENDLINESS_LEVEL'
@@ -189,9 +189,10 @@ export const ShareImage = ({
                   </span>
                 </div>
               </div>
-              <div className="text-body3-medium px-4 py-3 rounded-lg bg-gray-gray50 text-start text-text-main-black11">
-                {reason}
-              </div>
+              <Reason
+                reason={reason}
+                className="text-body3-medium px-4 py-3 rounded-lg bg-gray-gray50 text-start text-text-main-black11"
+              />
             </div>
           </div>
         </div>
@@ -236,7 +237,14 @@ export const ShareImage = ({
                   </div>
                 </div>
                 <div className="text-body3-medium px-4 py-3 rounded-lg bg-gray-gray50 text-start text-text-main-black11">
-                  {reason}
+                  {reason.split('\n').map((line) => {
+                    return (
+                      <>
+                        {line}
+                        <br />
+                      </>
+                    )
+                  })}
                 </div>
               </div>
             </div>

diff --git a/components/survey/survey-form.tsx b/components/survey/survey-form.tsx
@@ -1,12 +1,6 @@
 import { Option } from '@/model/option.entity'
 import { QuestionType } from '@/model/question.entity'
-import React, {
-  HTMLAttributes,
-  InputHTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { InputHTMLAttributes, useEffect, useRef, useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { motion } from 'framer-motion'
 import { fadeInProps } from '@/variants'
@@ -366,26 +360,51 @@ const SurveyForm = ({
             defaultValue=""
             control={form.control}
             render={({ field }) => (
-              <Inputbox
-                {...field}
-                placeholder={
-                  name === 'FIVE_LETTER_WORD'
-                    ? '5글자로 입력해주세요'
-                    : '20글자 이내로 입력해주세요'
-                }
-                {...(name === 'FIVE_LETTER_WORD' && { minLength: 5 })}
-                maxLength={name === 'FIVE_LETTER_WORD' ? 5 : 20}
-                onChange={(e) => {
-                  form.setValue('type', 'MANUAL')
-                  if (e.target.value) {
-                    form.setValue('id', type)
-                    form.trigger('id')
-                  } else {
-                    form.setError('id', { type: 'required' })
+              <div className="relative py-[14px] px-4">
+                <textarea
+                  {...field}
+                  id={field.name}
+                  className={cn(
+                    'flex resize-none w-full peer placeholder:text-muted border-none placeholder:text-text-sub-gray4f disabled:cursor-not-allowed  text-body3-medium  outline-none disabled:text-disabled disabled:placeholder:text-disabled bg-transparent ',
+                  )}
+                  placeholder={
+                    name === 'FIVE_LETTER_WORD'
+                      ? '5글자로 입력해주세요'
+                      : '50글자 이내로 입력해주세요'
                   }
-                  field.onChange(e)
-                }}
-              />
+                  {...(name === 'FIVE_LETTER_WORD' && { minLength: 5 })}
+                  maxLength={name === 'FIVE_LETTER_WORD' ? 5 : 50}
+                  rows={2}
+                  value={field.value + ''}
+                  onKeyDown={(e) => {
+                    if (name === 'FIVE_LETTER_WORD') {
+                      if (e.key === 'Enter') {
+                        e.preventDefault()
+                      }
+                    }
+                  }}
+                  onChange={(e) => {
+                    form.setValue('type', 'MANUAL')
+                    if (e.target.value) {
+                      form.setValue('id', type)
+                      form.trigger('id')
+                    } else {
+                      form.setError('id', { type: 'required' })
+                    }
+                    field.onChange(e)
+                  }}
+                />
+                <label
+                  htmlFor={field.name}
+                  className={cn(
+                    'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full border-[1px] border-brand-main-green400 peer-focus-visible:border-brand-main-green400 peer-placeholder-shown:border-line-medium block rounded-md duration-100',
+                  )}
+                />
+                <span className="absolute right-4 bottom-[14px] text-text-sub-gray99 text-body3-medium">
+                  {(field.value + '').length}/
+                  {name === 'FIVE_LETTER_WORD' ? 5 : 50}
+                </span>
+              </div>
             )}
           />
         </div>
@@ -402,20 +421,36 @@ const SurveyForm = ({
               defaultValue=""
               name={'reason'}
               render={({ field }) => (
-                <Inputbox
-                  {...field}
-                  placeholder="20글자 이내로 입력해주세요"
-                  maxLength={20}
-                  value={field.value + ''}
-                  onChange={(e) => {
-                    if (e.target.value) {
-                      form.trigger('answer')
-                    } else {
-                      form.setError('answer', { type: 'required' })
-                    }
-                    field.onChange(e)
-                  }}
-                />
+                <div className="relative py-[14px] px-4">
+                  <textarea
+                    {...field}
+                    id={field.name}
+                    className={cn(
+                      'flex resize-none w-full peer placeholder:text-muted border-none placeholder:text-text-sub-gray4f disabled:cursor-not-allowed  text-body3-medium  outline-none disabled:text-disabled disabled:placeholder:text-disabled bg-transparent ',
+                    )}
+                    placeholder="50글자 이내로 입력해주세요"
+                    maxLength={50}
+                    rows={2}
+                    value={field.value + ''}
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        form.trigger('answer')
+                      } else {
+                        form.setError('answer', { type: 'required' })
+                      }
+                      field.onChange(e)
+                    }}
+                  />
+                  <label
+                    htmlFor={field.name}
+                    className={cn(
+                      'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full border-[1px] border-brand-main-green400 peer-focus-visible:border-brand-main-green400 peer-placeholder-shown:border-line-medium block rounded-md duration-100',
+                    )}
+                  />
+                  <span className="absolute right-4 bottom-[14px] text-text-sub-gray99 text-body3-medium">
+                    {field.value?.length}/50
+                  </span>
+                </div>
               )}
             />
           </InputLabel>

diff --git a/lib/client/utils.ts b/lib/client/utils.ts
@@ -48,134 +48,3 @@ export const shareToCopyLink = async (url?: string) => {
   }
   return true
 }
-
-const parseAnswer = () => {}
-
-// 2지선다
-const TWO_CHOICE = [
-  'FRIENDLINESS_LEVEL',
-  'PERSONALITY_TYPE',
-  'MBTI_IMMERSION',
-  'WEEKEND_COMMITMENTS',
-]
-
-// 다지선다
-const MULTIPLE_CHOICE = [
-  'CORE_VALUE',
-  'HAPPY_BEHAVIOR',
-  'SAD_ANGRY_BEHAVIOR',
-  'BORROWING_LIMIT',
-]
-const SHORT_ANSWER = []
-// 서술형
-null
-null
-null
-null
-null
-null
-
-const a = {
-  data: {
-    senderName: '은성',
-    period: 'INFINITE',
-    relation: 'ELEMENTARY_SCHOOL',
-    createdAt: '2024-03-16T22:55:18.954',
-    questionAndAnswers: [
-      {
-        questionTitle:
-          '{{userName}}님은<br/><b>사람들과 빨리 친해지는 편</b>인가요?',
-        text: '🙆‍♂️ 네, 그러는 편이에요',
-        value: true,
-        reason: 'FRIENDLINESS_LEVEL',
-      },
-      {
-        questionTitle: '{{userName}}님은<br/><b>어떤 성향</b>인가요?',
-        text: '🙆‍♂️ 나와 비슷한 성향이에요',
-        value: true,
-        reason: 'PERSONALITY_TYPE',
-      },
-      {
-        questionTitle:
-          '{{userName}}님은<br/><b>MBTI에 과몰입하는 편</b>인가요?',
-        text: '🙆‍♂️ 네, 그러는 편이에요',
-        value: true,
-        reason: 'MBTI_IMMERSION',
-      },
-      {
-        questionTitle:
-          '{{userName}}님은<br/><b>주말마다 약속이 있는 편</b>인가요?',
-        text: '🙆‍♂️ 네, 그러는 편이에요',
-        value: true,
-        reason: 'WEEKEND_COMMITMENTS',
-      },
-      {
-        questionTitle:
-          '{{userName}}님에게<br/><b>가장 중요한 것</b>은 무엇일 것 같나요?',
-        text: '💵  돈',
-        value: '💵  돈',
-        reason: 'CORE_VALUE',
-      },
-      {
-        questionTitle:
-          '{{userName}}님은<br/><b>기쁠 때 어떤 행동</b>을 할 것 같나요?',
-        text: '65d8f7b7c934b525dd04754d',
-        value: '65d8f7b7c934b525dd04754d',
-        reason: 'HAPPY_BEHAVIOR',
-      },
-      {
-        questionTitle:
-          '{{userName}}님은<br/><b>슬프거나 화날 때 어떤 행동</b>을 할 것 같나요?',
-        text: 'hello',
-        value: 'hello',
-        reason: 'SAD_ANGRY_BEHAVIOR',
-      },
-      {
-        questionTitle:
-          '{{userName}}님에게<br/><b>얼마까지</b> 빌려줄 수 있나요?',
-        text: '0',
-        value: 0,
-        reason: 'BORROWING_LIMIT',
-      },
-      {
-        questionTitle:
-          '{{userName}}님을<br/><b>처음 만났을 때 어떤 사람</b>으로 보였나요?',
-        text: 'FIRST_IMPRESSION',
-        value: 'FIRST_IMPRESSION',
-        reason: null,
-      },
-      {
-        questionTitle: '{{userName}}님을<br/><b>5글자로 표현</b>한다면?',
-        text: 'FIVE_LETTER_WORD',
-        value: 'FIVE_LETTER_WORD',
-        reason: null,
-      },
-      {
-        questionTitle: '{{userName}}님의<br/><b>이런점은 꼭 배우고 싶어요!</b>',
-        text: 'LEARNING_ASPIRATION',
-        value: 'LEARNING_ASPIRATION',
-        reason: null,
-      },
-      {
-        questionTitle: '{{userName}}님이<br/><b>가장 많이 사용하는 단어는?</b>',
-        text: 'MOST_USED_WORD',
-        value: 'MOST_USED_WORD',
-        reason: null,
-      },
-      {
-        questionTitle:
-          '{{userName}}님이<br/><b>혼자 몰래 좋아하고 있는 것</b>은 무엇일까요?',
-        text: 'SECRET_PLEASURE',
-        value: 'SECRET_PLEASURE',
-        reason: null,
-      },
-      {
-        questionTitle:
-          '{{userName}}님을 보면<br/><b>어떤 캐릭터(연예인)</b>가 떠오르나요?',
-        text: 'CHARACTER_CELEBRITY_ASSOCIATION',
-        value: 'CHARACTER_CELEBRITY_ASSOCIATION',
-        reason: null,
-      },
-    ],
-  },
-}