[박경서] week13

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel", "next/core-web-vitals"]
 }

.github/delete-merged-branch-config.yml

@@ -0,0 +1,15 @@
+name: delete branch on close pr
+
+on:
+  pull_request:
+    types: [closed]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  delete-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: delete branch
+        uses: SvanBoxel/delete-merged-branch@main

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+#  Kakao
+.env
+
 # dependencies
 /node_modules
 /.pnp

components/Card.tsx

@@ -0,0 +1,52 @@
+import { dateCalculator } from './dateCalculator';
+import * as C from './styled-component/CardStyledComponent';
+import { ItemState } from '../pages/sharedPage';
+import styled from 'styled-components';
+import Image from 'next/image';
+
+interface CardProps {
+  item: ItemState;
+}
+
+const Div = styled.div`
+  position: relative;
+  width: 340px;
+  height: 234px;
+`;
+
+export default function Card({ item }: CardProps) {
+  const apiDate = new Date(item.createdAt);
+  const elapsedTime = dateCalculator(apiDate);
+  const year = apiDate.getFullYear();
+  const month = apiDate.getMonth() + 1;
+  const days = apiDate.getDate();
+
+  if (item.imageSource === undefined) {
+    item.imageSource = '/no-image.svg';
+  }
+
+  return (
+    <C.CardWrapperLink href={item.url} target="_blank">
+      <C.CardBox>
+        <C.CardImgDiv>
+          <Div>
+            <Image
+              className="card-img"
+              fill
+              sizes="100%"
+              src={item.imageSource}
+              alt={item.title}
+              style={{ objectFit: 'cover' }}
+              priority
+            />
+          </Div>
+        </C.CardImgDiv>
+        <C.CardText>
+          <C.CardTimeAgo>{elapsedTime}</C.CardTimeAgo>
+          <C.TextDescription>{item.description}</C.TextDescription>
+          <C.CardYear>{`${year}. ${month}. ${days}`}</C.CardYear>
+        </C.CardText>
+      </C.CardBox>
+    </C.CardWrapperLink>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import * as F from './styled-component/FooterStyledComponent';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const Div = styled.div`
+  position: relative;
+  width: 20px;
+  height: 20px;
+`;
+export default function Footer() {
+  return (
+    <F.FooterContainer>
+      <F.FoterLeft>©codeit - 2023</F.FoterLeft>
+      <F.FooterMidle>
+        <F.PolicyNFaqA href="./policy.html">Privacy Policy</F.PolicyNFaqA>
+        <F.PolicyNFaqA href="./faq.html">FAQ</F.PolicyNFaqA>
+      </F.FooterMidle>
+      <F.FooterRight>
+        <Link href="https://www.facebook.com">
+          <Div>
+            <Image src="/facebook.svg" fill alt="facebook" />
+          </Div>
+        </Link>
+        <Link href="https://www.twitter.com">
+          <Div>
+            <Image src="/twitter.svg" fill alt="twitter" />
+          </Div>
+        </Link>
+        <Link href="https://www.youtube.com">
+          <Div>
+            <Image src="/youtube.svg" fill alt="youtube" />
+          </Div>
+        </Link>
+        <Link href="https://www.instagram.com">
+          <Div>
+            <Image src="/insta.svg" fill alt="instagram" />
+          </Div>
+        </Link>
+      </F.FooterRight>
+    </F.FooterContainer>
+  );
+}

components/Input.tsx

@@ -0,0 +1,98 @@
+import Image from 'next/image';
+import { ChangeEvent, useState } from 'react';
+import eyeOff from 'assets/icon/eye-off.svg';
+import eyeOn from 'assets/icon/eye-on.svg';
+import styled, { css } from 'styled-components';
+
+const Div = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 350px;
+`;
+
+const StyledInput = styled.input<{ isError: boolean }>`
+  display: flex;
+  width: 100%;
+  padding: 18px 15px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  color: #373740;
+  border: 1px solid #ccd5e3;
+  outline: none;
+  &:focus {
+    border-color: #6d6afe;
+  }
+
+  ${({ isError }) =>
+    isError &&
+    css`
+      border-color: #ff5b56;
+
+      &:focus {
+        border-color: #ff5b56;
+      }
+    `}
+`;
+
+const ErrorText = styled.h4`
+  color: #ff5b56;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-top: 6px;
+`;
+
+const StyledButton = styled.button`
+  position: absolute;
+  border: none;
+  cursor: pointer;
+  right: 15px;
+  background-color: #fff;
+`;
+
+function Input() {
+  const [isError, setIsError] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [value, setValue] = useState('');
+
+  const handleVisibility = () => setIsVisible(!isVisible);
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setIsError(false);
+    setValue(e.target.value);
+  };
+
+  function blurHandler() {
+    if (value === '') {
+      setIsError(true);
+    }
+  }
+
+  return (
+    <div style={{ backgroundColor: '#f0f6ff' }}>
+      <Div>
+        <StyledInput
+          placeholder="내용 입력"
+          isError={isError}
+          type={isVisible ? 'text' : 'password'}
+          value={value}
+          onChange={handleChange}
+          onBlur={blurHandler}
+        />
+        <StyledButton onClick={handleVisibility}>
+          <Image
+            src={isVisible ? eyeOn : eyeOff}
+            width={16}
+            height={16}
+            alt="비밀번호 숨기기 버튼"
+          />
+        </StyledButton>
+      </Div>
+      {isError && <ErrorText>내용을 다시 작성해주세요</ErrorText>}
+    </div>
+  );
+}
+
+export default Input;

components/Nav.tsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { getData } from '../pages/api/api';
+import Profile from './Profile';
+import * as N from './styled-component/NavStyledComponent';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+export interface LoginState {
+  id: number;
+  name: string;
+  email: string;
+  profileImageSource: string;
+  created_at: string;
+  image_source: string;
+  auth_id: string;
+}
+
+export default function Nav() {
+  const [login, setLogin] = useState<LoginState>();
+  const router = useRouter();
+
+  const url = router.pathname;
+
+  const handleLoad = async () => {
+    if (url === '/shared') {
+      const data = await getData('sample/user');
+      setLogin(data);
+    } else if (url === '/folder') {
+      const { data } = await getData('users/1');
+      setLogin(data);
+    }
+  };
+
+  useEffect(() => {
+    handleLoad();
+  }, []);
+  return (
+    <N.NavContainer>
+      <N.NavWrapper>
+        <Link href="/">
+          <N.NavLibraryImg>
+            <Image src="/linkbrary.svg" fill priority alt="libraryLogo" />
+          </N.NavLibraryImg>
+        </Link>
+        {login?.id ? (
+          <Profile item={login} />
+        ) : (
+          <N.NavLoginButton onClick={handleLoad}>로그인</N.NavLoginButton>
+        )}
+      </N.NavWrapper>
+    </N.NavContainer>
+  );
+}

components/Profile.tsx

@@ -0,0 +1,25 @@
+import * as N from './styled-component/NavStyledComponent';
+import { LoginState } from './Nav';
+
+interface ProfileProps {
+  item: LoginState;
+}
+
+export default function Profile({ item }: ProfileProps) {
+  return (
+    <N.ProfileDiv>
+      <N.ProfileDivLogo>
+        {item.id ? (
+          <N.ProfileHumanImg src={item.profileImageSource} alt="profileImg" />
+        ) : (
+          <N.ProfileHumanImg src={item.image_source} alt="profileImg" />
+        )}
+      </N.ProfileDivLogo>
+      {item.id ? (
+        <N.ProfileDivMail>{item.email}</N.ProfileDivMail>
+      ) : (
+        <N.ProfileDivMail>{item.email}</N.ProfileDivMail>
+      )}
+    </N.ProfileDiv>
+  );
+}

components/SharedHeader.tsx

@@ -0,0 +1,66 @@
+import { getData } from '../pages/api/api';
+import { useCallback, useState, useEffect } from 'react';
+import * as N from './styled-component/NavStyledComponent';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+interface UserState {
+  id: number;
+  name: string;
+  profileImageSource: string;
+}
+
+const Div = styled.div`
+  position: relative;
+  width: 188px;
+  height: 48px;
+`;
+
+const SmileDiv = styled.div`
+  position: relative;
+  width: 60;
+  height: 60px;
+`;
+
+export default function SharedHeader() {
+  const [user, setUser] = useState<UserState>({
+    id: 1,
+    name: '',
+    profileImageSource: '',
+  });
+
+  const handleLoad = useCallback(async () => {
+    const { folder } = await getData('sample/folder');
+    setUser(folder.owner);
+  }, []);
+  useEffect(() => {
+    handleLoad();
+  }, [handleLoad]);
+
+  return (
+    <N.NavContainer>
+      <N.SharedNavWrapper>
+        <N.SharedNavLogo>
+          <SmileDiv>
+            <Image
+              src={user.profileImageSource}
+              fill
+              sizes="100%"
+              alt="profileImg"
+            />
+          </SmileDiv>
+          <N.SharedNavDiv className="nav2-div">{user?.name}</N.SharedNavDiv>
+        </N.SharedNavLogo>
+        <Div>
+          <Image
+            src="/favorites.svg"
+            fill
+            sizes="100%"
+            alt="starImg"
+            priority
+          />
+        </Div>
+      </N.SharedNavWrapper>
+    </N.NavContainer>
+  );
+}