Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[홍서하] sprint 9 #696

Merged
merged 3 commits into from
Jun 17, 2024
Merged

[홍서하] sprint 9 #696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d4c504
게시물 안 보이는 현상 수정
hongseoha Jun 14, 2024
fa5165d
데스크탑 스타일 적용
hongseoha Jun 14, 2024
b19dfcf
반응형 디자인 시도
hongseoha Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions components/AllPosts.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.Container{
height: 136px;
border-bottom: 1px solid var(--gray-200);
margin-bottom: 24px;
.Content{
font-size: 20px;
font-weight: 600;
color: var(--gray-800);
display: flex;
justify-content: space-between;
height: 72px;
margin-bottom: 16px;
}
.InnerContainer{
display: flex;
justify-content: space-between;
.Group{
display: flex;
gap: 8px;
}
.HeartGroup{
display: flex;
gap: 8px;
line-height: 100%;
}
}
}
21 changes: 9 additions & 12 deletions components/AllPosts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
import Image from "next/image";
import React from "react";
import { format } from "date-fns";
import styles from "./AllPosts.module.css";
import {PostsProps} from "@/type/type";

import Image from 'next/image';
import React from 'react';
import { format } from 'date-fns';
import styles from './AllPosts.module.css';
import { PostsProps } from '@/type/type';

