stfexsavle/with-savle

with-savle's Issues

style 폴더 위치 변경

// before
import style from "styles/GoalId.module.scss";

// after
import style from "@/styles/GoalId.module.scss";

피드백 받은 것처럼 아래처럼 변경하고, 최상단에 위치한 styles 폴더를 src 내부에 넣으려고 합니다.
각자 폴더 이동하시고 담당 페이지의 import 주소 변경하려고 하는데, 다른 의견 있으신 분 계실까요

저축페이지 결과값 오류 수정 & 저축 페이지 step-component 추가

목적

저축계산기 페이지에서 절차에 따라 바뀌는 step component 추가
저축계산기 result 오류

작업 상세 내용

• step-component 생성
• 절차 진행에 따라 component UI 변경
• 저축계산기 페이지 안에 적용
• 저축계산기 result값오류로 계산 수정

vote 상세페이지 헤더 배경색

모바일 버전 위의 헤더 배경색이 하얀색입니당

Comment 컴포넌트

목적

comment input과 list 항목 추가

작업 상세 내용

• 상세페이지내에 comment list 추가
• comment 컴포넌트에서 textarea로 comment 받아서 sever에 POST
• 댓글 toggle 버튼으로 comment 목록 숨기기

cursor pointer & 컴포넌트 분리

목적

목적에 맞게 컴포넌트를 분리하고
커스텀 hook도 기능에 따라 수정

##작업 상세 내용

• 버튼에 커서포인터 css 수정
• 컴포넌트 기능별 분리
• 커스텀hook 기능별 분리

고민해결소 Detail 페이지 css 누락 문제

투표 결과보기에서 선택 항목에 대한 color와 bold가 누락됐습니다. 확인바랍니다.

Comment.js 관련

미림님이 작성하신 comment.js 내부에 setCount를 작성했었습니다.

오류가 있어서 Comment 내부에 useEffect를 사용해야 오류가 사라지는데, 코드가 지저분해질까 걱정되네요

useEffect(() => {
  if (!hidden) {
      setCount(data.length);
  }
});

해당 코드가 comment.js 내부에 들어가야 합니다.

어떻게 넣는게 가장 이상적일까요?

useLike Hook 관련

    const arrlikes = [];
    const newLikes = [];
    if (likes !== null) {
      arrlikes = likes.split(",");
    }
    if (like) {
      newLikes = arrlikes.filter((value) => value.toString() !== id.toString());
      setLikeNums((like) => (like = like - 1));
    } else {
      newLikes = [...arrlikes, id];
      setLikeNums((like) => (like = like + 1));
    }

let -> const으로 변환하면서 arrlikes, newLikes 재할당 부분에서 오류가 나는데, 어떻게 수정하셨을까요?
고민해결소 부분에서도 해당 Hook을 사용해야 하기에 여쭤봅니다!

comment api get 오류

comment data를 받으려고 하다가 안돼서
데이터 확인하려고 봤는데 이런오류가 뜨네요

id에 parent id 넣으면 돼는거 아닌가요 ??
제가 잘못하고있는건가요 ??

goal/[id].js SEO 컴포넌트 활용

vote/[id].js

이렇게 SEO 컴포넌트를 최대한 활용 부탁드릴게요

title은 그대로 사용 하더라도 ogTitle이나 ogDesc를 수정하면 링크 전송시에 아래처럼 동적으로 나오게 됩니다 🙏

투표하기 기능 API 누락

@talentforest

사용자가 투표를 하면 count 증가가 되는 api가 누락됐습니다.
주소는 /api/vote/${id}이고 PUT 호출로 제작하고 있습니다.

만드는대로 말씀 드리겠습니다

vote/[id].js height 버그

Comment 연결하게 되면 화면 깨지는 버그가 있습니다.

revalidate not working

#166 Revalidate 수정했습니다.

기존 index.js

return {
    props: {
      fallback: {
        "/api/vote": response.data.results,
      },
      revalidation: ONE_DAY_TO_SECONDS,
    },
};

변경 index.js

