Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BE를 sprint10 미션용으로 수정 참고 : user, product 등 다른 api도 수정 예정
article -> post, title -> name 참고 : ts 변환 과정이라 수정 부분 테스트 추후 진행 예정
BE 변경 사항에 맞춰 수정
일단 실행 후 코드 / 로직 수정해야할 부분이 보여서 임시로 작성한 ts 코드 사용
홈페이지를 구성하는 component 추가 참고 : 반응형 적용 안함. tailwind css 반응형 설정. 기존의 방법 이외에 선호되는 방법을 찾아서 적용 예정
일부 새로 생성한 css 파일 삭제 반응형 css 적용을 위해 3개지 선택 사항 중 1안 선택 1. tsx에 직접 tailwind css 사용 2. css module에 tailwind + vanilla(@media) 조합 사용 3. tailwind.config.js만 사용
일부 새로 생성한 css 파일 삭제
wildCodingWarrior
approved these changes
Nov 13, 2024
Comment on lines
+33
to
+39
| const postPreviewClass = `${style["post-preview"]}`; | ||
| const postPreviewTopBarClass = `flex flex-row justify-between ${style["top-bar"]}`; | ||
| const postPreviewNameClass = `font-semibold ${style.name}`; | ||
| const postPreviewBottomBarClass = `flex flex-row justify-between ${style["bottom-bar"]}`; | ||
| const postPreviewBottomBarNicknameDateClass = `flex flex-row items-center ${style["bottom-bar-nickname-date"]}`; | ||
| const postPreviewBottomNicknameClass = `font-normal ${style["nickname-name"]}`; | ||
|
|
There was a problem hiding this comment.
이런식으로 정리하시면 tailwind CSS intellisense 혜택을 못보지 않나요?
차라리 조금 공부하더라도 tailwind-merge랑 clsx를 활용하는 cn유틸을 사용해보는 것이 어떤가 싶습니다.
There was a problem hiding this comment.
아직 tailwind를 잘 못 쓰고 있습니다. 정확히는 tailwind 적용한 코드를 돌아보니 tailwind.config.js에 몰아서 정의하다보니, 오히려 관리의 어려움을 느껴, 현재는 tsx 파일에 직접 tailwind를 사용하는 방식으로 수정 중입니다.
tailwind-merge랑 clsx를 활용하는 cn유틸은 자료를 찾아보겠습니다.
참고 : 아마 위의 코드는 바닐라로 만들고 아직 tailwind로 완전히 적용 안 한 부분일 겁니다.
src/types/components.ts
Outdated
Comment on lines
1
to
21
| import { ReactNode } from "react"; | ||
|
|
||
| export interface MiddleBannerProps { | ||
| isLeftImage: boolean; | ||
| imagePath: string; | ||
| textSetWidth: string; | ||
| topText: string; | ||
| middleText: string; | ||
| bottomText: string; | ||
| } | ||
|
|
||
| export interface SignBottomTextProps { | ||
| message: string; | ||
| linkText: string; | ||
| linkPath: string; | ||
| } | ||
|
|
||
| export interface DropdownProps { | ||
| dropdwonClass?: string; | ||
| minimise?: string | boolean; | ||
| children: ReactNode; |
There was a problem hiding this comment.
컴포넌트에 해당하는 Props는 해당 컴포넌트에 작성하는게 더 응집도 있는 코드라고 생각합니다.
package.json
Outdated
| "dev": "cross-env NODE_OPTIONS='--inspect' next dev", | ||
| "build": "next build", | ||
| "dev": "cross-env NODE_OPTIONS=development next dev", | ||
| "build": "next build && tsc", |
There was a problem hiding this comment.
이 tsc는 없어도 무방하겠습니다
| "react": "^18", | ||
| "react-dom": "^18", | ||
| "react-hook-form": "^7.53.0", | ||
| "react-modal": "^3.16.1", | ||
| "react-query": "^3.39.3", |
There was a problem hiding this comment.
이 패키지 옛날 버전이라서 @tanstack/react-query를 사용해보세요.
There was a problem hiding this comment.
"@tanstack/react-query": "^5.56.2", 를 사용 중입니다
회원 가입에 사용되는 컴포넌트 분리 ts에 적합한 코드로 정리
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
SSR에서 호출하는 API가 로컬스토리지에 토큰에 접근하는 것을 방지 참고 : 토큰을 로컬스토리지에 저장한 것은 임시 코드여서 이 부분을 어떻게 수정할지 고민 필요
임시로 상품 리스트 / 상품 상세 조회 페이지에 적용할 API 코드 작성 참고 : 테스트 과정에서 일단 문제가 없어보여 커밋. 다른 API 함수 전부 수정해야 됨
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
프론트엔드
주요 변경사항
스크린샷
멘토에게