Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

모바일 뷰 관련 Header 작업 및 포켓몬 디테일 페이지 작업 (포켓몬 진화 부분 수정 예정) #61

Merged
merged 10 commits into from
Jan 26, 2024
Merged

모바일 뷰 관련 Header 작업 및 포켓몬 디테일 페이지 작업 (포켓몬 진화 부분 수정 예정) #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
116090d
Refactor: React.Dispatch 사용에서 Dispatch를 import해서 Dispatch로만 사용
BearHumanS Jan 26, 2024
476cc2d
Feat: Detail page에 Inner추가
BearHumanS Jan 26, 2024
835a660
Feat: 불필요한 로직 삭제 및 props 추가로 인한 관련 로직 수정 (모바일에서 search box 온오프 로직)
BearHumanS Jan 26, 2024
79b2f66
Feat: Header 부분 모바일 뷰 관련 로직 추가 및 스타일 수정 등 관련해서 모바일 컴포넌트 생성 등
BearHumanS Jan 26, 2024
15dfa84
Feat: 모바일 뷰 관련 로직 추가 및 스타일 변경
BearHumanS Jan 26, 2024
b24d71b
Style: 모바일 뷰 관련 디테일 페이지 전체적인 스타일 추가
BearHumanS Jan 26, 2024
8f0c3e1
Feat: 모바일 뷰 관련 조건부 렌더링 추가
BearHumanS Jan 26, 2024
753c2db
Feat: 모바일 뷰 관련 조건부 렌더링 및 중복되는 컴포넌트 재사용을 위해서 컴포넌트 분리
BearHumanS Jan 26, 2024
8a27fab
feat: classname 추가
BearHumanS Jan 26, 2024
69bf762
Feat: 모바일 뷰 관련 조건부 렌더링 및 중복되는 로직 컴포넌트 분리, 불필요한 주석 처리된 로직 삭제
BearHumanS Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 151 additions & 0 deletions src/components/comment/Comments.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
.comments {
&__container {
font-family: Gmarket Sans;

@media (max-width: 769px) {
display: none;
}
}

&__label {
Expand Down Expand Up @@ -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;
}
}
}
}
82 changes: 81 additions & 1 deletion src/components/comment/Comments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;

Expand Down Expand Up @@ -62,7 +64,9 @@ const Comments = ({ pokemonState }: PokemonInfoProps) => {
}
};

const onCommentChange = (e: ChangeEvent<HTMLInputElement>) => {
const onCommentChange = (
e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
setComment(e.target.value);
};

Expand Down Expand Up @@ -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')}
Expand Down
Loading
Loading