[박소현] week19 #556

ParkSohyunee · 2024-01-14T13:32:16Z

요구사항

기본

주요 변경사항

변경된 api 적용
week13 과제 요구사항 완료
SWR 사용
- (참고) 기존에 swr로 적용했어서 리액트쿼리로 변경하지 않았습니다.

멘토에게

멘토님, 그동안 상세하게 과제 확인 해주셔서 감사합니다. 덕분에 part3동안 많이 배웠습니다.😊
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

hongjw030

허허 저희팀 플젝은 끝났지만 그래두 소현님 코드는 못참지~!!!!! 궁금해서 보러왔는데 역시 넘 멋지시네용... 👀👀👀🙌 오늘도 배워갑니당 ㅋㅋㅋㅋ !!!

hongjw030 · 2024-01-15T05:18:26Z

src/types/link.ts

+export interface LinkData {
+  id: number;
+  title: string;
+  url: string;
+  description: string;
+  favorite: boolean;
+  created_at: string;
+  image_source: string;
+}


혹시 이렇게 하면 에러 안 나시나요???
저는 제가 직접 링크 하나 추가하고 보니까 link에 대한 img source랑 description이 없어서 에러가 떴었거든요,
그래서 id랑 url, created at 속성 빼고 다 ? 붙여서 옵셔널로 만들었던... ㅠㅠ

@hongjw030

재원님 저는 타입에러는 없었는데요, 링크 중에 이미지 소스가 있지만 이미지를 불러오지 못하는경우(404 에러)가 있어서 이때는 Image 컴포넌트에 onError 콜백함수로 대체 이미지를 주었습니다! (오늘 커밋 추가했습니당 ㅎㅎ)
description이 없는 경우는 아직 없었는데 혹시 테스트해보신 url 공유해주시면 저도 테스트 한번 해보겠습니다!

저도 아무 url이나 추가하다 우연히 넣고 알게된건데... https://www.google.com 링크 추가하시면 image source도 description도 없어서 에러가 나더라구요!!

hongjw030 · 2024-01-15T05:19:09Z

src/common/utils/matchedKeyword.ts

+import { LinkData } from "@/types/link";
+
+export const checkMatchedAllLinks = (keyword: string, links: LinkData[]) => {
+  const filteredLinks = links.filter((link) => {
+    return (
+      (link.title && link.title.includes(keyword)) ||
+      (link.description && link.description.includes(keyword)) ||
+      (link.url && link.url.includes(keyword))
+    );
+  });
+  return filteredLinks;
+};


오~!!! 이거 좋은 생각이네염 항상 느끼건데 소현님은 코드랑 파일 정리 넘 깔끔하게 잘하시는거 같아요, 부럽부럽....

hongjw030 · 2024-01-15T05:20:37Z

src/components/card/CardItem.tsx

왕.... 코드 진짜루 깔끔 그잡채... ㅋㅋ ㅠㅠ 오늘도 배워갑니당 허허

ParkSohyunee · 2024-01-15T13:24:32Z

허허 저희팀 플젝은 끝났지만 그래두 소현님 코드는 못참지~!!!!! 궁금해서 보러왔는데 역시 넘 멋지시네용... 👀👀👀🙌 오늘도 배워갑니당 ㅋㅋㅋㅋ !!!

과제에서 재원님 보니 더 반갑네요😋 프로젝트 기억이 새록새록 ㅎㅎ
수정해야 할 부분이 너무 많은데.. 좋은 피드백 주시고, 시간내서 리뷰 해주셔서 감사합니다!!!

ParkSohyunee · 2024-01-17T11:15:47Z

.storybook/main.ts

+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",


@kimjngyun

📌 멘토님, 이번주 스토리북 수강하면서 실습을 과제에서 하느라 요구사항 외 코드가 추가되었는데요,
이와 관련된 .storybook폴더 / components/story 폴더, src/stories 폴더는 스토리북 공부한 코드입니다!(리뷰x)
참고 부탁드립니다. 😆

