[이승헌] sprint10

.eslintrc.json

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

.prettierrc

@@ -0,0 +1,30 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "printWidth": 80,
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+
+  "importOrder": [
+    "<THIRD_PARTY_MODULES>",
+
+    "^@/apis/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/components/(.*)$",
+    "^@/utils/(.*)$",
+    "^@/types/(.*)$",
+
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}

apis/board.ts

@@ -0,0 +1,16 @@
+import axios from './instance';
+
+export async function getBoardById(id: number) {
+  const res = await axios.get(`/articles/${id}`);
+  return res.data;
+}
+
+export async function getBoardComments(boardId: number) {
+  const res = await axios.get(`/articles/${boardId}/comments?limit=100`);
+  return res.data.list;
+}
+
+export async function postBoardComment(boardId: number, content: string) {
+  const res = await axios.post(`/articles/${boardId}/comments`, { content });
+  return res.data;
+}

apis/instance.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: 'https://panda-market-api.vercel.app',
+});
+
+export default instance;

apis/products.ts

@@ -0,0 +1,16 @@
+import axios from './instance';
+
+export async function getProductById(id: number) {
+  const res = await axios.get(`/products/${id}`);
+  return res.data;
+}
+
+export async function getProductComments(productId: number) {
+  const res = await axios.get(`/products/${productId}/comments?limit=100`);
+  return res.data.list;
+}
+
+export async function postProductComment(productId: number, content: string) {
+  const res = await axios.post(`/products/${productId}/comments`, { content });
+  return res.data;
+}

components/BackButton.tsx

@@ -0,0 +1,33 @@
+import { Url } from 'next/dist/shared/lib/router/router';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+
+import Button from './Button';
+
+type BackButtonProp = {
+  to: Url;
+};
+
+export default function BackButton({ to }: BackButtonProp) {
+  const { push } = useRouter();
+
+  const handleButtonClick = () => {
+    push(to);
+  };
+
+  return (
+    <Button
+      style={{ shape: 'rounded', size: 'large' }}
+      onClick={handleButtonClick}
+    >
+      목록으로 돌아가기
+      <Image
+        src="/images/ic_back.svg"
+        width={24}
+        height={24}
+        className="ml-[10px]"
+        alt="뒤로가기 아이콘"
+      />
+    </Button>
+  );
+}

components/Button.tsx

