[Week14] 김하늘

components/Footer/Footer.tsx

@@ -1,19 +1,16 @@
 import { Container, Copy, Info, Sns } from "@/components/Footer/Footer.styled";
-import { Dom } from "@/hooks/useObserver";
+import { SetRefForObserver } from "@/hooks/useObserver";
 import Image from "next/image";
 import Link from "next/link";
+import { memo } from "react";
 
 interface Props {
-  dom?: React.MutableRefObject<Dom>;
+  setRefForObserver?: SetRefForObserver;
 }
 
-export default function Footer({ dom }: Props) {
+export default memo(function Footer({ setRefForObserver }: Props) {
   return (
-    <Container
-      ref={(el) => {
-        dom && (dom.current.footer = el);
-      }}
-    >
+    <Container ref={setRefForObserver}>
       <Copy>©codeit - 2023</Copy>
       <Info>
         <Link href="/privacy">Privacy Policy</Link>
@@ -35,4 +32,4 @@ export default function Footer({ dom }: Props) {
       </Sns>
     </Container>
   );
-}
+});

components/Header/Header.tsx

@@ -1,23 +1,20 @@
 import defaultAvatar from "@/public/Avatar.png";
 import useData from "@/hooks/useData";
 import { Container, User, UserImg, UserText, UserTitle } from "@/components/Header/Header.styled";
-import { URLS } from "@/utils/getData.type";
+import { PATHS } from "@/constants/path";
 
 export default function Header() {
-  const folderName = useData(URLS.SHARED_FOLDERNAME);
+  const folderName = useData(PATHS.SHARED_FOLDERNAME);
+  if (!folderName) {
+    return null;
+  }
 
   return (
     <Container>
       <User>
-        {folderName ? (
-          <>
-            <UserImg src={folderName.owner.profileImageSource ?? defaultAvatar} alt="유저 프로필 이미지" />
-            <UserText>{folderName.owner.name}</UserText>
-            <UserTitle>{folderName.folderName}</UserTitle>
-          </>
-        ) : (
-          <p>폴더 정보를 읽어오는 데 실패했습니다.</p>
-        )}
+        <UserImg src={folderName.owner.profileImageSource ?? defaultAvatar.src} alt="유저 프로필 이미지" />
+        <UserText>{folderName.owner.name}</UserText>
+        <UserTitle>{folderName.folderName}</UserTitle>
       </User>
     </Container>
   );

components/Header/HeaderInput.tsx

@@ -1,47 +1,40 @@
-import { useState } from "react";
 import { Float, Form, Input, InputButton, InputImg, InputWrapper } from "@/components/Header/HeaderInput.styled";
+import { PATHS } from "@/constants/path";
 import useData from "@/hooks/useData";
 import useModal from "@/hooks/useModal";
-import { Dom } from "@/hooks/useObserver";
-import { URLS } from "@/utils/getData.type";
+import { SetRefForObserver } from "@/hooks/useObserver";
+import { ChangeEvent, FormEvent, memo, useState } from "react";
 
 interface Props {
   id: number;
-  dom: React.MutableRefObject<Dom>;
+  setRefForObserver: SetRefForObserver;
 }
 
-export default function HeaderSearch({ id, dom }: Props) {
-  const folder = useData(URLS.FOLDER_CATEGORY, id);
+export default memo(function HeaderSearch({ id, setRefForObserver }: Props) {
+  const folder = useData(PATHS.FOLDER_CATEGORY, id);
   const { modal, dispatch } = useModal();
   const [value, setValue] = useState("");
 
-  const handleModal = (e: React.FormEvent) => {
+  const handleModal = (e: FormEvent) => {
     e.preventDefault();
-    if (folder?.path === URLS.FOLDER_CATEGORY) {
-      dispatch({ title: value, type: "추가하기", data: folder.data });
-    }
+    dispatch({ title: value, type: "추가하기", data: folder.data });
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target === dom.current.headerInput) {
-      const input = dom.current.headerInput as HTMLInputElement;
-      setValue(input.value);
-    }
-    if (e.target === dom.current.floatInput) {
-      const input = dom.current.floatInput as HTMLInputElement;
-      setValue(input.value);
-    }
+  const handleChange = (e: ChangeEvent) => {
+    const input = e.target as HTMLInputElement;
+    setValue(input.value);
   };
+
   return (
     <>
-      <Form ref={(el) => (dom.current.headerForm = el)} onSubmit={handleModal}>
-        <Input ref={(el) => (dom.current.headerInput = el)} value={value} onChange={handleChange} placeholder="링크를 추가해보세요." />
+      <Form ref={setRefForObserver} onSubmit={handleModal}>
+        <Input ref={setRefForObserver} value={value} onChange={handleChange} placeholder="링크를 추가해보세요." />
         <InputWrapper>
           <InputImg src="/link.svg" />
           <InputButton>추가하기</InputButton>
         </InputWrapper>
-        <Float ref={(el) => (dom.current.floatDiv = el)}>
-          <Input ref={(el) => (dom.current.floatInput = el)} value={value} onChange={handleChange} placeholder="링크를 추가해보세요." />
+        <Float ref={setRefForObserver}>
+          <Input ref={setRefForObserver} value={value} onChange={handleChange} placeholder="링크를 추가해보세요." />
           <InputWrapper>
             <InputImg src="/link.svg" />
             <InputButton>추가하기</InputButton>
@@ -51,4 +44,4 @@ export default function HeaderSearch({ id, dom }: Props) {
       {modal}
     </>
   );
-}
+});

components/Header/index/HomeHeader.tsx

@@ -1,13 +1,12 @@
 import { CutLine, StyledHeader, StyledImage, Title, WrapperLink } from "@/components/Header/index/HomeHeader.styled";
 import Link from "next/link";
-import { useEffect } from "react";
-
-let locate = "/folder";
+import { useRef } from "react";
 
 export default function HomeHeader() {
+  const locate = useRef("/signin");
   const accessToken = typeof window !== "undefined" ? sessionStorage.getItem("accessToken") : null;
   if (accessToken) {
-    locate = `/folder?a=${accessToken}`;
+    locate.current = `/folder`;
   }
 
   return (
@@ -22,9 +21,7 @@ export default function HomeHeader() {
           <p>구경 해보기</p>
           <Link href="/shared">폴더 공유하기</Link>
           <CutLine />
-          <Link href={locate} as="/folder">
-            링크 추가하기
-          </Link>
+          <Link href={locate.current}>링크 추가하기</Link>
         </WrapperLink>
         <StyledImage priority width={1} height={1} src="index/_img.svg" alt="링크검색기능 예시이미지" />
       </StyledHeader>

components/Main/CardList/Card.styled.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+export const WrapperCardImg = styled.div`
+  height: 20.5rem;
+  margin: 0 auto;
+  overflow: hidden;
+  border-top-right-radius: 1.5rem;
+  border-top-left-radius: 1.5rem;
+`;
+
+export const CardImg = styled.img`
+  width: 34rem;
+  height: 100%;
+  border-radius: 1.5rem 1.5rem 0 0;
+  object-fit: cover;
+`;
+
+export const CardText = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 13.5rem;
+  padding: 1.5rem 2rem;
+  gap: 1rem;
+`;
+
+export const WrapperTime = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.2rem;
+  color: var(--Gray5);
+`;
+
+export const H3 = styled.h3`
+  font-size: 1.4rem;
+`;
+
+export const ButtonStar = styled.button`
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+`;

components/Main/CardList/Card.tsx

@@ -0,0 +1,29 @@
+import { ButtonStar, CardImg, CardText, H3, WrapperCardImg, WrapperTime } from "@/components/Main/CardList/Card.styled";
+import { CardProps } from "@/components/Main/CardList/CardList.type";
+import Kebab from "@/components/Main/CardList/Kebab";
+import TimeFlow from "@/components/Main/CardList/TimeFlow";
+import { formatDate } from "@/utils/filterAndData";
+import Image from "next/image";
+import starImg from "@/public/star.svg";
+
+export default function Card({ folder, url, imageSource, image_source, title, description, createdAt, created_at }: CardProps) {
+  return (
+    <>
+      <WrapperCardImg>
+        <CardImg src={imageSource || image_source || "/nofileimg.png"} alt="카드 이미지" />
+      </WrapperCardImg>
+      <CardText>
+        <WrapperTime>
+          <TimeFlow createdAt={createdAt ?? (created_at as string)} />
+          {folder && <Kebab folder={folder} url={url} />}
+        </WrapperTime>
+        <H3>{title?.length > 40 ? title.slice(0, 40) + "..." : title}</H3>
+        <p>{description?.length > 50 ? description.slice(0, 50) + "..." : description}</p>
+        <p>{formatDate(createdAt ?? (created_at as string))}</p>
+      </CardText>
+      <ButtonStar>
+        <Image src={starImg} alt="즐겨찾기에 추가하기" />
+      </ButtonStar>
+    </>
+  );
+}

components/Main/Card/CardList.styled.tsx → components/Main/CardList/CardList.styled.tsx

@@ -1,3 +1,4 @@
+import { CardImg } from "@/components/Main/CardList/Card.styled";
 import styled from "styled-components";
 
 export const Absolute = styled.div`
@@ -23,29 +24,6 @@ export const ContainerCardList = styled.div`
   }
 `;
 
-export const WrapperCardImg = styled.div`
-  height: 20.5rem;
-  margin: 0 auto;
-  overflow: hidden;
-  border-top-right-radius: 1.5rem;
-  border-top-left-radius: 1.5rem;
-`;
-
-export const CardImg = styled.img`
-  width: 34rem;
-  height: 100%;
-  border-radius: 1.5rem 1.5rem 0 0;
-  object-fit: cover;
-`;
-
-export const CardText = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 13.5rem;
-  padding: 1.5rem 2rem;
-  gap: 1rem;
-`;
-
 export const CardLink = styled.a`
   position: relative;
   display: flex;
@@ -62,23 +40,6 @@ export const CardLink = styled.a`
   }
 `;
 
-export const WrapperTime = styled.div`
-  display: flex;
-  justify-content: space-between;
-  font-size: 1.2rem;
-  color: var(--Gray5);
-`;
-
-export const H3 = styled.h3`
-  font-size: 1.4rem;
-`;
-
-export const ButtonStar = styled.button`
-  position: absolute;
-  top: 1.5rem;
-  right: 1.5rem;
-`;
-
 export const EmptyBox = styled.div`
   display: flex;
   justify-content: center;