Merge pull request #110 from DDD-Community/feature/junseub-qa

3차 QA
DDD-Community · Sep 6, 2024 · 4d382e9 · 4d382e9
2 parents 89cfe9f + e170dee
commit 4d382e9
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 14 deletions.
diff --git a/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx b/src/app/board/[boardId]/_components/PolaroidList/PolaroidListItem.tsx
@@ -18,10 +18,9 @@ const PolaroidListItem = ({ item, onClick }: PolaroidListItemProps) => {
   return (
     <div
       className="flex flex-col justify-center"
-      onClick={onClick}
       style={{ rotate: `${rotate}deg` }}
     >
-      <PolaroidCard polaroid={item} />
+      <PolaroidCard polaroid={item} onClick={onClick} />
     </div>
   )
 }

diff --git a/src/app/board/[boardId]/_components/PolaroidList/index.tsx b/src/app/board/[boardId]/_components/PolaroidList/index.tsx
@@ -21,7 +21,7 @@ const PolaroidList = ({ polaroids }: PolaroidListProps) => {
   }
 
   return (
-    <div className="mx-auto w-full flex-1 overflow-x-hidden overflow-y-scroll scrollbar-hide">
+    <div className="mx-auto w-full flex-1 overflow-x-hidden overflow-y-scroll pb-10 scrollbar-hide">
       <div className="grid grid-cols-2 gap-6 px-[20px] py-[10px]">
         {polaroids.map((item) => (
           <PolaroidListItem

diff --git a/src/app/board/[boardId]/_components/Share/index.tsx b/src/app/board/[boardId]/_components/Share/index.tsx
@@ -3,7 +3,6 @@
 import Modal from '@/components/Modal'
 import Toast from '@/components/Toast'
 import CopyIcon from 'public/icons/copy.svg'
-import DownloadIcon from 'public/icons/download.svg'
 import Share from 'public/icons/ios_share.svg'
 import TwoPolaroidsIcon from 'public/icons/linkShare.svg'
 import FacebookIcon from 'public/icons/sns/sns-facebook.svg'
@@ -92,9 +91,6 @@ const ShareBtn = ({ boardName }: { boardName: string }) => {
               onClick={() => handleShare(shareToFacebook)}
             />
           </Section>
-          <Section title="보드 이미지 저장">
-            <Section.Item icon={<DownloadIcon />} bg="bg-gray-200" />
-          </Section>
         </Modal.BottomModal>
       </Modal>
     </>

diff --git a/src/components/Polaroid/PolaroidCard/index.tsx b/src/components/Polaroid/PolaroidCard/index.tsx
@@ -7,11 +7,12 @@ import PolaroidNickname from '@/components/Polaroid/Base/PolaroidNickname'
 
 interface PolaroidCardProps {
   polaroid: Polaroid
+  onClick?: () => void
 }
 
-function PolaroidCard({ polaroid }: PolaroidCardProps) {
+function PolaroidCard({ polaroid, onClick = () => {} }: PolaroidCardProps) {
   return (
-    <PolaroidFrame className="cursor-pointer">
+    <PolaroidFrame className="cursor-pointer" onClick={onClick}>
       <div className="p-2">
         <PolaroidImage imageUrl={polaroid.imageUrl} />
       </div>

diff --git a/src/components/Polaroid/PolaroidMaker/PolaroidMessageInput.tsx b/src/components/Polaroid/PolaroidMaker/PolaroidMessageInput.tsx
@@ -18,7 +18,7 @@ const PolaroidMessageInput = ({
         value={message}
         onChange={changeMessage}
         onKeyDown={preventKeyboardSubmit}
-        className="w-full bg-transparent outline-none"
+        className="h-[25px] w-full bg-transparent outline-none"
         maxLength={maxLength}
         placeholder="눌러서 한줄 문구를 입력하세요"
         name="oneLineMessage"

diff --git a/src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx b/src/components/Polaroid/PolaroidMaker/PolaroidNicknameInput.tsx
@@ -17,6 +17,7 @@ const PolaroidNicknameInput = ({
   const [width, setWidth] = useState<number>(60)
   const [showBorder, setShowBorder] = useState<boolean>(true)
   const [placeholder, setPlaceholder] = useState<string>('')
+  const [showLengthCount, setShowLengthCount] = useState<boolean>(false)
   const { data: session } = useSession()
 
   useEffect(() => {
@@ -33,28 +34,45 @@ const PolaroidNicknameInput = ({
     setWidth(Math.max(50, ref.current.offsetWidth) + 10)
   }, [nickname, placeholder])
 
+  const onFocus = () => {
+    setShowBorder(true)
+    setPlaceholder('')
+    setShowLengthCount(true)
+  }
+
+  const onBlur = () => {
+    setShowBorder(false)
+    setPlaceholder(getPolaroidNickname(nickname, session))
+    setShowLengthCount(false)
+  }
+
   const border = showBorder ? 'border-gray-900 border-b' : ''
 
   return (
-    <div className="flex w-full justify-end gap-1 text-lg">
+    <div className="flex w-full items-center justify-end gap-1 text-lg">
       <span>From. </span>
       <div className={`${border} -px-3`}>
         <input
           type="text"
           value={nickname}
           onChange={changeNickname}
           onKeyDown={preventKeyboardSubmit}
-          className="bg-transparent text-center outline-none"
+          className="h-6 bg-transparent text-center outline-none"
           maxLength={maxLength}
-          onFocus={() => setShowBorder(true)}
-          onBlur={() => setShowBorder(!nickname)}
+          onFocus={onFocus}
+          onBlur={onBlur}
           placeholder={placeholder}
           name="oneLineMessage"
           style={{
             width: `${width}px`,
           }}
         />
       </div>
+      {showLengthCount && (
+        <span className="text-sm text-gray-400">
+          {nickname.length}/{maxLength}자
+        </span>
+      )}
       <span ref={ref} className="absolute -z-10 whitespace-pre opacity-0">
         {nickname || placeholder}
       </span>