return {
    props: {
      fallback: {
        "/api/vote": response.data.results,
      },
    },
    revalidate: ONE_DAY_TO_SECONDS,
};

revalidate 작동 안하는 버그가 있어 수정했습니다.

1. props 내부에 있으면 안되고 밖에 있어야 합니다.
2. revalidation이 아닌 revalidate입니다.
3. 갱신 주기도 1일로 변경하였습니다.

제가 이미 반영 했고, goal, vote 두 곳의 index.js입니다.
변경된 것 확인만 해주세요~

저축계산기 페이지 input-box반응형

목적

저축계산기 페이지에서 input-box 반응형 적용
input 으로 인한 리랜더링 수정

작업 상세 내용

• input이 포함된 컴포넌트 분리 & 컴포넌트 안에서 state 관리
• css media 이용하여 뷰포트에 따라 컴포넌트 사이즈 변경
• 중복사용된 css 를 global로 변경

Comment GET수정

목적

Comment 수정된 api로 get 수정
Comment 등록 후 데이터 표시

작업 상세 내용

• Comment 등록 후 리랜더되지 않는 이슈로 comment get api를 따로 만들어 get 요청
• 데이터를 post후 다시 get할때 속도 최적화를 위해 swr로 데이터 get 요청
• swr mutate로 데이터 수정
• swr로 post 요청

Navbar position 으로 인한 issue

저축페이지에서 제가 상단쪽에 margin을 줬는데 Navbar와 겹쳐집니다

제가 적용을 잘못한건지
layout에 준 margin-top이 적용이 안되는건지 잘 모르겠습니다
다른분들은 적용이 잘 되었나요 ?

css styles.module로 수정 & custom hook 생성

목적

style jsx에서 styles.module로 css 수정
component안에 상태관리 custom hook으로 관리
eslint에 맞게 코드 수정

작업 상세 내용

• styles 폴더안에 각 컴포넌트에 css르 styles.module로 변경해서 저장
• 컴포넌트안에 state를 따로 분리해서 hooks 폴더안에서 관리
• 중첩삼항연산자를 hook으로 변경

목표공유 페이지 배포환경 테스팅

배포 환경에서 SSG + CSR 테스팅 결과
페이지 소스보기에서 새로운 글 목록이 나타나지 않음 -> SEO에 좋지 못함

제가 생각한 해결 방안

1. revalidate 로 해결: 간격 604800(일주일)로 주기 -> 일주일 간격으로 html을 재 빌드하여 SEO 해결 가능
2. SSR + CSR로 변경: 데이터가 자주 변경되지는 않을 것으로 예상되는데 과한 비용을 지불하는것 같습니다.
3. 리스트페이지는 전부 CSR로 해결후 detail페이지만 ssr로 변경
4. 더 좋은 방법이 있을까요?

어떤 방법으로 할지 의견주시면 감사하겠습니다!

saving-calc component 반응형 tablet-mode 추가

목적

저축계산기 페이지 tablet(577px-1199px)일 때 뷰포트에 맞는 UI 적용
margin-top과 navbar 겹치는 issue 해결

작업 상세 내용

• 페이지내 컴포넌트에 뷰포트가 tablet 사이즈일때 css 추가
• maing에서 공통으로 사용되는 ShortcutBar 컴포넌트에도 tablet 사이즈일때 변경 css 추가
• SavingCalcStep 컴포넌트에 margin-top을 padding으로 수정

Comment API GET 오류

export const fetchGetCommentById = async (id) => await axios.get(`${server}/api/goal/comment/${id}`);

제가 useSwr을 사용한는데

 const { data, mutate } = useSWR( `${server}/api/${value}/comment/${id}`,fetcher,);

위 주소를 사용합니다

const fetcher = async (url) => {
  const response = await axios.get(url);
  return response.data.results;
};

useSWR에서 fetcher에서 axios를 사용합니다
주신 fetch함수로 useSWR을 어떻게 사용해야할지 모르겠습니다
useSWR을 첫번째 인자로 url을 받고 fetcher에서 데이터를 받는 로직인거 같습니다.
혹시 주소 수정 부탁 드려도 될까요 ? 아님 혹시 주신 함수로 받는 방법 아실까요 ??

