[7주차] Team 커피딜 송유선 & 최지원 미션 제출합니다. #6
Conversation
[Init] Project Setting, Add theme.ts
[Feat] Modify theme feature by tailwind.config.ts & add svgr feature
[Feat] Create sidebar component & update theme in tailwind.config
[Feat] Logo, sidebar component & basic structure of voting page
[Feat] Complete Login, Signup api
[Feat] Add userPart & whether voted when user logged in / Login UI
[Feat] Add dropdown component for signup / AboutUs mobile UI
[Feat] Members pc ver. / Title absolute to OnboardingStars
[Design] Add PC design & header component
[Design] Add pc design
[Fix] Remove response in handleLogin
Docs: Add ReadMe.md
[Chore] Test & add deco
There was a problem hiding this comment.
axios instance를 만들어서 토큰, 쿠키를 처리하는 것이 좋은 것 같습니다. 코드가 정말 깔끔하고, 잘 구현되어있는 것 같아요. 깔끔한 코드 스타일 많이 참고하겠습니다! 혹시 axios객체 이름을 http라고 한 이유가 있는지 궁금합니다
There was a problem hiding this comment.
http 요청과 관련된 로직을 처리한다는 점에서 직관적으로 http라고 지었습니다. api를 호출하는 함수에서는 await http.post("/api/auth/login", {~~) 과 같이 쓸 수 있고요! 또 http.ts라는 파일 자체도 axios 인스턴스 뿐만 아니라 관련 http 유틸리티나 인터셉터를 추가할 수도 있어 범용적으로 사용된다고 알고 있습니당
| const expirationDate = new Date(); | ||
| expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000); | ||
|
|
||
| document.cookie = `accessToken=${accessToken}; expires=${expirationDate.toUTCString()};`; |
There was a problem hiding this comment.
저희도 쿠키로 토큰값을 주고 받는 방법을 미리 연습하는 것을 고려해보았으면 어땠을까 생각이 들 정도로 쿠키, 토큰관련 로직이 구현이 잘 된 것 같습니다. 추가적으로 document.cookie와 같이 JavaScript로 쿠키에 접근이 가능하게 하는 것은 보안적으로 위험한 부분이 있는 것으로 알고 있어서 httpOnly 속성으로 서버를 통해 쿠키를 관리하는 것도 좋을 것 같아요!
| return ( | ||
| <> | ||
| <div className="flex flex-col w-full relative pc:hidden"> | ||
| <div className="z-0 absolute w-[7.5625rem] h-[2.6875rem] bg-Blue_Grey top-[7.94rem] ml-5"></div> |
There was a problem hiding this comment.
크기 단위로 rem을 주로 사용하시는데 혹시 개인적인 이유가 어떤건지 궁금합니다!
There was a problem hiding this comment.
https://yozm.wishket.com/magazine/detail/1410/
에 나온 바와 같이 알고 있어서 주로 rem을 썼습니다!
물론 이번에는 소수점 값이 깔끔하지 못한 점은 저도 쓰면서 느꼈어서 좀 더 맞아 떨어지는 값으로 조정해봤어도 좋았겠다는 생각은 듭니다!🥲
There was a problem hiding this comment.
지원이가 잘 말해준 것 같습니다! 또 추가적으로 덧붙이자면, tailwind가 기본적으로 rem 단위를 사용하기 때문에 tailwind의 유연성을 잘 활용하려면 rem을 쓰는 것이 더 좋다고 알고 있습니다.
| justify-content: center; | ||
| margin: auto; | ||
|
|
||
| text-rendering: optimizeLegibility; |
| password: "", | ||
| }); | ||
|
|
||
| const isActive = |
There was a problem hiding this comment.
올바른 input 형태인지 체크하는 변수인 것 같습니다. isActive는 보통 활성화된 상태를 나타낼 때 주로 네이밍이 되는 경우가 많아서 이 변수는 변수명이 inputCheck, correctInput과 같은 직관적인 변수명도 좋을 것 같아요!
| <> | ||
| <Link | ||
| href="/voting/leader" | ||
| className="ml-[8%] mb-10 scale-100 pc:scale-150 pc:self-center pc:mr-[35%] pc:mt-7" |
There was a problem hiding this comment.
css 부분에서 마진으로 되어있는 부분이 꽤 있는 것 같습니다! margin은 정말 매력적이고, 단순한 속성이지만 css가 margin을 복잡하게 꼬아놓아서 프로젝트가 복잡해질 때 많이 사용했을 때 어려운 부분이 있더라구요
https://www.joshwcomeau.com/css/rules-of-margin-collapse/
margin 충돌관련 링크남기겠습니다! 한번 보셔도 재밌을 것 같습니다
| const [isOpen, setIsOpen] = useState(false); | ||
| const dropdownRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| // 외부 클릭 시 닫힘 |
There was a problem hiding this comment.
이런 방법으로 모달 외부 클릭을 제어하는 방법이 있군요. 새로운 방법 배워가겠습니다 😬 저는 모달 위에 부모 background를 하나 더 쌓고, 부모 background를 눌렀을 때 handleClose하는 방법을 사용합니다! 안의 모달 태그에는 e.stopPropagation을 달아서 모달을 눌렀을 때는 닫히지 않게 합니다
| }, []); | ||
|
|
||
| // 굳이 필요하지 않은 부분이긴 한데... 팀이름... 백에서 주는 형식 바꾸고 싶어서... | ||
| const changeTeamName = (apiTeamName: string) => { |
There was a problem hiding this comment.
오...이걸로 화면에 보이는 Cupfee Deal, Musai 같은 팀명 디테일이 드러나는군요. 세심한 디테일 감동했습니다
| letterSpacing: "-0.00075rem", | ||
| }, | ||
|
|
||
| ".no-scrollbar": { |
There was a problem hiding this comment.
관련해서 tailwindcss-scrollbar-hide 의존성이 있습니다! 설치하고, require() 안에 넣어주고, scrollbar-hide만 쓰는 방법도 있습니다!
There was a problem hiding this comment.
컴포넌트 관리 방법은 개인의 스타일마다 다른 점이 많은 것 같습니다. 여러 사람의 스타일을 참고하며 많이 배워갈 수 있어 좋은 것 같습니다
7주차 미션: Next-Vote
🪄 결과물
📍현재 버셀 배포 링크는 https 프로토콜 문제로 인해 api 연결이 안 되고 있습니다... 백에서 도메인 사서 해결 중입니다...
🩵 구현 기능
로그인 및 회원가입
투표 및 결과 조회
CEOS 부원 정보 및 만든이들 정보 안내
반응형 디자인
에러 처리
🎨 디자인
🩵 느낀 점
[송유선] 첫 번째 과제를 하면서 애를 먹던 게 엊그제 같은데, 벌써 마지막 과제를 끝내게 되어 감회가 새롭다. 지난번 넷플릭스 과제 때 Next.js를 처음 접하면서 어느 정도 파악했다고 생각했는데, 이번에는 너무 많은 오류를 접하게 되어 당황스러웠다. 지난번에는 디자인도 간단했고, Open API를 사용하면서 고려할 사항도 많지 않았기 때문에 최대한 서버 컴포넌트를 활용해 코드를 잘 짰었다. 그러나 이번에는 조금만 복잡해지니까 익숙한 방식대로 코드를 쓰게 되었고, use client를 상당히 많은 페이지에 사용하면서 진행하게 되었다. 그 과정에서 hydration error가 너무 많이 발생했는데, 이를 하나씩 해결해 가면서 SSR과 CSR의 차이를 다시금 공부할 수 있었다. 그렇지만 지금 작성한 코드가 최선이라고는 생각되지 않아서, 더 공부해야겠다는 다짐을 하게 되었다. 그리고 이번 과제에서 우리 팀 백엔드 친구들과 처음으로 같이 작업했는데, 본격적인 프로젝트에 들어가기 전에 서로의 협업 스타일을 맞춰볼 수 있는 소중한 기회였던 것 같다. (새벽에도 연락이 정말 잘 되는 우리 팀... 👍🏻) 아 그리고 이번 과제는 디자인을 스스로 해야 했기 때문에 급하게 피그마로 하루 만에 만들었는데, 대충 만든 탓에 레이아웃이 정확히 맞지 않거나 컴포넌트화가 제대로 되지 않은 부분이 많아서 개발할 때 애를 좀 먹었다...^^ 정말.. 디자인 파트의 중요성을 다시금 느꼈다. 그래도 이번 경험을 통해 개발이 수월해지도록 디자인을 구성하는 요령을 조금이나마 익힐 수 있었던 것 같다. + 그리고... 한 학기동안 함께 해준 20기 프론트, 운영진 분들 모두 감사했습니다🥹 덕분에 많이 배웠어요🫶🏻
[최지원] 우선 next js를 저번에 이어 두 번째 써보는데 아직도 적응이 안되었고 공부가 많이 필요함을 느낀 과제였습니다. 거의 대부분의 에러 해결을 page 단위에서의 use client 사용으로 해결한 점이 아쉬웠습니다. 배포 때는 생각보다 훨씬 사소하게도 에러가 많이 나서 예를 들면 쓰이지 않은 변수가 있다는 것만으로도 배포가 실패하는 것이 당황스럽기도 했지만 그만큼 이유있는 코드만을 쓰는 습관을 들일 수도 있겠다는 생각이 들었습니다. 디자인은 유선언니가 맡아 해주었는데, 너무 예쁘고 감각적으로 해주어서 넘 고마웠구, 덕분에 퍼블리싱이 즐거웠습니다 ㅎ.ㅎ 커피딜 개발에 앞서 백엔드와도 소통해보면서 api에 대해 서로 다르게 생각하고 있던 부분이 있거나, 프론트 입장에서 잘 모르던 스웨거에 대해 백 팀원들이 친절하게 설명해주는 등 소통이 원활히 이루어져서 힘들지 않았습니다. 새벽에도 5분 안에 연락 보는 서아언니 가현이 짱.. 어느덧 마지막 과제라는게 믿기지 않을 정도로 스터디 과제하느라 한 학기가 너무 빨리 흘러간 것 같습니다,, 다른 부원 분들의 과제를 보고 코드리뷰도 하면서 많이 배울 수 있었습니당 모두 수고많으셨습니다🧙💙