@@ -0,0 +1,28 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+type Props = {
+  style?: {
+    shape?: 'square' | 'rounded';
+    size?: 'small' | 'large';
+  };
+  disabled?: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  children: ReactNode;
+};
+
+export default function Button({
+  style = { shape: 'square', size: 'small' },
+  disabled = false,
+  onClick,
+  children,
+}: Props) {
+  return (
+    <button
+      className={`${style.size === 'small' ? 'h-[42px] px-6' : 'h-12 px-9'} ${style.shape === 'square' ? 'rounded-lg' : 'rounded-full'} flex cursor-pointer items-center justify-center bg-primary-400 text-base font-semibold text-white hover:bg-primary-600 active:bg-primary-700 disabled:cursor-default disabled:bg-gray-400`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

components/Comment.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+
+import { formatDateToTimeAgo } from '@/utils/formatDateToString';
+
+import { BoardComment } from '@/types/board';
+
+type CommentProp = {
+  comment: BoardComment;
+};
+
+export default function Comment({ comment }: CommentProp) {
+  const { content, createdAt, writer } = comment;
+
+  return (
+    <div className="relative my-4 flex flex-col tablet:my-6">
+      <Image
+        src="/images/ic_kebab.svg"
+        width={24}
+        height={24}
+        className="absolute right-0 top-0"
+        alt="댓글 메뉴 아이콘"
+      />
+      <p className="text-sm font-normal text-gray-800">{content}</p>
+      <div className="mt-4 flex items-center tablet:mt-6">
+        <Image
+          src={writer.image ?? '/images/img_default_profile.svg'}
+          width={32}
+          height={32}
+          className="max-h-8 rounded-full"
+          alt="댓글쓴이 프로필 이미지"
+        />
+        <div className="ml-2 flex flex-col">
+          <p className="text-xs font-normal text-gray-600">{writer.nickname}</p>
+          <p className="text-xs font-normal text-gray-400">
+            {formatDateToTimeAgo(new Date(createdAt))}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

components/CommentForm.tsx

@@ -0,0 +1,44 @@
+import { ChangeEvent, useState } from 'react';
+
+import Button from '@/components/Button';
+
+type CommentFormProp = {
+  placeholder?: string;
+  onSubmit: (inputValue: string) => void;
+};
+
+export default function CommentForm({
+  placeholder = '',
+  onSubmit,
+}: CommentFormProp) {
+  const [value, setValue] = useState<string>('');
+
+  const handleTextareaChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleSubmitButtonClick = () => {
+    onSubmit(value);
+    setValue('');
+  };
+
+  return (
+    <>
+      <textarea
+        className="h-[104px] resize-none rounded-xl bg-gray-100 px-6 py-4 text-base font-normal text-gray-800 placeholder:text-gray-400"
+        placeholder={placeholder}
+        value={value}
+        onChange={handleTextareaChange}
+      />
+      <div className="flex justify-end">
+        <Button
+          style={{ shape: 'square', size: 'small' }}
+          disabled={value === ''}
+          onClick={handleSubmitButtonClick}
+        >
+          등록
+        </Button>
+      </div>
+    </>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,87 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+type Nav = {
+  name: string;
+  url: string;
+};
+
+type Social = {
+  name: string;
+  url: string;
+  iconSrc: string;
+};
+
+const NAVS: Nav[] = [
+  {
+    name: 'Privacy Policy',
+    url: '/privacy',
+  },
+  {
+    name: 'FAQ',
+    url: '/faq',
+  },
+];
+
+const SOCIALS: Social[] = [
+  {
+    name: '페이스북',
+    url: 'https://www.facebook.com/',
+    iconSrc: '/images/ic_facebook.svg',
+  },
+  {
+    name: '트위터',
+    url: 'https://twitter.com/?lang=ko',
+    iconSrc: '/images/ic_twitter.svg',
+  },
+  {
+    name: '유튜브',
+    url: 'https://www.youtube.com/',
+    iconSrc: '/images/ic_youtube.svg',
+  },
+  {
+    name: '인스타그램',
+    url: 'https://www.instagram.com/',
+    iconSrc: '/images/ic_instagram.svg',
+  },
+];
+
+export default function Footer() {
+  return (
+    <footer className="h-40 bg-gray-900">
+      <div className="m-auto flex h-full max-w-[1920px] flex-wrap-reverse items-end justify-between p-8 text-base font-normal tablet:px-[104px] desktop:px-[200px]">
+        <div className="grow basis-full self-start text-gray-400 tablet:grow-0 tablet:basis-auto tablet:self-auto">
+          ©codeit - 2024
+        </div>
+        <div className="flex gap-[30px]">
+          {NAVS.map((nav) => (
+            <Link
+              href={nav.url}
+              className="text-gray-200 active:text-primary-400"
+              key={nav.name}
+            >
+              {nav.name}
+            </Link>
+          ))}
+        </div>
+        <div className="flex gap-3">
+          {SOCIALS.map((social) => (
+            <Link
+              href={social.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              key={social.name}
+            >
+              <Image
+                width={20}
+                height={20}
+                src={social.iconSrc}
+                alt={`${social.name} 아이콘`}
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Layout.tsx

@@ -0,0 +1,45 @@
+import { useRouter } from 'next/router';
+
+import Footer from './Footer';
+import LogoHeader from './LogoHeader';
+import MainHeader from './MainHeader';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function Layout({ children }: Props) {
+  const { asPath } = useRouter();
+
+  if (asPath === '/') {
+    return (
+      <>
+        <MainHeader />
+        <main className={`mt-[70px]`}>{children}</main>
+        <Footer />
+      </>
+    );
+  }
+
+  if (asPath === '/signin' || asPath === '/signup') {
+    return (
+      <>
+        <LogoHeader />
+        <main className="m-auto px-4 pb-20 pt-6 tablet:px-12 tablet:pb-24 desktop:px-16 desktop:pb-16">
+          {children}
+        </main>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <MainHeader />
+      <main
+        className={`m-auto mt-[70px] px-4 pb-24 pt-8 tablet:px-6 desktop:max-w-[1200px] desktop:px-0`}
+      >
+        {children}
+      </main>
+    </>
+  );
+}

components/LogoHeader.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function LogoHeader() {
+  return (
+    <header className="flex justify-center pt-6 tablet:pt-12 desktop:pt-16">
+      <Link href="/">
+        <Image
+          width={198}
+          height={66}
+          className="tablet:h-[132px] tablet:w-[396px]"
+          src="/images/logo_big.svg"
+          alt="판다마켓 로고"
+          priority
+        />
+      </Link>
+    </header>
+  );
+}