회원가입페이지 제작 #36
회원가입페이지 제작 #36
Conversation
sispo3314
left a comment
sispo3314
left a comment
There was a problem hiding this comment.
빠르고 깔끔하게 구현 잘 해주셔서 피그마 디자인에 안 맞는 부분이나 전역 스타일을 사용하지 않으신 부분만 리뷰 남겨드렸습니다! 수정하시고 리뷰 재요청 해주시면 확인하겠습니다. 그리고 질문 몇개 남겨두었으니 답변해주시면 감사하겠습니다.
너무 수고하셨습니다 bbbb
There was a problem hiding this comment.
요 글씨들은 text 말고 svg 사용하신 이유가 있나용?? 궁금해서 여쭤봅니다!
| import { X, Heart } from 'react-feather'; | ||
| import TagButton from '@/component/common/TagButton/TagButton'; | ||
| import Button from '@/component/common/Button/Button'; |
There was a problem hiding this comment.
지금 여기서 빌드 오류가 발생하고 있는 것 같습니다!
아마 Button 컴포넌트를 import 해두고 사용하지 않으셔서 발생하는 오류 같은데 그냥 import Button~ 이 줄 지워주시면 해결 될겁니당..
| <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[#7f8c6b]"> | ||
| 🔍 | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
여기 돋보기 이모티콘 말고 피그마에서 아이콘 export 해서 사용해주세요!
| const MyTravelList = () => { | ||
| const [isSidebarOpen, setIsSidebarOpen] = useState(false); | ||
| const [travelItems, setTravelItems] = useState([ | ||
| const [travelItems, setTravelItems] = useState<TravelItem[]>([ | ||
| { id: 1, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, | ||
| { id: 2, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, | ||
| { id: 3, title: '행궁동', tranquil: true, type: '자연관광지', likes: 3 }, |
There was a problem hiding this comment.
요건 const 파일로 분리해주시면 더 깔끔할 것 같습니다!
| 나의 여행지 | ||
| <div className="pt-14 px-4 pb-8"> | ||
| <div className="mx-[-1rem] mb-3 rounded-b-xl bg-[#dfead1] pb-3 pt-2"> | ||
| <div className="text-center text-heading3 font-bold text-green1">나의 여행지</div> |
There was a problem hiding this comment.
text는 전역에 있는 스타일에서 사용해주시면 통일성에 좋을 것 같습니다. 나의 여행지 텍스트의 경우에는 제가 피그마에 caption3로 정의해두었는데 혹시 안 보이시거나 어디에서 보는지 모르겠으면 말씀해주세요! ㅜㅜ
| <div className="flex items-center gap-3"> | ||
| <div className="h-14 w-14 rounded-md bg-gray-300" /> | ||
| <div className="flex h-14 w-14 items-center justify-center rounded-md bg-[#e5e9db]"> | ||
|
|
||
| <div className="h-6 w-8 rounded bg-gray-400" /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col"> | ||
| <div className="font-semibold text-sm text-black"> | ||
| {item.title} | ||
| </div> | ||
| <div className="mt-1 flex gap-1"> | ||
| <Button variant="sm" color="green-muted"> | ||
| 한적한 | ||
| </Button> | ||
| <Button variant="sm" color="green3"> | ||
| <div className="text-sm font-semibold text-black">{item.title}</div> | ||
|
|
||
| <div className="mt-2 flex gap-3"> | ||
| <TagButton selected color="green"> | ||
| 한적함 | ||
| </TagButton> | ||
| <TagButton selected color="red"> | ||
| {item.type} | ||
| </Button> | ||
| </TagButton> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col items-end gap-1"> | ||
| <X | ||
| className="w-4 h-4 text-gray-500 cursor-pointer" | ||
| <div className="flex flex-col items-end"> | ||
| <button | ||
| aria-label="remove" | ||
| onClick={() => handleRemoveItem(item.id)} | ||
| /> | ||
| <div className="flex items-center text-xs text-red-400"> | ||
| <Heart className="w-4 h-4 mr-1 fill-red-300 text-red-300" /> | ||
| className="rounded p-1 text-gray-500 hover:bg-black/5" | ||
| > | ||
| <X className="h-4 w-4" /> | ||
| </button> | ||
| <div className="mt-4 flex items-center text-xs text-[#e57373]"> | ||
| <Heart className="mr-1 h-4 w-4 fill-[#f28e8e] text-[#f28e8e]" /> |
There was a problem hiding this comment.
혹시 요 부분 리뷰 카드 구현하신건가요...? 나의 여행지에서 쓰이는 X 버튼 포함된 리뷰 카드는
const handelRemove = (id: number) => {
setPlaces((prev) => prev.filter((place) => place.id !== id));
};
<h1 className="text-caprion1">placecard 테스트 (x있는 버전)</h1>
{places.map((place) => (
<PlaceCard
key={place.id}
title={place.title}
theme={place.theme}
likeCount={place.likeCount}
imgUrl={place.imgUrl}
quietLevel={place.quietLevel}
showRemoveButton
onRemove={() => handelRemove(place.id)}
/>
))}
요런 식으로 onRemove prop 포함해서 공통 컴포넌트 사용하시면 될 것 같은데 혹시 직접 구현해주신 이유가 있나요? 잘 안되는 게 있다면 답글 남겨주세요
| className="w-full max-w-[320px] h-auto" | ||
| /> | ||
| </div> | ||
| <p className="mb-8 text-sm text-gray-500">Create your nickname.</p> |
There was a problem hiding this comment.
여기 텍스트 컬러는 green-muted를 사용하고 있는 것 같습니당 피그마에서 요소 클릭할 때 컨트롤+클릭 하시면 원하는 요소만 선택해서 우측 속성 확인하실 수 있습니다.
| <div className="mx-auto mb-4 h-2 w-11/12 rounded-full bg-gray-200" /> | ||
|
|
There was a problem hiding this comment.
여기도 bg-gray-200 대신 index.css에 정의된 bg-gray2로 사용해주세요. 다른 부분들도 확인하시고 index.css에 있는 컬러들로 변경해주시면 좋을 것 같습니다 ㅜㅜ
| useEffect(() => { | ||
| const t = setTimeout(() => navigate('/'), 3000); | ||
| return () => clearTimeout(t); | ||
| }, [navigate]); |
There was a problem hiding this comment.
3초 후 메인화면으로 돌아가게 코드 짜주셨군요! 좋습니다 bb 근데 완료 후 돌아갈 일이 없다면 navigate('/', {replace:true})로 해두는 게 좋다는데 이건 저도 안 해봐서... 테스트 후 재윤님이 원하시는 방향으로 해주세요!
| alt="축하 일러스트" | ||
| className="w-full max-w-[320px] h-auto mb-8" | ||
| /> | ||
| <p className="text-sm text-gray-500">곧 메인으로 돌아갑니다...</p> |
There was a problem hiding this comment.
여기도 텍스트 색깔은 green-muted 사용해주시면 됩니다
넵 다 확인했습니다 주말 사이에 다 끝내놓겠습니다 |
|
@rexyoon 재윤님 혹시 아직 push 안 하셨거나 다른 브랜치에서 수정 작업 하셨나요? 이 브랜치 닫으려면 오류가 해결 되어야 할 것 같은데 아직 빌드 오류가 남아있는 것 같습니다... |
📌 작업 내용
✨ 리뷰어에게
문제 없으면 남은 페이지 피드백 반영해서 수정하겠습니다.
📢 발생한 이슈
📸 스크린샷 (선택)
ments/assets/b3904273-5b93-421e-a5cf-45718c8f96c1)
🔗 관련 이슈
Closes #