kimjngyun

소현님 고생 많으셨습니다! 팀장님 덕분에 파트3 저도 많이 도움받은 것 같아요. 감사합니다 😊
마지막까지 파이팅입니다! 🔥🔥🔥

kimjngyun · 2024-01-17T10:35:59Z

src/components/modal/AddFolders.tsx

+  const [accessToken, setAccessToken] = useState<string | null>();
+  const [folderName, setFolderName] = useState("");
+
+  const fetcher = async (url: string, name: string) => {


여기서 POST 요청 후에 재검증이 필요한 값이 없나요?

kimjngyun · 2024-01-17T10:40:21Z

src/api/auth/signin.ts

+import { DOMAIN_URL } from "@/common/constants";
+import { SubmitFormData } from "@/types/form";
+
+const headers = { "Content-Type": "application/json; charset=utf-8" };


자주 쓰이는 header들을 const 파일에 두고 쓰면 좋을 것 같아요.

kimjngyun · 2024-01-17T10:42:33Z

package.json

+    "@tanstack/react-query": "^5.17.9",
+    "@tanstack/react-query-devtools": "^5.17.9",


react-query가 사용되지는 않는것 같은데 추가하신 이유가 있을까요?

kimjngyun · 2024-01-17T10:46:10Z

pages/folder/FolderPresenter.tsx

@@ -51,7 +50,7 @@ export default function FolderUI(props: FolderUIProps) {
          )}
          <S.MenuContainer>
            <Categories
-              categories={[DEFAULT, ...props.folderNames]}
+              categories={["전체", ...props.folderNames]}


혹시 상수에서 이렇게 다시 바꿔주신 이유가 있을까요?

kimjngyun · 2024-01-17T11:39:42Z

pages/folder/[id]/index.tsx

