Merge pull request Goorm-Lucky7#85 from Goorm-Lucky7/dev

[Deploy] version 1.1
gamjatan9 · May 21, 2024 · 6129e2e · 6129e2e
2 parents b519ba6 + 5b59f71
commit 6129e2e
Show file tree

Hide file tree

Showing 24 changed files with 317 additions and 268 deletions.
diff --git a/README.md b/README.md
@@ -1,126 +1,127 @@
-## convention
+# 💛 WebIDE 프로젝트 feat.ThinkTank
 
-### 📦 convention
+<a href="https://d26i62iijbw0u2.cloudfront.net/">![mockup](https://github.com/j2an777/ThinkTank_FE/assets/110087099/ad97ca46-f23f-4678-9de5-19645999a358)</a>
+<br/>
 
-→ **Issue convention**
+**프로젝트 기간** : 2024.04.25 ~ 2023.05.20
 
-<img width="1262" alt="스크린샷 2024-04-23 오후 2 19 47" src="https://github.com/test-organization-kang/test_FE/assets/83047601/71c22348-fc82-48f4-8896-c754a6bbbe42">
+🔗 [ThinkTank 서비스 둘러보기](https://d26i62iijbw0u2.cloudfront.net/) (데스크탑/태블릿 환경에서 이용 가능)
 
-- Title: [브랜치 이름] 구현할 내용
-- Content: 작업내용에 대해서 구현할 이미지와 구현 내용에 대해 기술
-- Assignees: 본인 지정
-- Label: 깃허브 기본 탬플릿
-- Project: 칸반보드 관리를 위해 설정
+🎬 [시연 영상 보러가기 ](https://youtu.be/2meLQgB2ivY?si=WPOWrLrgXAmQIjVi)
+<br/>
+<br/>
 
-→ **Commit convention**
+## ✨ 프로젝트 소개
 
-- Feat: 새로운 기능을 추가하는 경우
-- Fix: 디테일 수정
-- Style: 디자인 관련된 모든 것 (CSS UI 디자인 변경 등)
-- Asset: favicon, defalutImage 등 파일의 추가
-- Bug: 버그가 발생하여 고친 경우
-- Hotfix: 최우선 순위의 긴급한 수정
-- Refactor: 코드 리팩토링
-- Chore: 나머지 잡다한 일 (문서 수정, 파일 이름 변경 등등)
+### Think, Share, Develop, **ThinkTank**
 
-**예시)**
+- ThinkTank은 개발자를 위한 **알고리즘 문제풀이 기반 소셜 플랫폼**입니다.
+- 각 유저들은 서로 문제 생성 및 풀이를 통해 상호작용이 이루어집니다.
+- 소셜 플랫폼을 기반한 서비스 구조로 친숙하게 서로간 문제를 공유 및 피드백 가능합니다.
+  <br/>
 
-```
-  git commit -m "Feat: carousel 수정" -m " 세부내용 or 질문사항"
-```
+## ⭐️ 주요 기능
 
-→ **Merge convention**
+### 📌 문제 조회
 
-<img width="1253" alt="스크린샷 2024-04-23 오후 2 54 17" src="https://github.com/test-organization-kang/test_FE/assets/83047601/2f2283be-debe-4511-a88f-53df7d5448b7">
+- 유저들이 포스팅한 문제들을 소셜 구조로 확인 가능합니다.
+  ![image](https://github.com/j2an777/ThinkTank_FE/assets/110087099/be64cb59-40d8-4710-a421-fb1f4617529d)
 
-- Title: [PR] 해당 이슈와 동일한 제목
-- Content: 구현 이미지, 구현 내용, 질문 사항 순으로 정리
+### 📌 문제 생성
 
-→ **Code convention**
+- 문제 내용과 정답 코드, 테스크 케이스로 구성하여 문제를 생성합니다.
+  ![image](https://github.com/j2an777/ThinkTank_FE/assets/110087099/4810588e-7d1e-4abe-9cef-298727a2b4fc)
 
-- 폴더 구조 기본 단위
+### 📌 문제 풀이
 
-```
-// 예시
-authBackground
-ᄂ index.tsx
-ᄂ styles.ts
-```
+- 유저들이 올린 문제를 풀어보아 정답을 확인할 수 있습니다.
+  ![image](https://github.com/j2an777/ThinkTank_FE/assets/110087099/e05ed10c-1c4f-4b10-8f93-61e7fe5df0e4)
 
-- styles import시에 아래와 같이 사용
+### 📌 정보 조회
 
-```
-import * as S from './styles'
-```
+- 자신의 활동(만든 문제, 맞은 문제, 즐겨 찾기)을 조회 가능합니다.
+- 메인 페이지에서 타 유저의 닉네임 클릭으로 정보 조회 가능합니다.
+  ![image](https://github.com/j2an777/ThinkTank_FE/assets/110087099/74ae4f3e-3d98-48fc-aad6-f60fb6b5ba33)
 
-- Style Block naming 단위
+<br/>
 
-  - Container > Box > Block
+**프로젝트 문서**
 
-- interface vs type
+| 📒 [팀 Notion](https://www.notion.so/96ffa6e6a507434cb352b7ae3a8b9022) | 🎉 [기획안](https://www.notion.so/bab75913e0784267b6d8a326e6c82ec2) | 💌 [요구사항](https://www.notion.so/a961f17b52c54e2198791f393a7169e5) | 🚀 [활동 간 규칙](https://www.notion.so/Ground-rule-626b9da838e842eb90d9104b55006c88) | 💬 [회의, 회고록](https://www.notion.so/349320d273444afabaa9738bd6f48424?v=3b952627e1bd4e37a5f561cfca5faa78&pvs=4) | 💯 [컨벤션](https://www.notion.so/68aa5fdfd8fe4bbeb66a37a13c840736?pvs=4) |
+| ---------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
 
-```
-컴포넌트 내 props에 대한 type은 컴포넌트 내에서 정의,
-types폴더 내에서는 비동기 데이터 관련 정의
+<br/>
 
-// interface 키워드 사용시
-object형태의 type (대부분 정의는 interface 일부분만 type)
-```
+## 📅 프로젝트 일정
 
-### 📦 Skills
+| Sprint | 기간                  | 내용                       | 작업 현황                                                                                                                                                                                                                                              |
+| ------ | --------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| 1      | 2024/4/24 - 2024/4/27 | 각 페이지 UI 구현          | [▶️ Sprint1-1](https://www.notion.so/UI-9687407149da4f53a478c34ad8ff3fa8?pvs=4), [▶️ Sprint1-2](https://www.notion.so/UI-8b5fd15c1c4a4e76b5e4640340a37abe?pvs=4), [▶️ Sprint1-3](https://www.notion.so/Main-UI-ab27e98888f440daa2fdb52be2fa3fef?pvs=4) |
+| 2      | 2024/4/29 - 2024/5/5  | 각 기능 Api 구현           | [▶️ Sprint2-1](https://www.notion.so/1998752a4e82455d8f828b9d5476fd18?pvs=4), [▶️ Sprint2-2](https://www.notion.so/jwt-394962c61c244eb1a5e31eb045219693?pvs=4), [▶️ Sprint2-3](https://www.notion.so/API-4b1b41992e1a4f48943f18e8c030ff3a?pvs=4)       |
+| 3      | 2024/5/6 - 2024/5/12  | 각 기능 API 구현           | [▶️ Sprint3-1](https://www.notion.so/api-b3f407adf02c46f9bd234a2e14926a9e?pvs=4), [▶️ Sprint3-2](https://www.notion.so/api-1ffdf9c3920e4993be3232b912e2dd04?pvs=4), [▶️ Sprint3-3](https://www.notion.so/33c39851e97c4bb1ad7ccdacc05d5abe?pvs=4)       |
+| 4      | 2024/5/13 - 2024/5/19 | UI 테스트 및 코드 리팩토링 | [▶️ Sprint4-1](https://www.notion.so/7afb34dc0abf43fa84210831649c294c?pvs=4), [▶️ Sprint4-2](https://www.notion.so/5c3a539358524daa88ed3a8c0ad83248?pvs=4), [▶️ Sprint4-3](https://www.notion.so/3d99e33d3c104b20a24a749ed1370a56?pvs=4)               |
 
-![스크린샷 2024-04-29 오전 9 30 50(2)](https://github.com/Goorm-Lucky7/ThinkTank_FE/assets/83047601/ba2b9c2e-0b30-4d03-9e4f-c86980f2a171)
+<br/>
 
-### 📦 파일구조 (아키텍쳐)
+## 🧑‍🧑‍🧒‍🧒 Front TEAMMATE 소개
 
-```
-src
-  ᄂ apis
-  ᄂ components
-    ᄂ shared (여러 컴포넌트에 쓰일 시)
-    ᄂ mainPage
-    ᄂ profilePage
-    ...
-  ᄂ hooks
-    ᄂ shared (여러 컴포넌트에 쓰일 시)
-    ᄂ mainPage
-    ᄂ profilePage
-    ...
-  ᄂ pages (layout)
-    ᄂ mainPage
-    ᄂ profilePage
-    ...
-  ᄂ routes
-    ᄂ Protect.tsx
-    ...
-  ᄂ styles
-    ᄂ globalStyles.ts
-    ᄂ typography.ts
-    ...
-  ᄂ sotres (zustand)
-    ᄂ index.ts (리듀서 관리)
-    ᄂ searchStore
-    ᄂ fileStore
-  ᄂ types
-    ᄂ user.ts
-    ᄂ post.ts
-    ...
-  ᄂ App.tsx
-```
+| ![강신범](https://github.com/kangsinbeom.png) | ![김수현](https://github.com/gamjatan9.png) | ![하승진](https://github.com/j2an777.png) |
+| --------------------------------------------- | ------------------------------------------- | ----------------------------------------- | --- |
+| [강신범](https://github.com/kangsinbeom)      | [김수현](https://github.com/gamjatan9)      | [하승진](https://github.com/j2an777)      |
+| **FrontEnd**                                  | **FrontEnd**                                | **FrontEnd**                              |     |
+| FE 팀장, 문제 생성 및 풀이, 배포              | 로그인, 회원가입, 마이페이지                | 메인페이지, 라우팅, 메뉴, 좋아요          |
 
-- **폴더명은** 시작이 소문자
-- **파일명** 중 JSX를 반환하는 경우 대문자로 시작, JSX를 반환하지 않는 경우 소문자 시작
+<br/>
 
-함수 시작은 onChange~~
+## ✔ 아키텍처
 
-prettier 및 eslint
+<img width="833" alt="architecture" src="https://github.com/j2an777/ThinkTank_FE/assets/110087099/6623c7cb-e595-45b6-a970-df7e1d5cb0f9">
 
-## 역할분배
+<br/>
 
-강신범: 상세 페이지 / 댓글
+## 💥 기술스택 및 선정이유
 
-김수현: 로그인 / 회원가입 / 마이페이지
+![스크린샷 2024-04-29 오전 9 30 50(2)](https://github.com/Goorm-Lucky7/ThinkTank_FE/assets/83047601/ba2b9c2e-0b30-4d03-9e4f-c86980f2a171)
+<br/>
 
-하승진: 메인페이지 / 좋아요
+## 📦 파일구조
 
-코드 컨벤션 어떻게 정하누!
+```
+src
+  ᄂ apis (api)
+  ᄂ assets (폰트, 이미지[gif, png, jpg])
+    ㄴ fonts
+    ㄴ images
+  ᄂ components (컴포넌트)
+    ᄂ detail
+    ᄂ loader
+    ᄂ loginForm
+    ㄴ main
+    ㄴ mypage
+    ㄴ nav
+    ㄴ post
+    ㄴ shared [재사용]
+    ㄴ signup
+  ㄴ consts (데이터 모음)
+  ㄴ contexts (프로바이더)
+  ᄂ hooks (커스텀 훅)
+    ᄂ auth
+    ᄂ detail
+    ᄂ like
+    ㄴ post
+  ᄂ pages (레이아웃)
+    ᄂ detail
+    ᄂ error
+    ㄴ login
+    ㄴ main
+    ㄴ mypage
+    ㄴ post
+    ㄴ signup
+  ᄂ routes (라우터)
+  ㄴ stores (전역 저장소)
+  ᄂ styles (스타일)
+  ᄂ types (타입)
+  ㄴ utils (계산 커스텀 함수)
+    ...
+  ᄂ App.tsx
+```
diff --git a/src/components/loginForm/index.tsx b/src/components/loginForm/index.tsx
@@ -44,19 +44,6 @@ export default function LoginForm() {
     }
   };
 
-  // const kakaoLogin = async () => {
-  //   window.open(import.meta.env.VITE_KAKAO_URL);
-  //   try {
-  //     const response = await getKakaoLogin();
-  //     const accessToken = response.accessToken;
-  //     setAccess(accessToken);
-  //     console.log('로그인 성공:', response);
-  //     navigate(-1);
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  // };
-
   return (
     <S.Container>
       <S.LeftBox>
@@ -89,13 +76,6 @@ export default function LoginForm() {
           </S.Signup>
           <StyledButton width="100%">로그인</StyledButton>
         </S.Form>
-        {/* <S.Social>
-          간편하게 로그인하세요!
-          <S.KakaoButton onClick={kakaoLogin}>
-            <Icon value="kakao" />
-            <p>카카오 로그인</p>
-          </S.KakaoButton>
-        </S.Social> */}
       </S.RightBox>
     </S.Container>
   );

diff --git a/src/components/main/MainListItem/index.tsx b/src/components/main/MainListItem/index.tsx
@@ -17,7 +17,6 @@ const MainListItem = ({ listItem }: ListItemProps) => {
   const [iconSize, setIconSize] = useState(105);
 
   useEffect(() => {
-    console.log(window.innerWidth);
     const handleResize = () => {
       if (window.innerWidth <= 900) {
         setIconSize(70);

diff --git a/src/components/mypage/articles/index.tsx b/src/components/mypage/articles/index.tsx
@@ -1,6 +1,6 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import * as S from './styles';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { getMypageArticles } from '@/apis/mypage';
 import { MypageArticles } from '@/types/mypage';
 import { ArticleType } from '@/types/article';
@@ -10,21 +10,20 @@ import Article from '@/components/shared/article';
 const ArticlesMenu = ({ value }: Pick<MypageArticles, 'value'>) => {
   const queryEmail = new URLSearchParams(location.search).get('user');
   const loader = useRef(null);
+  const [isOwner, setIsOwner] = useState(false);
 
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
-    useInfiniteQuery({
-      queryKey: [value, queryEmail],
-      queryFn: ({ pageParam }) =>
-        getMypageArticles({
-          page: pageParam,
-          size: 10,
-          value: value,
-          email: queryEmail,
-        }),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage) => lastPage.nextPage,
-      staleTime: 1000 * 60 * 5, // 5분
-    });
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
+    queryKey: [value, queryEmail],
+    queryFn: ({ pageParam }) =>
+      getMypageArticles({
+        page: pageParam,
+        size: 10,
+        value: value,
+        email: queryEmail,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextPage,
+  });
 
   useEffect(() => {
     const io = new IntersectionObserver(
@@ -38,19 +37,22 @@ const ArticlesMenu = ({ value }: Pick<MypageArticles, 'value'>) => {
     if (loader.current) {
       io.observe(loader.current);
     }
+    if (location.pathname.includes('mypage')) {
+      setIsOwner(true);
+    }
     return () => io.disconnect();
   }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
 
   return (
     <S.Container>
-      {isLoading ? (
+      {hasNextPage ? (
         <SkeletonBox />
       ) : (
         data?.pages.map((page) =>
           page.posts.map((post: ArticleType) => (
-            <S.Box key={post.postId}>
-              <Article article={post} statusFlag="open" />
-            </S.Box>
+            <S.Block key={post.postId}>
+              <Article article={post} statusFlag="open" isOwner={isOwner} />
+            </S.Block>
           )),
         )
       )}

diff --git a/src/components/mypage/articles/styles.ts b/src/components/mypage/articles/styles.ts
@@ -6,15 +6,22 @@ export const Container = styled.div`
   ${layoutMap.flexCenter}
   gap: 40px;
   margin-top: 40px;
+  width: 100%;
+`;
+
+export const Block = styled.div`
+  width: 90%;
+  min-width: 90%;
+  display: flex;
+  justify-content: start;
+  box-sizing: border-box;
+  min-height: 100px;
 `;
 
 export const Box = styled.div`
-  @media (min-width: 1050px) {
-    min-width: 950px;
-  }
-  @media (max-width: 1049px) {
-    min-width: 750px;
-  }
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 500px;
 `;
 
 export const Title = styled.div`