Merge pull request #61 from side-project-pokehub/Hun

모바일 뷰 관련 Header 작업 및 포켓몬 디테일 페이지 작업 (포켓몬 진화 부분 수정 예정)
side-project-pokehub · Jan 26, 2024 · b8be31f · b8be31f
2 parents d9528c7 + 69bf762
commit b8be31f
Show file tree

Hide file tree

Showing 21 changed files with 1,410 additions and 335 deletions.
diff --git a/src/components/comment/Comments.module.scss b/src/components/comment/Comments.module.scss
@@ -4,6 +4,10 @@
 .comments {
   &__container {
     font-family: Gmarket Sans;
+
+    @media (max-width: 769px) {
+      display: none;
+    }
   }
 
   &__label {
@@ -149,8 +153,155 @@
   line-height: normal;
   border: none;
 
+  @media (max-width: 769px) {
+    width: 140px;
+    height: 50px;
+    flex-shrink: 0;
+    border-radius: 10px;
+    font-size: 18px;
+  }
+
   &:disabled {
     background: #999;
     cursor: not-allowed;
   }
 }
+
+// mobile
+
+.mobile {
+  &__comments {
+    &__form {
+      width: 100%;
+      padding: 0 34px;
+    }
+
+    &__text {
+      width: 322px;
+      height: 150px;
+      flex-shrink: 0;
+      border-radius: 10px;
+      border: 3px solid #000;
+      background: #fff;
+      padding: 18px;
+    }
+
+    &__length {
+      height: 14px;
+      display: flex;
+      align-items: center;
+      padding-right: 6px;
+      width: 100%;
+      justify-content: flex-end;
+      color: #000;
+      font-family: 'Gmarket Sans';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      margin-bottom: 9px;
+    }
+
+    &__length__max {
+      color: red;
+    }
+
+    &__btn__box {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      height: 50px;
+      background: #000;
+      border-radius: 10px;
+      border: 3px solid #000;
+      margin-top: 12px;
+    }
+
+    &__btn {
+      width: 100%;
+      background: none;
+      border: none;
+      color: #fff;
+      text-align: center;
+      font-family: 'Gmarket Sans';
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: normal;
+      padding: 0;
+    }
+
+    &__list__inner {
+      display: flex;
+      flex-direction: column;
+      margin-top: 50px;
+      gap: 26px;
+      width: 100%;
+      padding: 0 34px;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+
+      &__info {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        padding: 0 4px;
+
+        span:first-child {
+          color: #000;
+          font-family: 'Gmarket Sans';
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          margin-bottom: 10px;
+        }
+
+        span:last-child {
+          color: #000;
+          text-align: right;
+          font-family: 'Gmarket Sans';
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          margin-bottom: 9px;
+        }
+      }
+
+      &__content {
+        border-radius: 10px;
+        border: 1px solid #e1e1e1;
+        background: #fff;
+        width: 100%;
+        height: auto;
+        padding: 14px 18px;
+      }
+
+      &__btn__box {
+        display: flex;
+        justify-content: flex-end;
+        width: 100%;
+        margin-top: 9px;
+      }
+
+      &__btn {
+        width: 49px;
+        height: 27px;
+        flex-shrink: 0;
+        border-radius: 4px;
+        background: #ff5050;
+        color: #fff;
+        text-align: center;
+        font-family: 'Gmarket Sans';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+      }
+    }
+  }
+}
diff --git a/src/components/comment/Comments.tsx b/src/components/comment/Comments.tsx
@@ -7,6 +7,7 @@ import Pagination from './Pagination';
 import usePagination from '@/hook/usePagination';
 import { addDocument, deleteDocument } from '@/lib/firebaseQuery';
 import { FORMDATE } from '@/lib/constants';
+import useCalculateInnerWidth from '@/hook/useCalculateInnerWidth';
 export interface CommentProps {
   comment: string;
   createdAt: string;
@@ -19,6 +20,7 @@ const Comments = ({ pokemonState }: PokemonInfoProps) => {
   const [loading, setLoading] = useState(false);
   const [comment, setComment] = useState('');
   const { user } = useUserStore();
+  const windowWidth = useCalculateInnerWidth();
 
   const { pokemon } = pokemonState;
 
@@ -62,7 +64,9 @@ const Comments = ({ pokemonState }: PokemonInfoProps) => {
     }
   };
 
-  const onCommentChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const onCommentChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     setComment(e.target.value);
   };
 
@@ -150,6 +154,82 @@ const Comments = ({ pokemonState }: PokemonInfoProps) => {
           )}
         </ul>
       </div>
+
+      {windowWidth <= 768 && (
+        <>
+          <div>
+            <form className={styles.mobile__comments__form} onSubmit={onSubmit}>
+              <span
+                className={`${styles.mobile__comments__length} ${
+                  comment.length > 100
+                    ? styles['mobile__comments__length__max']
+                    : ''
+                }`}
+              >
+                {comment.length} / 100
+              </span>
+              <textarea
+                className={styles.mobile__comments__text}
+                name="comment"
+                id="comment"
+                required
+                value={comment}
+                onChange={onCommentChange}
+                placeholder={
+                  user?.uid ? '댓글을 입력해주세요' : '로그인을 해주세요'
+                }
+              />
+
+              <div className={styles.mobile__comments__btn__box}>
+                <input
+                  className={styles.mobile__comments__btn}
+                  type="submit"
+                  value="댓글 등록"
+                  disabled={!comment || loading || comment.length > 100}
+                />
+              </div>
+            </form>
+            <ul className={styles.mobile__comments__list__inner}>
+              {commentList.length > 0 ? (
+                commentList.map(
+                  ({ id, comment, displayName, createdAt, uid }) => {
+                    const createdDate = FORMDATE(createdAt);
+                    return (
+                      <li className={styles.mobile__comments__list}>
+                        <div>
+                          <div className={styles.mobile__comments__list__info}>
+                            <span>{displayName}</span>
+                            <span>{createdDate}</span>
+                          </div>
+                          <div
+                            className={styles.mobile__comments__list__content}
+                          >
+                            {comment}
+                          </div>
+                        </div>
+                        <div
+                          className={styles.mobile__comments__list__btn__box}
+                        >
+                          {uid === user?.uid && (
+                            <button
+                              className={styles.mobile__comments__list__btn}
+                              onClick={() => onDelete(id, uid)}
+                            >
+                              삭제
+                            </button>
+                          )}
+                        </div>
+                      </li>
+                    );
+                  },
+                )
+              ) : (
+                <div>댓글이 없습니다.</div>
+              )}
+            </ul>
+          </div>
+        </>
+      )}
       <Pagination
         isLoading={isLoading}
         onMoveToNext={() => fetchComments('next')}