comment 등록후 comment count 랜더 오류

comment 등록하고 list 출력하는 구현을 완료했습니다.
그런데 comment가 등록돼도 상세페이지에 있는 comment count가 변경되지 않더라구요
혹시 해당 부분 확인 가능 하실까요 ?

좋아요 기능

좋아요 기능을 훅으로 따로 빼는 건 어떨까요?

styles 폴더이동 & utils 정리 & SEO 추가

목적

styles 폴더 이동
utils 파일 index에서 export
SEO추가
custom hook code refactoring

작업 상세 내용

• styles 폴더 src 안으로 이동
• styles 이동으로 인한 각 components에 path 수정
• utils 파일 index에서 export
• utils 사용하는 component에 path 수정
• saving-calc page에 SEO추가
• custom hook 안에 있는 불필요한 function 분리 해서 utils에 생성

vote 항목 css 관련

혹시 이 부분 너비가 280px 정도일 때 겹치는데 css 수정해야 할까요?
글자수는 저 글자수를 최대 수로 설정해 놓았습니다.

투표하기 후 댓글 보이기 기능

투표하고 나서 댓글 보이는 기능 구현 하실건가요 ?
지금은 투표하고나서 토글을 눌러야 댓글을 볼수있는데
처음 기획은 일단 투표하고 댓글이 보이는 기획이었습니다

어떻게 할까요 ???

Unhandled Runtime Error Error: timeout of 4000ms exceeded

FavoriteCommentShare 부분 아이콘에 cursor: pointer를 넣었는데 해당 아이콘에 클릭을 안하고 4초이상 위에 있으면 저런 에러가 발생합니다... 어떻게 해결을 해야 할까요..?

앱 다운로드 바로가기

목적

앱 설치 바로가기 컴포넌트 구현

작업 상세 내용

• Mobile에 맞는 UI 구현
• 반응형에 따라 변경되는 UI 구현
• 반응형에 맞도록 SVG 수정
• 바로가기 버튼에 LINK 연결

저축계산기페이지 input-box 컴포넌트

목적

저축계산기 페이지에서 목적과 금액을 입력받아 결과값 보여준다

작업 상세 내용

• 저축계산기 input-box 컴포넌트 UI 구현
• Result 컴포넌트 UI 구현
• input으로 받은 value LocalStorage 저장
• localStorage data를 이용해 Result 컴포넌트에서 result 생성

서버 500 에러

지금 저축 페이지에서 계속 코드 500 뜨는데 데이터베이스에 뭔가 접근이 안되는 것 같아요. 확인 부탁드립니다😥

모바일 목표 메인 이슈

더많은 목표보러가기
추천목표보러가기
버튼이 없어졌습니다

제 핸드폰 기종은 아이폰 12 미니입니다

목표 & 투표 페이지 에러

최신으로 pull 을 다했는데 아직도 오류 페이지가 뜨네요
다른 분들은 잘 나오나요
저만 이렇게 보이는 건가요?

vote/Id.module.scss

.favorite_comment_share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid $grey-3;
    position: relative;
    .favorite_comment {
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        margin-left: 4px;
        font-size: 13px;
        font-weight: 700;
      }
      .favorite {
        margin-right: 8px;
      }
    }
  }

Id.module.scss 108Line입니다.

FavoriteCommentShare 컴포넌트를 목표 상세 보기에서 사용하려니까 스타일이 적용이 되질 않네요.
아마 container 안에 적으셔서 그런 거 같은데..

해당 스타일을 Id.module.scss 파일 최상단으로 옮기거나, 공통 컴포넌트의 scss은 별도로 관리하는 방법이 있겠네요.
어떤 방법이 편하실까요?

목표공유 페이지 드롭다운 이슈

드롭다운 오래된순으로 선택하면 겹치네요
저만 그렇게 보이는건지는 잘모르겠어요