[한수진] Sprint9

README.md

@@ -0,0 +1,40 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/ArticleList.js

@@ -0,0 +1,47 @@
+import Link from 'next/link';
+import styles from '@/styles/ArticleList.module.css';
+import Medal from '@/image/ic_medal.svg';
+import Heart from '@/image/ic_heart.svg';
+
+export default function ArticleList({ articles = [] }) {
+  return (
+    <ul className={styles.articleList}>
+      {articles.map((article) => (
+        <li key={article.id}>
+          <Link className={styles.article} href={`/boards/${article.id}`}>
+            <div className={styles.topBanner}>
+              <Medal />
+              <h4 className={styles.best}>Best</h4>
+            </div>
+            <div className={styles.insideSection}>
+              <div className={styles.firstSection}>
+                <h3 className={styles.articleContent}>{article.content}</h3>
+                <img
+                  className={styles.articleImage}
+                  src={article.image}
+                  width="50"
+                  height="50"
+                  alt={article.title}
+                />
+              </div>
+              <div className={styles.secondSection}>
+                <div className={styles.firstLikeSection}>
+                  <span className={styles.articleNickname}>
+                    {article.writer.nickname}
+                  </span>
+                  <div className={styles.likeSection}>
+                    <Heart />
+                    {article.likeCount}
+                  </div>
+                </div>
+                <span className={styles.articleUpdate}>
+                  {article.updatedAt.split('T')[0]}
+                </span>
+              </div>
+            </div>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}

components/BehindList.js

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import styles from '@/styles/BehindList.module.css';
+import Heart from '@/image/ic_heart.svg';
+import Profile from '@/image/ic_profile.svg';
+
+export default function BehindList({ articles = [] }) {
+  return (
+    <ul className={styles.articleList}>
+      {articles.map((article) => (
+        <li key={article.id}>
+          <Link className={styles.article} href={`/boards/${article.id}`}>
+            <div className={styles.insideSection}>
+              <div className={styles.firstSection}>
+                <h3 className={styles.articleContent}>{article.content}</h3>
+                <br />
+                <img
+                  className={styles.articleImage}
+                  src={article.image}
+                  width="50"
+                  height="50"
+                  alt={article.title}
+                />
+              </div>
+              <div className={styles.secondSection}>
+                <div className={styles.firstContain}>
+                  <Profile className={styles.profileIcon} />
+                  <span className={styles.articleNickname}>
+                    {article.writer.nickname}
+                  </span>
+                  <span className={styles.articleUpdate}>
+                    {article.updatedAt.split('T')[0]}
+                  </span>
+                </div>
+                <div className={styles.likeSection}>
+                  <Heart />
+                  {article.likeCount}
+                </div>
+              </div>
+            </div>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}

components/DropDown.js

@@ -0,0 +1,42 @@
+import DropIcon from '@/image/ic_arrow_down.svg';
+import styles from '@/styles/DropDown.module.css';
+import { useState } from 'react';
+
+export default function Dropdown({ selectedOption, onChange }) {
+  const sortOptions = [
+    { value: 'liked', label: '좋아요순' },
+    { value: 'new', label: '최신순' },
+  ];
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOptionClick = (value) => {
+    onChange(value);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={styles.dropDownContainer}>
+      <div
+        className={styles.selectedOption}
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {sortOptions.find((option) => option.value === selectedOption)?.label}
+        <DropIcon className={styles.dropIcon} />
+      </div>
+      {isOpen && (
+        <ul className={styles.optionList}>
+          {sortOptions.map((option) => (
+            <li
+              className={styles.optionValue}
+              key={option.value}
+              onClick={() => handleOptionClick(option.value)}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

components/MoreButton.js

@@ -0,0 +1,11 @@
+import styles from '@/styles/MoreButton.module.css';
+
+const MoreButton = ({ onClick }) => {
+  return (
+    <button className={styles.moreButton} onClick={onClick}>
+      더보기
+    </button>
+  );
+};
+
+export default MoreButton;

components/SearchForm.js

@@ -0,0 +1,35 @@
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import SearchIcon from '@/image/ic_search.svg';
+import styles from '@/styles/Search.module.css';
+
+export default function SearchForm({ initialValue = '', hideIcon = false }) {
+  const router = useRouter();
+  const [value, setValue] = useState(initialValue);
+
+  function handleChange(e) {
+    setValue(e.target.value);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!value) {
+      router.push('/');
+      return;
+    }
+    router.push(`/search?q=${value}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className={styles.searchForm}>
+      {!value && <SearchIcon className={styles.searchIcon} />}
+      <input
+        className={styles.searchInput}
+        name="q"
+        value={value}
+        onChange={handleChange}
+        placeholder="검색할 내용을 입력해주세요"
+      />
+    </form>
+  );
+}

components/SizeReviewList.js

@@ -0,0 +1,38 @@
+function formatDate(date) {
+  const MM = String(date.getUTCMonth() + 1).padStart(2, '0');
+  const dd = String(date.getUTCDate()).padStart(2, '0');
+  const YYYY = String(date.getUTCFullYear());
+
+  return `${YYYY}. ${MM}. ${dd}.`;
+}
+
+const labels = {
+  sex: {
+    male: '남자',
+    female: '여자',
+  },
+  fit: {
+    small: '작음',
+    good: '적당함',
+    big: '큼',
+  },
+};
+
+export default function SizeReviewList({ sizeReviews }) {
+  return (
+    <ul>
+      {sizeReviews.map((sizeReview) => (
+        <li key={sizeReview.id}>
+          <div>
+            <div>{formatDate(new Date(sizeReview.createdAt))}</div>
+            <div>
+              ({labels.sex[sizeReview.sex]} {sizeReview.height}cm 기준){' '}
+              {sizeReview.size}
+            </div>
+          </div>
+          <div>{labels.fit[sizeReview.fit]}</div>
+        </li>
+      ))}
+    </ul>
+  );
+}