function AllPosts({ post }: PostsProps) {
return (
<>
<div className={styles.Container}>
<div className={styles.InnerContainer}>
<div className={styles.Content}>
<p className={styles.Content}>{post.content}</p>
<div>
{post.image ? (
{post.image && (
<Image
src={post.image}
width={72}
height={72}
alt="이미지"
className={styles.Img}
/>
) : (
<></>
)}
</div>
</div>
Expand All @@ -35,7 +32,7 @@ function AllPosts({ post }: PostsProps) {
/>
<div className={styles.nickname}>{post.writer.nickname}</div>
<div className={styles.CreatedAt}>
{format(post.createdAt, "yyyy. MM. dd")}
{format(post.createdAt, 'yyyy. MM. dd')}
</div>
</div>
<div className={styles.HeartGroup}>
Expand All @@ -55,4 +52,4 @@ function AllPosts({ post }: PostsProps) {
);
}

export default AllPosts;
export default AllPosts;
38 changes: 38 additions & 0 deletions components/BestPosts.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.BestContainer{
margin: 0 10px;
.InnerContainer{
padding: 0 24px 16px;
width: 384px;
height: 169px;
background-color: var(--gray-50);
@media (max-width: 745px) {
width: 384px;
height: 167px;
}
.Content{
font-size: 20px;
font-weight: 600;
color: var(--gray-800);
margin-top: 16px;
display: flex;
justify-content: space-between;
height: 72px;
}
.InfoContent{
font-size: 14px;
color: var(--gray-600);
display: flex;
justify-content: space-between;
.Info{
display: flex;
line-height: 100%;
.nickname{
margin-right: 8px;
}
.likeCount{
margin-left: 4px;
}
}
}
}
}
63 changes: 31 additions & 32 deletions components/BestPosts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,43 @@
import React from "react";
import { format } from "date-fns";
import Image from "next/image";
import styles from "./BestPosts.module.css";
import {BestPostsProps} from "@/type/type";

import React from 'react';
import { format } from 'date-fns';
import Image from 'next/image';
import styles from './BestPosts.module.css';
import { BestPostsProps } from '@/type/type';

function BestPosts({ post }: BestPostsProps) {
return (
<>
<div key={post.id} className={styles.BestContainer}>
<div className={styles.InnerContainer}>
<Image src="/Img/badge.svg" width={102} height={30} alt="badge" />
<Image src="/Img/badge.svg" width={102} height={30} alt="" />
<div className={styles.Content}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굳굳 ~! 😊

장식용 이미지를 잘 스킵하셨군요 👍

<p className={styles.Text}>{post.content}</p>
{post.image ? (
<Image
src={post.image}
width={72}
height={72}
alt="이미지"
className={styles.PostImgs}
/>
) : (
<></>
)}
</div>
<div className={styles.InfoContent}>
<div className={styles.Info}>
<p className={styles.nickname}>{post.writer.nickname}</p>
<Image src="/Img/heart.svg" width={16} height={16} alt="heart" />
<p className={styles.likeCount}>{post.likeCount}</p>
</div >
<div>
<p className={styles.createdAt}>
{format(new Date(post.createdAt), "yyyy. MM. dd")}
</p>
{post.image && (
<Image
src={post.image}
width={72}
height={72}
alt="이미지"
className={styles.Img}
/>
)}
</div>
<div className={styles.InfoContent}>
<div className={styles.Info}>
<p className={styles.nickname}>{post.writer.nickname}</p>
<Image src="/Img/heart.svg" width={16} height={16} alt="heart" />
<p className={styles.likeCount}>{post.likeCount}</p>
</div>
<div>
<p className={styles.createdAt}>
{format(new Date(post.createdAt), 'yyyy. MM. dd')}
</p>
</div>
</div>
</div>
</div>
</div>
);
</>
);
}

export default BestPosts;
export default BestPosts;
55 changes: 31 additions & 24 deletions components/Header.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@


.header{
width: 100%;
}
.container{
margin: 0 auto;
display: flex;
width: 100%;
padding: 10px 200px;
justify-content: space-between;

}

.container{
margin: 0 auto;
display: flex;
width: 100%;
padding: 10px 200px;
justify-content: space-between;
.leftbox{
margin-top: 10px;
display: flex;
.logo{
padding: 10px;
.logo{
padding: 10px;
}
.nav{
text-decoration: none;
font-size: 18px;
font-weight: 900;
padding: 24px 23px;
}
}
.profile{
padding: 24px;
Comment on lines +18 to +25
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

프리티어를 사용해보시는거 어떨까요 ?

Suggested change
.nav{
text-decoration: none;
font-size: 18px;
font-weight: 900;
padding: 24px 23px;
}
}
.profile{
.nav{
text-decoration: none;
font-size: 18px;
font-weight: 900;
padding: 24px 23px;
}
}
.profile{

사소한 줄바꿈, 띄어쓰기 등 코드를 작성하시다보면 자연스럽게 불규칙해지는 경우가 많아요.
이를 돕기 위해서 개발 커뮤니티에서는 개발 경험 향상을 위한 여러가지 도구들이 있는데요.

보편적으로 많이 사용되는 툴은 prettier입니다 !

Prettier: https://prettier.io/

prettier는 vscode plugin에서 install하고 실행할 수 있습니다 ! 🤗

macos 경우 option + shift + f
windows의 경우 alt + shift + f

}

@media (max-width: 768px) {
.container{
padding: 10px 24px;
}
}
.nav{
text-decoration: none;
font-size: 18px;
font-weight: 900;
padding: 24px 23px;
}
}
.profile{
padding: 24px;
}
}


}



35 changes: 18 additions & 17 deletions components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
import styles from './Header.module.css';
import Link from 'next/link';

import Image from 'next/image';

const Header = () => {
return (
<header>
<div className={styles.container}>
<div className={styles.leftbox}>
<Link href="/">
<div className={styles.logo}>
<img src='/logo.png' alt='로고' />
</div>
</Link>
<Link href="/boards">
<div className={styles.nav}>
자유게시판
</div>
</Link>
<Link href="#">
<div className={styles.nav}>
중고마켓
</div>
</Link>
<Link href="/">
<div className={styles.logo}>
<Image src="/logo.png" width={153} height={51} alt="로고" />
</div>
</Link>
<Link href="/boards">
<div className={styles.nav}>자유게시판</div>
</Link>
<Link href="#">
<div className={styles.nav}>중고마켓</div>
</Link>
</div>
<Link href="#">
<div className={styles.profile}>
<img src='/user_profile.png' alt='프로필사진' />
<Image
src="/Img/user.svg"
width={40}
height={40}
alt="프로필 사진"
/>
</div>
</Link>
</div>
Expand Down
4 changes: 2 additions & 2 deletions lib/axios.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import axios from 'axios';

const baseURL = axios.create({
const instance = axios.create({
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

굳굳 의미가 더욱 뚜렷해졌군요 !

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 추 후 인가 처리하실 때에 도움이 되실 것 같아서요 !

아래는 axios의 메써드인 interceptors를 통하여 미들웨어로 인가를 처리하는 예제예요 ! 한 번 확인해보시고 적용하시는 것도 고려해보세요 😊😊😊

instance.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem('accessToken')?.replace(/"/gi, '');

    if (!accessToken) return config;
    config.headers.Authorization = accessToken;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    alert(`ERROR: ${error.response.data.message} `);
    return Promise.reject(error);
  }
);

baseURL: 'https://panda-market-api.vercel.app',
});

export default baseURL;
export default instance;
7 changes: 5 additions & 2 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
images: {
domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'],
},
};

export default nextConfig;
export default nextConfig;
Loading
Loading