+          {!isLoading && links.length === 0 ? (
+            <S.Blank>저장된 링크가 없습니다</S.Blank>
+          ) : (
+            <CardList links={filteredLinks} />


filteredLinks를 state로 두지 않는 것이 조금 더 괜찮을 것 같습니다.

Suggested change

<CardList links={filteredLinks} />

<CardList links={checkMatchedAllLinks(keyword, links)} />

kimjngyun · 2024-01-17T11:44:25Z

src/components/card/CardItem.tsx

+            alt="link"
+            className={cardStyle}
+            fill
+            onError={handleImageError}


Image 컴포넌트에 이런 기능도 있었군요! 👍

kimjngyun · 2024-01-17T11:49:43Z

src/components/modal/DeleteFolder.tsx

+export default function DeleteFolder({ selectedItem, linkId, label, onClose }: DeleteFolderProps) {
+  const router = useRouter();
+  const folderId = router.query.id;
+  const [accessToken, setAccessToken] = useState<string | null>();


accessToken을 로컬스토리지에서 가져오기 위해 useEffect를 활용한 로직이 모달 컴포넌트에 공통되는데 훅으로 만들어쓰면 좋을 것 같아요!

kimjngyun · 2024-01-17T11:50:00Z

src/components/modal/EditFolder.tsx

+  const router = useRouter();
+  const folderId = router.query.id;
+
+  const [accessToken, setAccessToken] = useState<string | null>();


kimjngyun · 2024-01-17T11:50:18Z

src/components/modal/AddLink.tsx

-export default function AddLink({ link }: AddLinkProps) {
-  const { folderNameList } = useContext(FolderContext);
+export default function AddLink({ link, onClose }: AddLinkProps) {
+  const [accessToken, setAccessToken] = useState<string | null>();


kimjngyun · 2024-01-17T11:51:16Z

src/context/SelectedFolderContext.tsx

+});
+
+export function FolderContextProvider({ children }: Props) {
+  const DEFAULT = "전체";


위에서 언급한 코멘트랑 관련하여 DEFAULT 값을 따로 빼서 공유하면 좋을 것 같아요!

ParkSohyunee added 21 commits January 12, 2024 15:53

Chore: 리액트쿼리 라이브러리 설치 및 설정

ed532f1

Feat(Layout): 변경된 api로 유저데이터 연동

fd9be93

Feat(FolderPage): 폴더페이지 api 변경 및 카테고리 dynamic 라우팅 추가

0179f98

Feat(FolderPage): 선택된 폴더 페이지 추가

a5dc2aa

Feat(ShareContainer): 공유페이지 api 변경에 따른 로직, response 타입 수정

818580f

Feat(SignInForm): 로그인폼 api 변경

832c2b9

Feat(SignUpForm): 회원가입폼 api 변경

431cd77

Refactor: 링크 검색 기능 필터링 로직 분리, 타입 추가

ed85349

Feat(Layout): 네브바 프로필 api 연동, accessToken 여부에 따른 UI

4475303

Feat(SignUpForm): 회원가입 api 변경

753ba0f

Fix(SigninForm): 로그인 accessToken 로직 수정

4c02cae

Design(Header): 프로필 아바타 UI 수정

aa679c2

Feat(AddFolders): 폴더 추가하기 기능 구현

ddc9db1

Feat(AddLink): 링크 추가하기 기능 구현

fbadf32

Feat(DeleteFolder): 링크 삭제 기능 구현, 링크데이터 타입 수정

f2ed2e7

Feat(DeleteFolder): 폴더 삭제 기능 구현

ecb98c7

Fix(App): SWR로 설정 변경

0352c15

Feat(EditFolder): 폴더이름 변경 기능 구현

6e3c4ca

Fix: Response types 수정, 불필요한 types 제거

dedab35

Style: 주석, console.log 삭제

f83202e

Chore: 사용하지 않는 api 파일 삭제

cb60c95

ParkSohyunee requested a review from kimjngyun January 14, 2024 13:33

ParkSohyunee self-assigned this Jan 14, 2024

ParkSohyunee added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jan 14, 2024

hongjw030 reviewed Jan 15, 2024

View reviewed changes

Feat(CardItem): 카드 이미지 에러일때 UI 로직 적용

8329902

Feat: 스토리북 실습

5bfbe18

ParkSohyunee commented Jan 17, 2024

View reviewed changes

kimjngyun approved these changes Jan 17, 2024

View reviewed changes

kimjngyun merged commit dc87338 into codeit-bootcamp-frontend:part3-박소현 Jan 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[박소현] week19 #556

[박소현] week19 #556

ParkSohyunee commented Jan 14, 2024

hongjw030 left a comment

hongjw030 Jan 15, 2024

ParkSohyunee Jan 15, 2024

hongjw030 Jan 15, 2024

hongjw030 Jan 15, 2024

hongjw030 Jan 15, 2024

ParkSohyunee commented Jan 15, 2024 •

edited

Loading

ParkSohyunee Jan 17, 2024 •

edited

Loading

kimjngyun left a comment •

edited

Loading

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

kimjngyun Jan 17, 2024

		"@tanstack/react-query": "^5.17.9",
		"@tanstack/react-query-devtools": "^5.17.9",

	<CardList links={filteredLinks} />
	<CardList links={checkMatchedAllLinks(keyword, links)} />

[박소현] week19 #556

[박소현] week19 #556

Conversation

ParkSohyunee commented Jan 14, 2024

요구사항

기본

주요 변경사항

멘토에게

hongjw030 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParkSohyunee commented Jan 15, 2024 • edited Loading

ParkSohyunee Jan 17, 2024 • edited Loading

Choose a reason for hiding this comment

kimjngyun left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ParkSohyunee commented Jan 15, 2024 •

edited

Loading

ParkSohyunee Jan 17, 2024 •

edited

Loading

kimjngyun left a comment •

edited

Loading